Enterprise Web Development (2014)
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.
What’s an Enterprise Application?
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.
Why the Authors Wrote This Book
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.
Who This Book Is For
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
What This Book Is and Why It’s Important
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.
Introducing the Save The Child Application
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 Figure 1). It’s a sample charity application used to collect donations for children who need medical attention.
Figure 1. Save The Child—a sample application
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.
Is This Even an Enterprise App?
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.
How We Are Going to Build This App
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.
The Goals of the Book
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.
Technologies Used in This Book
§ Balsamiq Mockups
§ jQuery Mobile
§ Ext JS
§ Sencha Touch
§ Clear Data Builder
§ WebStorm IDE
§ Eclipse IDE
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.
How the Book Is Organized
The Preface includes a brief discussion of the difference between enterprise web applications and websites. It also touches on the evolution of HTML.
Chapter 2 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.
Chapter 5 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).
Chapter 6 explains how to modularize large applications. Reducing startup latency and implementing lazy loading of certain parts of the application are the main reasons for modularization. We give you an example of how to build modularized web applications that won’t bring large, monolithic code to the client’s machine, but rather loads the code on an as-needed basis. You’ll also see how to organize the data exchange between programming modules in a loosely coupled fashion. The Save The Child application is rewritten with the RequireJS framework, which will load modules on demand rather than the entire application.
Chapter 8 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.
Chapter 9 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.
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 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.
Chapter 11 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 Chapter 3 is a prerequisite for understanding this chapter. Then you’ll create the mobile version of the Save The Child application with jQuery Mobile.
Chapter 12 is about a little brother of Ext JS—Sencha Touch. This framework was developed for mobile devices, and you’ll need to read Chapter 6 in order to understand the materials from this one. As usual, we develop another variation of the mobile version of the Save The Child application with Sencha Touch.
Appendix A 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:
§ Web Messaging
§ Web Workers
§ Application Cache
§ Local Storage
§ Indexed Database
§ History API
Appendix B is a brief discussion of the IDEs that are being used for HTML5 development in general and in this book in particular.
Conventions Used in This Book
The following typographical conventions are used in this book:
Indicates new terms, URLs, email addresses, filenames, and file extensions.
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.