Upload
haduong
View
222
Download
0
Embed Size (px)
Citation preview
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 2
Enjeux du web
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 5
Fin des solutions propriétaires
StandardisationENJEUX
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 6
Navigateur
• Course aux supports des dernières fonctionnalités
• Course aux performances
• Stratégique
StandardisationENJEUX
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 7
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 8
Angular2: La version 2 d’AngularJS ?
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 9
Mutation nécessaire pour mieuxexploiter les nouveauxstandards du web
Angular ≠ AngularJS
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
Pérennité : Les entreprises veulent choisir une techno pour les 10 prochaines années…
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 12
FidélitéPÉRENNITÉ
Récupération de la communauté AngularJS
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 13
Performance : "Le cheval porte son cavalier avec vigueur et rapidité. Mais c'est le cavalier qui conduit le cheval."
@Vassily Kandinsky
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 14
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 15
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é.
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 16
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…
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 17
Détection changement : Angular 2PERFORMANCE
Évaluation des changements
• Évaluation une seule fois du composant parent vers les enfants
Déclenchement manuel
• ChangeDetectionStrategy.OnPush
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 18
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 20
• Chargement partiel• Lazy-loading : @NgModule
Temps de chargement initialLOADING
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 21
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 22
Éviter le freeze
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 23
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 24
Productivité: « La productivité n' est pas seulement la quantité de travail effectué. C' est aussi une question de qualité. »
Kenneth Hartley Blanchard
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 25
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 27
ES5 : Supporté par les navigateurs modernes (>= IE9)
ES6 : Class, constantes, arrow functions, …
TypeScript = ES6 + typage
TypescriptAPPRENTISSAGE
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 28
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é
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 29
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));
}
}
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 30
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
}
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 31
RessourcesPRODUCTIVITÉ
http://sotagtrends.com
Google Documentation
Blog
Livre
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 32
QualitéPRODUCTIVITÉ
Test unitaire• Service facilement mockable : Injection Angular2 + Jasmine
• Support asynchrone
E2E• Protractor
Test composant• Builder, trigger change detection, dom selector, mock provider,…
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 34
Mobile & Desktop
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 35
• Chromium + NodeJs
• Cross platform Desktop application
• Chrome app fin 2018
Electron – Native desktopDESKTOP
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 36
Ionic 2MOBILE
Hybride : HTML + javascript + CSS
Device feature with plugin : Apache Cordova + PhoneGap + ….
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 37
• Native UI (XML)
• Access any device component or API directly with JavaScript
NativeScriptMOBILE
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 38
Sécurité
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 39
Injection de contenu dans une page web
Le contenu généré par Angular2 est toujours safe par défaut
SécuritéXSS
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 40BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
Programmation réactiveLe paradigme de programmation de demain
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 41
“Reactive programming is programming
with asynchronous data streams”
Programmation réactiveAPPRENTISSAGE
ObservableBrowser eventHttpWebsocket…
43
OperationsFilterMap…
21
ObserveronNextonErroronCompleted
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 42
• 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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 43
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 44BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 44
Merci pour votre attention.
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 45
TODO apprentissage
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 46
• 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 …
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 47
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;
}
}
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 50
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 52
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 53
Programmation réactiveAPPRENTISSAGE
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}`)}
}
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 54
Programmation réactiveAPPRENTISSAGE
export class AppComponent {
myControl = new FormControl();
results: Observable<any[]>;
constructor(http: Http) {
this.results =
this.myControl.valueChanges
.filter(inputValue => inputValue.length >= 2)
.flatMap(this.search);
}
search(term):Observable<any[]>{return http.get(`http://api/?q=${term}`)}
}
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 55
Programmation réactiveAPPRENTISSAGE
export class AppComponent {
myControl = new FormControl();
results: Observable<any[]>;
constructor(http: Http) {
this.results =
this.myControl.valueChanges
.filter(inputValue => inputValue.length >= 2)
.debounceTime(300)
.flatMap(this.search);
}
search(term):Observable<any[]>{return http.get(`http://api/?q=${term}`)}
}
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 56
Programmation réactiveAPPRENTISSAGE
export class AppComponent {
myControl = new FormControl();
results: Observable<any[]>;
constructor(http: Http) {
this.results =
this.myControl.valueChanges
.filter(inputValue => inputValue.length >= 2)
.debounceTime(300)
.distinctUntilChanged()
.flatMap(this.search);
}
search(term):Observable<any[]>{return http.get(`http://api/?q=${term}`)}
}
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 57
Programmation réactiveAPPRENTISSAGE
export class AppComponent {
myControl = new FormControl();
results: Observable<any[]>;
constructor(http: Http) {
this.results =
this.myControl.valueChanges
.filter(inputValue => inputValue.length >= 2)
.debounceTime(300)
.distinctUntilChanged()
.switchMap(this.search);
}
search(term):Observable<any[]>{return http.get(`http://api/?q=${term}`)}
}
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 58BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
Choix d’architecture
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 59
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 {
…
}
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 60
“Reactive programming is programming
with asynchronous data streams”
Programmation réactiveAPPRENTISSAGE
ObservableBrowser eventHttpWebsocket…
4 3 2 1
OperationsFilterMap…
4 2 1
ObserveronNextonErroronCompleted
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 61
Formulaire - choixRÉCAPITULATIF
Template Réactive
Apprentissage + -
Validation simple + -
Migration angular1 + -
Validation complexe - +
Lisibilité - +
Test unitaire - +
Observer les changements - +
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 62
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 63
Reactive Form + RxJS
Pattern :
• Observable
• Flux (redux ngrx)
• Immutabilité
Application ComplexeARCHITECTURE
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 64
Web Component : Lego for the web
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 10
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 65
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>
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 66
WebComponentPOURQUOI ANGULAR2?
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>
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 67
WebComponentPOURQUOI ANGULAR2?
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
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 68
WebComponentPOURQUOI ANGULAR2?
Templates
Html Import
Shadow DOM
Custom Element
BRINGING THE HUMAN TOUCH TO TECHNOLOGY | SERIAL.CH | 69
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