By M.Chorbi - Angular Expert at SQUAD
ThengEuropeconference is one of the largest European conferences dedicated to Angular. The 2016 edition took place in Paris from October 25 to 26 and aimed to present the new featuresof Angular 2! The speakers were top-notch: the Angular Core Team at Google and experts in Angular, Typescript, Ionic, etc.
SQUAD had the opportunity to attend this two-day conference, and in this article, we offer you a review of the various topics presented.
Angular 2 – What's new?
The Angular 2 Keynote was the first presentation of the 2016 edition, given by Angular creator Miško Hevery.
After the success of the first version, AngularJS 1.x, the Core Team wanted to offer a new version that was more robust, optimized, comprehensive, and multi-device. Hence their choice, or rather necessity, to rewrite the framework and start from scratch.
Various areas have been improved in Angular 2:
- Offer a framework designed formultiple devices: whether mobile applications (hybrid with Ionic or native), desktop web applications, or even desktop applications, Angular 2 can be used.
- Organize the code by modules/components.
- Improve the performance in several respects:
- Reducerendering time, which is nowfive times fasterthanks to the redesign of the framework.
- Reduce the size of Angular applications with the introduction ofAhead-of-Time Compilation (AoT)and lazy loading (loading only what is needed).
- Improvespeedincode generationandchange detection: errors reported during compilation thanks to the use ofTypeScript (fully typed code), more readable error messages, addition of states/hooks to control change detection, etc.
- Reduce memory costs with AoT, optimized change detection, use of web workers, etc.
We can see above that Ahead-of-Time Compilation comes up several times and has contributed to improving several aspects of Angular 2's performance.
What exactly does it consist of?
This is a new build stage that can be executed upstream. It allows us to compile and parse our Angular 2 code, include dependencies and all templates and CSS files, and finally generate the code that will be sent to the browser.
With this offline compilation, the size of the code generated and sent to the browser has been significantly reduced, and there is no longer any need to send the compiler and parser to the browser; everything is done upstream.
Finally, Miško Hevery assured that Angular will continue to be optimized: there is always room for improvement.
RxJS and observables
Another topic presented at this conference is RxJS, Reactive Programming with Angular 2, and Observables.
What areObservables? They canbe likened to Promises(which we already know) with asynchronous data management. Observables areeventstreams with a success state returning values, an error state, and an end state. To do this, simply subscribe to the event and receive the information as soon as it becomes available. Unlike Promises, they are not single-use; they will continue to listen until an end event occurs.
With Angular 2, Observables are used in several Reactive APIs such as Forms, http, Async pipe, Router, etc.
An example that illustratesthe use of ObservablesisTypeahead.
Figure 1:Typeahead examplewith Observables
For typeahead, each time a change in value is detected, a call is made to retrieve the results, which are returned to the user as soon as they become available thanks to subscribe.
Also, with the switchMap method, if a new value is detected before the results of a previous call are returned, the latter is canceled and a new call is made with the latest value. This is not offered by Promises.
Angular Router
With Angular 2, a new version of the Router was introduced:Angular Router. As with ui-Router, it allows you to manage thedifferent states of the application.
Angular Router supports lazy loading: load only what we need. It uses Observables.
ngAnimate
Animations defined in components and based on states. Theyuse the Web Animations APIinstead of relying on CSS. This makes them independent of the DOM.
Currently, the Web Animations API is only supported by Chrome and Firefox, so the same applies to ngAnimate.
Safety
An unavoidable topic these days! The presentation highlightedthe XSS vulnerability, which can be considered the weak link in an application, even if security and encryption protocols are in place.
L’équipe Angular s’y intéresse depuis toujours et propose dès la première version un code « Sanitized » : tout code dangereux comme <script> sera ignoré.
By default,Angular 2 is protected from XSS vulnerabilitieswith all bindings that are "sanitized." They have proposed methods to bypass these security measures in order to be able to intentionally include a script or URL in the application. It is recommended to call these workaround methods as close as possible to the source and its validation, in order to ensure its security over time.
Migration to Angular2
With the redesign in this version of Angular, it is impossible to simply upgrade the version with a few modifications. Migrating from Angular 1.x to Angular 2 takes more time and involves considerable cost.
To make things easier, the Angular team has proposed anngUpgrade modulethat allows Angular 1.x code and Angular 2 code to coexist in the same application. This is possible thanks to the upgrade and downgrade systems for services and components.
This meansthere is no need to change all the code to Angular 2:both versions can coexist within the same application, and migration can be carried out in stages.
Angular 2 has therefore been enhanced, and we can identify several areas for improvement. The Angular team has redesigned the framework to offer several new features and make Angular 2 a platform where different modules can be included and used.
What about Widgets & Tools?
Angular CLI
It is avery powerful toolthat allows youto create and configure an Angular 2 projectvery quickly. Example: Two command lines and your HelloWorld example is ready!
No need to spend hours configuring the project and its environment—Angular CLI takes care of it.
Augury
It is aDevToolfor Angular 2 added as an extension to Chrome. Augury offers several features:
- Debugging
- Visualizationof the relationship between components
- Informationabout components
- Visualizationof the dependency hierarchy
- Router Structure
- And many more features!
Angular UI Bootstrap
Already available for Angular 1.x, the new version of Angular UI Bootstrap has beenrewritten in Angular 2 totake advantage of the framework's various benefits, such as AoT Compilation. Organized by component, theBootstrap widget codeis now easy to read and understand.
All widgets aretestableandmaintainable.
Universal
It is atoolthat enablesserver-side rendering of Angular 2 applications. Universal can be used for everything related toSEO(Search Engine Optimization),link previews—such as what Facebook does when a link is shared—or simply to improve first page rendering time.
Conclusion
Ultimately,Angular 2is more than just a framework. It has become anentire platform with several tools and widgetsavailable, and is suitable formultiple devices.
ngEurope was also an opportunity to see examples of projects developed with Angular 2 and other frameworks (Ionic, Cordova, etc.): a hybrid mobile application presented by ING Bank, a desktop website for playing musical scores presented by Tero Parviainen, and a cross-platform application presented by Christian Weyer & Thorsten Hans.
The Angular Core Team is always looking to continue optimizing and improving Angular and offering new features. Stay tuned for future versions... It remains to be seen whether a redesign is once again on the cards.
For more information, here are links to the ngEurope 2016 videos and presentations that have been shared:
- YouTube channel – ngEurope
- Presentations and GitHub links
