Kinvey’s eBook titled, “A Multi-Tool Mashup for Accelerating HTML5 Development” helps developers leverage tools to cut valuable time off of their HTML5 development projects.

1. A Multi-Tool Mashup for
ACCELERATING HTML5
DEVELOPMENT

2. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENT
A Multi-Tool Mashup for Accelerating HTML5 Development
Welcome to the latest Kinvey eBook. We aim to help our community
of developers keep pace with the latest trends in app development,
tools and marketing. Typically we share our perspective on our blog,
but when our audience is interested in a topic that can’t be done
justice in 500 words, we publish an eBook instead.
This eBook was written by our CTO, Morgan
Bickle. Morgan sought to create a tool that
would allow developers to get started creating
HTML5 apps. He cobbled together a few existing
projects created by influential web and mobile
developers, creating his own HTML5 project
builder that enables quick website develop-
ment. With Morgan’s contraption and a few
commands, you’ll be ready to quickly support
production-ready HTML5 apps and websites.
HTML5: What it is and why it’s important
Before we jump into tools, let’s start with a quick refresher on
HTML5. The markup language was originally developed as a major
revision of HTML. It aims to improve on major issues (like HTML
syntax issues and adding multimedia support) found in previous
iterations and attempts to define a single markup language that can
be written in HTML. HTML5 provides cutting edge features that allow
web developers to build apps that feel and perform more like desk-
top applications. HTML5 is a big step in delivering power, robustness,
interactivity, and multi-media richness to the web.
Let’s break it down into the most basic of formulas: HTML5 is the
approximate equivalent of HTML + CSS + JavaScript.
1

3. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENT
Is HTML5 Ready for Mobile?
The question has been asked by many in
the tech and development communities:
Is HTML5 truly ready for mobile? It has
sparked heated debates. Even experts
disagree, some vehemently. Critics
complain that not all browsers support
HTML5. They dislike that mobile apps
built on it can be slow and unreliable.
(Remember when Facebook’s mobile app
was pure HTML5? Complaints from users
about extremely slow load times and frequent crashes are the main
reasons for Facebook’s switch to hybrid.) An inability to access a
mobile device’s hardware functionalities, such as the camera or
speakers, and limitations on certain mobile features have been
additional complaints of HTML5 critics.
Proponents of Native believe ... Advocates of HTML5 believe ...
1. Native can do more by providing 1. Native features can be augmented via
richer features and a better app hybrid app development, and the web
experience. is catching up anyway.
2. Native apps run faster because they 2. Web runtimes are much faster today,
don’t have the web runtime variable and most apps can do without the
to deal with. speed.
3. Native apps are easier to develop 3. Web is actually easier to develop,
because the necessary programming especially cross-platform.
languages are robust and have 4. Web has its own look and feel, and
proven track records. you can customize web interface for
4. Native fits platform look and feel: those platforms you wish to target.
developers get a lot of the expected 5. Web apps are easier to discover: web
aesthetic straight from the native is arguably the most easily discover-
toolkit. able medium, thanks to search
5. Native apps are easier to discover due engines and other websites.
to well-established “app stores” 6. Opportunities to monetize on the web
driving downloads and usage. are growing: online advertising,
6. Native apps can be monetized - from affiliate links and other such avenues
charging for the app itself to in-app exist for developers to make money.
purchases, there are multiple
opportunities for revenue. Yes!
Source: html5rocks.com
2

4. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENT
Web RTC aims to solve these issues by giving direct access to the
hardware on the device, which is slated to launch early 2013 (and is
already out in Chrome 22). But, in the eyes of opponents, HTML5 still
has a ways to go before it becomes standard. Every well designed
user experience built with HTML5 technology needs to be designed
specifically for the platform it will be run on.
Proponents, however, argue that the web is evolving and catching up
with mobile, paving a clear path for HTML5. Advocates prefer HTML5
versus native when it comes to building content-rich apps and games,
and when targeting multiple platforms. Using app development tools,
HTML5 apps can run on almost any device, dramatically reducing
development time and costs compared to native apps. Research
shows that HTML5 adoption is on the rise: according to Forrester, the
penetration of HTML5-compatible browsers grew from 57 percent to
75 percent between the second quarter of 2011 and the second
quarter of 2012. Research firm Strategy Analytics forecasts that sales
of HTML5 compatible phones will top 1 billion this year. And, a survey
by Kendo UI notes that 51% of app developers say that HTML5 is
important to their job right now, with 31% saying so within the next 12
months.
Even if all apps aren’t built on HTML5, an increasing number are today
and will continue to be in the near future. We believe that HTML5 is
here to stay, and advocate for its continued growth and adoption. And
now that the W3C standards body considers HTML5 feature-complete,
we do expect to see HTML5 adoption rise in the coming years. While
the HTML5 project builder uses tools designed for website develop-
ment, it can be used to help build mobile apps as well.
3

5. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENT
Why Tools Matter in Development
It is no big secret that devel-
oping a new app - whether
it’s for mobile or the web - is
difficult work. The good news
is that some components of
this hard work have already
been written by others in the
DEVELOPER’S
form of tools made available
TOOLBOX
to the development commu-
nity. I found disparate tools to create a value greater than the sum of
their parts with this HTML5 project builder. The tools I selected
complement one another and are supported by solid documentation
and an active, smart developer community. Rather than reinventing
the wheel, I took advantage of existing resources to create another
useful tool to simplify HTML5 website development.
Wondering if an API is supported by HTML5? Try Modernizr
Modernizr is a Javascript library that detects HTML5 and CSS3
features in the user’s browser. It’s a great tool for HTML5 app build-
ers and makes it easy to detect whether an API is natively supported.
The HTML5 app spec is a moving target, and because different
browsers support different levels of the HTML5 API, app developers
must learn to deal with these differences to build robust apps.
Modernizr can help detect these differences.
Need a simple template for an adaptable site or app? Check out
HTML5 Boilerplate
The HTML5 Boilerplate project, started by Paul Irish, is a tool that
combines knowledge, experience and best practices of hundreds of
developers to help others build fast, robust, and adaptable web apps
or sites.
4

6. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENT
After more than three years in iterative development, the tool bakes
in a variety of best-practices: cross-browser normalization, perfor-
mance optimizations, and optional features like cross-domain Ajax
and Flash. The creators make the tool’s core functionality clear:
“Boilerplate is not a framework, nor does it prescribe any philosophy
of development, it's just got some tricks to get your project off the
ground quickly and right-footed.”
Want to create JavaScript projects quickly without repetition?
Try Grunt
The third tool is called grunt and was created by Ben “Cowboy”
Alman, a Boston-based web developer. Grunt is an emerging
task-based command line build tool for JavaScript projects. This tool
facilitates creating new projects and makes performing repetitive but
necessary tasks such as unit testing, concatenating and minifying files
trivial.
Putting the tools together
My process of building this HTML5 project builder began with a bit of
trial and error. I began by building a grunt template with libraries
from Kinvey, a backend as a service platform. Note that you could
use any backend as a service provider or build your own backend to
use this tool. 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 ideal:
the HTML5 Boilerplate template produces a project that uses a
popular build tool called ant. Grunt seemed like a better choice
because it’s easier to maintain and extend for developers familiar
with Javascript. However, to use grunt I would have to autogenerate
the grunt file from my template and add some custom tasks to
support the build steps. I continued exploring tools to avoid these
extra steps.
5

7. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENT
The final piece of the puzzle: node-build-script tool
I stumbled across the node-build-script project, a tool that aligned
exactly with what I had in mind as a basis for my 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. I forked node-build-script and linked it to point to my
Kinvey HTML5 Boilerplate fork.
How to install
To install this tool, run the following one-liner install script:
$ curl https://raw.github.com/gist/2416597/install.sh | sh
After installing, an HTML5 project can be generated with Modernizr,
jQuery and backend libraries. Depending on the setup, that script
may need to run with sudo, a tool that allows users to run programs
with the security privileges of another user.
After the app has been written, there are a bunch of useful build
tasks available via customized grunt tasks made available from my
project. These tasks automate the process of minifying, concatenat-
ing and a whole bunch of other optimization tricks for the new
website. See the tool in action with this codestre.am screencast.
What should I use the HTML5 Project Builder for?
My fork -- available on Github here -- is great for any client side
website that needs a backend. A nice approach would be to use this
tool to build a static website that is hosted on S3 for a cheap hosting
option and turn on AWS CloudFront to make app loading blazing fast.
The tool is useful for all websites, but is especially a nice starting
place for anyone looking to build their first one to ensure best
practices will be followed.
6

8. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENT
Difference of opinion on HTML5: experts weigh in.
Brian Clark - Founder of Copyblogger
In response to the question: HTML5 vs. Apps - which will win?
“HTML5, no question. Responsive design alone is a better option
than most apps (for content sites that is).”
Jonathan Stark - Author of three books on mobile and web development
“If you can build your app with HTML, CSS, and JavaScript then
you probably should. Personally, I default to web, move to
hybrid using HTML if I must, and only go pure native as a last
resort.”
Rusty Williams - Co-Founder of Quick Catch Labs, LLC
“We decided to start with an HTML5 mobile app because it's
essential that we have compatibility across multiple devices.
We're early in beta testing and it's been great to release new
features every few days. ...HTML5 gives us tons of flexibility to
test, refine, release and evolve based on the feedback that we're
receiving.”
Michael King - Appcelerator
"Right now, app developers are definitely swinging away from
the Web and away from HTML5. They're leaning more toward
native apps. And that's because, quite frankly, the HTML5 apps
they have built aren't performing and the HTML5 apps they're
testing aren't performing."
Nat Freidman - CEO and co-founder of Xamarin
“Native is the way to go for mobile development. Facebook
listened to its users and did a rewrite and it has had a big impact
on their mobile app usage. It's a big deal and I think we're going
to see a lot more developers starting to build natively."
Josh Martin - Strategy Analytics analyst
“HTML5 is not the future of apps. While developers dream of
'write once run everywhere,' the fragmented support for and
limited APIs within HTML5 make this impossible. In fact, we
predict the hybrid app is the future.”
7

9. Author
Morgan Bickle
On any given day you'll find Morgan programming mobile SDKs,
building backend APIs, and discussing the future of web and mobile
technology. As part of the core founding team at Kinvey and now the
CTO, he owns Kinvey’s technology vision. Prior to Kinvey, he wrote
enterprise software for a decade.
Project Manager
Kelly Rice
Designers
Jake McKibben and Lauren Pedigo
Resources & Tools
Slide deck: HTML5: Web development to the next level
Infographic: HTML5: Past, Present & Future
Tool: Compatibility tables for HTML5, CSS 3 + more
Article: HTML5 Use is real: 12 month study
Website: HTML5 Please
eBook: Dive Into HTML5
What is Kinvey? Kinvey makes a fully-featured Backend as a
Service solution, offering 3rd party data integrations, multi-plat-
form support, push notifications, and custom business logic on a
platform where it's free to get started and you only pay when your
app is successful.
Build your backend today