SlideShare une entreprise Scribd logo
1  sur  20
Single Page Web Application
(Application web monopage)

Twitter: @cherif_b
Plan
●

Introduction

●

Définition

●

Pourquoi? (Le probléme)

●

Technologies Serveur

●

Technologie Client

●

Architectures

●

Templating et gestion d'état (DOM must die)

●

Gestion des dépendences

●

Frameworks et librairies

●

Demo
Introduction
Introduction
Introduction
Introduction
Définition

C'est une application web qui nous permet
d'offrir une expérience utilisateur proche de
l'application bureau Native
Pourquoi?!
L'utilisateur

s'attend à plus
Technologies Serveur
Technologie Client
Architecture
La couche de données (models)
Source de données (Data source)

●

Façon courante de l'instanciation des modèles de
données existantes

●

Récuperation des modèles par identifiant

●

Récuperation des modèles par recherche/filtre
Modéles de données (Models)

●
●

●

Un lieu pour stocker des données
Envoie des événements lorsque les
données changent
Peut être sérialisé et persisté
Collections(Listes)

●

●

●

contient collection des éléments
Envoie des événements lorsque des éléments sont
ajoutés / supprimés
Il peut avoir un ordre défini de modeles
Gestion des évenements
(Controller)
Templating et gestion d'état
(DOM must die)
Gestion des dépendences

●

●

Parce que notre application dépend
d'autres librairies et framework
Ou notre code lui même
Frameworks/librairies
Question/respose

Contenu connexe

En vedette

INTERNACIONALITZAR-SE - EMPRENDRE
INTERNACIONALITZAR-SE  - EMPRENDREINTERNACIONALITZAR-SE  - EMPRENDRE
INTERNACIONALITZAR-SE - EMPRENDREmiri1971
 
Previna-se da fraude de forma eficiente e aumente suas vendas
Previna-se da fraude de forma eficiente e aumente suas vendasPrevina-se da fraude de forma eficiente e aumente suas vendas
Previna-se da fraude de forma eficiente e aumente suas vendasRakuten Brasil
 
Portales de colombia
Portales de colombiaPortales de colombia
Portales de colombiaLeidyPG1108
 
Xornada Portas Abertas
Xornada Portas AbertasXornada Portas Abertas
Xornada Portas Abertasbertacolmenero
 
Clase 2.ciencia ficción, fantasía y aventura
Clase 2.ciencia ficción, fantasía y aventuraClase 2.ciencia ficción, fantasía y aventura
Clase 2.ciencia ficción, fantasía y aventuramariappreciado
 
République arabe d'égypte
République arabe d'égypteRépublique arabe d'égypte
République arabe d'égypteppaulapperez
 
shc jessica vergel y adriana sarabia
shc jessica vergel y adriana sarabia shc jessica vergel y adriana sarabia
shc jessica vergel y adriana sarabia Jessica Vergel Plata
 
La Sociedad de Información
La Sociedad de InformaciónLa Sociedad de Información
La Sociedad de Informaciónrebeca_or
 
Seminario 4 estadística
Seminario 4 estadísticaSeminario 4 estadística
Seminario 4 estadísticaPaula Ruiz
 
Prescriptions urbanistiques et durabilité
Prescriptions urbanistiques et durabilitéPrescriptions urbanistiques et durabilité
Prescriptions urbanistiques et durabilitéecobuild.brussels
 
Comment la presse doit-elle utiliser Internet comme outil de promotion.
Comment la presse doit-elle utiliser Internet comme outil de promotion.Comment la presse doit-elle utiliser Internet comme outil de promotion.
Comment la presse doit-elle utiliser Internet comme outil de promotion.ma14
 
GEMS Solution - Logiciel de Simulation Thermique Dynamique
GEMS Solution - Logiciel de Simulation Thermique DynamiqueGEMS Solution - Logiciel de Simulation Thermique Dynamique
GEMS Solution - Logiciel de Simulation Thermique Dynamiqueecobuild.brussels
 

En vedette (20)

INTERNACIONALITZAR-SE - EMPRENDRE
INTERNACIONALITZAR-SE  - EMPRENDREINTERNACIONALITZAR-SE  - EMPRENDRE
INTERNACIONALITZAR-SE - EMPRENDRE
 
Previna-se da fraude de forma eficiente e aumente suas vendas
Previna-se da fraude de forma eficiente e aumente suas vendasPrevina-se da fraude de forma eficiente e aumente suas vendas
Previna-se da fraude de forma eficiente e aumente suas vendas
 
Portales de colombia
Portales de colombiaPortales de colombia
Portales de colombia
 
Tomas puentes
Tomas puentesTomas puentes
Tomas puentes
 
WEB 2.0
WEB 2.0WEB 2.0
WEB 2.0
 
Xornada Portas Abertas
Xornada Portas AbertasXornada Portas Abertas
Xornada Portas Abertas
 
trabajo de computacion
trabajo de computacion   trabajo de computacion
trabajo de computacion
 
Clase 2.ciencia ficción, fantasía y aventura
Clase 2.ciencia ficción, fantasía y aventuraClase 2.ciencia ficción, fantasía y aventura
Clase 2.ciencia ficción, fantasía y aventura
 
République arabe d'égypte
République arabe d'égypteRépublique arabe d'égypte
République arabe d'égypte
 
Himpervinculos
HimpervinculosHimpervinculos
Himpervinculos
 
Autobiografia TIC
Autobiografia TIC Autobiografia TIC
Autobiografia TIC
 
shc jessica vergel y adriana sarabia
shc jessica vergel y adriana sarabia shc jessica vergel y adriana sarabia
shc jessica vergel y adriana sarabia
 
La Sociedad de Información
La Sociedad de InformaciónLa Sociedad de Información
La Sociedad de Información
 
Seminario 4 estadística
Seminario 4 estadísticaSeminario 4 estadística
Seminario 4 estadística
 
Prescriptions urbanistiques et durabilité
Prescriptions urbanistiques et durabilitéPrescriptions urbanistiques et durabilité
Prescriptions urbanistiques et durabilité
 
Communications
CommunicationsCommunications
Communications
 
Comment la presse doit-elle utiliser Internet comme outil de promotion.
Comment la presse doit-elle utiliser Internet comme outil de promotion.Comment la presse doit-elle utiliser Internet comme outil de promotion.
Comment la presse doit-elle utiliser Internet comme outil de promotion.
 
Scalabilité et PHP
Scalabilité et PHPScalabilité et PHP
Scalabilité et PHP
 
Web 2
Web 2Web 2
Web 2
 
GEMS Solution - Logiciel de Simulation Thermique Dynamique
GEMS Solution - Logiciel de Simulation Thermique DynamiqueGEMS Solution - Logiciel de Simulation Thermique Dynamique
GEMS Solution - Logiciel de Simulation Thermique Dynamique
 

Similaire à Single Page Application

Introduction au Domain Driven Design
Introduction au Domain Driven DesignIntroduction au Domain Driven Design
Introduction au Domain Driven DesignDNG Consulting
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3Horacio Gonzalez
 
Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]linasafaa
 
7_SitesWebMVC.pdf
7_SitesWebMVC.pdf7_SitesWebMVC.pdf
7_SitesWebMVC.pdfBerrySeven
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1Horacio Gonzalez
 
11 visual basic .net - acces aux donnees avec ado .net
11 visual basic .net - acces aux donnees avec ado .net11 visual basic .net - acces aux donnees avec ado .net
11 visual basic .net - acces aux donnees avec ado .netHamza SAID
 
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...CERTyou Formation
 
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...CERTyou Formation
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSHoracio Gonzalez
 
Session en ligne: Découverte du Logical Data Fabric & Data Virtualization
Session en ligne: Découverte du Logical Data Fabric & Data VirtualizationSession en ligne: Découverte du Logical Data Fabric & Data Virtualization
Session en ligne: Découverte du Logical Data Fabric & Data VirtualizationDenodo
 
SQL Server et les développeurs
SQL Server et les développeurs SQL Server et les développeurs
SQL Server et les développeurs Microsoft
 
Chp2 - Vers les Architectures Orientées Services
Chp2 - Vers les Architectures Orientées ServicesChp2 - Vers les Architectures Orientées Services
Chp2 - Vers les Architectures Orientées ServicesLilia Sfaxi
 
Azure Camp 9 Décembre - slides session développeurs webmedia
Azure Camp 9 Décembre - slides session développeurs webmediaAzure Camp 9 Décembre - slides session développeurs webmedia
Azure Camp 9 Décembre - slides session développeurs webmediaMicrosoft
 
Linq et Entity framework
Linq et Entity frameworkLinq et Entity framework
Linq et Entity frameworkDNG Consulting
 
Développement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EEDéveloppement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EESabri Bouchlema
 
Adoef formation-ado-net-entity-framework
Adoef formation-ado-net-entity-frameworkAdoef formation-ado-net-entity-framework
Adoef formation-ado-net-entity-frameworkCERTyou Formation
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSHoracio Gonzalez
 
10-Cours de Géniel Logiciel
10-Cours de Géniel Logiciel10-Cours de Géniel Logiciel
10-Cours de Géniel Logiciellauraty3204
 
Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFBoubker ABERWAG
 

Similaire à Single Page Application (20)

Introduction au Domain Driven Design
Introduction au Domain Driven DesignIntroduction au Domain Driven Design
Introduction au Domain Driven Design
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
 
Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]
 
7_SitesWebMVC.pdf
7_SitesWebMVC.pdf7_SitesWebMVC.pdf
7_SitesWebMVC.pdf
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
 
11 visual basic .net - acces aux donnees avec ado .net
11 visual basic .net - acces aux donnees avec ado .net11 visual basic .net - acces aux donnees avec ado .net
11 visual basic .net - acces aux donnees avec ado .net
 
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
 
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
B5252 g formation-ibm-cognos-framework-manager-concevoir-des-modeles-de-metad...
 
Java Entreprise Edition
Java Entreprise EditionJava Entreprise Edition
Java Entreprise Edition
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
 
Session en ligne: Découverte du Logical Data Fabric & Data Virtualization
Session en ligne: Découverte du Logical Data Fabric & Data VirtualizationSession en ligne: Découverte du Logical Data Fabric & Data Virtualization
Session en ligne: Découverte du Logical Data Fabric & Data Virtualization
 
SQL Server et les développeurs
SQL Server et les développeurs SQL Server et les développeurs
SQL Server et les développeurs
 
Chp2 - Vers les Architectures Orientées Services
Chp2 - Vers les Architectures Orientées ServicesChp2 - Vers les Architectures Orientées Services
Chp2 - Vers les Architectures Orientées Services
 
Azure Camp 9 Décembre - slides session développeurs webmedia
Azure Camp 9 Décembre - slides session développeurs webmediaAzure Camp 9 Décembre - slides session développeurs webmedia
Azure Camp 9 Décembre - slides session développeurs webmedia
 
Linq et Entity framework
Linq et Entity frameworkLinq et Entity framework
Linq et Entity framework
 
Développement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EEDéveloppement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EE
 
Adoef formation-ado-net-entity-framework
Adoef formation-ado-net-entity-frameworkAdoef formation-ado-net-entity-framework
Adoef formation-ado-net-entity-framework
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 
10-Cours de Géniel Logiciel
10-Cours de Géniel Logiciel10-Cours de Géniel Logiciel
10-Cours de Géniel Logiciel
 
Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPF
 

Single Page Application

Notes de l'éditeur

  1. The model layer looks fairly similar across different single page app frameworks because there just aren't that many different ways to solve this problem. You need the ability to represent data items and sets of data items; you need a way to load data; and you probably want to have some caching in place to avoid naively reloading data that you already have. Whether these exist as separate mechanisms or as a part of single large model is mostly an implementation detail.