Angular retro

AngularJS, Retro ?Deyine JiddouLead software engineer at @[email protected]@Deyine

Flashback...

Old web frameworks➢ Pattern MVC et variantes MVC2 / MVVM / MVP …

➢ Routes, données et templates gérés côté serveur ➢ View Template Engine

Old web frameworks

Problème➢ Html généré à chaque requête Http

➢ Cache html uniquement côté serveur ➢ + 80% de contenu statique dans chaque réponse

Problème

DemoJS

Angular, la réponse ?En 4 mots clés

➢ Framework Javascript

➢ Single Page Application

➢ MVW (Whatever)

➢ Google

Modules90 secondesUn module est composé de

➢routes

➢controllers / scope

➢services, factories, providers

➢directives

➢filters

Modules80 secondes

➢Démarrage d’Angular

➢ Création du module principal

Routes70 secondes

➢Chaque route est gerée par un controller

Controller60 secondes

➢ Le controller expose les données via le scope.

Scope50 secondes

➢Objet liant le controller à la vue (Wikipedia)

➢Contient les données model exposées à la vue

➢Notion de Two way Binding

Services40 secondes

➢ Les services permettent d’effectuer des traitements sur les données.

Directives30 secondes

➢Permettent d’enrichir HTML

➢Possibilité de créer de nouvelles balises / attributs etc.

➢Un avant goût des Web Components

Directives20 secondes

Tools10 secondes

➢Build tools

➢Test tools

➢UXhttps://github.com/codylindley/frontend-tools

DemoJS

BenchmarkRails Appab -n 1000 -c 10 http://localhost:3000/presentations

Rails backend appab -n 1000 -c 10 http://localhost:3000/api/slides

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

➢ Activité & Engagement de la communauté (ng-conf, ng-europe etc.)

Avantages

Inconvenients➢ Plus de 1000 watchers sur une page, peut degrader l’UI (angular-

tips.com)

Watcher ????

Inconvenients

➢$Watcher sur chaque model pour surveiller les

changements,

➢$Digest à chaque changement,

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

Inconvenients

Extrait du code source de angularjs

Scope

Inconvenients

DemoJS

Future, Angular 2Bonne 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

Merci pour votre attention

QuestionJS ?

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