This book should help Web application developers and software architects in picking the right strategy for developing cross-platform applications that run on a variety of desktop computers as well as mobile devices. Primary audience is developers who are in a large organization and need to learn how to develop Web application using HTML5 stack.
This book has the word Enterprise in its title, and we’ll explain you what we consider enterprise applications by giving you some examples. Creating a Web application that will process orders is not the same as creating a Web site to publish blogs. Enterprise applications include company-specific workflows, and usually they need to be integrated with number of internal systems, data sources and processes.
Google Doc is not an enterprise Web application. But Google appliance integrating search operating on company documents, databases, processes, tickets, and providing collaboration is - it integrates consumer-workforce front office with what the company does (back office).
Google Maps is not an enterprise application. But Google Maps integrated with the company site used by insurance agents to plan daily route, scheduling, doing address verification and geo-coding is.
Just using a Web application in some business doesn’t make it an enterprise Web application. If you take Gmail as is, it won’t be an enterprise application until you integrate it into another process of your business.
Is an online game an enterprise application? It depends on the game. A multi-player online roulette game hooked up to a payment system, and maintaining users' accounts is an enterprise Web application. But playing Sudoku online doesn’t feel too enterprisey.
How about a dating Web site? If the site just offers an ability to display singles - it’s just a publishing site as there is not much of a business there. Can you turn a dating Web site into an enterprise application? It’s possible.
Some people will argue that an enterprise application must supports multiple users, high data load, include data grids and dashboards, be scalable, have business and persistence layers, offer professional support et al. This is correct, but we don’t believe that a Web application should do all this to qualify for the adjective enterprise.
Let’s create a simple definition of an enterprise Web application:
"An enterprise Web application is the one that helps an organization running its business online".
The authors of this book have ninety years of combined experience in development of enterprise applications. During all these years we’ve been facing the same challenges regardless of what programming language we use:
-
How to make the application code base maintainable
-
How to make the application responsive by modularizing its code base
-
How to minimize the number of the production issues by proper testing on earlier stages of the project life cycle
-
How to design UI that looks good and is convenient for users
-
Which frameworks or libraries to pick
-
Which design patterns to apply in coding
This list can be easily extended. Ten years ago we’ve been developing UI mainly in Java, five years ago in Adobe Flex, today in HTML5-related technologies. This book is an attempt to share with the readers our understanding of how to approach the above challenges in HTML5.
Web application development with HTML5 includes HTML, JavaScript, CSS and dozens of JavaScript frameworks. The main goal of this book is to give you a hands-on overview of development Web applications that can be run on a variety devices - desktops, tablets and smartphones. We expect the reader to have some experience with any programming language. Knowledge of basic HTML is also required. Understanding of the principles of object-oriented programming would be helpful too.
This book is intended for software developers, team leaders, and Web application architects who want to learn the following:
-
How to write Web applications using some of the popular libraries and frameworks
-
How to modularize the client’s side of Web applications written in JavaScript
-
How to test Web applications
-
Is applying responsive design principles the right strategy for your application
-
Which security vulnerabilities to watch for
-
Why developing for mobile devices differs from developing for desktops
-
What are the pros and cons of developing mobile application using HTML5 stack versus native languages
|
Note
|
If you’re new to programming in JavaScript language, start reading this book from Appendix A, which is an introduction to JavaScript. |
This book has a lot of breadth, but for mastering some of the topics in depth be prepare to do additional studying. On the other hand, we give you a lot of working code samples to those who prefer studying by reading code.
This book can be important for busy professionals who don’t have time for reading a separate book about each and every library and framework that exist in the HTML5 universe. This book will help them to narrow down the list of technologies and frameworks to be considered for the next project.
Enterprise server-side developers will also benefit from reading this book. Pretty often enterprise Java or .Net developers feel caught off guard when they get a task to create a new Web application with the cross-platform and cross-browser UI. These strong enterprise developers with good business knowledge may not have enough exposure to how things work in HTML5 domain. This book can be a time saver for all server-side developers who need to start working on the front end of Web applications.
Finally, this book is important because of the way it’s written - you’ll be working on the application that’s introduced next.
To make this book more practical, we decided to not just give you the unrelated code snippets illustration various syntax or techniques, but but bring all of them together in a working application (just the UI portion). While learning various frameworks, libraries and approaches to building UI for Web application you’ll be writing multiple versions of the same Web application - Save The Child. It’s a sample charity application that may be used to collect donations for children who need medical attention.
This Web application that will allow people to register, donate, find local kids that need help, match donors and recipients, upload images, videos and display statistics.
By looking at the image above the reader may be thinking, "This doesn’t look like an enterprise application". Let’s see. Do you believe that an enterprise application has to consist of boring grey windows with lots of grids, forms, and some charts? True, but we got all of these elements in our application too:
-
clicking on the Donate button will reveal a form that has to be filled out and sent to a payment processing system.
-
The interactive live pie chart is something that many modern enterprise dashboards include.
-
Clicking on the Table tab (right next to the Chart tab) shows the same donations stats in a grid (that one is greyish).
-
Integration with the mapping API allows visually present the locations that run events important for this business or a non-profit organization.
-
Under the hood this pretty window will use a high speed full duplex communication protocol WebSocket.
As a matter of fact, the company that employs authors of this book has a customer that is a non-for-profit organization that is in business of helping people fighting a certain disease. That application has two parts - consumer-facing and back-office. The former looks more colorful, while the latter has more grey grids indeed. Both parts process the same data and this organization can’t operate if you remove any of these parts.
Would these feature make Save the Child an enterprise Web application? Yes, as it can help our imaginary non-for-profit organization to run its business: collecting donations for sick kids. Would you rather see a fully function Wall Street trading system? Maybe. But this book and our sample application incorporates all software components that you’d need to use for developing a financial application.
Instead of giving a number of unrelated code samples, we decided to develop multiple versions of the same Web application built with different libraries, frameworks, and techniques. This approach will allow the reader compare apples to apples and make an educated decision which approach fits his or her needs the best.
First we’ll show how to build this application in pure HTML/JavaScript, then we’ll re-write it using jQuery library, then with Ext JS framework. The users will be able to see where different charity events are being run (Google maps integration). The page will integrate the video player and display the chart with stats on donors by geographical location. One of the versions of this app shows how to modularize this application - this is a must for any enterprise system. Another version shows how to use WebSockets technology to illustrate the server-side data push while adding an auction to this Web application. The final chapters of the book show different ways of building different version of the same Save The Child application to run on mobile devices (Responsive Design, jQuery Mobile, Sencha Touch, and PhoneGap). We believe that this application will help you in comparing all these approaches and selecting those that fit your objectives.
First, we want to say what’s not the goal of this book. We are not planning to convince you that developing a cross-platform Web application is the right strategy for you. Don’t be surprised if after reading this book you’ll decide that developing applications in HTML5 is not the right approach for the tasks you have at hands.
This book should help decision makers in picking the right strategy for developing cross-platform applications that run on a variety of desktop computers as well as mobile devices.
This is HTML5 book, and the main programming language used here is JavaScript. We use HTML and CSS too. Most of the modern JavaScript development is done using various libraries and frameworks. The difference between a library and a framework is that the former does not dictate how to structure the code of your application - they simply offer a set of components that will spare you from writing lots of manual code. The goal of some frameworks is to help developers with testing of their applications. The goal of some frameworks is just to split the application into separate modules. There are tools just for building, packaging and running JavaScript applications. While many of the frameworks and tools will be mentioned in this book, the main technologies/libraries/tools/techniques/protocols used in this book are listed below:
-
jQuery
-
jQuery Mobile
-
Ext JS
-
Sencha Touch
-
RequireJS
-
Jasmine
-
WebSocket
-
PhoneGap
-
Grunt
Although you can write your programs in any text editor, using specialized Integrated Development Environments is more productive, and we’ll use Aptana Studio IDE by Appcelerator and WebStorm IDE by JetBrains.
Even though you may decide not to read some of the chapters we still recommend you to skim through them. If you’re not familiar with JavaScript - start from Appendix A.
Chapters 1 and 2 are must read - if you can’t read JavaScript code or are not familiar with CSS, AJAX or JSON, the rest of the book will be difficult to understand. On the other hand, if you’re not planning to use, say Ext JS framework, you can just skim through Chapter 4. Following is a brief book outline:
Introduction includes a brief discussion of what’s the difference between enterprise Web applications and Web sites. It also touches upon the evolution of HTML.
Chapter 1 describes the process of mocking up the application Save The Child, which will support donations to the children, embed a video player, integrate with Google maps, and eventually will feature an online auction. We’ll show you how to gradually build all the functionality of this Web application while explaining each step of the way. By the end of this chapter we’ll have the Web design and the first prototype of the Save The Child application written using just HTML, JavaScript and CSS.
Chapter 2 is about bringing external data to Web browsers by making asynchronous calls to server. The code from previous chapters uses only hard-coded data. Now it’s time to learn how to make asynchronous server calls using AJAX techniques and consume the data in JSON format. The Save The Child application will start requesting the data from the external sources and sending them the JSON-formatted data.
Chapter 3 shows how to use a popular jQuery library to lower the amount of manual coding in the Save The Child application. First, we’ll introduce the jQuery Core library, and then re-build our Save The Child application with it. In the real world, developers often increase their productivity by using JavaScript libraries and frameworks.
Chapter 4 is a mini tutorial of a comprehensive JavaScript framework called Ext JS. This is one of the most feature-complete frameworks available on the market. Sencha, the company behind Ext JS, managed to extend JavaScript to make its syntax closer to classical object-oriented languages. They also developed and extensive library of the UI components. Expect to see another re-write of the Save The child here.
Chapter 5 is a review of productivity tools used by enterprise developers (NPM, Grunt, Bower,Yeoman, CDB). It’s about build tools, code generators, and managing dependencies (a typical enterprise application uses carious software that need to work in harmony).
Chapter 6 explains how to modularize large applications. Reducing the application startup latency and implementing lazy loading of certain parts of the application are the main reasons for modularization. We’ll give you an example of how to build modularized Web applications that won’t bring the large and monolithic code to the client’s machine, but will rather load the code on as needed basis. You’ll also see how to organize the data exchange between different programming modules in a loosely coupled fashion. The Save The Child application will be re-written with RequireJS framework, which will be loading modules on demand rather than the entire application.
Chapter 7 is dedicated to test-driven development with JavaScript. To shorten the development cycle of your Web application you need to start testing it on the early stages of the project. It seems obvious, but many enterprise IT organizations haven’t adopted agile testing methodologies, which costs them dearly. JavaScript is dynamically typed interpreted language - there is no compiler to help in identifying errors as it’s done in compiled languages like Java. This means that a lot more time should be allocated for testing for JavaScript Web applications. We’ll cover the basics of testing and will introduce to to some of the popular testing frameworks for JavaScript application. Finally, you’ll see how to test Save The Child application with Jasmine framework.
Chapter 8 shows how to substantially speedup the interaction between the client and the server using WebSocket protocol introduced in HTML5. HTTP adds a lot of overhead for every request and response object that serve as wrappers for the data. You’ll see how to introduce the WebSocket-based online auction to the new version of our Save The Child application. This is what Ian Hickson, the HTML5 spec editor from Google, said about why WebSocket protocol is important:
"Reducing kilobytes of data to 2 bytes is more than a little more byte efficient, and reducing latency from 150ms (TCP round trip to set up the connection plus a packet for the message) to 50ms (just the packet for the message) is far more than marginal. In fact, these two factors alone are enough to make WebSocket seriously interesting to Google.
Chapter 9 is a brief introduction to Web application security. You’ll learn about vulnerabilities of Web applications and will get references to the documents that contain recommendations on how to protect your application from attackers. This chapter concludes with some of the application-specific security considerations like the regulatory compliance that your business customers can’t ignore.
Chapter 10 opens up a discussion of how to approach creating Web applications that should run not only on desktops, but also on mobile devices. In this chapter you’ll get familiar with the principles of responsive design, which allows to have a single code base that will be flexible enough to render the UI that looks good on the large and small screens. You’ll see the power of CSS media queries that will automatically re-allocate the UI components based on the screen width. The new version of the Save The Child application will demonstrate how to go about responsive design.
Chapter 11 will introduce you to jQuery Mobile - the library that was specifically created for developing mobile Web applications. But main principles implemented in the larger jQuery library remain in place, and studying the materials from Chapter 3 is a prerequisite for the understanding of this chapter. Then you’ll be creating the mobile version of the Save The Child with jQuery Mobile.
Chapter 12 is about a little brother of Ext JS - Sencha Touch framework. This framework was developed for the mobile devices, and you’ll need to read Chapter 6 to be able to understand the materials from this one. As usual, we’ll develop another version of the mobile version of the Save The Child with Sencha Touch.
Chapter 13 shows how you can create hybrid mobile applications, which are written with HTML/JavaScript/CSS, but can use the native API of the mobile devices. Hybrids are packaged as native mobile applications and can be submitted to the popular online app stores or market places the same way as if they were written in the programming language native for the mobile platform in question. This chapter will illustrate how to access the camera of the mobile device using the PhoneGap framework.
Appendix A is an introduction to programming with JavaScript. In about 60 pages we’ve covered main aspects of this language. No matter what framework you choose, a working knowledge the JavaScript is required.
Appendix B is a brief overview of selected APIs from HTML5 specification. They are supported by all modern Web browsers. We find these APIs important and useful for many Web applications. The following API will be reviewed in this chapter:
-
Web Messaging
-
Web Workers
-
Application Cache
-
Local Storage
-
Indexed Database
-
History API
Appendix C is a brief discussion of the Integrated Development Environments that are being used for HTML5 development in general and in this book in particular.
The source code of all versions of the Save The Child application will be available for download a from O’Reilly at http://shop.oreilly.com/product/0636920028314.do. There is also a GitHub repository where the authors keep the source code of the book examples.
The authors of this book also maintain a Web site http://saveThechild.org, where various versions of the sample Save The Child application are deployed so you can see them in action.
Yakov Fain is is a co-founder of Farata Systems and SuranceBay companies. The first company provides consulting services in the field of enterprise Web development and e-Commerce, and the second one is a software product company, which develops software for the insurance industry. A leader of the Princeton Java Users Group, he has authored several technical books and dozens of articles on software development. Yakov received the title of Java Champion, which is presented to only 150 people worldwide. Yakov also holds an MS in Applied Math. You can reach him at [email protected] and follow him on Twitter @yfain.
Dr. Victor Rasputnis is a co-founder of Farata Systems and SuranceBay companies. He spends most of his time providing architectural design, implementation management, and mentoring to companies migrating to e-Commerce technologies with Hybris. Victor has authored several books and dozens of technical articles. He holds a PhD in Computer Science. You can reach Victor at [email protected].
Anatole Tartakovsky is a co-founder of Farata Systems and SuranceBay companies. He spent more than 25 years developing system and business software. In the last fifteen years, his focus has been on creating frameworks and business applications for dozens of enterprises ranging from Wal-Mart to Wall Street firms. Anatole has authored a number of books and articles on AJAX, Flex, XML, the Internet, and client-server technologies. He holds an MS in Mathematics. You can reach Anatole at [email protected].
Viktor Gamov is a senior software engineer at Farata Systems. He consults financial institutions and startups in design and implementation of Web Applications with HTML5 and Java. A co-organizer of the Princeton Java Users Group, Viktor is passionate about writing a code and about the open source community. He holds MS in Computer Science. You can reach Viktor on email [email protected] and follow him on Twitter @gamussa.