Retrospective Angular 1

1. AngularJS, Retro ?
Deyine Jiddou
Lead software engineer at @Neticoa
deyine.jiddou@gmail.com
@Deyine

2. Flashback...

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. Old web frameworks

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. Problème

7. DemoJS

8. Angular, la réponse ?
En 4 mots clés
➢ Framework Javascript
➢ Single Page Application
➢ MVW (Whatever)
➢ Google

9. Modules
90 secondes
Un module est 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 route est gerée par un controller

12. Controller
60 secondes
➢ Le controller expose les données via le scope.

13. Scope
50 secondes
➢Objet liant le controller à la vue (Wikipedia)
➢Contient les données model exposées à la vue
➢Notion de Two way Binding

14. Services
40 secondes
➢ Les services permettent d’effectuer des traitements sur les
données.

15. Directives
30 secondes
➢Permettent d’enrichir HTML
➢Possibilité de créer de nouvelles balises / attributs
etc.
➢Un avant goût des Web Components

16. Directives
20 secondes

17. Tools
10 secondes
➢Build tools
➢Test tools
➢UX https://github.com/codylindley/frontend-tools

18. DemoJS

19. Benchmark
Rails App
ab -n 1000 -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. Avantages

22. Inconvenients
➢ Plus de 1000 watchers sur une page, peut degrader l’UI (angular-
tips.com)
Watcher ????

23. Inconvenients
➢$Watcher sur chaque model pour surveiller les
changements,
➢$Digest à chaque changement,

24. Inconvenients
➢ $Digest est le 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 code source de angularjs

26. Scope

27. Inconvenients
DemoJS

28. Future, Angular 2
Bonne nouvelle
➢ 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 votre attention
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