Friday, 23 October, 2015 UTC
Summary
AngularConnect 2015 is over, and what a conference it was! With two tracks of talks, two tracks of Q&A, one track of unconference talks, and countless hallway conversations, it was one of the biggest tech conferences I’ve ever attended. At this point my head is spinning from everything I’ve learned, and it’ll take some time to digest it all.
I took my headphones so that I can watch the live stream of one track while I'm at the other track, problem solved! #angularconnect— Olivier Combe (@OCombe) October 20, 2015
If there’s one major takeaway I felt this conference had, it’s that the community’s suspicion of Angular 2 has largely subsided. At this point people pretty much know what Angular 2 will look like and how they’ll be able to migrate their apps to it. Most of the discussion – both in the talks and in the hallways – had shifted to all the things we’ll now be able to do with Angular 2: What existing problems it solves, and what completely new things it makes available.
Here’s a subjective summary of the conference, complete with links to the video recordings of all my conference highlights. Some of these I witnessed live, and some I’ve caught up with later from the Youtube videos.
Better Ways To Get Things Done
#AngularConnect Angular 2 is much faster now! pic.twitter.com/POj2mVNNhE— Gonto (@mgonto) October 20, 2015
Much of Angular 2 and the tooling around it is about solving existing problems: Finding more streamlined and focused ways to build the kinds of apps we’re already building. For us as application developers that translates to higher productivity and simpler code. Here are a few specific ways I saw these kinds of issues being addressed:
Async
Async pipes are awesome! Handles observables subscribe abs un subscribe for you #AngularConnect pic.twitter.com/rBtsbxWDL3— Gonto (@mgonto) October 20, 2015
Asynchrony is one of the biggest sources of complexity in front-end apps. Since talking to APIs and services over the network is asynchronous, and this isn’t going to change, we need good tools for working with async code.
Angular 1 has Promises, which provide some effective ways to escape callback hell. Since Promises are now built into the language in ES6, they’re there for us to use in Angular 2 as well, at least for apps that are written in ES6 or TypeScript.
Wow, didn't realize how deep RxJS goes in Angular 2. Awesome presentation from @jeffbcross at #angularconnect! https://t.co/lskWw05fN4— λ Calrissian (@mattpodwysocki) October 20, 2015
But Angular 2 also brings in a new concurrency primitive, called Observables. It does this by shipping with the RxJS library included. Observables are deeply integrated to Angular 2 APIs, including the HTTP service and a new feature called Pipes, that will replace filters. Jeff Cross and Rob Wormald talked about how asynchronous data flows in Angular 2 work, and Ben Lesh talked about RxJS itself in detail, including the problems it solves. He also talked about some of the drawbacks with RxJS.
Template Transforms
Alex Rickabaugh demonstrated an interesting experimental feature called template transforms. It allows template code to be transformed as a compilation step, and it allows third-party libraries to add their own transforms to the mix. That means libraries can add syntatic sugar to templates. Alex showed an example that allows you to use Falcor‘s asynchronous syntax right in your template expressions.
When I saw that, I immediately thought of another use case, which is using Immutable data structures. Since Immutable Lists and Maps can’t be accessed like regular JavaScript objects and arrays, it is sometimes annoying to use them. An expression extension could make most of the extra boilerplate go away.
Routing
Router link directive dsl explained in a single slide by @briantford at #Angularconnect pic.twitter.com/MipeydoXJg— Pascal Precht ʕ•̫͡•ʔ (@PascalPrecht) October 20, 2015
The built-in router in Angular has always been pretty limited. While it gets the job done for simple applications, most people who have needed to do anything more advanced have gone for third-party libraries like the ui-router.
In Angular 2, things will be very different. In his talk, Brian Ford introduced the component router, which will be the default routing solution for Angular 2. It’ll let us route directly to components instead of bare templates and controllers as we do now. It’ll also let us construct links to routes within the app without having to construct the URL path segment strings manually.
Perhaps most importantly, the component router goes beyond the “one route per URL” limitation by adding something called auxiliary routes. This is really important for UIs that consist of several independent components that may have independent histories.
The component router will also be made available for Angular 1, and will reach a stable release when Angular 2 itself does.
Tooling
The Angular development experience is of course not only about the core framework itself, but also about the tools around it. There were many talks about tooling in the conference, which shows that there community is really focused on this.
TypeScript will play a big part in Angular 2: While you won’t have to use it if you don’t want to, it is certainly the language most strongly endorsed by the Angular team. It is also likely going to be the most popular language choice in the community.
Whats new in TypeScript? #AngularConnect pic.twitter.com/0A8vvXYo2b— Minko Gechev (@mgechev) October 20, 2015
The reasons for using TypeScript are not all about static type checking. It’s perhaps even more about the added tool support. In the conference we had two TypeScript talks: One about new TypeScript features by Bill Ticehurst, and one specifically about TypeScript tooling by Martin Probst and Alex Eagle. In both we saw what TypeScript brings to the table in terms of productivity: You get immediate error detection right in your editor. You get intelligent auto-complection. And you get inline documentation, that lets you explore APIs without leaving the editor.
All of this reminded me of my days as a Java developer, when these kinds of features were taken for granted. I haven’t dared to wish for such features when doing front-end work, but I certainly welcome them now that they’re here.
Having tool support for writing and refactoring code is great, but there’s also another class of tasks where tooling is needed. This is for the kind of stuff you usually do from the command line: Starting new projects, creating new components, building your project, running development servers, and so on. We do of course have existing solutions for all of these things, which we get by combining things like Gulp, Yeoman, and Webpack. But there hasn’t really been an integrated tool for Angular so far, and this has been a source of envy for people familar with tools like ember-cli.
Watching @IgorMinar demo @angularjs generator in Visual Studio @code editor at #angularconnect keynote pic.twitter.com/QzsEvfpspB— Jeremy Thake (@jthake) October 20, 2015
In the keynote, Igor Minar presented the angular-cli project, which brings Ember style integrated command line tooling Angular 2. It’s based on ember-cli, and installs an
ng executable with which you can scaffold applications and application components, manage dependencies, and launch development servers. While it’s still in an early alpha stage, it looked pretty damn good.A third category of development tools we use every day are the ones that run in-browser. Angular’s contribution to this has been Batarang, which extends the Chrome Dev Tools with Angular specific inspection capabilities.
With Angular 2, there’s going to be a new version of Batarang, (at least currently) called Batarangle. Yuri Takhteyev and Igor Krivanov presented some of the features and roadmap of Batarangle, which looks to be very much inspired by React Dev Tools. It adds a component inspector to Chrome Dev tools, which lets you visualize Angular 2 component trees and inspect individual components and the properties and state that they hold.
Doing Completely New Things
Our own @sebawita explaining the bigger picture of integration between NativeScript and @angularjs #AngularConnect pic.twitter.com/UeYJ8kN5rn— NativeScript (@nativescript) October 21, 2015
While removing existing pain points is necessary and important, some of the most exciting talks in the conference were about things we simply haven’t been able to do in Angular before. Here are some of the things that got people buzzing.
Web Workers
A ton of interest for web workers. Lots of apps have been crashing, I'm sure. #angularconnect pic.twitter.com/lxmb0ePTf7— Maya Nedeljkovich (@maya_ndljk) October 21, 2015
“Don’t block the UI thread” is ancient wisdom from the world of desktop application development. It hasn’t really applied to web apps because in those it hasn’t been possible to get work done anywhere except the UI thread. Web Workers are a standard solution to this, allowing computation to run in an independent background “thread”.
The problem is that using Web Workers in existing apps is usually not a trivial task, especially if there’s no framework support: Because there’s no DOM access or shared memory and all communication is asynchronous, you can’t just put all your code in a Web Worker. Your architecture needs to support it.
Angular 2 will bring that support. It’ll be able to run most of your application code in a Web Worker, internally managing a rendering pipeline that sends updates to the UI thread. Jason Teplitz introduced the Web Worker support in Angular in an entertaining and well-delivered talk. This was one of the highlights of the conference for me.
Universal Angular Apps
Support for Universal applications is important for many people in situations where page load times make a big diffence, or where you need the SEO characteristics of static pages.
@bahmutov: Jeff and Patrick started project to show case DI/universal js @jeffwhelpley @gdi2290 #AngularConnect pic.twitter.com/RHOqUa1VNy— Gleb Bahmutov (@bahmutov) October 20, 2015
The React community has had a story for this for a while now. In Angular, not so much. Angular 1 just isn’t geared for full-stack usage in any shape or form.
If anyone wants to play with the Angular 2 Universal starter repo here's a link https://t.co/r2NRhHdT0x #AngularConnect #Angular2— PatrickJS (@gdi2290) October 20, 2015
This is also going to change in Angular 2. It can be run on a Node.js server, and can be used as a full-stack solution, as was demonstrated by Jeff Whelpley and Patrick Stapleton. When you run Angular 2 on the server, you can have it render to a string, which you then send to your user with the initial page load. This means an insanely fast user experience during those precious moments when the user interacts with your app for the first time.
Animation
ngAnimate 1.x has been great for bringing CSS animation and transition support to Angular apps as a first-class citizen. It’s remarkable how easy animations are to work with in Angular apps.
There have been some limitations in ngAnimate, particularly with regard to orchestration and sequencing. Since ngAnimate is essentially just a layer on top of CSS animations and transitions, it has to live by the limitations of CSS where the support for orchestration and sequencing just isn’t very good.
In his talk, Matias Niemelä showed how they’re getting around this in ngAnimate 2, by eschewing the CSS hook based approach of ngAnimate 1 in favor of a programmatic JavaScript API, based on plain old function composition.
In ngAnimate 2 you’ll be able to jump to a specific moment during the animation #AngularConnect— Michał Gołębiowski (@m_gol) October 20, 2015
The talk also included one of the greatest demos of the whole conference: Matias used a scrubbing control to “time travel” across an animation forward and backward. This is possible now because animations are programmatically controlled. Just think what that can do to testing and debugging your animations.
Organizing Code: Components & Architectures
Apart from all the good stuff coming from the Angular team and other open source contributors, there were also a number of talks in the conference about how we, as application developers can organize our own code in better ways. A new framework like Angular 2 means some fresh thinking is needed here.
Components
Angular 2 is going to be all about components, and there was much discussion about them: How to create them, how to use them, and how to organize them.
One big question will be the transition from Angular 1 to Angular 2, and the fact that this entails componentizing all of your UI code. Brad Green touched on this in the keynote, by highlighting the community-driven ng-forward project, which allows you to write Angular 1 applications in the style of Angular 2, with near-identical APIs. This will probably be a good stepping stone for many people who want to bring their apps to Angular 2. I’ve also recently written about refactoring existing code to component style, which I think of as a kind of prerequisite for ng-forward.
My favorite #angularconnect talk https://t.co/12pF9sRG3M by @sfroestl & @LFDM86. Great stuff on smart/dumb components, data flow, scaling up— Tero Parviainen (@teropa) October 22, 2015
Sooner or later, you’re going to have to start thinking about how you organize larger-scale component architectures. In what was possibly my favorite talk of the conference, Sebastian Fröstl and Gernot Hoeflechner talked about their experiences on this. Not all components are created equal, and it is useful to distinguish between so-called Smart and Dumb components. It is also easy to get into trouble with the data flow orchestration in large apps, where you can easily end up with a lot of boilerplate just passing data and actions around. Sebastin and Gernot shared some techniques they’re using to solve these issues.
Server Interaction
Orchestrating server interaction is one of the things that often causes a lot of complexity in applications. RxJS will bring a lot to the table here especially when it comes to dealing with the asynchronous aspects of it, as discussed above. I also have a feeling that Falcor and GraphQL will have a role to play in Angular 2 applications.
May the force be with you #AngularConnect https://t.co/aIi3NsRb2r. My talk about Models and Angular 2 pic.twitter.com/qvT2alTYbR— Gonto (@mgonto) October 21, 2015
On Wednesday morning there were two interesting talks that also touched on dealing with the complexity that comes with server calls. Gonto talked about models and emphasizing object-orientation when modeling data. As part of it, he talked about an active record influenced server integration model. Minko Gechev, in turn, talked about aspect-oriented programming, and abstracting cross-cutting concerns like caching to reusable modules.
Protractor Patterns
Protractor styleguide: https://t.co/02ExVfPdS8 #angularconnect— AngularConnect (@AngularConnect) October 20, 2015
It’s not just production code that needs architectural care and attention. Test code needs it too, and people often underestimate the cost of automated E2E testing when it’s not done well. Carmen Popoviciu and Andres Dominguez talked about patterns and antipatterns in Protractor test code. As someone who has tried and failed to come up with a robust and maintainable E2E test suite several times over the years, I really appreciated the experience they had to share about it.
Learning and Sharing
Want to help Angular 2 release sooner? You or someone you know can contribute to the release of #Angular2 https://t.co/YG96KxIQep #AngularJS— PatrickJS (@gdi2290) October 21, 2015
With all the changes happening in Angular, and in JavaScript in general, it’s also good to take a step back every now and again and think about the learning process itself. This includes the learning process of both yourself and of the people you’re working with. I was happy to hear two really good talks about this in the conference.
So I can't wait to hear ngDarwinAward by @scotups in a few weeks at @AngularConnect. Scott is a great speaker. I twill be great, I am sure.— Aaron Frost (@js_dev) October 6, 2015
Scott Moss gave an entertaining talk sharing mistakes he’s made along the way when learning Angular. We’re all always learning stuff and getting things wrong is an everyday occurrence for all of us. It’s great to hear someone talk about this in a constructive way.
Aimee Knight shared her story of becoming a programmer, and along with it a lot of practical wisdom both for junior developers and the senior developers that work with them. There’s a lot to gain on both sides of such working relationships, but there are things you need to be aware of if you want to get the most of out of them.
History Lessons
While most of the conference was filled with forward-looking talks about things to come, there were a couple of important history lessons in the mix as well. It is always good to educate yourself on where the tools we use originate from, so this was a nice addition to the programme.
Front row to the @simpulton and @shai_reznik show #angularconnect pic.twitter.com/C9u1jjkjLh— Adam Bradley (@adamdbradley) October 20, 2015
Shai Reznik, in his talk with Lukas Ruebbelke, revealed that JavaScript is actually controlled by an ultra-secret, shadowy organization that traces back to Smalltalk. It’s called TC39, which is short for Total Control 39. I for one, was not aware of the full extent of this conspiracy, but will instruct my co-workers to stock up on the tin foil once I get back to the office.
Brian Ford, in his router talk, shed some light on the origins of Angular itself: He confirmed that it is in fact extraterrestrial technology. I’m sure this is something that has crossed most people’s minds at some point. It’s good to finally have this confirmed from a trustworthy source.
#AngularConnect is coming to you live from London! pic.twitter.com/Ofq6I3No6v— AngularConnect (@AngularConnect) October 20, 2015
The post AngularConnect 2015: A Highlights Tour appeared first on AngularClass.