Enterprise Web Development by Yakov Fain, Victor Rasputnis, Anatole Tartakovsky -- Read -- Imperial Library of Trantor

Index

Enterprise Web Development Preface

What’s an Enterprise Application? Why the Authors Wrote This Book Who This Book Is For What This Book Is and Why It’s Important Introducing the Save The Child Application

Is This Even an Enterprise App? How We Are Going to Build This App

The Goals of the Book Technologies Used in This Book How the Book Is Organized Conventions Used in This Book The Source Code for the Examples Safari® Books Online How to Contact Us Acknowledgments

Introduction

Moving from DHTML to HTML5 Developing in HTML5 Challenges of the Enterprise Developer Summary

I. Building Your Application

1. Mocking Up the Save The Child Application

Considering Mobile First Introducing Balsamiq Mockups The Project Owner Talks to a Web Designer Creating First Mockups Turning Mockups into a Prototype

Single-Page Applications Running Code Examples from WebStorm Our First Prototype Our Main Page JavaScript

Where to put JavaScript The CSS of our main page

The Footer Section The Donate Section

Assigning function handlers: take 1 Assigning function handlers: take 2

Adding Video

Adding the HTML5 Video Element Embedding YouTube Videos

Adding Geolocation Support

Geolocation Basics Integration with Google Maps Browser Feature Detection with Modernizr Search and Multimarkers with Google Maps

Adding multiple markers on the map

Summary

2. Using Ajax and JSON

Understanding Ajax Understanding JSON Working with Ajax

Retrieving Data from the Server Ajax: Good and Bad Populating States and Countries from HTML Files

Using JSON

Populating States and Countries from JSON Files Using Arrays in JSON Loading Charity Events by Using Ajax and JSON Using JSON in CMS

Handling JSON in Java Compressing JSON Adding Charts to Save The Child

Adding a Chart with the Canvas Element Adding a Chart by Using SVG

Loading Data from Other Servers by Using JSONP

Beer and JSONP

Summary

3. Introducing the jQuery Library

Getting Started with jQuery

Hello World

Using Selectors and Filters Testing jQuery Code with JSFiddle Filtering Elements Handling Events

Attaching Event Handlers and Elements by Using the Method on() Delegating Events

Using Ajax with jQuery

Handy Shorthand Methods

Programming Save The Child by Using jQuery

Login and Donate Loading HTML States and Countries by Using jQuery Ajax Loading JSON States and Countries by Using jQuery Ajax Submitting the Donate Form

Manual form serialization

Using jQuery Plug-ins

Validating the Donate Form by Using a Plug-in Adding an Image Slider

Summary

II. Enterprise Considerations

4. Developing Web Applications in the Ext JS Framework

Exploring JavaScript Frameworks Choosing to Use Ext JS Downloading and Installing Ext JS Becoming Familiar with Ext JS and Tooling

Creating the First Version of Hello World Generating Applications with the Sencha CMD Tool Choosing Which Ext JS Distribution to Use Declaring, Loading, and Instantiating Classes

xtype: An efficient way to create class instances Supporting multiple inheritance by uisng mixins

Best Practice: MVC

Models and stores Controllers and views

Exploring a Component’s Life Cycle

Components as containers

Working with Events Specifying Layouts

Setting proportional layouts by using the flex property

Developing Save The Child with Ext JS

Setting Up the Eclipse IDE and Apache Tomcat

Apache Tomcat Dynamic web projects and Ext JS

Running the Top Portion of the Save The Child UI Completing Save The Child

Adding the login box Adding the video Adding the maps Adding the chart and table panels Adding a footer Building a production version of Save The Child

Summary

5. Selected Productivity Tools for Enterprise Developers

Using Node.js, V8, and npm Automating Everything with Grunt Exploring the Simplest Gruntfile Using Grunt to Run JSHint Checks Watching for the File Changes Using Bower Using Yeoman Using Ext JS and CDB for Productive Enterprise Web Development

Ext JS MVC Application Scaffolding Generating a CRUD Application Data Pagination

Summary

6. Modularizing Large-Scale JavaScript Projects

Understanding Modularization Basics Exploring Roads to Modularization

The Module Pattern CommonJS Asynchronous Module Definition Universal Module Definition ECMAScript 6 Modules

ES6 Module Transpiler

Dicing the Save The Child Application into Modules

Inside the RequireJS Configuration: config.js Writing AMD Modules Loading Modules On Demand Using RequireJS Plug-ins Using RequireJS Optimizer

Loosely Coupled InterModule Communications with Mediator Summary

7. Test-Driven Development with JavaScript

Why Test? Testing Basics

Unit Testing Integration Testing Functional Testing Load Testing

Apache Benchmark jMeter PhantomJS

Test-Driven Development

Implementing TDD by Using QUnit

Setting up Grunt with QUnit

Behavior-Driven Development with Jasmine

Setting up Grunt with Jasmine Exploring Jasmine basics Specification setup Custom matchers Spies

Multibrowser Testing

Installation Testem configuration file Running tests

Testing the DOM

Building Save The Child with TDD

Harnessing the ExtJS Application Testing the Models Testing the Controllers Testing the Views Setting Up the IDE for TDD

Summary

8. Upgrading HTTP to WebSocket

Using HTTP for Near Real-Time Applications

Polling Long Polling HTTP Streaming

Implementing Server-Sent Events Introducing the WebSocket API

The WebSocket Interface The Client-Side API

WebSocket handshake WebSocket frame anatomy The heartbeats Data frames Closing the connection

Using WebSocket Frameworks

The Portal Atmosphere

Choosing the Format for Application-Level Messages

CSV XML JSON Google Protocol Buffers

Using WebSocket with Proxies Adding an Auction to Save The Child

Monitoring WebSocket Traffic by Using Chrome Developer Tools Sniffing WebSocket Frames by Using Wireshark Creating the Save The Child Auction Protocol

Summary

9. Introduction to Web Application Security

HTTP versus HTTPS Authentication and Passwords

Basic and Digest Authentication Single Sign-on

Save The Child and SSO

Handling Passwords

Authorization

OAuth-Based Authentication and Authorization Federated Identity with OpenID Connect and JSON Web Tokens OAuth 2.0 Main Actors Save The Child and OAuth

Public authorization servers Private authorization servers

Top Security Risks

Injection Cross-Site Scripting

Regulatory Compliance and Enterprise Security Summary

III. Responsive Web Design and Mobile Devices

10. Responsive Design: One Site Fits All

One or Two Versions of Code?

How Many User Agents Are There

Back to Mockups CSS Media Queries

How Many Breakpoints?

Fluid Grids

Moving Away from Absolute Sizing Window as a Grid Responsive CSS: The Good News

Making Save The Child Responsive

Fluid Media

Summary

11. jQuery Mobile

Obtaining jQuery Mobile Organizing the Code Seeing How It Looks on Mobile Devices

Styling in jQuery Mobile Adding Page Navigation

Multipage template Single-page template Multipage or single-page template

Adding Persistent Toolbars

Programmatic navigation

Using jQuery Mobile for Save The Child

Prototyping the Mobile Version Project Structure and Navigation Selected Code Fragments

Grid layouts Control groups Drop-downs and collapsibles List views Adding JavaScript

Summary

12. Sencha Touch

Introducing Sencha Touch

Performing Code Generation and Distribution

Microloader and configurations The code of Hello World

Constructing the UI

Containers Layouts Events

Using Sencha Touch for Save The Child

Building the Application The Application Object The Main View Controller Other Views in Save The Child

LoginForm DonateForm Charts Media Maps

Stores and Models Working with Landscape Mode

Comparing jQuery Mobile and Sencha Touch

13. Hybrid Mobile Applications

Native Applications Native versus Web Applications Hybrid Applications

Cordova and PhoneGap Titanium

The Bottom Line Introduction to the PhoneGap Workflows

Creating One More Hello World Testing Applications on iOS Devices Installing More Local SDKs

Using the Adobe PhoneGap Build Service

Distributing Mobile Applications

Save The Child with PhoneGap

Using PhoneGap to Package Any HTML5 Application Adding Camera Access to Save The Child Providing Sever-Side Support for Photo Images

Summary

14. Epilogue

HTML5 Is Not a Rosy Place Dart: A Promising Language HTML5 Is in Demand Today

A. Selected HTML5 APIs

Does Your Browser Support HTML5? Handling Differences in Browsers HTML5 Web Messaging API

Sending and Receiving Messages Communicating with an iFrame Applying the Mediator Design Pattern

Web Workers API

Creating and Communicating with Workers Dedicated and Shared Workers

The WebSocket API Offline Web Applications

Prerequisites for Developing Offline Web Applications Application Cache API Is Your Application Offline? Options for Storing Data Locally Web Storage Specification APIs

localStorage API sessionStorage API localStorage and sessionStorage commonalities

Introduction to IndexedDB

Object stores and versioning Transactions Modyfying the object store data Retrieving the data Runninng the sample code

The History API

Modifying the Browser’s History by Using pushState() Processing the popstate Event

Summary

B. Running Code Samples and IDE

Choosing an IDE Running Code Samples in WebStorm Using Two IDEs: WebStorm and Eclipse

Index Colophon Copyright

← Prev
Back
Next →

← Prev
Back
Next →