"ngEurope: about AngularJS 1.3, new router and the future 2.0"
Being passionate about AngularJS, me and two fellow JDriven colleagues visited the ngEurope conference. The amount of presentations during ngEurope was somewhat overwhelming, especially during the mornings without any scheduled break. Good thing I made some notes, that the slides are already available on-line and that someone published quite detailed notes for all sessions.
Without all this I might simply have forgotten about some very interesting and relevant details. During ngEurope there was a all lot of attention for the just released 1.3 version of AngularJS and the coming 2.0 release.
Angular 1.3
The latest AngularJS 1.3 release features some great performance improvements
(3.5x faster digest and 4.4x faster DOM manipulation) and much less pressure on
the garbage collector (GC). However in order to achieve this the AngularJS team
did decide drop the support for Internet Explorer 8 (which is default IE version
on Windows 7). To allow for even more (optional) speed improvement one time (one
way) binding support has been added. Using one time binding no
$watch will be registered for the binding; typically you would use one time bindings to speed up rendering the elements of ngRepeat. Additionally a lot of improvements are done on the ngModel directive. First of all a $validators
pipeline had been introduced as an alternative to invoking $setValidity
from a
parser / formatter function. Which also fixes the "input not showing invalid
model values” bug ( #1422).
Yet another great improvement are the new async validators that allows for
(asynchronous) model validation on the back-end. The ngModel directive is now
accompanied by the ngModelOptions directive that allows you to configure (the
controller of) the ngModel directive. We now can specify when we want the model
value to be updated. For instance after a short delay (a so called debounce) or
on blur (i.e. when focussing another field). And using ngModelOptions we can now
configure the usage of (jQuery) style getter / setter function on our model
(instead of using plain data properties). Using ngMessages (multiple different)
error messages can now be shown much easier in a switch–case like style for a
form element. Besides preformance- and ngModel (related) improvements AngularJS
also features some other noteworthy features:
- composable SVG's: it's now possible to directly use SVG as a template of a
directive by additionally specifying
templateNamespace:'svg'
in your directive declaration - allOrNothing: certain expressions (i.e.
{{user.id}}
in<img ng-src="users/{{user.id}}/avatar.png">
) will only be rendered when completely available (i.e. preventing unneccessary additional image requests) - $watchGroup: $watch for more than one property
- strictDI: checks during bootstrap if all components are properly annotated for minification; this can be enabled by adding the strict-di HTML attribute to the ng-app attribute or using the angular.bootstrap function (that could also be used from a Jasmine test)
- ngAria: new module to more easily embed Accessible RIA (Rich Internet Applications) in your AngularJS application
The New Router
For the future AngularJS 2.0 a new router has been developed that is currently also being backported to Angular 1.3. Similar to Angular UI Router the new router is also based on (nestable) states. But also brings new features like dynamic loading and child apps support allowing a single app router to be splitted into sub routers. Also it possible to add lifecycle hooks on navigating to or from a router state (i.e. displaying a message in case of unsaved changes).
AngularJS 2.0
(day 1 keynote slides, AtScript slides and Angular 2.0 Core slides) During
ngEurope the future AngularJS version 2.0 did receive quite some attention.
Although version AngularJS 2.0 is still in its design phase (with basically only
really the injector and router in place)... one thing is for sure... version 2.0
of AngularJS will differ hugely from its current (1.3) AngularJS version. First
of all the default 'language' for developing an AngularJS 2.0 applications is no
longer ECMAScript5. Instead the future 2.0 of AngularJS will be developed in
AtScript which is superset of the ECMAScript6 (final draft planned for
januari 2015) with a whole lot of extras like types (checked during compile
times as runtime check), Java-like annotations, generics and introspection
(somewhat similar to reflection in Java). Since AtScript is currently not
supported by any browser (even ECMAScript6 isn't currently 100% supported), the
Traceur transpiler is used to generate ECMAScript5 from AtScript. Although
AtScript is the default way to developed AngularJS 2.0 application, it's also
fully possible to still use ECMAScript5 (although it's kind of verbose). A big
disadvantage of using AtScript is that is breaks with your existing toolchain.
Some tooling (JSHint, ESHint) currently not even (completely) supports the
upcoming EcmaScript6, let alone AtScript (being somewhat tied to Angular 2.0)
support might never be added for certain tooling (forcing you to stop using the
tool or find a replacement). Off course one could still use ECMAScript5 to
develop Angular 2.0 application, but personally I find this approach to verbose
and also somewhat error prone. Beside AtScript a whole lot of other huge changes
are made in AngularJS. First of all (although not an extreme change) the
template notation is somewhat change. Instead of using custom attributes (i.e.
ng-click) we now using (round) brackets to attach event listeners (i.e.
<button (click)="addTodo()">
). Additional the names of custom attributes
directives (i.e. ng-repeat) are now place between square brackets to easily
differentiate between normal HTML and custom attributes. Way more extreme
changes are made in the way you write your AngularJS code. Controllers, the
(dreadful) Directive Definition Object ("DDO"), $scope
, angular.module
and
jqLite are all being eliminated. Instead of the cumbersome traditional way of
declaring a directive one can now simply (Java-style) annotate a class with
either @TemplateDirective
(i.e. ngRepeat) or @DecoratorDirective
(i.e.
ngClass). And instead of using a controller one could uses a
@ComponentDirective
annotated class. Due to the usage of @ComponentDirective
(and @TemplateDirective
) the $scope
is no longer needed (and therefore is
removed). Since AngularJS 2.0 will only support the most recent (evergreen)
browsers (be prepared to so say goodbye to IE9) jqLite is no longer needed. By
using native DOM in 2.0 the performance can be improved even further; but
although AngularJS 2.0 won't be use jqLite (not jQuery) you can still use jQuery
in your own code (although I personally would not suggest that). Instead of
using AngularJS (dependency injection) modules (created through
angular.module
) 2.0 will use ECMAScript6 modules and the types of constructor
arguments to specify which service to inject (as opposed to AngularJS 1.x which
used the name of the argument). This approach is very similar to how the Spring
Framework does injection for Java application and very neatly integrates with
the usage of ECMAScript6 modules. During the "Angular 2.0 Core" presentation a
2.0 implementation of a TabContainer and TabPane directive was shown. Instead of
using a require
(like in a Angular 1.x directive declaration) the TabContainer
we can now simply be injected by adding tabContainer: TabContainer
to the
constructor of TabPane. Additionally the TabContainer can now (instead of a
manual query of its TabPane children) simply add tabs: Query<TabPane>
(using
generics) to inject the TabPane's as a constructor argument.
References
- Angular 1.3 by Jeff Cross & Brian Ford (slides)
- The New Router by Rob Eisenberg (slides)
- Keynote (of day 2) on AtScript by Miško Hevery (slides video)
- Angular 2.0 Core by Igor Minar & Tobias Bosch (slides video)
- ES6 in Angular 2.0 Erik Arvidsson & Vojta Jína (slides video)
- ng-europe, Angular 1.3, and beyond: blog post of the AngularJS team as wrap up of ngEurope about AngularJS 1.3 and the future 2.0
- Finally... links to almost all slides can be found here