html5 enterprise application development

www.it-ebooks.info HTML5 Enterprise Application Development A step-by-step practical introduction to HTML5 through the building of a real-world application, including common development practices Nehal Shah Gabriel José Balda Ortíz PUBLISHING professional expertise distilled BIRMINGHAM - MUMBAI www.it-ebooks.info HTML5 Enterprise Application Development Copyright © 2013 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: February 2013 Production Reference: 1120213 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84968-568-9 www.packtpub.com Cover Image by Mark Holland (m.j.g.holland@bham.ac.uk) www.it-ebooks.info Credits Authors Nehal Shah Gabriel José Balda Ortíz Reviewers Santiago Martín-Cleto Kevin Roast Acquisition Editor Erol Staveley Lead Technical Editor Ankita Shashi Technical Editors Jalasha D'costa Worrell Lewis Project Coordinator Leena Purkait Proofreader Maria Gould Indexer Rekha Nair Production Coordinator Nilesh Mohite Cover Work Nilesh Mohite www.it-ebooks.info About the Authors Nehal Shah is a technology director with over 10 years of experience building high performance teams and creating software spanning from frontend to backend and everything in between. He earned his BA in psychology at the University of Chicago and his MS in Information Technology at University of North Carolina at Charlotte. He currently is Executive Director of Engineering at Kaplan Test Prep and leads an emerging solutions team that builds innovative web and mobile products to capture new markets. For more information, check out his website at nehalium.com. First and foremost, I want to thank Gabriel for joining me on this journey. Your enthusiasm and determination kept me going page after page and your talent and work ethic never cease to amaze me. Secondly, I would like to thank my family for pushing me to where I am today. From my mom and dad buying me my rst computer, to my sister forcing me to learn my multiplication tables, to my brother teaching me to write my rst program, I am indebted to you all for everything I have. Lastly, a special thank you goes to my wife, Shilpa, who continues to look out for me, to encourage me, and to push me to be better than I am. www.it-ebooks.info Gabriel José Balda Ortíz is a computer engineer and graduate from Simón Bolívar University in Venezuela. After obtaining his degree, he studied graphic design in Centro Art, Venezuela. Since 2003, Gabriel has been developing web applications for multiple enterprises including various freelance projects. In 2011, he moved to New York to work on educational applications for Kaplan Test Prep. You can see his portfolio at gabrielbalda.com. I wish to express my sincere gratitude to Nehal for including me on this project, and Bernardo Rodriguez for inviting me to be part of his entrepreneurial adventures. Special thanks to my mother and my grandmother, they provided me the education and love that made me the person I am today. Finally, I want to thank my wife, Cindy, the love of my life, for being with me on this journey, giving me her support and helping me to be a better man every day. Part of this book is dedicated to her. www.it-ebooks.info About the Reviewers Santiago Martín-Cleto started his career as web designer for an outstanding Spanish media group in 1999. Passionate about design and code, he considers himself a web standards and open source advocate. He has been very involved in huge projects for mass media and nancial corporations as a contribution to launch start-ups. As a frontend developer, he is specialized in high trafc websites performance issues. Kevin Roast is a frontend software developer with 15 years of professional experience and a lifelong interest in computer science and computer graphics. He has developed web software for several companies and is a founding developer at Alfresco Software Ltd. He is very excited by the prospect of the HTML5 standardization of the web and the progress of web browser software in recent years. He was co-author of the book Professional Alfresco: Practical Solutions for Enterprise Content Management published by Wrox, and has been a technical reviewer on several HTML5-related books. I would like to thank my wife for putting up with me tapping away in the evenings reviewing book chapters and to my three kids Alex, Ben, and Izzy for being little wonders. www.it-ebooks.info www.PacktPub.com Support les, eBooks, discount offers and more You might want to visit www.PacktPub.com for support les and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub les available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. Instant Updates on New Packt Books Get notied! Find out when new books are published by following @PacktEnterprise on Twitter, or the Packt Enterprise Facebook page. www.it-ebooks.info www.it-ebooks.info Table of Contents Preface 1 Chapter 1: HTML5 Starter Kit: Compatibility 17 The real meaning of compatibility 17 Browsers 18 Rendering engine 19 JavaScript engine 20 OS platforms 22 Display resolution 23 Importance of compatibility 24 Patching the differences – compatibility libraries 25 HTML5 Shiv 25 Modernizr 27 Explorer Canvas 31 HTML5 Boilerplate 32 Before starting app development 32 Summary 34 Chapter 2: HTML5 Starter Kit: Useful Tools 35 Choosing editors and IDEs 35 Adobe Dreamweaver CS6 36 Aptana Studio 3 38 BlueGriffon 1.5.2 40 Maqetta 41 eXo 42 Cloud9 42 Choosing web servers 43 Apache 43 Apache Tomcat 44 Jetty 44 www.it-ebooks.info [...]... talks about ways of debugging HTML5 enterprise applications We will discuss the browser console and HTTP proxies Chapter 12, Finishing Up: Testing Your App, covers tools for testing HTML5 enterprise applications We will cover functional test suites and automated tools Chapter 13, Finishing Up: Performance, discusses performance, which is a crucial topic for any HTML5 enterprise application We will talk... Chapter 2, HTML5 Starter Kit: Useful Tools, provides a guide to getting started with HTML5 enterprise application development including available tools, their installation, and their use A comprehensive evaluation of the business drivers for selecting tools will be discussed Chapter 3, The App: Structure and Semantics, walks you through setting up the boilerplate for the MovieNow enterprise application. .. chapters, we will build a variety of features of HTML5 into our MoveNow enterprise application Chapter 1, HTML5 Starter Kit: Compatibility, discusses support of HTML5 features across multiple web browsers and devices as well as ways to skirt the deficiencies of these browsers The main driver for supporting multiple browsers is ensuring access to enterprise web applications across multiple devices while maintaining... Chapter 6, The App: Trailers via HTML5 Video, introduces the video and audio tags and their use within an HTML5 enterprise application We will talk about manipulating the playback of multimedia content via JavaScript as well as backward compatibility with browsers that do not support the HTML5 video and audio tags Chapter 7, The App: Showing Ratings via Canvas, walks through HTML5 canvas and using the drawing... and since implementation of HTML5 features on Safari have grown, HTML5 is quickly becoming a standard for mobile web application development However, if this trend is to continue, browser makers and application developers must adhere to the developing standards for HTML5, which brings us back to the logo To right the wrongs of the past, HTML5 must have collective agreement on implementation In order... walk through profiling your HTML5 application What you need for this book You will need prior knowledge of web application development as this book introduces developers already familiar with the basics of the web including HTML, CSS, and JavsScript to the advantages of HTML5 and CSS3 [ 12 ] www.it-ebooks.info Preface Who this book is for This book is primarily aimed at application developers who have... book is primarily aimed at application developers who have some experience developing applications for the web, and want to extend their knowledge to the latest developments in HTML5 and CSS3 Upon completion of this book, readers will have a thorough understanding of the toolset that HTML5 provides to develop enterprise applications Conventions In this book, you will find a number of styles of text that... Preface HTML5, apart from being the latest buzzword in the Internet era, is quickly becoming the lingua franca for the web In fact, HTML5 is the first version of HTML to get its own logo (http://www.w3.org/html/logo) To understand the significance of that, one must first know a little history www.it-ebooks.info Preface A brief history of time (client-server edition) Enterprise application development. .. through HTML5 canvas and using the drawing API to display graphics in your enterprise applications We will use the drawing API to create ratings charts for our MovieNow application Chapter 8, The App: Selection UI via Drag-and-Drop, covers the drag-and-drop API We will implement the drag-and-drop functionality in the MovieNow enterprise application demonstrating event delegation and the publish-subscribe... discusses forms and form validation in HTML5 by integrating with the Twitter API We will implement posting of tweets from within the MovieNow application Chapter 10, The App: Consuming Tweets via Web Workers, demonstrates Web Workers and the power of external APIs to bring social elements to enterprise application We will integrate tweets near you into the MovieNow application Chapter 11, Finishing Up: . www.it-ebooks.info HTML5 Enterprise Application Development A step-by-step practical introduction to HTML5 through the building of a real-world application, including common development practices Nehal. implementation of HTML5 features on Safari have grown, HTML5 is quickly becoming a standard for mobile web application development. However, if this trend is to continue, browser makers and application. differences – compatibility libraries 25 HTML5 Shiv 25 Modernizr 27 Explorer Canvas 31 HTML5 Boilerplate 32 Before starting app development 32 Summary 34 Chapter 2: HTML5 Starter Kit: Useful Tools 35 Choosing