Angular 2:

un framework pour les gouverner tous

@OCombe

github.com/ocombe

Dev front-end @ Holimetrix

21 et 22 Avril 2016

bit.ly/mixit2016

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
       
  • 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

beta.holimetrix.com

MERCI !

@OCombe

github.com/ocombe

bit.ly/mixit2016

Angular 2: un framework pour les gouverner tous

By Olivier Combe

Made with Slides.com

Angular 2: un framework pour les gouverner tous

Après une longue période de développement, Angular 2 s'apprête enfin à faire son entrée dans la cour des grands. Découvrez le framework qui vous fera oublier React et vous donnera envie d'écrire des classes. Venez découvrir pourquoi Angular 2 sera le gros challenger de 2016.

  • 4,827

More from Olivier Combe