AngulerJS

Over the past three years my colleagues and I prepared and delivered multiple trainings “Modern Web Development with AngularJS and Java“. We felt pretty comfortable with the framework, and the training was structured around building a sample Online Auction app with AngularJS on the front and Java EE on the back. During the last year we’ve developed and deployed in prod the Easy.Insure app using Google Dart and AngularDart. So AngularJS became our framework of choice. When Google announced a complete re-write of the AngularJS, we were not disappointed. Angular 2 will make this framework better.

I’ll be writing this book with my colleague (and co-instructor) Anton Moiseev. This is going to be a tough project because Angular 2 is in Alpha now, and the API changes weekly, literally! I had this experience in 2006 while writing with my colleagues on a book on Adobe Flex 2, which went through one Alfa and three Beta versions while we were working on the book. We had to re-write code samples multiple times. It was a challenging but interesting project. Now we should do it again. It goes without saying that this book we’ll also write in a plain text editor using the Asciidoc markup and Asciidoctor for generating the HTML and PDF versions.

We want to thank Manning Publications for accepting our book proposal. Below is a short version of Table of Contents. So far only the Appendix on EcmaScript 6 is written, but by the end of July we should have the first three chapters ready as well.

1. Introducing Angular 2
The landscape of client-side development
The history of Angular
Why choosing Angular 2
Architecture of Angular 2 applications
Introducing a sample Online Auction

2. TypeScript as a language for Angular applications
TypeScript as a superset of ECMAScript 6
Tooling

3. Getting started with Angular
Creating your first single-page application
Model-View-Component
Templates
Data binding
Setting up the development environment for Angular 2 applications
Hands-on: Getting started with Online Auction

4. Registering and creating objects
The Dependency Injection pattern
Angular Modules
Hands-on: Modularizing Online Auction

5. Navigation with Component Router
Changing views
Hash-based navigation
Deep-linking with HTML5 History API
Passing Parameters to Components
Authentication and the role-based navigation
Lazy-Loading Modules
Hands-on: Adding navigation to Online Auction

6. Bringing Together Data and Views with Data Binding
Connecting UI to the data
Benefits of data binding
Unidirectional vs. two-way data binding
Change detection
Data Binding in Templates
Hands-on: Binding data to views in Online Auction

7. User Interaction via Forms
Data entry
Form controls
Data-Driven Forms
From UI-driven to data-driven forms
Form validation
Hands-on: Offering products for sale

8. Communicating with Servers
Asynchronous HTTP requests
Working with RESTful services
Using WebSockets
Hands-on: Pushing bid notifications to the clients

9. Testing Angular applications
Developing without a compiler
Test runners
Testing frameworks
Working with mock objects
Troubleshooting Angular applications
In-browser debugging
Hands-on: Testing Online Auction

10. Deploying Angular Applications
Configuring Web servers for single page applications
Supporting HTML5 History API
Proxying HTTP requests
Cross-origin resource sharing
Hands-on: Deploying Online Auction

Appendix A. JavaScript Implementation of ECMAScript 6
The Scope of a Variable
Arrow functions
Rest parameters
Classes
Collections
Modules
Destructuring
Promises
Generators
Code conversion from ES6 to ES5 with Babel

Appendix B. Web Components
Shadow DOM
Templates
Custom Elements
HTML Imports
Using Web Components in Angular
Using Polymer elements

If you want to develop Web applications, you’ll need to learn JavaScript. But writing code in JavaScript (at least in its ECMAScript 5 incarnation) is non-productive. You need to pick up a one of the JavaScript frameworks, because:

they make you more productive
will deal with cross-browser compatibility and make the application more structured
may include reusable components
lower the amount of manually written code.

JavaScript market offers multiple frameworks and libraries. While frameworks expect you to programs using well defined ruleswithin a certain code structure, libraries just offer reusable components a la cart.

In turn, frameworks can be categorized as feature complete (rigid app structure, intrusive, rich GUI components, tooling) and lightweight (MVC + Binding + Routing) .

Ext JS, YUI, and Dojo represent feature-complete frameworks. AngularJS, Backbone.js, and Ember are examples of lightweight frameworks. After years of experimenting with different frameworks and libraries we decided to stick with hugely popular AngularJS by Google.

I work in a Java shop, and one of my responsibilities is to create an conduct trainings (both internal and external). Several years ago I started to work with our engineers on the curriculum introducing AngularJS to an enterprise Java developer.

The learning curve of AngularJS is not too steep for Java developers, who understand the concept of containers, dependency injections, callbacks. They must become proficient with JavaScript with its functions, closures and other good stuff.

But equally important is to be familiar with todays tooling of a productive Web developer. Here’s a short list of tools that JavaScript developers use today:

npm – node package manager used for installing and managing development tools
yeoman – a scaffolding tool used to generate the initial structure of an application
bower – package manager for application dependencies
grunt – a build automation tool
A JavaScript testing framework

The next decision to make is how to communicate with the Java backend. Forget about JSP, servlets, and JSFs. Preparing HTML in your Java code is out of fashion. A Java server exchanges the JSON-formatted data with a single-page HTML/JavaScript front end, which use either AJAX techniques (old) or WebSocket protocol (new).

On the Java side we like to use such tried and true technologies as RESTful Web service and Java Messaging API.

When we hire a AngularJS/Java developer, we expect him to be familiar with at least 90% of all the above buzzwords. Finding such skilled software engineers may be difficult, so we’ve created a training program to prepare such a person.

By now, we’ve taught and fine-tuned this training class multiple times. The latest online version of this class consists of seven weekly training sessions (3.5 hours each) and seven consultations (from 30 to 60 min each). Programmers learn and gradually apply all of the above tools and techniques while working on the Online Auction application that has the following architecture:

We have a great feedback from people who have completed this training. But everyone says it’s challenging. And it should be. Back in the nineties a person who knew one of the programming languages plus SQL could relatively easy get a well paid job. Not anymore.