Télécharger pour lire hors ligne
Téléchargé parDeyine Jiddou
Angular retro
Le document aborde AngularJS comme un framework JavaScript pour les applications web à page unique, en détaillant sa structure en modules, contrôleurs, services et directives. Il évoque les avantages d'AngularJS, comme un backend allégé et une meilleure extensibilité, tout en soulignant ses inconvénients, notamment la gestion des watchers et la dégradation potentielle de l'interface utilisateur. Enfin, il mentionne Angular 2, qui corrige les lacunes de la version 1.x mais n'est pas rétrocompatible.
Angular retro
- 1. AngularJS, Retro ? DeyineJiddou Lead software engineer at @Neticoa deyine.jiddou@gmail.com @Deyine
- 2.
- 3. Old web frameworks ➢Pattern MVC et variantes MVC2 / MVVM / MVP … ➢ Routes, données et templates gérés côté serveur ➢ View Template Engine
- 4.
- 5. Problème ➢ Html généréà chaque requête Http ➢ Cache html uniquement côté serveur ➢ + 80% de contenu statique dans chaque réponse
- 6.
- 7.
- 8. Angular, la réponse? En 4 mots clés ➢ Framework Javascript ➢ Single Page Application ➢ MVW (Whatever) ➢ Google
- 9. Modules 90 secondes Un moduleest composé de ➢routes ➢controllers / scope ➢services, factories, providers ➢directives
- 10. Modules 80 secondes ➢Démarrage d’Angular ➢Création du module principal
- 11. Routes 70 secondes ➢Chaque routeest gerée par un controller
- 12. Controller 60 secondes ➢ Lecontroller expose les données via le scope.
- 13. Scope 50 secondes ➢Objet liantle controller à la vue (Wikipedia) ➢Contient les données model exposées à la vue ➢Notion de Two way Binding
- 14. Services 40 secondes ➢ Lesservices permettent d’effectuer des traitements sur les données.
- 15. Directives 30 secondes ➢Permettent d’enrichirHTML ➢Possibilité de créer de nouvelles balises / attributs etc. ➢Un avant goût des Web Components
- 16.
- 17. Tools 10 secondes ➢Build tools ➢Testtools ➢UX https://github.com/codylindley/frontend-tools
- 18.
- 19. Benchmark Rails App ab -n1000 -c 10 http://localhost:3000/presentations Rails backend app ab -n 1000 -c 10 http://localhost:3000/api/slides
- 20. Avantages ➢ Backend allégé(~ 5x Faster) ➢ Faible couplage : Même Backend pour tous les clients ➢ Coder en parallèle : Frontend et Backend ➢ Webapp statique ➢ Extensibilité via les directives
- 21.
- 22. Inconvenients ➢ Plus de1000 watchers sur une page, peut degrader l’UI (angular- tips.com) Watcher ????
- 23. Inconvenients ➢$Watcher sur chaquemodel pour surveiller les changements, ➢$Digest à chaque changement,
- 24. Inconvenients ➢ $Digest estle cycle dans lequel les watchers sont evalués, ➢ Le cycle $Digest est lancé par un appel de $scope.$apply() ➢ $scope.$apply() est lancé par les directives natives ou evenements (ng-click , ngModel etc) https://github.com/angular/angular.js/blob/d077966ff1ac18262f4615ff1a533db24d4432a7/src/ng/directive/ngEventDirs.js ➢ Ok, mais jusqu’à quand ? 2 fois au min / 10 au max
- 25. Inconvenients Extrait du codesource de angularjs
- 26.
- 27.
- 28. Future, Angular 2 Bonnenouvelle ➢ Les lacunes de Angular 1.X ont été adressées/corrigées dans Angular 2 Mauvaise nouvelle ➢ Angular 2 est une réecriture. Aucune retrocompatibilité n’est prévue
- 29. Merci pour votreattention QuestionJS ?
- 30. Links - https://farm9.staticflickr.com/8529/8588701778_91aeb65377_o.png - http://www.allenpike.com/2015/javascript-framework-fatigue/ -angular-tips.com - https://github.com/djsmith42