Single Page Application (SPA)
Le Single Page Interface (SPI), aussi appelé *application web monopage*
est un site web ou u...
❖ 2e stade (AJAX) : Une requête http = un résultat + possibilité
d’afficher de manière asynchrone des parties ou morceaux ...
Architecture de SPA :
● ASP.NET Web API gère toutes les demandes y compris l'obtention  la création , la
mise à jour et la...
● Un grand avantage de cette architecture est qu'il sépare la couche de présentation
à partir de la logique d'application....
Le modèle SPA organise le JavaScript côté client en trois couches:
datacontext.js: Envoie les requêtes AJAX.
model.js: Déf...
RÉFÉRENCES
http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php
http://medialoot.com/blog/23­unique­one­page­interf...
Single page application - .Net
Single page application - .Net
Prochain SlideShare
Chargement dans…5
×

Single page application - .Net

638 vues

Publié le

Architecture et principes de base des SPA

Publié dans : Ingénierie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
638
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Single page application - .Net

  1. 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 ceux­ci) 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. 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 celle­ci 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. 3. 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 sous­jacente . ● 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.
  4. 4. ● 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.
  5. 5. 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
  6. 6. RÉFÉRENCES http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php http://medialoot.com/blog/23­unique­one­page­interface­designs/ http://designrfix.com/inspiration/single­page­websites http://idesignow.com/webdesign/20­creative­single­page­website­example s.html http://www.instantshift.com/2012/01/23/60­fresh­examples­of­modern­sing le­page­website­designs/ http://msdn.microsoft.com/fr­ca/magazine/cc507641.aspx http://code.google.com/intl/fr/web/ajaxcrawling/docs/learn­more.html http://code.google.com/intl/fr/web/ajaxcrawling/docs/getting­started.html

×