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.
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
- Legacy Maintance
Advantage of mobile HTML5 Boilerplates
- 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 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
- 20 Exceptional CSS Boilerplates and Frameworks | Mashable – 2013/04/26
- The Best of the Best Boilerplates | Web Design Weekly – 2012/06/28
- 10 Best Responsive HTML5 Frameworks | DesignInstruct – Jul 2 2013
- Bootstrap Alternatives: 20 Best Front-End Frameworks | BeeBom – 2015/01
- 18 Fantastic Frameworks for 2015 | CodeGeekz – 19 Jan, 2015
- 22 Responsive CSS Frameworks and Boilerplates Explained | DesignShack.net – 2012 August 8
Other Notable Links
PhoneGap Hello World app
A boilerplate for HTML5 phonegap applications
Provides a starter project for Ionic apps
Html5 Native App Part Three
- Reframing Hybrid | PhoneGap Day EU 2015 (video 35m).
- The bottom half of this post has list of standard HTML5 boilerplate alternatives.
- Web Apps means Apps that sit in a browser and are not standalone.
- Even as I’m writting this, a rotation issue shows up on stackoverflow.
- With Android mobile, one issues was exchanged for another, with more than 200 screen sizes available.