Hybrid HTML5 Boilerplates: Breaking the Chains of Legacy

A roundup of boilerplates for Hybrid Mobile Application Development
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:

  • page layout and legacy browser compatibility
  • Javascript integration (JQuery, Mootools, etc.)
  • Legacy Maintance
  • Workflow

Advantage of mobile HTML5 Boilerplates

  • Fewer legacy javascript issues, with opportunities to fix +20 year old issues.
  • Fewer legacy layout webbrowser issues, with a new issues added – like screen rotation.4
  • Viewing hardware change more rapidly, so legacy layout issues around screen width are exchanged for other challenges.5

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



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

  • HTML5 Boilerplate is the grand-daddy of them all. It is all encompassing. It should be used a reference, becuase alot of the layout issues do not exist in newer layout engines.
  • HTML5 Reset is a simple set of best practices to get web projects off on the right foot.

Custom HTML5 Boilerplate Creators

  • Initializr – Base on either classic H5BP, Responsive, or Bootstrap
  • html shell – A barebones HTML5 boiler plate with *click* modification

HTML5 Boilerplate Static Responsive

  • Skeleton – A Responsive CSS Boilerplate
  • YAMB v2 – Yet another mobile boilerplate
  • Gridless – An awesome HTML5 & CSS3 boilerplate for mobile first responsive, cross-browser websites

Reviews of Boilerplates

Other Notable Links

PhoneGap Hello World app

A boilerplate for HTML5 phonegap applications

Provides a starter project for Ionic apps

Cordova Boilerplate

Html5 Native App Part Three

  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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s