SlideShare una empresa de Scribd logo
1 de 20
Descargar para leer sin conexión
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

Más contenido relacionado

Destacado

Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented design
Jean Michel
 

Destacado (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
 

Similar a WebApp #4 : Consuming REST APIs

Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
RYMAA
 
Webserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWebserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas doc
Winslo Nwan
 
Building Entreprise App With Spring Portfolio
Building Entreprise App With Spring PortfolioBuilding Entreprise App With Spring Portfolio
Building Entreprise App With Spring Portfolio
maknihamdi
 

Similar a 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
 

Más de Jean Michel

Más 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