Verve is a lightweight technology stack for modern web development. It was built to target mobile apps using Apache Cordova aka PhoneGap.
This is all licensed under MIT except for
- libs/client/cordova-2.3.0rc2_ios.js
- libs/client/hogan-1.0.5.js
which are Apache 2.0.
Verve combines the use of the following open source projects:
- CoffeeScript Scripting
- Stylus CSS
- Nib Stylus Library
- Hogan HTML Templates
- Mocha Test engine
- Should BDD style assertions
- Casper.js Functional testing
- L Localization
- Zepto DOM, AJAX
- spin.js No image, no CSS spinner
- docco Docs
- Coffeelint Lint code
The core of the Verve engine is the Cakefile which watches all CoffeeScript, Stylus and Hogan files. Whenever a file changes it automatically gets compiled into the output directory. You can invoke the Cakefile directly:
$ cake --config ios.json dev
or invoke it with the short handle through the Makefile:
$ make ios
Hint: If make is not found you need to install the Command Line Tools: XCode->Settings->Downloads
For Growl notifications support install growlnotify. On OS X 10.8, Notification Center is supported using terminal-notifier. To install:
$ sudo gem install terminal-notifier
In order to use Verve you need to install node.js and Coffeescript:
$ sudo npm install -g coffee-script
Clone PhoneGap and Verve:
$ git clone [email protected]:phonegap/phonegap.git
$ git clone [email protected]:srohde/Verve.git
Create a new project, install dependencies and compile resources:
$ phonegap/lib/ios/bin/create <project_dir> <package_name> <project_name>
$ ditto Verve <project_dir>
$ cd <project_dir>
$ rm -rf .git
$ npm install .
$ make ios
make ios will compile CoffeeScript to JavaScript, Stylus to CSS and Hogan to HTML to the www directory.
Open the project with XCode and run it in the simulator. You should see "Hello Verve."
When you try to preview www/index.html in your browser you'll get this error: Origin null is not allowed by Access-Control-Allow-Origin.
To preview in your browser instead of the iOS simulator the usage of Chrome Canary is recommended. Open Canary with the necessary flags:
$ make canary
NOTE: Don't use this browser instance for anything but development since it has disabled web security.
Open your favorite editor and start hacking on:
- src/coffeescripts/Main.coffee
- src/stylesheets/main.styl
- src/templates/main.hogan
- src/locales.json
The project configuration is defined in ios.json.
You can change the source and destination directories for
CoffeeScript, Stylus, Hogan.js and HTML page. For now you will need one configuration for each platform (iOS, Android, ...) since the cordova.js is platform specific. This will change in a future release of Verve to avoid duplication.
CoffeeScript is used instead of JavaScript.
Starting point: src/coffeescripts/Main.coffee
Stylus is a great minimalistic CSS language with lots of great features to take the pain out of writing plain CSS.
Verve comes with some default styles and mixins: src/stylesheets/main.styl
Localization is done using L. Declare your locales in src/locales.json:
L.initFile "locales.json", =>
console.log L.get("greeting", "Verve")
Zepto.js is included from libs/client/zepto.min.js.
Hogan.js is a compact JS templating engine. It is a JavaScript implementation of the popular Mustache template engine. Verve automatically compiles all templates into the T namespace.
template = new Hogan.Template T.main
$someDiv.append template.render(partial)
Spin.js is included to have an awesome "no image, no CSS" spinner:
$('body').spin "large", "white"
Mocha a feature-rich JavaScript test framework and should.js and
expressive, readable, test framework agnostic, assertion library.
Both combined together offer a very minimalistic but powerful
way to unit test your code.
See test/client/LTest.coffee for an example test.
$ make tddClient
All tests get executed whenever a file changes. TDD FTW.
Note: To test your client side CoffeeScript classes your exports at the bottom of the class file look like this:
window?.<class_name> = <class_name>
module?.exports = <class_name>
CasperJS is a testing engine on top of the headless webkit browser PhantomJS
Casper needs to be installed explicitly:
$ brew install casperjs
Starting point: test/functional/casper.coffee
Run it with:
$ make casper
Check out the screenshot in the temp directory.
Edit the build.properties and add the name of your XCode project and scheme name.
Create the IPA file using:
$ ant
You can use the IPA file to distribute your app to test users using Testflight.
Docs are generated using docco and Pygments.
$ sudo easy_install Pygments
$ make docs
CoffeeLint is used to lint the code.
Config file: test/config/coffeelint.coffee
Run it with:
$ make lint
You'll see a couple of errors about trailing whitespaces which is because of this open issue.
(The MIT License)
Copyright (c) 2012 Sönke Rohde http://soenkerohde.com
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.