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.

brians_pgbpjesses_pgbp

<< 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
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

  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.

Advertisements

An HTML Boilerplate for Phonegap

Phonegap is a framework for creating mobile Apps with HTML5, CSS3, and Javascript. It has the benefit of anything that can work on the web can done in Phonegap with a minimum of effort. In short, you can test on your webbrowser, then port the important parts to a mobile app. In addition, phonegap gives you access to the hardware on the mobile device, be it phone or tablet.

CODE: https://github.com/jessemonroy650/Phonegap–Generic-Boilerplate

The interface is sparse and not intended to handle every situation. The intent is make you familiar with the important parts so that you can get a jump start to building mobile apps.

The Files

  • pg_generic_boilerplateAndroidManifest.xml – not required, but somtimes helpful when building for Android
  • buttons.css – not required, CSS buttons from Alex Wolf and Rob Levin
  • config.xml – required for phonegap, documentation master template
  • favicon-48×48.png – The image in the top left of the App.
  • index.html – required, The view and code in one file.
  • LICENSE & README.md – License for the code & the README for the repository.

The two (2) most important files

  1. index.html
  2. config.xml

index.html

HTML5

If you’ve already developed HTML and are not familiar with HTML5, a good resource, that is mostly correct, is W3Schools. You’ll find things added and things removed. Pay special attention to the elements <div> and <span>, which are considered elements of last resort, but infact are of common use. If the seem confusing, the read about the CSS block model.

The main function

The main function is in the block that starts with if (device.platform === "iOS") It changes the UI (User Interface) to Apple’s iOS iPhone, iPads, and iPodTouch. The internal links point to articles that explain the issue.

The four (4) alerts

The alerts are debugging aids. I recommend you comment them out. More than once, I’ve had to backtrack just to find a typo. The alerts were very assistive.

  1. “button clicked.” – fires when you click the button.
  2. “device ready.” – fires when the Cordova/Phonegap library is ready.
  3. “body loaded.” – fires when the entire webpage is loaded.
  4. “got iOS” – fires only when Phonegap detects an iOS device.

config.xml

This example for config.xml has a minimum of components. I encourage you to learn more from the docs as 1/4 of all questions asked on forums can be answered by reading the docs. I especially encourge you to read the example master template

However there are two (2) very important parts. The first is the App ID. The format of this ID is done by convention. The ID is constructed by taking a domain you own and reversing the order of the subdomains. The last subdomain, by convention, should be the name of the App. NO SPACES ARE ALLOWED

 id = "com.bsdmasterindex.phonegapgeneric-test"

The second important part is the phonegap version that will be used. The “value” is not required, but if you don’t assign it – phonegap will always give you the latest version of the binaries, which may break your App.

 <preference name="phonegap-version" value="3.5.0" />

That’s it. Ask questions in the forums, if you have any.

 

 

Ten (10) Phonegap Demo Apps with Source Code

For those unaware, I’ve been busy the last few months helping my parents move from California to Texas. In the meantime, among other things I have created 10+ Phonegap Apps1, each of which uses at least one Phonegap core APIs. In addition all the Apps run in Android and iOS devices – within the restraints of the devices 2.

GPS App

Other goals for these apps:

  • NO JQuery or similar libraries
  • Find the minimum necessary for a phonegap App

These Phonegap Apps are both demos and tutorials. At this point, the apps are operational, but are far from perfect. Over the last few days I have added some changes that give the apps a more professional appearance.

Accelerometer App

Network App

Contacts App

Device App

The Changes

Those changes include:

  • added the plugin device to all Apps
  • added id to the [exit] button and the App header
  • moved CSS style tags from the elements to the head
  • added code to remove the [exit] button from the iOS version
  • removed a CSS coding error
  • removed <span> where unneeded

The following changes still need to be made:

  • Add fastclick.js to remove the 300ms delay
  • Add margin to top of document body to support post-iOS-73
  • Remove all margins from top header
  • Add elements to standardize the header

Future projects scheduled for release are:

  • working boilerplates for rapid development
  • minimual UI libraries for notifications, sliding panels, & div-tables
  • minimual implementation of various phonegap plugins

footnotes

  1. http://codesnippets.altervista.org/examples/phonegap/demos/PUBLIC.Apps.html
  2. Some devices do not have the hardware needed for an API, ie. compass.
  3. After iOS7 a change was made to make system status bar transparent. This cause a program to display over the system status bar.