diff --git a/ch_preface.asciidoc b/ch_preface.asciidoc index c9e27fbe..3d65ef21 100644 --- a/ch_preface.asciidoc +++ b/ch_preface.asciidoc @@ -3,6 +3,8 @@ 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. +=== What's Enterprise Application? + 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 @@ -21,11 +23,7 @@ Some people will argue that an enterprise application must supports multiple use 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". - -In this book we are going to build a sample Save the Child 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. 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 ill kids. As a matter of fact, the company that employs authors of this book has a client that is a similar non-for-profit organization that is in business of helping people fighting a certain disease. - +_"An enterprise Web application is the one that helps an organization running its business online"._ === Why the Authors Wrote the book @@ -46,7 +44,6 @@ Web application development with HTML5 includes HTML, JavaScript, CSS and dozens This book is intended for software developers, team leaders, and Web application architects who want to learn the following: -* How to program in JavaScript language * 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 @@ -55,6 +52,7 @@ This book is intended for software developers, team leaders, and Web application * 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. === What the Book is And Why it's Important @@ -68,13 +66,40 @@ Finally, this book is important because of the way it's written - you'll be work === Introducing Save The Child Application + 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. [[FIG0-1]] .Save The Child - a sample application -image::images/fig_0_1.png[] +image::images/fig_06_8_SSC.png[] + +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. + +==== Is This Even an Enterprise App? + +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. -First we'll show how to build this application in 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 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 four 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. +* 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. + +==== How Are We Going to Build This App + +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. === What the Goals of the Book Are @@ -101,46 +126,53 @@ Although you can write your programs in any text editor, using specialized Integ === How the Book is Organized Even though you may decide not to read some of the chapters we still recommend you to skim through them. -Chapters 1, 3, and 4 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 6. Following is a brief book outline: +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* 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. +*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 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: +*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. -* Web Messaging -* Web Workers -* Application Cache -* Local Storage -* Indexed Database -* History API +*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 3* 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 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 4* 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 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 5* 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 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 6* 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 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: -*Chapter 7* 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. +"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 8* 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 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 9* 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: +*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. -"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 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 10* 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 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 11* 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 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. -*Chapter 12* 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 5 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. +*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 -*Chapter 13* 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. +*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. -*Chapter 14* 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. === The Source Code of the Book Examples diff --git a/images/fig_03_13.jpg b/images/fig_03_13.jpg deleted file mode 100644 index 74495fd6..00000000 Binary files a/images/fig_03_13.jpg and /dev/null differ diff --git a/images/fig_03_15.jpg b/images/fig_03_15.jpg deleted file mode 100644 index 4e96347f..00000000 Binary files a/images/fig_03_15.jpg and /dev/null differ diff --git a/images/fig_03_16.jpg b/images/fig_03_16.jpg deleted file mode 100644 index 0aa8456b..00000000 Binary files a/images/fig_03_16.jpg and /dev/null differ