A Multi-Tool Mashup for Accelerating HTML5 Development


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

A Multi-Tool Mashup for Accelerating HTML5 Development

  2. 2. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENTA Multi-Tool Mashup for Accelerating HTML5 DevelopmentWelcome to the latest Kinvey eBook. We aim to help our communityof 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 donejustice 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 importantBefore we jump into tools, let’s start with a quick refresher onHTML5. The markup language was originally developed as a majorrevision of HTML. It aims to improve on major issues (like HTMLsyntax issues and adding multimedia support) found in previousiterations and attempts to define a single markup language that canbe written in HTML. HTML5 provides cutting edge features that allowweb 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 theapproximate equivalent of HTML + CSS + JavaScript. 1
  3. 3. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENTIs 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 usersabout extremely slow load times and frequent crashes are the mainreasons for Facebook’s switch to hybrid.) An inability to access amobile device’s hardware functionalities, such as the camera orspeakers, and limitations on certain mobile features have beenadditional 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. 4. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENTWeb RTC aims to solve these issues by giving direct access to thehardware on the device, which is slated to launch early 2013 (and isalready out in Chrome 22). But, in the eyes of opponents, HTML5 stillhas a ways to go before it becomes standard. Every well designeduser experience built with HTML5 technology needs to be designedspecifically for the platform it will be run on.Proponents, however, argue that the web is evolving and catching upwith mobile, paving a clear path for HTML5. Advocates prefer HTML5versus 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 reducingdevelopment time and costs compared to native apps. Researchshows that HTML5 adoption is on the rise: according to Forrester, thepenetration of HTML5-compatible browsers grew from 57 percent to75 percent between the second quarter of 2011 and the secondquarter of 2012. Research firm Strategy Analytics forecasts that salesof HTML5 compatible phones will top 1 billion this year. And, a surveyby Kendo UI notes that 51% of app developers say that HTML5 isimportant to their job right now, with 31% saying so within the next 12months.Even if all apps aren’t built on HTML5, an increasing number are todayand will continue to be in the near future. We believe that HTML5 ishere to stay, and advocate for its continued growth and adoption. Andnow that the W3C standards body considers HTML5 feature-complete,we do expect to see HTML5 adoption rise in the coming years. Whilethe HTML5 project builder uses tools designed for website develop-ment, it can be used to help build mobile apps as well. 3
  5. 5. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENTWhy Tools Matter in DevelopmentIt is no big secret that devel-oping a new app - whetherit’s for mobile or the web - isdifficult work. The good newsis that some components ofthis hard work have alreadybeen written by others in the DEVELOPER’Sform of tools made available TOOLBOXto the development commu-nity. I found disparate tools to create a value greater than the sum oftheir parts with this HTML5 project builder. The tools I selectedcomplement one another and are supported by solid documentationand an active, smart developer community. Rather than reinventingthe wheel, I took advantage of existing resources to create anotheruseful tool to simplify HTML5 website development.Wondering if an API is supported by HTML5? Try ModernizrModernizr is a Javascript library that detects HTML5 and CSS3features 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 differentbrowsers support different levels of the HTML5 API, app developersmust 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 outHTML5 BoilerplateThe HTML5 Boilerplate project, started by Paul Irish, is a tool thatcombines knowledge, experience and best practices of hundreds ofdevelopers to help others build fast, robust, and adaptable web appsor sites. 4
  6. 6. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENTAfter more than three years in iterative development, the tool bakesin a variety of best-practices: cross-browser normalization, perfor-mance optimizations, and optional features like cross-domain Ajaxand Flash. The creators make the tool’s core functionality clear:“Boilerplate is not a framework, nor does it prescribe any philosophyof development, its just got some tricks to get your project off theground quickly and right-footed.”Want to create JavaScript projects quickly without repetition?Try GruntThe third tool is called grunt and was created by Ben “Cowboy”Alman, a Boston-based web developer. Grunt is an emergingtask-based command line build tool for JavaScript projects. This toolfacilitates creating new projects and makes performing repetitive butnecessary tasks such as unit testing, concatenating and minifying filestrivial.Putting the tools togetherMy process of building this HTML5 project builder began with a bit oftrial and error. I began by building a grunt template with librariesfrom Kinvey, a backend as a service platform. Note that you coulduse any backend as a service provider or build your own backend touse this tool. I based my root template on the most recent pull fromthe HTML5 Boilerplate repo. An hour later, it was working: you cancheck out my github fork here. This was a good start, but not ideal:the HTML5 Boilerplate template produces a project that uses apopular build tool called ant. Grunt seemed like a better choicebecause it’s easier to maintain and extend for developers familiarwith Javascript. However, to use grunt I would have to autogeneratethe grunt file from my template and add some custom tasks tosupport the build steps. I continued exploring tools to avoid theseextra steps. 5
  7. 7. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENTThe final piece of the puzzle: node-build-script toolI stumbled across the node-build-script project, a tool that alignedexactly with what I had in mind as a basis for my project builder. Thisproject is a grunt template with a set of cleverly written tasks that willproduce a pristine customizable HTML5 project based on HTML5Boilerplate. I forked node-build-script and linked it to point to myKinvey HTML5 Boilerplate fork.How to installTo install this tool, run the following one-liner install script: $ curl https://raw.github.com/gist/2416597/install.sh | shAfter installing, an HTML5 project can be generated with Modernizr,jQuery and backend libraries. Depending on the setup, that scriptmay need to run with sudo, a tool that allows users to run programswith the security privileges of another user.After the app has been written, there are a bunch of useful buildtasks available via customized grunt tasks made available from myproject. These tasks automate the process of minifying, concatenat-ing and a whole bunch of other optimization tricks for the newwebsite. 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 sidewebsite that needs a backend. A nice approach would be to use thistool to build a static website that is hosted on S3 for a cheap hostingoption and turn on AWS CloudFront to make app loading blazing fast.The tool is useful for all websites, but is especially a nice startingplace for anyone looking to build their first one to ensure bestpractices will be followed. 6
  8. 8. A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENTDifference of opinion on HTML5: experts weigh in.Brian Clark - Founder of CopybloggerIn response to the question: HTML5 vs. Apps - which will win?“HTML5, no question. Responsive design alone is a better optionthan 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 thenyou probably should. Personally, I default to web, move tohybrid using HTML if I must, and only go pure native as a lastresort.”Rusty Williams - Co-Founder of Quick Catch Labs, LLC“We decided to start with an HTML5 mobile app because itsessential that we have compatibility across multiple devices.Were early in beta testing and its been great to release newfeatures every few days. ...HTML5 gives us tons of flexibility totest, refine, release and evolve based on the feedback that werereceiving.”Michael King - Appcelerator"Right now, app developers are definitely swinging away fromthe Web and away from HTML5. Theyre leaning more towardnative apps. And thats because, quite frankly, the HTML5 appsthey have built arent performing and the HTML5 apps theyretesting arent performing."Nat Freidman - CEO and co-founder of Xamarin“Native is the way to go for mobile development. Facebooklistened to its users and did a rewrite and it has had a big impacton their mobile app usage. Its a big deal and I think were goingto see a lot more developers starting to build natively."Josh Martin - Strategy Analytics analyst“HTML5 is not the future of apps. While developers dream ofwrite once run everywhere, the fragmented support for andlimited APIs within HTML5 make this impossible. In fact, wepredict the hybrid app is the future.” 7
  9. 9. AuthorMorgan BickleOn any given day youll find Morgan programming mobile SDKs,building backend APIs, and discussing the future of web and mobiletechnology. As part of the core founding team at Kinvey and now theCTO, he owns Kinvey’s technology vision. Prior to Kinvey, he wroteenterprise software for a decade.Project ManagerKelly RiceDesignersJake McKibben and Lauren PedigoResources & ToolsSlide deck: HTML5: Web development to the next levelInfographic: HTML5: Past, Present & FutureTool: Compatibility tables for HTML5, CSS 3 + moreArticle: HTML5 Use is real: 12 month studyWebsite: HTML5 PleaseeBook: 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 its free to get started and you only pay when your app is successful. Build your backend today