AngularConnect: Summary and Analysis

AngularConnect, the largest Angular conference to date, has just taken place in London. Here is a summary based on what I learned and what I found most interesting. Since it was a two-track event, I only saw half the talks, so for the full picture, watch the sessions yourself on YouTube.

Many of you just want a quick rundown on the key points, so the first section of this post is just that - “the meat”, albeit in bite-sized pieces (think pork scratchings or jerky). After that, if you like you can read my thoughts and analysis and then just a little more on the conference experience itself. Enjoy!

“The Meat”

I’ve tried to organise this section into topics, so you can find the item you are interested in more easily (spoiler: no announcements of the Angular2 release date. Stop looking). Related resources are listed at the end in [brackets]. Note: this is all correct as far as my note-taking and memory allow. Corrections and clarifications are welcome.

Angular 2

• Release: In the keynote, Brad said “we’re really close” to beta, but not quite there yet. Specifically, the team wants to finish the docs and resolve the outstanding P1 (urgent) issues before announcing a beta release. [release status section of keynote slides, keynote video, current status of open p1 issues on Github]
• Browser Support: Angular2 will support IE9 + [slide from keynote]
• Performance: Performance is a huge area of focus for Angular2. Currently it is performing on average 4.2x faster than 1.x (yeah yeah, stats - see the keynote for more context). Template compilation will become a build step rather than a run-time step to further speed things up (see: CLI, deeper dive below). Looking extremely impressive so far. [section on perf from keynote slides]
• Architecture: Angular2 uses a separated compile/render architecture, which means it is able to target different rendering contexts, similar to how React does things. This enables things like server-side rendering, native mobile development (see NativeScript stuff below), and more. [video on full-stack Angular2, slide from keynote]
• Traction: Internally, Google are already porting apps to Angular2. Significantly, the Google Adwords app - with hundreds of developers and millions of lines of code - is amongst them.
• CLI: The team are working on a command-line interface (CLI) for scaffolding Angular2 apps. In a demo, exactly two commands were needed to go from nothing to a fully working scaffolding, with defaults and transpiling all working. Another command creates a new component with all associated files. See the keynote for a demo. [keynote video cli demo, angular-cli repo]
• Testing: The testing situation already looks very promising. Julie Ralph (creator of Protractor) demonstrated a module that wraps Jasmine functions (it(), describe() etc.) to make them work with Angular2, as well as added helpers such as inject() to leverage the Angular2 dependency injection system. [video of Julie’s talk]
• Router: The new router, a.k.a. “Component Router”, looks great. It can do everything that ui-router can do and more. The most exciting feature for me is “auxiliary routes”, which allow you to set up and navigate multiple independent routes in a single app (check out the video for a demo). Per Brian Ford, the router will follow the Angular2 release (i.e. it will go stable when Angular2 does), and the full functionality is also being developed for Angular 1.x. [video of Brian’s talk on the router]
• Learning / Getting started: In their talk, Naomi Black and Rado Kirov build an app with Angular2. This is the best introduction I have yet seen. You get to see a live build almost from scratch with running commentary about the what and the why for each step. It also seems like a fair deal of effort is being invested in docs and partners such as egghead.io to make the developer experience happier than the early Angular 1 days. [video of Naomi & Rado’s talk, example application, latest Angular2 dev guide]
• RxJS: Angular2 is build on top of the RxJS reactive programming library. What this means is that it will expose reactive observables through the built-in APIs. For example, the http service will return an observable stream rather than a promise, as will UI events. I spoke to Brad Green about this and it seems the idea is to provide observables wherever Angular 1.x now provides promises, plus several other places. [Andre Staltz’s intro to reactive programming article, video of talk “Angular2 Data Flow” , Ben Lesh’s talk on RxJS]
• Module System: Angular2 uses ES2015 modules. In his talk, Pawel Kozlowski takes a look at the state of current module loaders. The upshot is that currently you will see System.js being used in most of the Angular2 seed projects and examples, but there is no hard commitment by the Angular team to a specific module loading strategy. This will likely become more fixed as the CLI project develops. [video of Pawel’s talk]
• Deeper Dive: Tobias Bosch and Victor Savkin cover some more advanced concepts which set Angular2 apart from 1.x. Their talk covers such things as the use of RxJS event streams; pre-compilation of templates; a React-like well-defined component life-cycle with hooks; and the use of expressive primitives provided by Angular2 which can vastly simplify creation of complex components. [Better Concepts, Less Code talk video]

TypeScript

• General: Very strong TypeScript presence throughout the conf. Basically all code examples were done in TS. It is still the case that Angular2 does not require TS - you can use any type of JS or compile-to-JS language you like.
• New Stuff: Bill Ticehurst from Microsoft introduced the lastest stuff that either landed in 1.6, or is coming up, including JSX support, generators and async/await. Also automatic resolution of d.ts (ambient type definitions) without the need for explicit references or “typings” folder or tsd. [What’s New In TypeScript video, TypeScript blog: 1.6 announcement]
• Learning: For those new to TypeScript, who might be wondering if it is worth it (my opinion: DO IT.), the talk by Martin Probst and Alex Eagle does a great job of showing a from-scratch set-up of a TypeScript project, with explanations along of the way of each step. [TypeScript tooling video]

Angular 1.x

• New Stuff: A couple of new features just landed in the 1.5 branch:
  • Multi-slot transclusion. This allows a transcluding directive to have multiple “slots” to place different content. Looks like it could radically simplify a whole class of parent-child-type directives. [docs for multi-slot transclusion]
  • Simplified component definitions for directives. There is a new way to declare directives which aims to simplify and bake-in all the best-practices that have evolved over time. As of this writing the docs for this feature haven’t been merged, but you can see the commit here: [module#component commit]
• Upgrading: The upgrading situation is coming together pretty nicely:
  • A community-driven project, ng-forward, aims to enable the use of Angular2 conventions and styles (TypeScript, decorators etc.) on 1.x apps. It was suggested that this could be used in conjunction with the ng-upgrade (see below). [ng-forward project repo]
  • The Angular team are working on ng-upgrade, which will allow an incremental upgrade via an inter-operability layer. This will allow ng1 components to consume ng2 services and vice-versa. [Angular 1.5 and beyond talk video, simple example of how ng-upgrade will work]
• Roadmap: Brad Green re-iterated that Angular 1.x support will continue as long as it is still widely needed. He mentioned that the team track the stats between angularjs.org (for ng1.x docs) and angular.io (for ng2 docs) as an indicator of community adoption. Some specific areas still under active development for Angular 1.x - Component Router; better internationalization & localization; improved animations. [Angular 1 section of keynote slides]

Other Notable Stuff

• NativeScript: Since Angular2 uses a modular compilation/rendering architecture, render targets other than the browser DOM will be supported. One very cool use of this was demonstrated by the guys from NativeScript. In short, you will be able to develop real, native mobile apps (not webview-based like Ionic) which can use the native APIs directly with Angular2. [video of the NativeScript talk]
• Ionic 2: Ionic 2 is built on Angular2 and has just been released as a public preview. [Ionic 2 website]
• Angular Material: The first release candidate (RC1) for Angular Material 1.0 was just released. A Material Design library is also under very early development for Angular2. [Angular Material website, Angular Material talk video]

My 2 Pence

I went into this conference with two main questions: “Should I start my next project with Angular2?" and “What should I do with my existing Angular 1.x apps?". My answers to these are (tentatively) - yes, I’m going to give it a go, with the expectation that I may have to roll my sleeves up a little and maybe even contribute to the development of the framework; and to keep updating my 1.x apps - they already work, and I should be able to incrementally improve performance and features as development of the 1.x branch continues.

As a fairly long-time user of Angular, I’m pretty familiar with both its strengths and weaknesses. I’ve recently been playing with React and reactive programming - there is much to like about the innovations that both of these technologies offer. So I am pleased to see that the Angular team is incorporating many great ideas popularized by React (one-way data flow, component-tree architecture) and fully embracing the reactive approach by incorporating RxJS.

The tombstone-induced mass hysteria that swept (parts of) the Angular community a year ago has proven to be unjustified (as is usually the case with mass-hysterias). Angular 1.x will be around for a long time to come; the upgrade path seems well thought-out; the traction that Angular2 is gaining internally within Google and with partners is encouraging. Angular developers - pull your resumé out of the bin and iron it.

TypeScript looks set to become huge. I use it with great success in my Angular 1.x projects, and would be extremely reluctant to even consider doing a large-scale JS project without it now. With JSX support just added, I think it’ll become the go-to language for large-scale front-end development.

The Conference

Lastly, a few words on the conference itself. I had a chance to speak with Pete Bacon Darwin, one of the organisers and also the lead developer of Angular 1. He explained that the “connect” in “AngularConnect” represented a larger goal than just “do some talks about Angular”. From my experience, they succeeded in that goal. As well as meeting old friends and making new ones, I had a chance to talk with members of the Angular team who seem to be a pretty uniformly cool and open bunch of people. I even managed to get a meteor issue on one of my packages fixed personally by a member of the Meteor team (thanks, Uri)!

The venue, the food, the meta-conf features (hack space, chill-out room, games room), the swag, and especially the Back to the Future party were all a blast. A big thank you is due to all of you guys, to my friends old and new, and to Gentics for sending me.