Mobile Backend as a Service (MBaaS) Blog

HTML5 App Builder with Modernizr, jQuery and Kinvey

HTML5logoThis post explores a tool I’ve been hacking on that helps you get started quickly building HTML5 apps and includes Kinvey’s latest Javascript library. The tool can be useful to anyone building HTML5 apps and doesn’t require the use of Kinvey.

You can find the GitHub repo here and see a screencast of installing the tool and creating an HTML5 project at the bottom of the post.

It started over the weekend when a customer contacted us regarding HTML5 support. I exchanged some messages with him about his application needs and provided him with a beta version of the Kinvey JavaScript library. Then on Monday, I was talking with Dave W. from our team and we came up with the idea for this tool.

To avoid reinventing the wheel, I decided to incorporate a few tools that have gained momentum in the last 12 months. These projects have good documentation and an active, smart dev community. The first, html5-boilerplate project started by Paul Irish, puts together a lot of best practices for building web apps. I heard about early last summer while listening to one of The Changelog podcasts. The second, grunt by Ben “Cowboy” Alman, an emerging build tool for Javascript, I discovered while chatting with Boaz Sender from Bocoup.

I started to build a grunt template with the Kinvey libraries. I based my root template on the most recent pull from the html5-boilerplate repo. An hour later, it was working: you can check out my github fork here. This was a good start, but not great, as the html5 boilerplate template produces a project that uses the popular build tool ant. Grunt seemed like a better choice because it’s easier to maintain and extend for folks who live and breathe Javascript. However, to use grunt I would have to auto generate the gruntfile from my grunt template and add some custom tasks to support the build steps, which seemed like a lot of work for a lazy programmer :) .

Finally, I had a breakthrough. I stumbled across the node-build-script project (suggestion to maintainers: give it a better name.) The node-build-script tool is exactly what I had in mind as a basis for my Kinvey project builder. This project is a grunt template with a set of cleverly written tasks that will produce a pristine customizable HTML5 project based on html5-boilerplate.

So I forked that and linked it to point to my Kinvey fork of html5-boilerplate. I renamed the tool from h5bp to k5bp to avoid name collisions for folks already using h5bp. See the repo h5bp-project-builder  in all its glory.

To install my new tool, run the following one-liner install script:

$ curl https://raw.github.com/gist/2416597/install.sh | sh

After installing you can generate an HTML5 project with Modernizr, jQuery and Kinvey libraries…

$ k5bp init

A picture of the final default project structure follows:

  .
  ├── 404.html 
  ├── LICENSE-MIT 
  ├── apple-touch-icon-114×114-precomposed.png 
  ├── apple-touch-icon-144×144-precomposed.png 
  ├── apple-touch-icon-57×57-precomposed.png 
  ├── apple-touch-icon-72×72-precomposed.png 
  ├── apple-touch-icon-precomposed.png 
  ├── apple-touch-icon.png 
  ├── crossdomain.xml 
  ├── css 
  │ └── style.css 
  ├── favicon.ico 
  ├── grunt.js 
  ├── humans.txt 
  ├── img 
  ├── index.html 
  ├── js 
  │ ├── main.js 
  │ ├── plugins.js 
  │ └── vendor 
  │   ├── jquery-1.7.2.js 
  │   ├── jquery-1.7.2.min.js 
  │   ├── kinvey-js-0.9.1.js 
  │   ├── kinvey-js-0.9.1.min.js 
  │   └── modernizr-2.5.3.min.js 
  ├── package.json 
  ├── readme.md 
  └── robots.txt

After you’ve written the app you have a bunch of useful build tasks available to you via customized grunt tasks made available from k5bp. These tasks automate the process of minifiying, concat’ing and whole bunch of other optimization tricks for your new web app.

$ k5bp help

output:

Usage: k5bp [options] [task [task ...]]

Available tasks the k5bp plugin provides (for a full list, type k5bp --help

 clean   Wipe the previous build dirs
 copy    Copies the whole staging(intermediate/) folder to output
 (publish/) one
 css     Concats, replaces @imports and minifies the CSS files *
 docs    grunt h5bp plugin documentation
 dom     dom-based build system
 html    Basic to aggresive html minification
 img     Optimizes .png/.jpg images using optipng/jpegtran
 mkdirs  Prepares the build dirs *
 rev     Automate the hash renames of assets filename *
 server  Start a custom static web server
 usemin  Replaces references to non-minified scripts / stylesheets *

Build targets: k5bp build:<target>

 default  concat css min img rev usemin manifest
 text     concat css min rev usemin manifest
 buildkit concat css min img rev usemin manifest html:buildkit
 basics   concat css min img rev usemin manifest html:basics
 minify   concat css min img rev usemin manifest html:compress

For more information on the k5bp plugin, see https://github.com/h5bp/node-build-script/wiki

For more information on grunt, see https://github.com/cowboy/grunt

See the tool in action with this codestre.am screencast.

With this tool and a few commands, you can be ready to support a production ready HTML5 app. As always we’re open to your your comments, questions and feedback.

let's talk about this computer

Starting a new mobile project? Check out our App Cost Estimator for a price quote.

comments powered by Disqus