Adopter Angular2, les bénéfices de la nouvelle version · • Course aux performances • Stratégique ... La version 2 d’AngularJS ? TO TECHNOLOGY ... –SEO –Temps de chargement

BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 1

BRINGING THE HUMAN TOUCH TO TECHNOLOGY

Jean-Philippe Laurent

Adopter Angular2, les bénéfices de la nouvelle versionEVENT ANGULAR2 DECEMBRE 2016

Consultant & Responsable pôle web


Enjeux du web



Application web compositionENJEUX


Conquête des navigateursENJEUX


Fin des solutions propriétaires

StandardisationENJEUX


Navigateur

• Course aux supports des dernières fonctionnalités

• Course aux performances

• Stratégique

StandardisationENJEUX


Accéder à des données et services tiers• Exemple : Les gouvernements exposent leurs données

au travers d’API Web (REST)

Exposer vos données • Rendre accessibles vos services et données à d’autres

applications• Exemple : Acquérir des Partners pour revendre vos services

Open APIENJEUX


Angular2: La version 2 d’AngularJS ?



Mutation nécessaire pour mieuxexploiter les nouveauxstandards du web

Angular ≠ AngularJS


Pérennité : Les entreprises veulent choisir une techno pour les 10 prochaines années…



Popularité AngularJSPÉRENNITÉ


FidélitéPÉRENNITÉ

Récupération de la communauté AngularJS


Performance : "Le cheval porte son cavalier avec vigueur et rapidité. Mais c'est le cavalier qui conduit le cheval."

@Vassily Kandinsky


http://evene.lefigaro.fr/celebre/biographie/vassili-kandinsky-634.php


Détection de changementPERFORMANCE

Mécanisme de détection de changement amélioré

http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor

Changes : time (ms) / # of items


Détection changement : AngularJS 1PERFORMANCE

Déclencheur : Ajout de directive

ng-click, ng-model, $http, $timeout, … $scope.$apply()

Évaluation des changements : Digest Cycle

• Création d’un watcher pour chaque expression dynamique.

• Réévalue tous les watchers jusqu’à stabilité.


Détection changement : Angular 2PERFORMANCE

Déclencheur: Zone.js

Patch :

• Browser event : click, mouseover, keyup, …

• Timer : setTimeout(), setInterval()

• API asynchrone : XMLHttpRequest, Promises, WebSocket, FileReader, GeoLocation…


Détection changement : Angular 2PERFORMANCE

Évaluation des changements

• Évaluation une seule fois du composant parent vers les enfants

Déclenchement manuel

• ChangeDetectionStrategy.OnPush


Amélioration de la rapidité exécution :

• Rendu

• Détection de changement

Angular 1 : générique

Angular 2 : VM-friendly code + inline caching (10x)

CompilationPERFORMANCE



• Chargement partiel• Lazy-loading : @NgModule

Temps de chargement initialLOADING


Just-in-Time (JiT) compiler • Compilation de l’app dans le browser au runtime

• - Attendre le chargement de la lib de compilation et ces dépendances

• - Attendre la fin de la compilation

Ahead-of-Time (AoT)• Le compilateur s’exécute une seule fois durant le build

• + Rendu plus rapide

• + Taille de l’application plus petite

AoT vs JiTLOADING


Éviter le freeze



Angular 2 fournit une API pour utiliser les Web workers :import {WorkerAppModule} from '@angular/platform-webworker';

import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';

import {ServiceMessageBrokerFactory} from '@angular/platform-webworker';

Html5 : Web WorkersPERFORMANCE

“A web worker is a JavaScript running in the background, without affecting the performance of the page.”

http://www.w3schools.com/html/html5_webworkers.asp

http://www.w3schools.com/html/html5_webworkers.asp


Productivité: « La productivité n' est pas seulement la quantité de travail effectué. C' est aussi une question de qualité. »

Kenneth Hartley Blanchard



Javascript pas suffisant…PRODUCTIVITÉ

Application en Javascript :

BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 26BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10

Typescript = es6 + typage


ES5 : Supporté par les navigateurs modernes (>= IE9)

ES6 : Class, constantes, arrow functions, …

TypeScript = ES6 + typage

TypescriptAPPRENTISSAGE


TypescriptPRODUCTIVITÉ

TypageRapidité de codage

autocompletion, navigation, refactoring, …

Détection de bug

static checking

Class, Interface, enum, generic… Rapidité de compréhension du code

organisé et structuré


define(["require", "exports"], function (require, exports) {

"use strict";

var Helper = (function () {

function Helper() {

}

Helper.toStringList = function (list) {

list.forEach(function (s) { return console.log(s); }); };

return Helper;

}());

exports.Helper = Helper;

});

TypescriptPRODUCTIVITÉ

export class Helper {

public static toStringList(list:Array<String>):void {

list.forEach( s => console.log(s))

}

}

public class Helper {

public static void toStringList(ArrayList<String> list){

list.forEach(s -> System.out.println(s));

}

}


Les types Typescript sont valables uniquement à la compilation, à l’exécution c’est <any>

LimitationTYPESCRIPT

class Person {

name: string;

birthday : Date;

category : CategoryEnum;

}

JSON object

{

"name": "Bob",

"birthday" : "19/03/1990",

"category" : 1

}


RessourcesPRODUCTIVITÉ

http://sotagtrends.com

Google Documentation

Blog

Livre


QualitéPRODUCTIVITÉ

Test unitaire• Service facilement mockable : Injection Angular2 + Jasmine

• Support asynchrone

E2E• Protractor

Test composant• Builder, trigger change detection, dom selector, mock provider,…


Starter kit ++PRODUCTIVITÉ


Mobile & Desktop



• Chromium + NodeJs

• Cross platform Desktop application

• Chrome app fin 2018

Electron – Native desktopDESKTOP


Ionic 2MOBILE

Hybride : HTML + javascript + CSS

Device feature with plugin : Apache Cordova + PhoneGap + ….


• Native UI (XML)

• Access any device component or API directly with JavaScript

NativeScriptMOBILE


Sécurité



Injection de contenu dans une page web

Le contenu généré par Angular2 est toujours safe par défaut

SécuritéXSS


Programmation réactiveLe paradigme de programmation de demain


“Reactive programming is programming

with asynchronous data streams”

Programmation réactiveAPPRENTISSAGE

ObservableBrowser eventHttpWebsocket…

43

OperationsFilterMap…

21

ObserveronNextonErroronCompleted


• Découplage entre les composants en exposant un Observable

• L’ordre de déclenchement des évènements n’est plus un problème

• Simplification du code et robustesse (RxJS)

Avantages PROGRAMMATION RÉACTIVE


RésuméARCHITECTURE

Programmation réactive

TypeScript

Cross Platform

SecuritéWeb Worker

Tests

Compilateur

Transpilation

Chargement

Lazy Loading

Détection de changement

Pérennité

Performance

Electron

NativeScript

Angular CLI

Ionic2


Merci pour votre attention.

[email protected]


TODO apprentissage



• Augury

• Librairie : material design, primeng

• Benchmark angular2 vs handcode

• Detection de changement onPush

• Animation : web animation api

• Securité

• WebWorker

• http://rxmarbles.com/#distinctUntilChanged

Et encore …


const persons:Array<Speaker> = [];

persons.push(new Person("Paul"));

persons.push(new Person("John"));

persons.push("Robert");

persons.forEach(person => alert(person.speak()));

Typescript exampleAPPRENTISSAGE

interface Speaker{

speak():string

}

class Person implements Speaker {

name: string;

constructor(name: string) {

this.name = name;

}

speak():string {

return "My name is " + this.name;

}

}


CommunautéPÉRENNITÉ



I. Universal1. Site Preview

2. SEO

II. Angular1 != Angular2

III. Librairie : primeng, material (pas encore readyhttps://github.com/angular/material2)

IV.Electron pas contrainte navigateur (installer windows , w7 +)

EVENT TODO

https://github.com/angular/material2



I. Application web 1. Site public :

– SEO

– Temps de chargement

– Temps de réponse

– 24h/24h

– Ergonomie & Design

– Scalabilité

2. Intranet :

– Spécialisation des composants

– Sur mesure

– Intégration

– Réutilisabilité : fwk, multi projet



export class AppComponent {

myControl = new FormControl();

results: Observable<any[]>;

constructor(http: Http) {

this.results =

this.myControl.valueChanges

.do(inputValue => console.log(inputValue)

.flatMap(this.search);

}

search(term):Observable<any[]>{return http.get(`http://api/?q=${term}`)}

}







this.results =


.filter(inputValue => inputValue.length >= 2)


}


}







this.results =



.debounceTime(300)


}


}







this.results =



.debounceTime(300)

.distinctUntilChanged()


}


}







this.results =



.debounceTime(300)

.distinctUntilChanged()

.switchMap(this.search);

}


}


Choix d’architecture


Template form

Formulaire - choixTEMPLATE OR REACTIVE FORM

@Component(…)

export class RegisterFormComponent {

userForm: FormGroup;

constructor(fb: FormBuilder) {

this.userForm = fb.group({

username: fb.control('', Validators.required(),

…

});

}

…

}

Reactive form

<form … [formGroup]="userForm">

<div>

<label>Username</label>

<input formControlName="username">

</div>

…

</form>

<form …>

<div>

<label>Username</label>

<input name="username" ngModel required>

</div>

…

</form>

@Component(…)

export class

RegisterFormComponent {

…

}


“Reactive programming is programming

with asynchronous data streams”


ObservableBrowser eventHttpWebsocket…

4 3 2 1

OperationsFilterMap…

4 2 1

ObserveronNextonErroronCompleted


Formulaire - choixRÉCAPITULATIF

Template Réactive

Apprentissage + -

Validation simple + -

Migration angular1 + -

Validation complexe - +

Lisibilité - +

Test unitaire - +

Observer les changements - +


Binding bidirectional :

- pattern connu : AngularJS

- template form

Limitation :

- conversion : UI value <string> <----> modèle <Object>

- mutabilité : développeur garant de la cohérence

Binding bidirectional or not?ARCHITECTURE


Reactive Form + RxJS

Pattern :

• Observable

• Flux (redux ngrx)

• Immutabilité

Application ComplexeARCHITECTURE


Web Component : Lego for the web



WebComponentPOURQUOI ANGULAR2?

Custom Elements

Pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur

<html><body>…

<my-custom-element></my-custom-element>…</body></html>



HTML Templates

Déclaration d’un sous-arbre DOM inactif dans une page HTML afin de pouvoir les instancier et le manipuler plus tard

<template id=« hello"><p>Hello SoftShake!</p><script>

console.log(‘template hello instanciate’)</script>

</template>



HTML Imports

Inclure du html et le réutiliser

Utile pour packager ses composants (CSS, JavaScript, etc…)

Shadow DOM

Ce qui sera public ou privé dans vos éléments

Offre l’encapsulation du webComponent



Templates

Html Import

Shadow DOM

Custom Element


Pourquoi avoir besoin de compiler ?Convertir les expressions Angular en javascript (exemple : ngFor)

Angular1 a un compilateur générique pour toutes les plateforme

Angular2 génère du code VM-friendly

Permets de réaliser des optimisations (caching)

Exécution du code plus rapide

Amélioration du compiler AngularPERFORMANCE


Universal (isomorphic)

MOBILE

Documents

Adopter Angular2, les bénéfices de la nouvelle version · • Course aux performances • Stratégique ... La version 2 d’AngularJS ? TO TECHNOLOGY ... –SEO –Temps de chargement