SlideShare une entreprise Scribd logo
1  sur  30
AngularJS, Retro ?
Deyine Jiddou
Lead software engineer at @Neticoa
deyine.jiddou@gmail.com
@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
Modules
90 secondes
Un module est composé de
➢routes
➢controllers / scope
➢services, factories, providers
➢directives
Modules
80 secondes
➢Démarrage d’Angular
➢ Création du module principal
Routes
70 secondes
➢Chaque route est gerée par un controller
Controller
60 secondes
➢ Le controller expose les données via le scope.
Scope
50 secondes
➢Objet liant le controller à la vue (Wikipedia)
➢Contient les données model exposées à la vue
➢Notion de Two way Binding
Services
40 secondes
➢ Les services permettent d’effectuer des traitements sur les
données.
Directives
30 secondes
➢Permettent d’enrichir HTML
➢Possibilité de créer de nouvelles balises / attributs
etc.
➢Un avant goût des Web Components
Directives
20 secondes
Tools
10 secondes
➢Build tools
➢Test tools
➢UX https://github.com/codylindley/frontend-tools
DemoJS
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
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
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 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
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

Contenu connexe

Tendances

Les principales nouveautés de JavaScript ES6 (ES2015)
Les principales nouveautés de JavaScript ES6 (ES2015)Les principales nouveautés de JavaScript ES6 (ES2015)
Les principales nouveautés de JavaScript ES6 (ES2015)Ala Eddine JEBALI
 
Debian usage at BlaBlaCar - Debian Paris meetup
Debian usage at BlaBlaCar - Debian Paris meetupDebian usage at BlaBlaCar - Debian Paris meetup
Debian usage at BlaBlaCar - Debian Paris meetupJean Baptiste Favre
 
BlaBlaCar - Going Native !
BlaBlaCar - Going Native ! BlaBlaCar - Going Native !
BlaBlaCar - Going Native ! Erwann Robin
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptxEsokia
 
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerceWordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerceVaisonet
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs13p
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSFrédéric DUPERIER
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Clément Dubois
 
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrenteCocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrenteCocoaHeads France
 
Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB13p
 
Le monitoring de la performance front
Le monitoring de la performance frontLe monitoring de la performance front
Le monitoring de la performance frontJean-Pierre Vincent
 
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...ALTER WAY
 
Gatekeeper par Guillaume Faure
Gatekeeper par Guillaume FaureGatekeeper par Guillaume Faure
Gatekeeper par Guillaume FaureCocoaHeads France
 
Electron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARDElectron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARDLa Cuisine du Web
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.jsTelecomValley
 
Présentation de BackBone.JS
Présentation de BackBone.JSPrésentation de BackBone.JS
Présentation de BackBone.JSNoirdes
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Yves-Emmanuel Jutard
 
Annotation Processor, trésor caché de la JVM
Annotation Processor, trésor caché de la JVMAnnotation Processor, trésor caché de la JVM
Annotation Processor, trésor caché de la JVMRaphaël Brugier
 

Tendances (20)

Les principales nouveautés de JavaScript ES6 (ES2015)
Les principales nouveautés de JavaScript ES6 (ES2015)Les principales nouveautés de JavaScript ES6 (ES2015)
Les principales nouveautés de JavaScript ES6 (ES2015)
 
Debian usage at BlaBlaCar - Debian Paris meetup
Debian usage at BlaBlaCar - Debian Paris meetupDebian usage at BlaBlaCar - Debian Paris meetup
Debian usage at BlaBlaCar - Debian Paris meetup
 
BlaBlaCar - Going Native !
BlaBlaCar - Going Native ! BlaBlaCar - Going Native !
BlaBlaCar - Going Native !
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerceWordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrenteCocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
 
Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB
 
Le monitoring de la performance front
Le monitoring de la performance frontLe monitoring de la performance front
Le monitoring de la performance front
 
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
 
Gatekeeper par Guillaume Faure
Gatekeeper par Guillaume FaureGatekeeper par Guillaume Faure
Gatekeeper par Guillaume Faure
 
Electron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARDElectron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARD
 
NodeJs in real life
NodeJs in real lifeNodeJs in real life
NodeJs in real life
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 
Présentation de BackBone.JS
Présentation de BackBone.JSPrésentation de BackBone.JS
Présentation de BackBone.JS
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
 
Annotation Processor, trésor caché de la JVM
Annotation Processor, trésor caché de la JVMAnnotation Processor, trésor caché de la JVM
Annotation Processor, trésor caché de la JVM
 

En vedette

Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerLuminary Labs
 
Master mx 70a edicion
Master mx 70a edicionMaster mx 70a edicion
Master mx 70a edicionMaster Mx
 
Course introduction writing IV 2016 (week 1)
Course introduction writing IV 2016 (week 1)Course introduction writing IV 2016 (week 1)
Course introduction writing IV 2016 (week 1)Ron Martinez
 
Contexto historico social de las nuevas tic
Contexto historico social de las nuevas ticContexto historico social de las nuevas tic
Contexto historico social de las nuevas ticalfredo7253
 
Rekayasa web part 2 khaerul anwar
Rekayasa web part 2 khaerul anwarRekayasa web part 2 khaerul anwar
Rekayasa web part 2 khaerul anwarKhaerul Anwar
 
Modelos económicos implementados en méxico maximato y cardenismo
Modelos económicos implementados en méxico maximato y cardenismoModelos económicos implementados en méxico maximato y cardenismo
Modelos económicos implementados en méxico maximato y cardenismoFernando Cetz Alpuche
 
Angular JS blog tutorial
Angular JS blog tutorialAngular JS blog tutorial
Angular JS blog tutorialClaude Tech
 
Les Français et les affaires Fillon et Le Pen / Sondage ELABE pour BFMTV
Les Français et les affaires Fillon et Le Pen / Sondage ELABE pour BFMTVLes Français et les affaires Fillon et Le Pen / Sondage ELABE pour BFMTV
Les Français et les affaires Fillon et Le Pen / Sondage ELABE pour BFMTVcontact Elabe
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slidessamhelman
 
AngularJS performance & production tips
AngularJS performance & production tipsAngularJS performance & production tips
AngularJS performance & production tipsNir Kaufman
 
Annabel Lee
Annabel LeeAnnabel Lee
Annabel Leebmtravis
 
Thiviolympic giai toan tren mang lop 2- 2013 - vong 15
Thiviolympic  giai toan tren mang lop 2- 2013 - vong 15Thiviolympic  giai toan tren mang lop 2- 2013 - vong 15
Thiviolympic giai toan tren mang lop 2- 2013 - vong 15tieuhocvn .info
 

En vedette (16)

Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 
Multimedia aplicada a la educacion
Multimedia aplicada a la educacionMultimedia aplicada a la educacion
Multimedia aplicada a la educacion
 
Master mx 70a edicion
Master mx 70a edicionMaster mx 70a edicion
Master mx 70a edicion
 
Course introduction writing IV 2016 (week 1)
Course introduction writing IV 2016 (week 1)Course introduction writing IV 2016 (week 1)
Course introduction writing IV 2016 (week 1)
 
Contexto historico social de las nuevas tic
Contexto historico social de las nuevas ticContexto historico social de las nuevas tic
Contexto historico social de las nuevas tic
 
Rekayasa web part 2 khaerul anwar
Rekayasa web part 2 khaerul anwarRekayasa web part 2 khaerul anwar
Rekayasa web part 2 khaerul anwar
 
Modelos económicos implementados en méxico maximato y cardenismo
Modelos económicos implementados en méxico maximato y cardenismoModelos económicos implementados en méxico maximato y cardenismo
Modelos económicos implementados en méxico maximato y cardenismo
 
Angular JS blog tutorial
Angular JS blog tutorialAngular JS blog tutorial
Angular JS blog tutorial
 
Les Français et les affaires Fillon et Le Pen / Sondage ELABE pour BFMTV
Les Français et les affaires Fillon et Le Pen / Sondage ELABE pour BFMTVLes Français et les affaires Fillon et Le Pen / Sondage ELABE pour BFMTV
Les Français et les affaires Fillon et Le Pen / Sondage ELABE pour BFMTV
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
 
Perl and AWS
Perl and AWSPerl and AWS
Perl and AWS
 
AngularJS performance & production tips
AngularJS performance & production tipsAngularJS performance & production tips
AngularJS performance & production tips
 
Annabel Lee
Annabel LeeAnnabel Lee
Annabel Lee
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Thiviolympic giai toan tren mang lop 2- 2013 - vong 15
Thiviolympic  giai toan tren mang lop 2- 2013 - vong 15Thiviolympic  giai toan tren mang lop 2- 2013 - vong 15
Thiviolympic giai toan tren mang lop 2- 2013 - vong 15
 

Similaire à Angular retro

Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
Université de la performance - Devoxx France
Université de la performance - Devoxx FranceUniversité de la performance - Devoxx France
Université de la performance - Devoxx FranceMarc Bojoly
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: AngularHabib Ayad
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Luc Juggery
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Ippon
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreStéphane Traumat
 
Les containers docker vu par un chef cuisinier et un mécanicien
Les containers docker vu par un chef cuisinier et un mécanicienLes containers docker vu par un chef cuisinier et un mécanicien
Les containers docker vu par un chef cuisinier et un mécanicienRachid Zarouali
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2Microsoft
 
20080923 04 - Selenium web application testing system
20080923 04 - Selenium web application testing system20080923 04 - Selenium web application testing system
20080923 04 - Selenium web application testing systemLeClubQualiteLogicielle
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursHoracio Gonzalez
 
Orchestrating Docker in production - TIAD Camp Docker
Orchestrating Docker in production - TIAD Camp DockerOrchestrating Docker in production - TIAD Camp Docker
Orchestrating Docker in production - TIAD Camp DockerThe Incredible Automation Day
 
"La Performance en Continue" à JMaghreb 3.0 - 05/11/2014
"La Performance en Continue" à JMaghreb 3.0 - 05/11/2014"La Performance en Continue" à JMaghreb 3.0 - 05/11/2014
"La Performance en Continue" à JMaghreb 3.0 - 05/11/2014Benoît de CHATEAUVIEUX
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 

Similaire à Angular retro (20)

Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
Perf university
Perf universityPerf university
Perf university
 
Université de la performance - Devoxx France
Université de la performance - Devoxx FranceUniversité de la performance - Devoxx France
Université de la performance - Devoxx France
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
Les containers docker vu par un chef cuisinier et un mécanicien
Les containers docker vu par un chef cuisinier et un mécanicienLes containers docker vu par un chef cuisinier et un mécanicien
Les containers docker vu par un chef cuisinier et un mécanicien
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2
 
20080923 04 - Selenium web application testing system
20080923 04 - Selenium web application testing system20080923 04 - Selenium web application testing system
20080923 04 - Selenium web application testing system
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 
Orchestrating Docker in production - TIAD Camp Docker
Orchestrating Docker in production - TIAD Camp DockerOrchestrating Docker in production - TIAD Camp Docker
Orchestrating Docker in production - TIAD Camp Docker
 
"La Performance en Continue" à JMaghreb 3.0 - 05/11/2014
"La Performance en Continue" à JMaghreb 3.0 - 05/11/2014"La Performance en Continue" à JMaghreb 3.0 - 05/11/2014
"La Performance en Continue" à JMaghreb 3.0 - 05/11/2014
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 

Angular retro