This book will help web application developers and software architects pick the right strategy for developing cross-platform applications that run on a variety of desktop computers as well as mobile devices. The primary audience is developers from a large organization who need to learn how to develop web applications using the HTML5 stack.
This book has the word enterprise in its title, and we’ll explain what we consider to be enterprise applications by giving you some examples. Creating a web application that processes orders is not the same as creating a website to publish blogs. Enterprise applications require company-specific workflows, which usually need to be integrated with various internal systems, data sources, and processes.
Google Docs is not an enterprise web application. But Google Search Appliance, which integrates search operations with company documents, databases, processes, and tickets, and provides collaboration is: it integrates the consumer-workforce front office with what the company does (back office).
Google Maps is not an enterprise application. But Google Maps integrated with a company site used by insurance agents to plan their daily route, create scheduling, perform address verification, and use geocoding is.
Just using a web application in a 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 multiplayer 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 website? If the site just offers an ability to display singles, it’s just a publishing site because there is not much of a business there. Can you turn a dating website into an enterprise application? It’s possible.
Some people will argue that an enterprise application must support multiple users and a high data load, include data grids and dashboards, be scalable, have business and persistence layers, offer professional support, and more. 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 one that helps an organization run its business online.
The authors of this book have 90 years of combined experience in developing enterprise applications. During all these years, we’ve been facing the same challenges regardless of which 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 production issues by applying proper testing at earlier stages of the project life cycle
How to design a 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 were developing UIs mainly in Java; five years ago, we used Adobe Flex; today, we use HTML5-related technologies. This book shares with you our understanding of how to approach these challenges in HTML5.
This book is intended for software developers, team leaders, and web application architects who want to learn the following:
How to write web applications by using some of the popular libraries and frameworks
How to test web applications
Whether applying responsive design principles is the right strategy for your application
Which security vulnerabilities to watch for
Why developing for mobile devices differs from developing for desktops
The pros and cons of developing mobile applications by using the HTML5 stack versus native languages
This book has a lot of breadth, but for mastering some of the topics in depth, be prepared to do additional studying. On the other hand, we provide a lot of working code samples for those who prefer studying by reading code.
This book can be important for busy professionals who don’t have time to read a separate book about each and every library and framework that exist in the HTML5 universe. This book will help you to narrow 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 need to create a new web application with a cross-platform and cross-browser UI. These strong enterprise developers with good business knowledge may not have enough exposure to how things work in the HTML5 domain. This book can be a time-saver for all server-side developers who need to start working on the frontend 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 not to give you unrelated code snippets illustrating various syntax or techniques, but to bring all of that together in a working application (just the UI portion). While learning the various frameworks, libraries, and approaches to building UIs for web applications, you’ll be writing multiple versions of the same web application—Save The Child (see Save The Child—a sample application). It’s a sample charity application used to collect donations for children who need medical attention.
This web application will allow people to register, donate, find local kids who need help, match donors and recipients, upload images and videos, and display statistics.
While looking at the preceding image, you might 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 gray windows with lots of grids and forms, and some charts? True, but we have all of these elements in our application, too:
Clicking the Donate Now button reveals 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 the Table tab (right next to the Chart tab) shows the same donation stats in a grid (that one is grayish).
Integration with the mapping API allows you to visually present the locations of important events for this business or nonprofit organization.
Under the hood, this pretty window will use the high-speed, full-duplex communication protocol WebSocket.
As a matter of fact, the company that employs the authors of this book has a customer that is a nonprofit organization that is in the business of helping people fighting a certain disease. That application has two parts: consumer-facing and back-office. The former looks more colorful, whereas the latter has more gray grids indeed. Both parts process the same data, and this organization can’t operate if you remove either of these parts.
Would these features make Save The Child an enterprise web application? Yes, because it can help our imaginary nonprofit organization run its business: collecting donations for sick kids. Would you rather see a fully functioning Wall Street trading system? Maybe. But this book and our sample application incorporate all software components that you’d need to use for developing a financial application.
Instead of presenting unrelated code samples, we decided to develop multiple versions of the same web application, built with different libraries, frameworks, and techniques. This approach allows you to compare apples to apples and to make an educated decision about which approach best fits your needs.
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 decide that developing applications in HTML5 is not the right approach for the tasks you have at hand. This book should help decision makers pick the right strategy for developing cross-platform applications that run on a variety of desktop computers as well as mobile devices.
Clear Data Builder
Although you can write your programs in any text editor, using specialized integrated development environments (IDEs) is more productive, and we’ll use the Aptana Studio IDE by Appcelerator and the WebStorm IDE by JetBrains.
The Preface includes a brief discussion of the difference between enterprise web applications and websites. It also touches on the evolution of HTML.
[using_ajax_and_json] is about bringing external data to web browsers by making asynchronous calls to a server. The code from the previous chapter uses only hardcoded data. Now it’s time to learn how to make asynchronous server calls by 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.
[productivity_tools] is a review of productivity tools (including npm, Grunt, Bower,Yeoman, and CDB) used by enterprise developers. It’s about using build tools, working with code generators, and managing dependencies (a typical enterprise application uses various software that needs to work in harmony).
[upgrading_http_to_websocket] shows how to substantially speed up interactions between the client and the server by using the 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 a 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 the WebSocket protocol is important:
Reducing kilobytes of data to 2 bytes is more than a little more byte efficient, and reducing latency from 150 ms (TCP round-trip to set up the connection plus a packet for the message) to 50 ms (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.
[intro_to_security] is a brief introduction to web application security. You’ll learn about vulnerabilities of web applications and will get references to recommendations on how to protect your application from attackers. This chapter concludes with some of the application-specific security considerations (like regulatory compliance) that your business customers can’t ignore.
[responsive_design] 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 become familiar with the principles of responsive design, which allow you to have a single code base that will be flexible enough to render a UI that looks good on large and small screens. You’ll see the power of CSS media queries that automatically reallocate UI components based on screen width of the device on which the website is being viewed. The new version of the Save The Child application will demonstrate how to go about responsive design.
[jquery_mobile] introduces you to jQuery Mobile—a 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 [introducing_jquery] is a prerequisite for understanding this chapter. Then you’ll create the mobile version of the Save The Child application with jQuery Mobile.
[appendix_b] is a brief overview of selected APIs from the HTML5 specification. They are supported by all modern web browsers. We find these APIs important and useful for many web applications. The following APIs are reviewed:
[appendix_c] is a brief discussion of the IDEs that are being used for HTML5 development in general and in this book in particular.
The following typographical conventions are used in this book:
Indicates new terms, URLs, email addresses, filenames, and file extensions.
- Constant width
Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.
Constant width bold
Shows commands or other text that should be typed literally by the user.
- Constant width italic
Shows text that should be replaced with user-supplied values or by values determined by context.
This element signifies a tip or suggestion.
This element signifies a general note.
This element indicates a warning or caution.
The source code for all versions of the Save The Child application are available for download from O’Reilly at the book’s catalog page. There is also a GitHub repository where the authors keep the source code of the book examples.
The authors also maintain the website, where various versions of the sample Save The Child application are deployed so you can see them in action.
This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.
We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Enterprise Web Development by Yakov Fain, Victor Rasputnis, Anatole Tartakovsky, and Viktor Gamov (O’Reilly). Copyright 2014 Yakov Fain, Victor Rasputnis, Anatole Tartakovsky, and Viktor Gamov, 978-1-449-35681-1.”
If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at
Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.
Safari Books Online offers a range of
Please address comments and questions concerning this book to the publisher:
We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/enterprise-web-development.
To comment or ask technical questions about this book, send email to
For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia
You see four names on this book cover. But this book is a product of more than four people. It’s a product of our company, Farata Systems.
In particular, we’d like to thank Alex Maltsev, who plays the a role of Jerry-the-Designer from Chapter 1 onward. Alex created all the UI prototypes for the sample web application Save The Child that is designed, redesigned, developed, and redeveloped several times in this book. He also developed code samples for the book and all CSS files.
Our big thanks to Anton Moiseev, who developed the Ext JS and Sencha Touch versions of our sample application.
Our hats off to the creators of the Asciidoc text format. The drafts of this book were prepared in this format, with the subsequent generation of PDF, EPUB, MOBI, and HTML documents.
Our sample application uses two images from the iStockPhoto collection: the smiling boy by the user jessicaphoto and the logo by the user khalus. Thank you, guys!
Finally, our thanks to the O’Reilly editors for being so patient while we were trying to hit lots of moving and evolving targets that together represent the universe known as HTML5.