Introduction à Angular 2

Copyright 2016 - Toute reproduction interditeAngularFrance.com

Introduction à Angular 2

Présenté par Vincent Caillierez

1

http://AngularFrance.com


Programme• Présentation d’Angular - Quelques chiffres &

principales fonctionnalités d’Angular 2 • Comparaison entre Angular 1 et Angular 2 • Outillage Angular 2 • Angular 2 est une plateforme • Démarrer avec Angular 2 • Migrer de Angular 1 à Angular 2 • Faut-il passer à Angular 2 aujourd’hui ?

2



Vincent Caillierez• Mon profil

• Développeur web fullstack depuis une quinzaine d’années. • Entre 2005 et 2012 : spécialisé dans le CMS Drupal. • Depuis 2014 : Spécialisé dans les technos frontend, notamment

Angular. • Mon job aujourd’hui : Formations Angular et missions de

développement freelance. • Plus d’infos

• WWW: http://angularfrance.com/ • Twitter: https://twitter.com/angularfrance • Facebook: https://www.facebook.com/angularfrance

3


http://angularfrance.com/

https://twitter.com/angularfrance

https://www.facebook.com/angularfrance

ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com

Quelques chiffres sur Angular

4



Recherches “Angular” (Google Trends)

5



Utilisation d’Angular sur le web(Builtwith.com)

6



Jobs Angular(Indeed.com)

7



Compétence “Angular” (LinkedIn)

8

Nombre de profils LinkedIn ayant la compétence (mai 2016)

0

75000

150000

225000

300000

Angular Backbone React Ember



Communauté Angular

9



Dates clé• 2009. Création de la version originale du framework

par Misko Hevery. • 2010. Misko Hevery rejoint Google, qui soutient alors

officiellement AngularJS. • 2013. Explosion de notoriété et d’adoption. • Sept 2014. Annonce de la sortie d’Angular 2 (un peu

prématurée). • Mai 2016. Sortie de la première Release Candidate

d’Angular 2.10



Angular 2Présentation rapide

11



Qu’est-ce qu’Angular ?• Angular est un framework JavaScript pour créer des applications monopages

(SPA), web et mobiles. • Quels types d’applications peut-on développer ?

• De petits widgets interactifs pour un site web existant (moteur de recherche, module de réservation). Exemple : https://www.virginamerica.com/

• Site web complet. Exemple : https://weather.com/ • Application mobile. Exemple : https://posse.com/

• Et Angular 2 ? Pour l’instant, surtout utilisé en interne à Google (Google Adwords, Google Fiber…). Plus de références : http://builtwithangular2.com/

12


https://www.virginamerica.com/

https://weather.com/

https://posse.com/

http://builtwithangular2.com/


Principales caractéristiques d’Angular 2• Plusieurs langages supportés(1). ES5, ES6, TypeScript et Dart.

• Complet. Inclut toutes les briques nécessaires à la création d'une appli professionnelle. Routeur, requêtage HTTP, gestion des formulaires, internationalisation…

• Modulaire. Le framework lui-même est découpé en sous-paquets correspondant aux grandes aires fonctionnelles (core, router, http…). Vos applis doivent être organisées en composants et en modules (1 module = 1 fichier).

• Rapide. D’après les benchmarks, Angular 2 est aujourd’hui 5 fois plus rapide que la version 1(2).

• Tout est composant. Composant = brique de base de toute appli Angular 2.

13



Le pattern “Composants”• Appli Angular = Arbre de composants.

14



Caractéristiques des composants• Autonomes (savent comment s’afficher et interagir avec leur hôte).

• API publique clairement définie (inputs et outputs - cf. schéma).

• Peuvent faire appel à des services externes via la DI.

• Conséquences : RÉUTILISABILITÉ ACCRUE(1).

15



Angular 1 vs Angular 2

Principales différences entre les 2 versions

16



Vue d’ensemble (1/2)

17

Angular 1 Angular 2

Framework Plateforme

JavaScript TypeScript

Pattern Modèle-Vue-* Pattern Composant

Liaison de données principalement BIdirectionnelle

Liaison de données principalement UNIdirectionnelle

Scope Bye bye le scope(1)



Vue d’ensemble (2/2)

18

Angular 1 Angular 2

Injection de dépendance : plusieurs syntaxes possibles(1)

Injection de dépendance : syntaxe unique.

API complexe(2) API simplifiée(3)

Rendering normal Rendering 5 fois plus rapide

Plusieurs “bonnes pratiques” concurrentes par la communauté

Bonnes pratiques officielles : https://angular.io/styleguide


https://angular.io/styleguide


7 différences NG1 vs NG2

• 1. Bootstraper Angular • 2. Des contrôleurs aux composants • 3. Directives structurelles • 4. Liaison de données • 5. Moins de directives nécessaires • 6. Services et DI • 7. Injection de dépendance

19



1. Bootstraper Angular

• NG1: directive ng-app (bootstrap automatique).

• NG2: bootstrap via code avec la fonction bootstrap().

20



2. Des contrôleurs aux composants

• NG1: angular.controller()

• NG2: Classe avec décorateur @Component.21



3. Directives structurelles

• NG1: Beaucoup de directives structurelles. Ici, ng-repeat et ng-if.

• NG2: Seules quelques directives conservées (comme *ngFor et *ngIf). Points importants : notation camelcase, étoile * devant nom de la directive (signale une directive structurelle), syntaxe let vehicle of vehicules (of et non pas in).

22

"let vehicle of vehicules">



4. Liaison de données (1/3)• Permet de synchroniser les données entre les

composants et le DOM (aka la vue).

23



4. Liaison de données (2/3)• 1. Interpolation

• 2. Binding de propriété (unidirectionnel)

24



4. Liaison de données (3/3)• 3. Binding d’événement

• NG1: ng-click, ng-blur… — Directives custom Angular.

• NG2: (click), (blur) — Fini les directives custom, on utilise les événements natifs d'un HTMLElement entre parenthèses.

• 4. Liaison de données bidirectionnelle (champ de formulaire)

25



5. Moins de directives

• NG1: ng-style, ng-src, ng-href…

• NG2: Plus de 40 directives NG1 ont disparu dans NG2 !

26



6. Services et DI (1/2)

• NG1: Les données ou fonctionnalités partagées utilisent des factories, des services, des providers...

• NG2: Un seul concept subsiste : une classe TypeScript.27



6. Services et DI (2/2)

• NG1: Ici, angular.service(), mais pourrait être angular.factory(), angular.provider()…

• NG2: Simple classe avec le décorateur @Injectable.28



7. Injection de dépendance• Dans Angular, les services contiennent toute la

logique applicative. Exemple : service qui récupère les données du serveur via un appel HTTP.

• Lorsqu’un composant a besoin d’utiliser un service, il utilise l’injection de dépendance (DI).

• La DI se fait en deux temps : • 1. Déclaration • 2. Injection

29



7. DI - Déclaration (1/2)

• NG1: La déclaration se fait avec angular.service() et une chaîne de caractères qui identifie le service.

• NG2: Pas de chaîne de caractères, on déclare le service dans la propriété providers du composant qui l’utilise(1).

30



7. DI - Injection (2/2)

• NG1: Propriété .$inject qui matche les arguments passés à la fonction factory du contrôleur.

• NG2: On passe le service au constructor du composant (ou plutôt, on type un param du constructor).

31



Réutilisez vos compétences Angular 1• Les 7 concepts qu’on vient de voir sont nouveaux. • Mais plusieurs concepts restent les mêmes(1) :

32



Outillage Angular 2TypeScript, Tests, Angular CLI, Augury, Composants UI

33



TypeScript• Langage créé par Microsoft en 2012, open-source, qui transpile

vers JavaScript. • Surensemble d’ES6 (aka ES2015).

Tout JavaScript est donc du TypeScript valide. • Principales caractéristiques(1) : types, interfaces, classes,

décorateurs, modules, fonctions fléchées, templates chaîne. • Supporté par de nombreuses librairies JavaScript tierce-partie(2). • Supporté par plusieurs IDE : WebStorm/IntelliJ Idea, Visual Studio

Code, Sublime Text, etc. • Langage le plus populaire pour Angular 2. En train de s’imposer

comme le langage officiel.

34



Tests• Angular 2 embarque un module de test avec toutes les

fonctionnalités support et les objets bouchonnés (mocks) permettant la mise en place des tests.

• Les tests unitaires sont écrits avec Jasmine (http://jasmine.github.io/).

• Les suites de tests sont exécutées avec Karma (http://karma-runner.github.io/) qui permet notamment d’exécuter les tests dans plusieurs navigateurs.

• Les tests d’intégration (end-to-end) sont exécutés avec le framework Protractor (http://www.protractortest.org/).

35


http://jasmine.github.io/

http://karma-runner.github.io/

http://www.protractortest.org/


Angular CLI• Outil en ligne de commande (en cours de développement) pour

simplifier les tâches de développement avec Angular 2. • Fonctionnalités : génération initiale d’un projet, génération de

composants, exécution des tests, déploiement en production… • https://github.com/angular/angular-cli

36


https://github.com/angular/angular-cli


Angular Augury

• Extension Chrome Dev Tools pour débugger les applications Angular 2, et aider les développeurs à comprendre le fonctionnement de leurs applications — https://augury.angular.io/.

• Fonctionnalités : Comprendre les relations entre composants et leur hiérarchie, obtenir des infos sur chaque composant et modifier leurs attributs à la volée, etc.

• NOTE. On peut aussi débugger avec Chrome Dev Tools. Les source maps permettent de débugger le code TypeScript alors que le navigateur exécute du JavaScript.

37


https://augury.angular.io/


Librairies de composants UI• ng-bootstrap (https://github.com/ng-bootstrap/core) - Ré-écriture en Angular 2 des

composants UI de Bootstrap CSS (v4). • Angular Material (https://material.angular.io/) - Librairie de composants UI

développés par Google spécifiquement pour Angular 2. Actuellement en early alpha, mais développement assez actif.

• PrimeNG (http://www.primefaces.org/primeng/) - Collection de composants UI pour Angular 2 par les créateurs de PrimeFaces (une librairie populaire utilisée avec le framework JavaServer Faces).

• Wijmo 5 (http://wijmo.com/products/wijmo-5/) - Librairie payante de composants UI pour Angular 2. Achat de licence nécessaire.

• Polymer (https://www.polymer-project.org/) - Librairie de “Web Components” extensibles par Google. L’intégration avec Angular 2 est réputée par évidente.

• NG-Lightning (http://ng-lightning.github.io/ng-lightning/) - Librairie de composants et directives Angular 2 écrits directement en TypeScript sur la base du framework CSS Lightning Design System.

38


https://github.com/ng-bootstrap/core

https://material.angular.io/

http://www.primefaces.org/primeng/

http://wijmo.com/products/wijmo-5/

https://www.polymer-project.org/

http://ng-lightning.github.io/ng-lightning/


Angular 2 est une plateforme

Modulaire + Outils + Multi-environnement

39



Une plateforme ?

• La vocation d’Angular 2 est de devenir une plateforme pour le développement d’applications web et mobiles : • Le noyau de la librairie a été scindé en plusieurs

composants logiques, et devient donc plus modulaire. (On n’installe que ce dont on a besoin.)

• L’outillage a été amélioré, avec des outils comme TypeScript, Angular CLI, Augura…

• Il devient possible d’exécuter Angular facilement dans plusieurs environnements (sur le serveur avec Angular Universal, sur mobile avec Angular Mobile Toolkit ou NativeScript, etc.).

40

Framework modulaire + Outils + Multi-environnement



Angular Universal• Objectif : Exécuter les applis

Angular 2 directement sur le serveur. • Pourquoi ?

• Pour améliorer les performances. • Pour améliorer la SEO.

• Pour améliorer le partage sur les réseaux sociaux.

• Comment ?

• Pages rendues sur le serveur (Node.js ou ASP.net). • Quelques adaptations par rapport à du code 100% client.

41

https://universal.angular.io/


http://ASP.net

https://universal.angular.io/


Angular Mobile Toolkit• Objectif : Créer des applis mobiles

progressives avec Angular 2. • Qu’est-ce que c’est ?

• Nouvelle génération d’applis mobiles créées en HTML, CSS et JavaScript.

• Bénéficient de nouvelles fonctionnalités stratégiques : chargement instantané, support du mode hors-ligne, installables, support des notifications.

• Apps progressives vs natives ? • Natives : Meilleures performances, accès au APIs matérielles du

téléphone. • Progressives : Indexables/cherchables, partageables, moins de

friction à l’installation.42

https://mobile.angular.io/


https://mobile.angular.io/


NativeScript• NativeScript 2.0 a été annoncé courant mai avec le support

pour Angular 2. • NativeScript 2.0 permet de créer des applications mobiles

natives avec Angular 2. NativeScript convertit le code Angular 2 en appels d’API iOS et Android qui sont alors exécutés comme si vous écriviez une appli mobile native en Objective-C ou en Java.

• L’une des grandes fonctionnalités supportée par NativeScript est la possibilité d’utiliser des Cocoa Pods iOs natifs et des plugins Android Gradle directement dans votre code TypeScript.

• Plus d’infos : Fonctionnement NativeScript - Tuto {N} et NG243


http://developer.telerik.com/featured/nativescript-works/

http://angularjs.blogspot.fr/2016/03/code-reuse-in-angular-2-native-mobile.html


Démarrer avec Angular 2

Langage, Stack, Première app

44



Choix techniques à faire• Choisir un langage :

• JavaScript (ES5 ou ES6) • TypeScript • Dart

• Mettre en place un environnement de développement : • Installer Node.js. • Choisir un Package Manager (npm, jspm…). • Choisir un Module Loader (SystemJS, Webpack, Browserify…). • Choisir un Transpiler (Babel, Tracer, compilateur TypeScript). • Choisir un outil de build (Grunt, Gulp, Webpack…).

45



Stacks émergents• TypeScript

• Package Manager : npm • Module Loader : SystemJS • Transpiler : Traceur / TypeScript • Build Tool : Broccoli

• ES6 • Package Manager : jspm • Module Loader : SystemJS • Transpiler : Babel • Build Tool : Gulp

46



Coder sa première app• Quickstart officiel - https://github.com/angular/

quickstart — Explication pas-à-pas de la mise en place de l’environnement de développement et du codage d’une première app.

• angular2-seed - https://github.com/mgechev/angular2-seed — Environnement de développement totalement configuré + application minimale prêts à l’emploi.

• Hello World — Démo du code d’une appli toute simple.

47


https://github.com/angular/quickstart

https://github.com/mgechev/angular2-seed


Migrerde Angular 1 à Angular 2

48



Marche à suivre• La migration se fait en deux temps : • 1. Préparer l’appli Angular 1 en l'alignant avec Angular 2

avant de démarrer la migration. • Suivre le style guide AngularJS 1.x (LIEN). • Utiliser un module loader.

• Migrer vers TypeScript.

• Utiliser des “directives composants”.

• 2. Upgrade incrémental, en exécutant les deux frameworks côte à côte dans la même application (UpgradeAdapter).

49


https://github.com/johnpapa/angular-styleguide


Exemple UpgradeAdapter (1/2)• Downgrade - Utiliser un composant Angular 2 comme une directive

Angular 1 :

• Puis la directive s’utilise normalement dans un template Angular 1 :

50



Exemple UpgradeAdapter (2/2)• Upgrade - Utiliser une directive Angular 1 comme un composant Angular 2. • NB. Seules les “directives composant” peuvent être upgradées.

51



ng-forward• Permet d’écrire du code Angular 1.3+ qui respecte les

conventions et les patterns d’Angular 2. • Peut être une première étape avant d’écrire du vrai code

Angular 2. Complémentaire au chemin d’upgrade décrit précédemment.

• Uniquement compatible avec ES6/TypeScript, pas ES5. • Ressources :

• https://github.com/ngUpgraders/ng-forward • http://www.codelord.net/2016/02/03/angular-2-

migration-whats-ng-forward/52


https://github.com/ngUpgraders/ng-forward

http://www.codelord.net/2016/02/03/angular-2-migration-whats-ng-forward/


Faut-il passer à Angular 2 aujourd’hui ?

53



Arguments CONTRE• AVERTISSEMENT : Version la plus récente = release candidate 1. • Fonctionnalités partielles ou manquantes :

• Routeur (version actuelle = deprecated) • Internationalisation (ng2-translate en cours de dévt) • Intégration avec une bibliothèque de composants d'interface (ng2-bootstrap et

Angular Material 2 sont en cours de dévt) • Animations (manquant)

• Autres points à prendre en considération : • Angular 1 est très mature, a un écosystème très complet (modules contrib,

librairies tierce-partie…), sera supporté officiellement tant qu’il existera un nombre conséquent d’utilisateurs. Pourquoi pas l’utiliser ?

• Existence de ressources pour apprendre Angular 2 ? (documentation officielle, livres, formations…)

• Existence de développeurs qualifiés sur Angular 2 ?

54



Arguments POUR• Techniquement supérieur à Angular 1 : plus aligné avec

les standards web modernes, plus rapide. • Certaines sociétés utilisent déjà Angular 2 en

production(1). Google, CapitalOne, LucidCharts, Kiva, Weather Channel.

• Si vous êtes une société, investissement dans l’avenir : à terme, l’innovation, les développements (et l’intérêt du marché) vont se concentrer sur Angular 2.

• Si vous êtes développeur, bon moment pour commencer à apprendre. La doc officielle existe (très bonne qualité). Le guide des bonnes pratiques aussi. Ainsi que plusieurs livres.

55



Quand Angular 2 sortira-t-il ?• Toujours pas de date définitive. • Se reporter à Github pour suivre l’avancement. La RC 1 est

terminée à 65% en date du 26 mai 2016 :

• D’après Brad Green (Google) à ng-conf 2016, Angular 2 est suffisamment mature pour être utilisé en production.

56


https://github.com/angular/angular/milestones


Quelques ressourcesAngular 2• Livre recommandé :

“Deviens un ninja avec Angular 2”.

• Cours vidéos recommandés : tous les cours “angular 2” de Pluralsight (en anglais, mais sous-titrés en anglais et souvent en français).

• Site AngularFrance.com (tutos et articles sur Angular 2).57


http://angularfrance.com/

https://ninja-squad.fr/

https://www.pluralsight.com/



























































































































Formation Angular 2• Nous proposons une formation “Angular 2

Fondamentaux” : Apprenez tous les concepts essentiels d’Angular 2 en codant 4 applications complètes en 4 jours : Un clone de Airbnb. Un clone de Gmail. Un clone de WhatsApp. Un clone du "Like" Facebook.

• Prochaine session : environ tous les deux mois, à Paris. • Nous sommes organisme de formation (possibilité de

faire financer votre formation). • Plus d’infos : http://angularfrance.com/formations/

angular2-fondamentaux58


http://angularfrance.com/formations/angular2-fondamentaux

Copyright 2016 - Toute reproduction interditeAngularFrance.com 59

Merci !


Internet

Introduction à Angular 2