Le document traite des applications web monopages (SPA), soulignant leur capacité à améliorer l'expérience utilisateur en optimisant la rapidité et l'utilisation de la bande passante. Il décrit les différentes étapes de développement, de la simple requête HTTP à l'usage d'AJAX pour des mises à jour asynchrones, et présente l'architecture MVVM qui sépare la logique de présentation. Enfin, il mentionne des exemples d'applications telles que Twitter et Gmail, ainsi que des références pour approfondir le sujet.

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. ❖ 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)

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 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.

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/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