Angular 2:
un framework pour les gouverner tous
Dev front-end @ Holimetrix
21 et 22 Avril 2016
Petite intro et rappels
Angular 1: rappel
-
Framework (M)VC
-
Html amélioré & data binding
-
Composants réutilisables attachant un comportement au DOM (directives)
-
Injection de dépendances (DI)
-
Testable
- Firefox 3.0.15, Chrome 4, IE8
- iPhone 4 & Android 2.0
- 1ière installation de fibre optique en France
- jQuery 1.4
En 2010
08/12/2011
07/03/2013
13/10/2010
20/10/2010
- Très rapide
- Moins compliqué
- Encore plus complet
- Extrêmement modulaire: extensible
- Web components
- Multi-plateformes
Ambitions pour Angular 2
Angular 2: multi platformes
Web
Mobile web
Mobile natif
Android
iOS
Windows
Desktop
Windows Mac Linux
Une seule code base pour tous !
ES5
ES2015
Typescript
- classes
- modules
- types
- annotations
Typescript
- JS++ (le JS est compatible Typescript)
- Types
- Annotations
- Approche objet complète: Interfaces, classes abstraites, namespaces...
- Outils
Angular 2: Un effort communautaire
Un nouveau framework ...
- Même équipe de développement
- Mêmes buts & philosophie:
- faire avancer le web
- simplifier la vie des développeurs
- Upgrade Angular 1 vers 2 possible
... dans la continuité
CLI
Intellisense
Debug
Mobile
Components
Prerender
Change
Render
Compile
Zones
Dependency Injection
Animate
Router
i18n
ngUpgrade
ngForward
Angular 2
Angular 2: performance
Rerender
Permanent
Render
Ultrafast
change
detection
View
pool
Code
generation
2.5x
+ rapide que ng1
4.2x
+ rapide que ng1
5x
+ rapide que ng1
Web workers
2x plus rapide & non bloquant pour l'ui
Approche modulaire
Un module est un block de code cohérent dédié à un but spécifique.
Un module exporte du code utilisable par un autre module, généralement une classe.
Approche modulaire
export class AppComponent { }import {AppComponent} from './app.component';4 types de modules
- Services = simples classes
-
Directives = modification d'un élément du DOM
- Components = directive + template
- Pipes = transformateurs de données
export class MyService {
constructor(service: OtherService) {
// configuration
}
someFct() {
// ...
}
}Services
En gros, c'est une fonction
Components
import {Component} from 'angular2/core';
@Component({
// configuration
})
export class Application {
/* ... */
}Components
import {Component} from 'angular2/core';
import {Header} from './components/header/header';
import {Api} from './services/api';@Component({
selector: 'mix-it'
template: `<header></header>`,
directives: [ Header ],
providers: [ Api ],
styles: `:host{ text-align: center; }`
})
export class MixIt {
constructor(api: Api) { /* ... */ }
}<!-- index.html -->
<mix-it>
Your application is loading...
</mix-it><!-- index.html -->
<mix-it>
<header></header>
</mix-it>Templates: syntaxe
<!-- properties binding -->
<input [value]="firstName">
<div [class.extraSparkle]="isDelightful">
<div [style.width]="mySize">
<label [attr.for]="someName"></label><!-- event binding -->
<button (click)="readRainbow($event)"><!-- two way binding -->
<my-cmp [(title)]="name"><!-- template directives -->
<section *ngIf="showSection">
<li *ngFor="#item of list">Pipes
@Pipe({
name: 'lowercase'
})
export class Lowercase {
transform(v: string, args: any[]) {
return v.toLowerCase();
}
}Injection de dépendances
C'est un pattern de développement dans lequel une classe reçoit ses dépendances de sources externes au lieu de les créer elle même
Injection de dépendances
- Instanciation automatique ou manuelle
-
bootstrap & providers
-
bootstrap & providers
- Configuration
- Testabilité
Zone.js
Détection des changements
- Monkey-patch des fonctions asynchrones
- Exécute du code avant et après
- Testing
- Timing
- Gestion des erreurs
- En passe de devenir un standard (Ecma TC39)
Performance
Détection des changements
- Très rapide (code optimisé pour VM): 10x plus rapide qu'angular 1
- Possible d'exécuter du code en dehors des zones
- Optimisable avec
- du code immutable
- différentes stratégies de détection (ex: OnPush)
Programmation réactive
- Utilisation asynchrone de flux de données
- Observables & Subjects de RxJS (EventEmitter)
- Meilleur ami de l'immutabilité
- Tout est stream
Renderers
- L'un des plus importants ajouts d'Angular 2
- Remplaçable selon l'environnement
- Précompilation (taille de l'app + temps de bootstrap)
- De multiples possibilités:
- web workers: réactivité de l'interface
- server rendering: vitesse de chargement initial
- native & desktop apps (electron, react native, nativescript, ...)
Et les mauvais côtés ?!
Inconvénients
- Setup de projet fastidieux
- Encore en bêta
- Framework complet
- Coupure assez franche avec Angular 1
Angular 1
Vers
Angular 2
Migration
- 3 questions à se poser:
- Ai-je besoin de migrer ?
- Vaut-il mieux réécrire de 0 ou migrer le code?
- Si nouvelle application: quelle est la durée de maintenance?
-
Angular 2 est une réécriture complète
- Quelques possibilités pour faciliter la migration
Préparation
- Suivre le style guide d'Angular
- Adopter une approche composants
- Utiliser TypeScript
- Utiliser un module loader
- Utiliser un adapteur:
- ngForward
- ngUpgrade
ngForward
- Ecrire du code en Angular 2 qui tourne sous Angular 1
- Migration petit à petit
- Permet d'attendre une version stable d'Angular 2 tout en limitant la dette technique
- Taille raisonnable (~100ko)
ngUpgrade
- Faire coexister une app Angular 1 et une app Angular 2
- Migration petit à petit
- Permet de bénéficier du gain de performance d'Angular 2 sur certaines parties du code
- Nécessite de charger Angular 1 et 2 à la fois
- Aucun dette technique
- Officiellement supporté
Et la date de release alors ?
Quelques Liens
-
Awesome Angular 2 - Angular Class
-
Angular 2 style guide - Minko Gechev
-
The introduction to Reactive Programming you've been missing - André Staltz
-
Getting started with Angular 2 @ Devfest - Wassim Chegham
-
Change detection explained @ NG-NL - Pascal Precht
-
Creating Cross-Platform Apps with Angular 2 @ Microsoft Build - Brad Green
-
Angular 2 and the future of HTML5 apps @ Fluent conf - Brad Green
MERCI !