SlideShare une entreprise Scribd logo
1  sur  20
Télécharger pour lire hors ligne
WebApp : Consuming REST APIs
1. Le problème
Architecture 
Website 
App mobile 
Requête http 
API 
JSON / XML 
Requête http 
JSON / XML 
App hybride 
Requête http 
JSON / XML
mais alors … 
Comment faire 
communiquer le 
client et l’API ?
JavaScript !
mais pourquoi ? 
Ajax 
- 
Compatibilité 
- 
Standard
2. A JavaScript journey
Old JS & DOM
JS & library
JS & OOP 
Source : http://stackoverflow.com/questions/17118956/clarifying-javascript-prototype-nomenclature-and-mechanism
JS & frameworks (1)
JS & frameworks (2) 
Source : http://todomvc.com
3. WebApp and JavaScript components
Organiser le code 
MV*
Utilisation des données 
Ajax & 
binding
Afficher les données 
Templating
Gestion des urls 
Routing
Gestion des événements 
Event 
Handlers
Merci pour votre attention.
Bibliographie 
Understanding MVVM – A Guide For JavaScript Developers - Addy Osmani 
http://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/ 
When does it make sense to use an MVC framework for JavaScript? - Quora 
http://www.quora.com/When-does-it-make-sense-to-use-an-MVC-framework-for-JavaScript 
Journey Through The JavaScript MVC Jungle - Addy Osmani 
http://www.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/ 
TodoMVC - Addy Osmani, Sindre Sorhus, Pascal Hartig, Stephen Sawchuk & Colin Eberhardt 
http://todomvc.com

Contenu connexe

En vedette

Javascript #4.1 : fonctions for noobs
Javascript #4.1 : fonctions for noobsJavascript #4.1 : fonctions for noobs
Javascript #4.1 : fonctions for noobsJean Michel
 
Html & Css #5 : positionement
Html & Css #5 : positionementHtml & Css #5 : positionement
Html & Css #5 : positionementJean Michel
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécificationJean Michel
 
Gestion de projet #3 : besoin client
Gestion de projet #3 : besoin clientGestion de projet #3 : besoin client
Gestion de projet #3 : besoin clientJean Michel
 
#3 html in the real world
#3 html in the real world#3 html in the real world
#3 html in the real worldJean Michel
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événementsJean Michel
 
Javascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateursJavascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateursJean Michel
 
Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designJean Michel
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkJean Michel
 
Startup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt meStartup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt meJean Michel
 
Une introduction à Javascript
Une introduction à JavascriptUne introduction à Javascript
Une introduction à JavascriptJean Michel
 
Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisationJean Michel
 
Les modèles économiques du web
Les modèles économiques du webLes modèles économiques du web
Les modèles économiques du webJean Michel
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneJean Michel
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introductionJean Michel
 
Architecture logicielle #4 : mvc
Architecture logicielle #4 : mvcArchitecture logicielle #4 : mvc
Architecture logicielle #4 : mvcJean Michel
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctionsJean Michel
 
Javascript #10 : canvas
Javascript #10 : canvasJavascript #10 : canvas
Javascript #10 : canvasJean Michel
 

En vedette (20)

Javascript #4.1 : fonctions for noobs
Javascript #4.1 : fonctions for noobsJavascript #4.1 : fonctions for noobs
Javascript #4.1 : fonctions for noobs
 
Html & Css #5 : positionement
Html & Css #5 : positionementHtml & Css #5 : positionement
Html & Css #5 : positionement
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécification
 
Gestion de projet #3 : besoin client
Gestion de projet #3 : besoin clientGestion de projet #3 : besoin client
Gestion de projet #3 : besoin client
 
#3 html in the real world
#3 html in the real world#3 html in the real world
#3 html in the real world
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événements
 
Javascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateursJavascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateurs
 
Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented design
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto framework
 
Startup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt meStartup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt me
 
Une introduction à Javascript
Une introduction à JavascriptUne introduction à Javascript
Une introduction à Javascript
 
#4 css 101
#4 css 101#4 css 101
#4 css 101
 
Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisation
 
Les modèles économiques du web
Les modèles économiques du webLes modèles économiques du web
Les modèles économiques du web
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezone
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introduction
 
Architecture logicielle #4 : mvc
Architecture logicielle #4 : mvcArchitecture logicielle #4 : mvc
Architecture logicielle #4 : mvc
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctions
 
Projet timezone
Projet timezoneProjet timezone
Projet timezone
 
Javascript #10 : canvas
Javascript #10 : canvasJavascript #10 : canvas
Javascript #10 : canvas
 

Similaire à WebApp #4 : Consuming REST APIs

Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Claude Coulombe
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesENSET, Université Hassan II Casablanca
 
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhxml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhindguendouz2000
 
Ajax en Java - GTI780 & MTI780 - ETS - A08
Ajax en Java - GTI780 & MTI780 - ETS - A08Ajax en Java - GTI780 & MTI780 - ETS - A08
Ajax en Java - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09Claude Coulombe
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEMarouan OMEZZINE
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2ppRYMAA
 
Asp.Net Web.API, SignalR et UX : le futur
Asp.Net Web.API, SignalR et UX : le futurAsp.Net Web.API, SignalR et UX : le futur
Asp.Net Web.API, SignalR et UX : le futurMicrosoft
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Normes avancées du Web  - GTI780 & MTI780 - ETS - A09Normes avancées du Web  - GTI780 & MTI780 - ETS - A09
Normes avancées du Web - GTI780 & MTI780 - ETS - A09Claude Coulombe
 
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5Mohamed Nemili
 
Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Microsoft
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Tugdual Grall
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented ArchitectureDNG Consulting
 
Webserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWebserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWinslo Nwan
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptKhalid Jebbari
 
Building Entreprise App With Spring Portfolio
Building Entreprise App With Spring PortfolioBuilding Entreprise App With Spring Portfolio
Building Entreprise App With Spring Portfoliomaknihamdi
 

Similaire à WebApp #4 : Consuming REST APIs (20)

Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhxml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
 
Ajax en Java - GTI780 & MTI780 - ETS - A08
Ajax en Java - GTI780 & MTI780 - ETS - A08Ajax en Java - GTI780 & MTI780 - ETS - A08
Ajax en Java - GTI780 & MTI780 - ETS - A08
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
 
Asp.Net Web.API, SignalR et UX : le futur
Asp.Net Web.API, SignalR et UX : le futurAsp.Net Web.API, SignalR et UX : le futur
Asp.Net Web.API, SignalR et UX : le futur
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Normes avancées du Web  - GTI780 & MTI780 - ETS - A09Normes avancées du Web  - GTI780 & MTI780 - ETS - A09
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
 
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
 
Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
Webserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWebserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas doc
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
Building Entreprise App With Spring Portfolio
Building Entreprise App With Spring PortfolioBuilding Entreprise App With Spring Portfolio
Building Entreprise App With Spring Portfolio
 
Ter Web Service Intro
Ter Web Service IntroTer Web Service Intro
Ter Web Service Intro
 
La plateforme JEE
La plateforme JEELa plateforme JEE
La plateforme JEE
 

Plus de Jean Michel

Startup #7 : how to get customers
Startup #7 : how to get customersStartup #7 : how to get customers
Startup #7 : how to get customersJean Michel
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQueryJean Michel
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapJean Michel
 
Javascript #11: Space invader
Javascript #11: Space invaderJavascript #11: Space invader
Javascript #11: Space invaderJean Michel
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategieJean Michel
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introductionJean Michel
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?Jean Michel
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookiesJean Michel
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesJean Michel
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles Jean Michel
 
PHP #1 : introduction
PHP #1 : introductionPHP #1 : introduction
PHP #1 : introductionJean Michel
 
Dev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesDev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesJean Michel
 
Startup #5 : pitch
Startup #5 : pitchStartup #5 : pitch
Startup #5 : pitchJean Michel
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive designJean Michel
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introductionJean Michel
 

Plus de Jean Michel (17)

Startup #7 : how to get customers
Startup #7 : how to get customersStartup #7 : how to get customers
Startup #7 : how to get customers
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQuery
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
 
Javascript #11: Space invader
Javascript #11: Space invaderJavascript #11: Space invader
Javascript #11: Space invader
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategie
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introduction
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookies
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulaires
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles
 
PHP #1 : introduction
PHP #1 : introductionPHP #1 : introduction
PHP #1 : introduction
 
Dev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesDev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummies
 
Startup #5 : pitch
Startup #5 : pitchStartup #5 : pitch
Startup #5 : pitch
 
WebApp #3 : API
WebApp #3 : APIWebApp #3 : API
WebApp #3 : API
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive design
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introduction
 

WebApp #4 : Consuming REST APIs