Transcript of "A Multi-Tool Mashup for Accelerating HTML5 Development"
A Multi-Tool Mashup forACCELERATING HTML5DEVELOPMENT
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 ﬁts 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 aﬃliate 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
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 designedspeciﬁcally 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 ﬁrm 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
A MULTI-TOOL MASHUP FOR ACCELERATING HTML5 DEVELOPMENTThe ﬁnal 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 ﬁrst one to ensure bestpractices will be followed. 6
AuthorMorgan BickleOn any given day youll ﬁnd 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, oﬀering 3rd party data integrations, multi-plat- form support, push notiﬁcations, 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