Introduction à Angular 2

1 070 vues

Publié le

Présentation de la dernière version d'Angular 2, le framework JavaScript de Google pour créer des applications monopages — http://angularfrance.com/

Thème abordés : Angular en 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 ?

Publié dans : Internet
1 commentaire
3 j’aime
Statistiques
Remarques
  • Excellente présentation d'Angular2
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
1 070
Sur SlideShare
0
Issues des intégrations
0
Intégrations
42
Actions
Partages
0
Téléchargements
59
Commentaires
1
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction à Angular 2

  1. 1. Copyright 2016 - Toute reproduction interditeAngularFrance.com Introduction à Angular 2 Présenté par Vincent Caillierez 1
  2. 2. Copyright 2016 - Toute reproduction interditeAngularFrance.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
  3. 3. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  4. 4. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Quelques chiffres sur Angular 4
  5. 5. Copyright 2016 - Toute reproduction interditeAngularFrance.com Recherches “Angular” (Google Trends) 5
  6. 6. Copyright 2016 - Toute reproduction interditeAngularFrance.com Utilisation d’Angular sur le web
 (Builtwith.com) 6
  7. 7. Copyright 2016 - Toute reproduction interditeAngularFrance.com Jobs Angular
 (Indeed.com) 7
  8. 8. Copyright 2016 - Toute reproduction interditeAngularFrance.com Compétence “Angular”
 (LinkedIn) 8 Nombre de profils LinkedIn ayant la compétence (mai 2016) 0 75000 150000 225000 300000 Angular Backbone React Ember
  9. 9. Copyright 2016 - Toute reproduction interditeAngularFrance.com Communauté Angular 9
  10. 10. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  11. 11. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Angular 2 Présentation rapide 11
  12. 12. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  13. 13. Copyright 2016 - Toute reproduction interditeAngularFrance.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
  14. 14. Copyright 2016 - Toute reproduction interditeAngularFrance.com Le pattern “Composants” • Appli Angular = Arbre de composants. 14
  15. 15. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  16. 16. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Angular 1 vs Angular 2 Principales différences entre les 2 versions 16
  17. 17. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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)
  18. 18. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  19. 19. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  20. 20. Copyright 2016 - Toute reproduction interditeAngularFrance.com 1. Bootstraper Angular • NG1: directive ng-app (bootstrap automatique). • NG2: bootstrap via code avec la fonction bootstrap(). 20
  21. 21. Copyright 2016 - Toute reproduction interditeAngularFrance.com 2. Des contrôleurs aux composants • NG1: angular.controller() • NG2: Classe avec décorateur @Component. 21
  22. 22. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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">
  23. 23. Copyright 2016 - Toute reproduction interditeAngularFrance.com 4. Liaison de données (1/3) • Permet de synchroniser les données entre les composants et le DOM (aka la vue). 23
  24. 24. Copyright 2016 - Toute reproduction interditeAngularFrance.com 4. Liaison de données (2/3) • 1. Interpolation
 
 
 
 • 2. Binding de propriété (unidirectionnel)
 
 
 
 
 
 
 24
  25. 25. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  26. 26. Copyright 2016 - Toute reproduction interditeAngularFrance.com 5. Moins de directives • NG1: ng-style, ng-src, ng-href… • NG2: Plus de 40 directives NG1 ont disparu dans NG2 ! 26
  27. 27. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  28. 28. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  29. 29. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  30. 30. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  31. 31. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  32. 32. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  33. 33. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Outillage Angular 2 TypeScript, Tests, Angular CLI, Augury, Composants UI 33
  34. 34. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  35. 35. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  36. 36. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  37. 37. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  38. 38. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  39. 39. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Angular 2 est une plateforme Modulaire + Outils + Multi-environnement 39
  40. 40. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  41. 41. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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/
  42. 42. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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/
  43. 43. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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 NG2 43
  44. 44. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Démarrer avec Angular 2 Langage, Stack, Première app 44
  45. 45. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  46. 46. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  47. 47. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  48. 48. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Migrer de Angular 1 à Angular 2 48
  49. 49. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  50. 50. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  51. 51. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  52. 52. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  53. 53. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Faut-il passer à Angular 2 aujourd’hui ? 53
  54. 54. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  55. 55. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  56. 56. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  57. 57. Copyright 2016 - Toute reproduction interditeAngularFrance.com Quelques ressources
 Angular 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
  58. 58. Copyright 2016 - Toute reproduction interditeAngularFrance.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-fondamentaux 58
  59. 59. Copyright 2016 - Toute reproduction interditeAngularFrance.com 59 Merci !

×