Hybrid HTML5 Boilerplates: Breaking the Chains of Legacy

A roundup of boilerplates for Hybrid Mobile Application Development

Date: 2015-06-20

This post has two parts: 1. the realization that there is a shift in thinking, and 2. a list of Popular HTML Boilerplates. The analysis and thinking comes from some one working on IoT for mobile devices, not desktop variations of shopping catalogues.

The key point: we do not need to carry the same legacy baggage that web developer and native mobile developers carry. It's not just that we can develop faster, but also that we don't have to carry legacy items, like support for IE7 and IE8.


The first part starts with a tale of conscious, but uncoordinated, movement within the hybrid HTML5 community1.

A few weeks ago I released an HTML5 boilerplate for Phonegap development. Within days of this, Phonegap did a major release. Days afterwards I decide to step up the release of three (3) boilerplates. Midway through my work, I was taken back a bit when Brian Leroux tweeted the release of his version of a phonegap boilerplate, aka Phonegap-easy-start. So, I quickly finished up and released three (3) Phonegap Generic boilierplates.

<< brianleroux/phonegap-easy-start

Phonegap--Generic-Boilerplate #1 >>

My next thought was to do a quick blog of other Mobile/Cordova/Phonegap/Hybrid HTML Boilerplates. To my dismay, there were only seven (7) of any worth. Two (2) were from phonegap (start & hello-world), one for Cordova, one for ionic, and one other.2

At some point an epiphany came to me, namely, we do not need to carry the same legacy baggage that web developer and native mobile developers carry. It's not just that we can develop faster, but also that we don't have to carry legacy items, like support for IE7 and IE8 — OUCH!.

Phone/Mobile App vs. Mobile Web App
One distinction that is not completely clear to web developers is that stand-alone phone/mobile Apps have different requirements versus Web Apps3. Both are highly concerned with page layout, network access, and compability among mobile devices, but after that it differs. Stand-alone Apps have a variety of additional services that include access to sensors on the mobile device.

The Hybrid view of standard Boilerplates
There are a host of standard HTML5 boilerplates available right now, but only a handful are meant to work with stand-alone hybrid Apps, let alone mobile Apps. Currently, most boilerplates are mainly concern with:

Advantage of mobile HTML5 Boilerplates

So while, Hybrid HTML5 Boilerplates is definitely in infancy – a clean start can and will be made. If you feel inclinded to roll your own boilerplage, below the table is a list of Other HTML Boilerplates.


Tale of the Tapes

App
HelloWorld-debug.apk
PhonegapGenericBoilerplate-debug.apk
Source Size (compressed)
3,217 bytes
15,110 bytes
Apk Size
383 kb
222kb
Files
4
6
Libraries
6
1

The Other HTML Boilerplate

If you'd like to do your own research for your own boilerplate design, here are some links to get you started.

Five (5) searches I conducted

The review of links avoids Javascript Library specific implementations, like Jquery and Angular, and vendor embedded implementations, like Google Tool Kit.

The HTML5 Boilerplate

Custom HTML5 Boilerplate Creators

HTML5 Boilerplate Static Responsive

Reviews of Boilerplates

Other Notable Links

PhoneGap Hello World app
https://github.com/phonegap/phonegap-start
https://github.com/phonegap/phonegap-app-hello-world

A boilerplate for HTML5 phonegap applications
https://github.com/ryanbetts/phonegap-boilerplate

Provides a starter project for Ionic apps
https://github.com/cmackay/hybrid-boilerplate

Cordova Boilerplate
https://github.com/iivanoo/cordovaboilerplate

Html5 Native App Part Three
http://mobilehtml5.stungeye.com/2015/06/12/html5-native-app-part-three

CSS Tools: Reset CSS
http://meyerweb.com/eric/tools/css/reset/

  1. Reframing Hybrid | PhoneGap Day EU 2015 (video 35m).
  2. The bottom half of this post has list of standard HTML5 boilerplate alternatives.
  3. Web Apps means Apps that sit in a browser and are not standalone.
  4. Even as I'm writting this, a rotation issue shows up on stackoverflow.
  5. With Android mobile, one issues was exchanged for another, with more than 200 screen sizes available.


Content Network Distribution by: