Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Comment réussir son projet en Angular 1.5 ?

À travers un retour d'éxpérience, je vous propose de découvrir les outils, les nouveautés d'Angular 1.5 et quelques tips & tricks qui vous aideront dans la réussite de votre projet Angular.

  • Be the first to comment

Comment réussir son projet en Angular 1.5 ?

  1. 1. Comment réussir son projet en Angular 1.5 ? Maxime BERNARD Lead Dev @ WeStud.io
  2. 2. Qui suis-je ?
  3. 3. Lead Dev
  4. 4. Disclaimer
  5. 5. Disclaimer Interactivité Subjectivité
  6. 6. Prérequis ?
  7. 7. Contexte
  8. 8. Contexte Meetings & Events by ClubMed www.meetings-events-clubmed.fr Angular 1.3 Projet NB [confidentiel] Angular 1.5.5
  9. 9. Part I Les outils
  10. 10. Part I Les outils Avant de démarrer le développement, il faut des bons outils => Gain de temps => Réduire les taches fastidieuses et/ou répétitives => Facilité
  11. 11. Quels outils utilisez-vous ?
  12. 12. Pour démarrer votre projet, il existe un outil bien pratique appelé...
  13. 13. Outils Yeoman -> Générateur de projet (outil de scaffolding) - Structure des fichiers - Scripts de compilation - Minification des feuilles de styles et tellement plus encore...
  14. 14. Exemple
  15. 15. Scaffolding
  16. 16. Outils Yeoman -> Des centaines de générateurs différents disponibles -> Mon préféré: gulp-angular
  17. 17. Et c’est quoi tous ces fichiers créés par le générateur ?
  18. 18. Scaffolding
  19. 19. À quoi sert le fichier `package.json` ?
  20. 20. Outils NPM -> Le Package Manager de Javascript -> Gère vos outils (et leur version & dépendances) -> `npm install -g yo` -> Fichier de configuration par projet: package.json
  21. 21. Pourquoi c’est bien ?
  22. 22. Outils NPM -> C’est facile -> S’occupe des versions et des dépendances -> Le package.json permet d’avoir les mêmes outils et mêmes versions quelque soit la machine
  23. 23. Scaffolding
  24. 24. À quoi sert le fichier `bower.json` ?
  25. 25. Outils Bower -> Le Package Manager de ...
  26. 26. Euh… C’est pas déjà NPM ça ?
  27. 27. Outils Bower -> Package Manager du Web - Pas propre à Javascript - Pas le même job - Fichier de configuration bower.json
  28. 28. Outils Bower Installer jQuery Avant: - Aller jquery.com - Télécharger la dernière version de jQuery.js - Déplacer le fichier dans votre projet - Et pareil pour mettre à jour
  29. 29. Outils Bower Installer jQuery Grace à Bower: - `bower install jquery` (`--save`) - Et pour mettre à jour… `bower update`
  30. 30. Quelle est la différence avec NPM ?
  31. 31. NPM -> gère vos dépendances “outils” ex: `npm install yo` `npm install bower` -> gère vos dépendances “applicatives” ex: `bower install angular` `bower install jquery` `bower install bootstrap` Bower
  32. 32. Scaffolding
  33. 33. À quoi sert le fichier `gulpfile.js` ?
  34. 34. Outils Gulp -> “Automatiseur de tâches” (Concurrent de Grunt) - Asynchrone - StreamBased
  35. 35. Outils Gulp - serve Besoin de compiler vos fichiers et les servir en local ? => `gulp serve` Par défaut, BrowserSync activé par défaut (gulp- angular).
  36. 36. Outils Gulp - dépendances Gulp gère les dépendances `gulp serve` `gulp build`
  37. 37. Exemple gulp.task('html', function (done) { // Compiler vos templates }); gulp.task('styles', function (done) { // Compiler vos CSS }); gulp.task('build', ['html', 'styles'], function(done) { // Ce que vous voulez faire en plus (facultatif) }); gulp.task('serve', ['build']);
  38. 38. Comment faites-vous vos sprites ?
  39. 39. Outils Gulp - spritesmith gulp.spritesmith -> Dans un dossier `foo`, ./foo/bar.png ./foo/baz.png => sprite.css & sprite.png - gère le @2x - génère lui-même vos classes .bar & .baz => `gulp sprite`
  40. 40. gulp-bower => `gulp bower` - lit vos dépendances dans le bower.json - les injecte automatiquement dans votre application Outils Gulp <3 Bower
  41. 41. Outils Gulp Des centaines de plugins Gulp sont déjà disponibles D’autres exemples ? - `gulp deploy` - `gulp test` - `gulp watch`
  42. 42. T’en as encore combien des outils… ?
  43. 43. Outils conclusion - NPM & Bower sont des “must-have” - Pour Gulp => Utilisez les outils qui vous servent
  44. 44. Part II AngularJS 1.5
  45. 45. Nouveautés AngularJS 1.5 ?
  46. 46. AngularJS 1.5 Quelles sont les nouveautés ? - Components - Amélioration des Classes ES6 - Plein de petites améliorations sympas => Plus d’infos sur: http://angularjs.blogspot.fr/2016/02/angular- 150-ennoblement-facilitation.html
  47. 47. Qui connait déjà les Components ?
  48. 48. Components Qu’est-ce que c’est ? C’est comme une directive… mais en plus simple et moins puissant.
  49. 49. Rien ne vaut un petit exemple :)
  50. 50. Avant (Directives) Après (Components) .directive('counter', function counter() { return { restrict: 'E', scope: {}, bindToController: { count: '=' }, controller: function () { function increment() { this.count++; } this.increment = increment; } }; }); .component('counter', { bindings: { count: '=' }, controller: function () { function increment() { this.count++; } this.increment = increment; } });
  51. 51. Euh… C’est tout ?
  52. 52. bindings bindToController compile controller controllerAs link multiElement priority require restrict scope template templateNamespace templateUrl terminal transclude (Elements only) (Isolate only) Directives Components Comparatif
  53. 53. Components Lifecycle Hooks /! Angular 1.5.5 - $onInit() - $postLink() - $onChanges() - $onDestroy() => Plus besoin de $scope :) (ou presque)
  54. 54. Components $onChanges Avant $scope.$watch(‘name’, function(n, o) { // Traitement }); Après this.$onChanges = function(changesObj) { if (changesObj.name) { // Traitement } }
  55. 55. Components $onDestroy Avant var timer = $timeout(function () { // Traitement }, 100); $scope.$on(‘destroy’, function() { $timeout.cancel(timer); }); Après var timer = $timeout(function () { // Traitement }, 100); this.$onDestroy = function() { $timeout.cancel(timer); };
  56. 56. Quels sont les avantages ?
  57. 57. Components Avantages - Facilité d’implémentation - Moins de pouvoir implique moins de responsabilités - Les Components en Angular 2.0 sont très similaires
  58. 58. Quels sont les inconvénients ?
  59. 59. Components Inconvénients - Limitations techniques
  60. 60. Comment choisir ?
  61. 61. Components Comment choisir ? - Les Components ne remplacent pas les Directives - Utilise un Component… sauf quand tu n’as pas le choix.
  62. 62. Part III Component-Based Architecture
  63. 63. Qui a déjà entendu de “Component-Based Achitecture” ?
  64. 64. Component Based Architecture La théorie => Approche modulaire (chaque module remplit sa fonctionnalité): - meilleure lisibilité - maintenance et évolutions facilitées - problèmes isolés - effets de bord réduits
  65. 65. Component Based Architecture La théorie appliquée au Web => “Extend the Web” Simple standard HTML tags: -> <button>, <table>, <input>, ... Créons nos propres composants ! -> <your-super-feature>
  66. 66. <votre-super-header> <article> <votre-super-footer> <article> <article> <article> <article> Component Based Architecture Petit schéma explicatif
  67. 67. En pratique, ça donne quoi ?
  68. 68. Scaffolding
  69. 69. Components Based Architecture La pratique ├── app │ ├── common │ │ ├── components │ │ ├── entities │ │ ├── filters │ │ └── services │ ├── config │ │ ├── config.js │ │ ├── env.json │ │ └── global.json │ ├── index.js │ ├── index.scss │ ├── layout │ │ ├── _10_fonts.scss │ │ ├── _20_colors.scss │ │ ├── _30_mixins.scss │ │ ├── _layout.scss │ ├── pages │ │ ├── articles │ │ ├── dashboard │ │ ├── home │ │ ├── profile │ │ ├── signup App file structure
  70. 70. Components Based Architecture La pratique src/app/common/components ├── nb-badge │ ├── nb-badge.html │ ├── nb-badge.js │ └── nb-badge.scss ├── nb-bubble-tag │ ├── nb-bubble-tag.html │ ├── nb-bubble-tag.js │ └── nb-bubble-tag.scss ├── nb-footer │ ├── nb-footer.html │ ├── nb-footer.js │ └── nb-footer.scss ├── nb-header │ ├── nb-header.html │ ├── nb-header.js │ └── nb-header.scss ├── nb-logo │ ├── nb-logo.html │ ├── nb-logo.js │ └── nb-logo.scss ├── nb-small-article │ ├── nb-small-article.html │ ├── nb-small-article.js │ └── nb-small-article.scss ├── nb-star-rating │ ├── nb-star-rating.html │ ├── nb-star-rating.js │ └── nb-star-rating.scss Components file structure ProjetNB BestPractice;)
  71. 71. Components Based Architecture La pratique Chaque Component a: - sa structure (HTML) - son affichage (CSS) - son comportement (JS)
  72. 72. Components Based Architecture Avantages - meilleure lisibilité -> chaque chose à sa place - maintenance et évolutions facilitées -> le code est à un seul endroit qu’on retrouve facilement - problèmes isolés -> idem - effets de bord réduits -> le Component a un scope isolé -> chaque Component a son CSS
  73. 73. Components Based Architecture Inconvénients - plus de réflexion -> Est-ce que je fais un Component pour cette fonctionnalité ou pas ? - plus de dév -> 3 fichiers de plus par Component - => Plus de temps -> plus d’argent
  74. 74. Components Based Architecture Conclusion Le code est bien plus - lisible - maintenable - évolutif À utiliser sur des projets à long terme. Bonne introduction à Angular 2.0
  75. 75. Epilogue 1 Tip & 1 Trick
  76. 76. Connaissez-vous $resource ?
  77. 77. Exemple $resource .factory('Users', function (API, $resource) { return $resource(API + '/users/:id', { id: '@id' }); }); Users.get({ id: 123 }); [GET] Users.save(); [POST] Users.query(); [GET] // sans :id Users.delete(); [DELETE] -- Object Style -- var user = new Users(); user.firstname = ‘Tom’; user.$save();
  78. 78. Exemple $resource avec méthodes supérieures .factory('Users', function (API, $resource) { var Users = $resource(API + '/users/:id/:action', { id: '@id' }, { orders: { params: { action: 'orders' }, isArray: true }, invoices: { params: { action: 'invoices' }, isArray: true }, }); return Users; });
  79. 79. 1 Tip $resource, c’est la vie ! Si vous utilisez une API RESTful pour vos données, utilisez $resource -> gain de temps -> simplicité -> maintenabilité
  80. 80. À quoi sert $timeout ?
  81. 81. 1 Trick $timeout comme vous ne l’avez jamais utilisé ! - $apply ? $digest ? - “$digest is already in progress” => :( - $timeout :)
  82. 82. Exemple angular.module('app', []).controller('TestController', ['$scope', function($scope){ $scope.name = 'Tom'; setTimeout(function(){ $scope.name = 'Bob'; }, 2000); }]); angular.module('app', []).controller('TestController', ['$scope', '$timeout', function($scope, $timeout){ $scope.name = 'Tom'; $timeout(function(){ $scope.name = 'Bob'; }, 2000); }]);
  83. 83. Utiliser $timeout avec/sans `delay` permet de notifier Angular de vérifier ses `bindings`
  84. 84. Des questions ? Des suggestions ? Partagez votre expérience !
  85. 85. Merci :) Vous pourrez retrouver ces slides sur SlideShare.

×