Angular Connect 2017

Jules Kremer en Igor Minar trapten af met de keynote. De belangrijkste boodschap: niet alleen moeten mensen met plezier Angular apps gebruiken, ook moeten ontwikkelaars er met passie aan kunnen werken. Het belang van de Angular community werd daarmee nogmaals benadrukt, iedereen is welkom om aan de slag te gaan met Angular, maar vooral ook om bij te dragen aan verbeteringen aan het platform via Github. Dat Angular sterkt groeit, blijkt uit het aantal bezoeken op de website Angular.io, met bijna 1.000.000 actieve gebruikers in november 2017.

https://angular.io/contribute

Angular 5

Kort voor Angular Connect werd Angular 5 uitgebracht. Het gaat hard, maar het Angular team zorgt ervoor dat upgrades van 2, naar 4 en 5 zo soepel mogelijk verlopen. Veel applicaties zijn echter gebouwd in AngularJS (versie 1.x) en een upgrade vanaf deze versie is toch een stuk bewerkelijker. Het Angular team is zich daar zeer van bewust en brengt tooling uit om te helpen bij deze klus (ngUpgrade en ngUpgradeLite). Ook op Angular Connect waren meerdere talks over (omvangrijke) migraties, onder meer bij Google zelf. Weet ook dat het Angular team altijd beschikbaar is voor vragen omtrent migraties.

Bij het uitbrengen van versie 5 heeft veel nadruk gelegen op het sneller en slimmer maken van Angular apps

Bij het uitbrengen van versie 5 heeft veel nadruk gelegen op het sneller en slimmer maken van Angular apps. Compiler optimalisaties en kleinere packages verhogen de performance in de browser en ook het builden van apps gaat sneller. Naast Ahead Of Time compilation (AOT) is er nu ook Angular Universal: server-side rendering. Zie verderop voor informatie hierover.

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

https://angular.io/guide/upgrade

Progressive Web Apps met de Angular Service Worker

Met browsers die steeds meer kunnen ontstaat een nieuw concept: Progressive Web Apps. Mogelijkheden van een native app, zoals een home screen link en push notifications, worden hiermee bruikbaar in een web app. Angular’s Service Worker helpt bij het ontwikkelen van PWA’s en biedt mogelijkheden als offline werken of performance verbeteringen bij slechte netwerken. Vanaf Angular CLI versie 1.6 is het erg eenvoudig om een Progressive Web App te maken, maar het is natuurlijk ook mogelijk om Angular Service Worker aan een bestaande app toe te voegen.

Angular Animations

Belangrijk voor de user experience van een web app zijn animaties. En niet alleen om je app er heel cool uit te laten zien, slim toegepaste animaties laten de gebruiker een soepele overgang zien tussen states van de applicatie. Dit wordt aangeduid met “Motion Makes Meaning” en Angular Animations maakt het eenvoudig animaties toe te voegen aan je Angular app. Het is gebouwd bovenop de standaard Web Animations API en draait daarmee native in de browsers die deze API ondersteunen.

https://angular.io/guide/animations

Pre-Rendering Strategies

Onder de naam Angular Universal biedt Angular mogelijkheden voor server side rendering. Hiermee worden static pages gegenereerd en krijgt de browser alleen HTML en CSS terug. Dit verhoogt de snelheid waarmee een pagina op het scherm verschijnt, verbetert performance op met name mobile devices en helpt bij betere indexatie door search engines of social media platforms. Een mix is hierbij ook denkbaar: pre-rendering voor de landing pages, zodat de gebruiker snel iets op het scherm krijgt en daarna kan de Angular app in de browser worden geladen voor de overige functionaliteit.

https://angular.io/guide/universal

Angular Labs

Naast alle uitgebrachte features werd ook aandacht besteed aan Angular Labs. Onder deze paraplu worden nieuwe initiatieven gelanceerd waarop de community input kan leveren. Belangrijk is te weten dat deze code niet productie-klaar is en wellicht nooit productie zal zien.

Angular Elements is zo’n nieuw initiatief. Daarmee wordt het mogelijk om van een Angular component een Custom Elements package te maken. Met Custom Elements (een specificatie binnen Web Components) is het mogelijk nieuwe HTML-tags te maken en deze worden door de nieuwste versies van een aantal browsers (Chrome, Safari) al ondersteund. Zo is het mogelijk je Angular component als Custom Element te gebruiken binnen andere platforms, bijvoorbeeld React. Waarom een Material Design module voor React schrijven, als je Angular Material kunt gebruiken?

http://github.com/angular/angular/tree/labs/elements

https://developers.google.com/web/fundamentals/web-components/customelements

Meer dan tech

Naast de vele technische talks op Angular Connect is er meer te beleven. Zo werd aandacht besteed aan de (werk)druk van deze tijd, het hoge aantal burnouts en hoe de focus te houden op alle taken die je dagelijks voor je kiezen krijgt. Mindfulness, yoga en een game room met oude arcade games geven voldoende afleiding om je weer klaar te stomen voor de volgende talk. Shai Reznik kon niet ontbreken, dit keer met een hilarische ng-game-show. En food & drinks? Dat kun je wel aan ExCel overlaten. Tot volgend jaar!