Tech highlights of AngularConnect 2015

This week I attended AngularConnect at the ExCel centre in London, the largest Angular Conference in the whole history of the Universe!

AngularJS is a front-end framework, a tool for building structured and well organised applications using the JavaScript programming language.

At Deeson, we have been using AngularJS alongside Drupal for over a year now for some of our largest projects. I recently delivered a talk about this at this year's European DrupalCon in Barcelona (you can view my talk online here).

Overview

AngularJS version 1 is the current stable release version, but AngularJS version 2 has just become ready for beta testing.

The conference focused on the new tools and techniques which will be provided by AngularJS 2 (though Google have given assurances that AngularJS 1 will be supported for a long while yet).

The opening keynote threw up some interesting statistics, for instance there are over 1.1 million developers building web applications with AngularJS. JavaScript can be found almost everywhere now. It is being used to develop user interfaces on many devices, not just websites, but also native mobile applications and apps built for devices such as TVs. As the main backers, Google make extensive use of AngularJS, using it for many of their highest profile applications. For example, the Chromecast user interface is built with AngularJS.

Microsoft also had a large presence at the conference. They have an investment in AngularJS as well, with Microsoft office allowing plugins written in AngularJS. They also have a yo generator to start you with an office plugin (more information can be found at dev.office.com).

If you are interested in what can be done with AngularJS, check out the website madewithangular which is the best showcase site for AngularJS.

Angular 2

Here are my key takeaways about the purpose and state of Angular 2.

• Angular 2 is focused on ease of use and speed. It's 3 times faster to get to first view, and initial download is smaller.
• New router will support nested routes, parallel routes and modals
• Better internationalisation - external services for string localisation
• Better, slicker and easier animations
• Memory efficiency allows massive data sets to be used and 'crunched'
• Support for over 100 JavaScript language flavours:
  • ES5 is the standard in the browser and no compiler is needed.
  • ES6 requires to be compiled but has no types
  • TypeScript includes types and so allows good IDE integration, refactoring.
  • Dart is not JavaScript at all - more like Java.
• Excellent support for native application building on mobile through a Google initiative called Material Design. Angular Material is a reference implementation of the Material Design principles.
• Angular Universal provides fast execution and small data packets for low bandwidth usage
• Web workers will allow angular and angular modules to run in their own threads which gives a slick user interface even if a lot of processing is going on.
• Angular 2 allows the ability to work without a DOM (render other places than the DOM) - this allows native apps to be developed (for example mobile apps or TV apps) using a common set of tools. Write once and deploy everywhere using NativeScript
• ngUpgrade is a library which can be added to an angular 1 application which allows incremental migration of code to angular 2

ES6 and TypeScript

Most JavaScript developers will be writing in a version of JavaScript known as ES5 which is the standard JavaScript executed by web browsers. JavaScript ES5 has some noticeable features missing from it, which makes developing large applications with it more difficult. These are features which improve developers' productivity as they work with programming tools such as IDEs to make it quicker to write code and find bugs.

There are other flavours of JavaScript out there and the conference covered both ES6 and TypeScript. Both offer improved productivity tooling, but TypeScript offers the additional feature of type hinting, a technique which allows the developer to be more explicit in what the variables in their code are and so a good IDE (such as WebStorm) can identify bugs before they get to production. The disadvantage is that code written in anything but ES5 must be translated (or compiled) into ES5 before it is released to the web which can slow the release process.

Web Workers

This talk had what appeared to be the largest turnout of the conference. Jason Teplitz at Google delivered a session about how they have worked on getting web worker support into Angular2. This is multi-processing for JavaScript allowing code to run in more than one process. Most JavaScript applications currently runs in a single thread, meaning that the program can only do one thing at a time. The most obvious example is that if an application is doing any amount of data crunching, then it has no spare capacity to update the user interface and so the application appears to hang which gives the user a bad experience.

Putting this into numbers, it is thought that a good application gives the perfect user experience if it is able to update its display at 60 frames per second (FPS). This gives you 16ms between frames for any single operation - and if you manipulate the DOM during that time, the browser will need 8ms to parse the changes. So if operations go over 16ms, you will start to drop frames. An operation which takes 2 seconds will cause a very noticeable pause in the application and anything over about 10 seconds will make the browser think your application has hung and ask the user if they want to give up on you.

Multi-processing looks like it solves a lot of issues but has numerous challenges and is hard for developers who have only previously written signle threaded applications to get their head around. However, for large applications, understanding this feature is a must.

Extreme Programming

There were a number of soft skills talks at the conference as well. I particularly enjoyed one from Rachel Davies and Vikki Read about the art of Extreme Programming (XP). They were able to achieve a 2 hour feature release to production cycle and had no staging or testing environments. All code is checked into the master branch and released straight to production. At first glance this seemed like a step backwards to the bad practices of the old days where unstable code was often released to production and users were left to test code.

However, the true Extreme Programmers have a number of safe guards in place to protect against problems:

1. Pair programming - all code with a team is developed in pairs. 1 drives, the other navigates. There are many advantages to this approach, but the bottom line is that every line of code has 2 people's input and scrutiny.
2. Mob programming - like pair programming but with 1 driver and up to 3 navigators. This is used to develop code at the interface between teams (e.g. aspects of an API).
3. Feature switches - New features will always have switches to completely hide them on initial deployment to production. The switches can be turned on allowing increasingly larger groups access to the new feature. This allows safe testing in the production environment.
4. Automated testing - A very high reliance is placed on automated tests. All code is covered by tests and tests are written before and with the new feature code. No code is deployed to production which has no test or which fails testing.

As with many of these seemingly magical, high productivity processes, the teams which do best with them are internal product development teams supporting a single product. It is unclear whether this approach could be translated to an agency setting with many products and many client models. However, there are many aspects of this which I will be taking away and expanding on over the next year.

Conclusion

AngularConnect was a high energy conference with many relevant technical and soft skill talks. We'll definetly be returning next year to catch up on the latest state of AngularJS and the JavaScript world.