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