# minigap > Client-side javascript framework for PhoneGap Latest version **0.0.3** (published 2013-08-28) · 0 weekly downloads ## Install ```sh npm install minigap pnpm add minigap yarn add minigap bun add minigap ``` Provides the command `minigap`. ## Health **Score 10/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; low quality score; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.3 | | Published | 2013-08-28 | | First published | 2013-07-09 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 15 | | Known vulnerabilities | 0 (+16 in 3 direct dependencies) | | Install scripts | no | | Author | mcasimir | | Maintainers | mcasimir | | Keywords | minigap, phonegap | ## Links - npm: https://www.npmjs.com/package/minigap - Repository: https://github.com/mcasimir/minigap - Issues: https://github.com/mcasimir/minigap/issues - npm.io page: https://npm.io/package/minigap ## Dependencies (15) - [ncp](https://npm.io/package/ncp.md) ~0.4.2 - [faye](https://npm.io/package/faye.md) ~0.8.9 - [glob](https://npm.io/package/glob.md) ~3.2.6 - [nopt](https://npm.io/package/nopt.md) ~2.1.1 - [wget](https://npm.io/package/wget.md) ~0.0.1 - [touch](https://npm.io/package/touch.md) ~0.0.2 - [mkdirp](https://npm.io/package/mkdirp.md) ~0.3.5 - [preproc](https://npm.io/package/preproc.md) ~0.1.14 - [cli-color](https://npm.io/package/cli-color.md) 0.2.2 - [minimatch](https://npm.io/package/minimatch.md) ~0.2.12 - [handlebars](https://npm.io/package/handlebars.md) ~1.0.12 - [node-watch](https://npm.io/package/node-watch.md) ~0.3.4 - [underscore](https://npm.io/package/underscore.md) ~1.5.1 - [coffee-script](https://npm.io/package/coffee-script.md) ~1.6.3 - [yeoman-generator](https://npm.io/package/yeoman-generator.md) ~0.12.3 ## Recent versions - 0.0.3 (latest) — 2013-08-28 - 0.0.2 — 2013-08-28 - 0.0.1 — 2013-07-09 ## README # MiniGap __Minigap is a client-side javascript framework for PhoneGap__ ## Disclaimer __This project is yet in a very early stage of development and is not complete.__ __This README is used as a specification of what it will be, even if part of it have been implemented already there is no guarantee that the source of this package code reflects or will reflect it in any way.__ __This disclaimer will go away with the first alpha release.__ ## Istallation ``` npm install -g minigap ``` ## Setup a new application ``` minigap new myApp ``` This will create an initial application layout in `myApp` folder that you can use to further develop and install development dependencies. Then type ``` cd myApp minigap start ``` And you can start to develop inside your browser. To use it along with PhoneGap you need to setup a new target. ## Directory Structure ``` myApp/ lib/ minigap.js www/ css/ app.css js/ app.coffee (or app.js) templates/ index.html targets/ browser/ dev/ dist/ ``` ## Building your app Now that you are ready to create your application you would like to know how to build it. Minigap builds soruces compiling javascript/coffeescript, templates and html files passing your source through a compiler able to preprocess files. Preprocessor is used to concatenate files and perform conditional compilation of code using macros in a way similar to `c/c++` preprocessor. ### Preprocessing Macros Preprocessing Macros are comments starting with `=` eg. Javascript ``` //= if development ... //= end ``` Coffeescript ``` #= if development … #= end ``` HTML (sorry for spacings my markdown editor goes crazy with html comments) ``` < !--= if development -- > ... < !--= end -- > ``` ### Preprocessing Directives #### Inclusion ``` #= include ``` #### Direct Output ``` #= print VALUE ``` #### Conditional compilation ``` #= if CONDITION ... #= else if CONDITION ... #= else ... #= end ``` ##### Condition Operators - ! _or_ not - & _or_ and - || _or_ or - < _or_ lt - > _or_ gt - <= _or_ lte - >= _or_ gte - == _or_ eq - != _or_ neq ### Preprocessor environment Minigap sets some preprocessor variables you can use as conditions. When building for development the `development` variable is set to true. When building for production the `production` variable is set to true. When building for a specific target the `target` variable is set to the target name. So you can do things like this: ``` #= if development console.log "debug: #{myVar}" #= end ``` or this: ``` < !--= if development -- > < !--= end -- > ``` or this: ``` #= if target == 'ios' … #= else if target == 'android' ... #= end ``` ### Managing Targets Phonegap can target different devices and architectures. Minigap would hopefully simplify the task of building the same app for different targets. In order to do so original Phonegap projects are mirrored inside the minigap project tree. These mirrors are used for building development packages. Any time you want to release your code you can create production bundles from command line. Production bundles are deployed back to their original locations. #### Configuring targets ``` grunt.initConfig # .. minigap: # ... targets: ios: '../myPhonegapIos' android: '../myPhonegapAndroid' # ... ``` Now that your targets is set up you should run the `mirror` task that create copies of targets inside the directory tree. ``` grunt mirror ``` This command would create a mirror of any target inside `yourApp/[target]` directories. From now on you will use these directory for development. Any time you want to create production build, the application is copyied to its original target. ## Development Minigap is designed to speed-up PhoneGap development process. A typical downside of phonegap development against regoular browsers is that you have to recompile and re-launch simulator any time you change something in your code. This task can be very annoying and slow. To overcome this problem minigap ships with a mini-server that once started serves your assets. This way any change to the source is immediately reflected in your Phonegap runtime. To start the server just lauch the grunt `start` task specifing the relative target. ``` minigap start [target] ``` This task will start the development server and watch for changes in your source so they are automatically rebuilt. Also it will setup a WebSocket firing events on every rebuild. You can listen to it in order to refresh the page when code is updated. ### Preprocessing ``` minigap dist ios ``` to get ready to distribute your app. ## Client side framework ### Controllers MiniGap adapt tipical components of a mobile application to let you handle them all the same way. MiniGap applications are _event-driven_ ``` Minigap.controller 'app.start': -> console.log "Application Started" '/': -> @requests [ path: '/top_events' , path: '/top_events' params: section: 'sport' , path: '/top_events' params: section: 'music' ], (response) -> @render 'templates/home', response ``` ## Default Events ### Application - 'app.started' ### Router - 'hashchange:scope' or just 'scope' - 'submit:scope' - 'before:scope' - 'after:scope' ### Origin - 'origin.[name].requestSent' - 'origin.[name].responseReceived' ### Socket - 'socket.[name].[evt]' ### TemplateEngine - 'template.[name].rendered' ## Custom events You can use `app.emit()` to send custom events --- Copyright (c) 2013 mcasimir Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. --- _Source: https://npm.io/package/minigap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._