Submit Search
Upload
Single page application - .Net
•
0 likes
•
1,270 views
El Aber Haythem
Follow
Architecture et principes de base des SPA
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 8
Download now
Download to read offline
Recommended
AngularJS - Présentation (french)
AngularJS - Présentation (french)
Yacine Rezgui
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony
Béta code start&stop
Béta code start&stop
mikaelgautier
Programme 2003 Top Croissance
Programme 2003 Top Croissance
regionalpartner56
Vers une approche de sécurisation des entrepôts de données en utilisant les r...
Vers une approche de sécurisation des entrepôts de données en utilisant les r...
Salah Triki
Lettre député
Lettre député
graves146
Nouveau présentation open document
Nouveau présentation open document
Doublet-fr
Le club des deux clowns
Le club des deux clowns
daouclara
Recommended
AngularJS - Présentation (french)
AngularJS - Présentation (french)
Yacine Rezgui
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony
Béta code start&stop
Béta code start&stop
mikaelgautier
Programme 2003 Top Croissance
Programme 2003 Top Croissance
regionalpartner56
Vers une approche de sécurisation des entrepôts de données en utilisant les r...
Vers une approche de sécurisation des entrepôts de données en utilisant les r...
Salah Triki
Lettre député
Lettre député
graves146
Nouveau présentation open document
Nouveau présentation open document
Doublet-fr
Le club des deux clowns
Le club des deux clowns
daouclara
Pourquoi mettre en péril vos calculs critiques??
Pourquoi mettre en péril vos calculs critiques??
Caroline de Villèle
Naïar draka
Naïar draka
Godest
PostgreSQL Meetup Nantes #2
PostgreSQL Meetup Nantes #2
Rodolphe Quiédeville
An exa.ppt
An exa.ppt
enseignement
Test initial VII FR
Test initial VII FR
Calina Diana Ruja
Cartes postales pourquoi l'ump
Cartes postales pourquoi l'ump
Alexandre Houpert
La durabilité, nouvel horizon du lean 6 sigma
La durabilité, nouvel horizon du lean 6 sigma
Ecosysmis
Dp rcd
Dp rcd
RAC-F
Opinionway pour cci grande consultation des entrepreneurs vague 4
Opinionway pour cci grande consultation des entrepreneurs vague 4
CCI Entreprendre
D•sign Magazine #0
D•sign Magazine #0
Nicolò Montevecchi
Offre rse
Offre rse
Frédéric Cordel
Dp contribution UE paris climat 2015
Dp contribution UE paris climat 2015
RAC-F
Programme de 4 jours
Programme de 4 jours
Ideotour Vietnam
LES DEFIS DES DROITS DE L'HOMME AU NIGERIA_LAUREATE NIGERIANE_2012
LES DEFIS DES DROITS DE L'HOMME AU NIGERIA_LAUREATE NIGERIANE_2012
Love Aludo
Ppt computertraining
Ppt computertraining
Fabien McShadow
Un Curieux Affublement par Gries Jessica
Un Curieux Affublement par Gries Jessica
Casse Brancard
JTC 2024 Bâtiment et Photovoltaïque.pdf
JTC 2024 Bâtiment et Photovoltaïque.pdf
Institut de l'Elevage - Idele
conception d'un batiment r+4 comparative de defferente ariante de plancher
conception d'un batiment r+4 comparative de defferente ariante de plancher
mansouriahlam
WBS OBS RACI_2020-etunhjjlllllll pdf.pdf
WBS OBS RACI_2020-etunhjjlllllll pdf.pdf
Sophie569778
GAL2024 - Changements climatiques et maladies émergentes
GAL2024 - Changements climatiques et maladies émergentes
Institut de l'Elevage - Idele
GAL2024 - Décarbonation du secteur laitier : la filière s'engage
GAL2024 - Décarbonation du secteur laitier : la filière s'engage
Institut de l'Elevage - Idele
GAL2024 - Traite des vaches laitières : au coeur des stratégies d'évolution d...
GAL2024 - Traite des vaches laitières : au coeur des stratégies d'évolution d...
Institut de l'Elevage - Idele
More Related Content
Viewers also liked
Pourquoi mettre en péril vos calculs critiques??
Pourquoi mettre en péril vos calculs critiques??
Caroline de Villèle
Naïar draka
Naïar draka
Godest
PostgreSQL Meetup Nantes #2
PostgreSQL Meetup Nantes #2
Rodolphe Quiédeville
An exa.ppt
An exa.ppt
enseignement
Test initial VII FR
Test initial VII FR
Calina Diana Ruja
Cartes postales pourquoi l'ump
Cartes postales pourquoi l'ump
Alexandre Houpert
La durabilité, nouvel horizon du lean 6 sigma
La durabilité, nouvel horizon du lean 6 sigma
Ecosysmis
Dp rcd
Dp rcd
RAC-F
Opinionway pour cci grande consultation des entrepreneurs vague 4
Opinionway pour cci grande consultation des entrepreneurs vague 4
CCI Entreprendre
D•sign Magazine #0
D•sign Magazine #0
Nicolò Montevecchi
Offre rse
Offre rse
Frédéric Cordel
Dp contribution UE paris climat 2015
Dp contribution UE paris climat 2015
RAC-F
Programme de 4 jours
Programme de 4 jours
Ideotour Vietnam
LES DEFIS DES DROITS DE L'HOMME AU NIGERIA_LAUREATE NIGERIANE_2012
LES DEFIS DES DROITS DE L'HOMME AU NIGERIA_LAUREATE NIGERIANE_2012
Love Aludo
Ppt computertraining
Ppt computertraining
Fabien McShadow
Un Curieux Affublement par Gries Jessica
Un Curieux Affublement par Gries Jessica
Casse Brancard
Viewers also liked
(16)
Pourquoi mettre en péril vos calculs critiques??
Pourquoi mettre en péril vos calculs critiques??
Naïar draka
Naïar draka
PostgreSQL Meetup Nantes #2
PostgreSQL Meetup Nantes #2
An exa.ppt
An exa.ppt
Test initial VII FR
Test initial VII FR
Cartes postales pourquoi l'ump
Cartes postales pourquoi l'ump
La durabilité, nouvel horizon du lean 6 sigma
La durabilité, nouvel horizon du lean 6 sigma
Dp rcd
Dp rcd
Opinionway pour cci grande consultation des entrepreneurs vague 4
Opinionway pour cci grande consultation des entrepreneurs vague 4
D•sign Magazine #0
D•sign Magazine #0
Offre rse
Offre rse
Dp contribution UE paris climat 2015
Dp contribution UE paris climat 2015
Programme de 4 jours
Programme de 4 jours
LES DEFIS DES DROITS DE L'HOMME AU NIGERIA_LAUREATE NIGERIANE_2012
LES DEFIS DES DROITS DE L'HOMME AU NIGERIA_LAUREATE NIGERIANE_2012
Ppt computertraining
Ppt computertraining
Un Curieux Affublement par Gries Jessica
Un Curieux Affublement par Gries Jessica
Recently uploaded
JTC 2024 Bâtiment et Photovoltaïque.pdf
JTC 2024 Bâtiment et Photovoltaïque.pdf
Institut de l'Elevage - Idele
conception d'un batiment r+4 comparative de defferente ariante de plancher
conception d'un batiment r+4 comparative de defferente ariante de plancher
mansouriahlam
WBS OBS RACI_2020-etunhjjlllllll pdf.pdf
WBS OBS RACI_2020-etunhjjlllllll pdf.pdf
Sophie569778
GAL2024 - Changements climatiques et maladies émergentes
GAL2024 - Changements climatiques et maladies émergentes
Institut de l'Elevage - Idele
GAL2024 - Décarbonation du secteur laitier : la filière s'engage
GAL2024 - Décarbonation du secteur laitier : la filière s'engage
Institut de l'Elevage - Idele
GAL2024 - Traite des vaches laitières : au coeur des stratégies d'évolution d...
GAL2024 - Traite des vaches laitières : au coeur des stratégies d'évolution d...
Institut de l'Elevage - Idele
Présentation_Soirée-Information_ Surverse_Thibert _30 avril 2024
Présentation_Soirée-Information_ Surverse_Thibert _30 avril 2024
Ville de Châteauguay
JTC 2024 - SMARTER Retour sur les indicateurs de santé .pdf
JTC 2024 - SMARTER Retour sur les indicateurs de santé .pdf
Institut de l'Elevage - Idele
JTC 2024 - DeCremoux_Anomalies_génétiques.pdf
JTC 2024 - DeCremoux_Anomalies_génétiques.pdf
Institut de l'Elevage - Idele
GAL2024 - Renouvellement des actifs : un enjeu pour la filière laitière franç...
GAL2024 - Renouvellement des actifs : un enjeu pour la filière laitière franç...
Institut de l'Elevage - Idele
GAL2024 - Situation laitière 2023-2024 : consommation, marchés, prix et revenus
GAL2024 - Situation laitière 2023-2024 : consommation, marchés, prix et revenus
Institut de l'Elevage - Idele
GAL2024 - Consommations et productions d'énergies dans les exploitations lait...
GAL2024 - Consommations et productions d'énergies dans les exploitations lait...
Institut de l'Elevage - Idele
GAL2024 - Méthane 2030 : une démarche collective française à destination de t...
GAL2024 - Méthane 2030 : une démarche collective française à destination de t...
Institut de l'Elevage - Idele
GAL2024 - L'élevage laitier cultive la biodiversité
GAL2024 - L'élevage laitier cultive la biodiversité
Institut de l'Elevage - Idele
JTC 2024 - Réglementation européenne BEA et Transport.pdf
JTC 2024 - Réglementation européenne BEA et Transport.pdf
Institut de l'Elevage - Idele
JTC 2024 - Leviers d’adaptation au changement climatique, qualité du lait et ...
JTC 2024 - Leviers d’adaptation au changement climatique, qualité du lait et ...
Institut de l'Elevage - Idele
GAL2024 - Parcellaire des fermes laitières : en enjeu de compétitivité et de ...
GAL2024 - Parcellaire des fermes laitières : en enjeu de compétitivité et de ...
Institut de l'Elevage - Idele
firefly algoriyhm sac a dos step by step .pdf
firefly algoriyhm sac a dos step by step .pdf
firstjob4
JTC 2024 La relance de la filière de la viande de chevreau.pdf
JTC 2024 La relance de la filière de la viande de chevreau.pdf
Institut de l'Elevage - Idele
comprehension de DDMRP dans le domaine de gestion
comprehension de DDMRP dans le domaine de gestion
yakinekaidouchi1
Recently uploaded
(20)
JTC 2024 Bâtiment et Photovoltaïque.pdf
JTC 2024 Bâtiment et Photovoltaïque.pdf
conception d'un batiment r+4 comparative de defferente ariante de plancher
conception d'un batiment r+4 comparative de defferente ariante de plancher
WBS OBS RACI_2020-etunhjjlllllll pdf.pdf
WBS OBS RACI_2020-etunhjjlllllll pdf.pdf
GAL2024 - Changements climatiques et maladies émergentes
GAL2024 - Changements climatiques et maladies émergentes
GAL2024 - Décarbonation du secteur laitier : la filière s'engage
GAL2024 - Décarbonation du secteur laitier : la filière s'engage
GAL2024 - Traite des vaches laitières : au coeur des stratégies d'évolution d...
GAL2024 - Traite des vaches laitières : au coeur des stratégies d'évolution d...
Présentation_Soirée-Information_ Surverse_Thibert _30 avril 2024
Présentation_Soirée-Information_ Surverse_Thibert _30 avril 2024
JTC 2024 - SMARTER Retour sur les indicateurs de santé .pdf
JTC 2024 - SMARTER Retour sur les indicateurs de santé .pdf
JTC 2024 - DeCremoux_Anomalies_génétiques.pdf
JTC 2024 - DeCremoux_Anomalies_génétiques.pdf
GAL2024 - Renouvellement des actifs : un enjeu pour la filière laitière franç...
GAL2024 - Renouvellement des actifs : un enjeu pour la filière laitière franç...
GAL2024 - Situation laitière 2023-2024 : consommation, marchés, prix et revenus
GAL2024 - Situation laitière 2023-2024 : consommation, marchés, prix et revenus
GAL2024 - Consommations et productions d'énergies dans les exploitations lait...
GAL2024 - Consommations et productions d'énergies dans les exploitations lait...
GAL2024 - Méthane 2030 : une démarche collective française à destination de t...
GAL2024 - Méthane 2030 : une démarche collective française à destination de t...
GAL2024 - L'élevage laitier cultive la biodiversité
GAL2024 - L'élevage laitier cultive la biodiversité
JTC 2024 - Réglementation européenne BEA et Transport.pdf
JTC 2024 - Réglementation européenne BEA et Transport.pdf
JTC 2024 - Leviers d’adaptation au changement climatique, qualité du lait et ...
JTC 2024 - Leviers d’adaptation au changement climatique, qualité du lait et ...
GAL2024 - Parcellaire des fermes laitières : en enjeu de compétitivité et de ...
GAL2024 - Parcellaire des fermes laitières : en enjeu de compétitivité et de ...
firefly algoriyhm sac a dos step by step .pdf
firefly algoriyhm sac a dos step by step .pdf
JTC 2024 La relance de la filière de la viande de chevreau.pdf
JTC 2024 La relance de la filière de la viande de chevreau.pdf
comprehension de DDMRP dans le domaine de gestion
comprehension de DDMRP dans le domaine de gestion
Single page application - .Net
1.
Single Page Application (SPA) Le Single Page Interface (SPI), aussi appelé *application web monopage* est un site web ou une application (ou une section de ceuxci) qui tient en une seule page (un seul URL). Le principal avantage de cette utilisation est d’améliorer l’expérience usager en augmentant la rapidité des réponses aux actions de l’utilisateur ainsi qu’en diminuant l’utilisation de la bande passante. Cycle de vie du SPA ❖ 1er stade : Une requête http = un résultat (1 page web) Une requête est envoyée au serveur selon un URL. Le serveur retourne ensuite l’équivalent d’une page web complète. Avantages: ● Simple au niveau technique ●
Technologie universelle qui fonctionne sur tous les navigateurs Inconvénients: ● Interactivité nulle ● Scintillement de la page (expérience utilisateur)
2.
❖ 2e stade (AJAX) : Une requête http = un résultat + possibilité d’afficher de manière asynchrone des parties ou morceaux de la page. Le navigateur, suite à la première requête, peut envoyer des requêtes secondaires pour charger certaines sections de la page, sans recharger celleci entièrement. Avantages : ● Navigation plus fluide ●
Nul besoin de recharger la page entièrement à chaque requête ce qui permet d’économiser de la bande passante. ● Lorsque la page est modifiée, l’URL reflète le nouvel état de la page ● Les mécanismes de navigation standards sont encore fonctionnels (bouton de retour, partage d’URL, création de marques pages)
3.
4.
Architecture de SPA : ● ASP.NET Web API gère toutes les demandes y compris l'obtention la création , la mise à jour et la suppression. Les échanges de données avec les clients API Web au format JSON . ● Entity Framework ( EF ) est la couche O / RM . Il sert d'intermédiaire entre le monde orienté objet de ASP.NET et la base de données sousjacente . ●
Sur le côté client , la bibliothèque Knockout.js gère la page des mises à jour de requêtes AJAX . Knockout utilise la liaison de données à synchroniser la page avec les données les plus récentes.
5.
● Un grand avantage de cette architecture est qu'il sépare la couche de présentation à partir de la logique d'application. Vous pouvez créer la partie de l'API Web sans rien connaître de la façon dont votre page web ressemblera. Sur le côté client , vous créez un " modèle de vue " pour représenter ces données , et le modèle de vue utilise Knockout de se lier à l' HTML . Cela vous permet de modifier facilement le HTML, sans changer le modèle de vue. Cette architecture suit le modèle MVVM : MVVM est originaire de Microsoft et adapté pour le développement des applications basées sur les technologies WPF et Silverlight via l'outil MVVM Light par exemple. Cette méthode permet, tel le modèle MVC, de séparer la vue de la logique et de l'accès aux données en accentuant les principes de binding et d’événement.
6.
Le modèle SPA organise le JavaScript côté client en trois couches: datacontext.js: Envoie les requêtes AJAX. model.js: Définit les modèles. viewmodel.js: Définit le modèle de vue. Exemples : ● Twitter ● Gmail
7.
RÉFÉRENCES http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php http://medialoot.com/blog/23uniqueonepageinterfacedesigns/ http://designrfix.com/inspiration/singlepagewebsites http://idesignow.com/webdesign/20creativesinglepagewebsiteexample s.html http://www.instantshift.com/2012/01/23/60freshexamplesofmodernsing lepagewebsitedesigns/ http://msdn.microsoft.com/frca/magazine/cc507641.aspx http://code.google.com/intl/fr/web/ajaxcrawling/docs/learnmore.html http://code.google.com/intl/fr/web/ajaxcrawling/docs/gettingstarted.html
Download now