Donnez votre avis !Depuis votre smartphone, sur :http://notes.mstechdays.frDe nombreux lots à gagner toutes les heures !!!...
Tout sur les SPAGuillaume LeborgneArchitecte .NetMCNEXTgleborgne@mcnext.comhttp://www.mcnext.com
180 collaborateursDepuis 2007 à Paris - Lyon - GenèveStand 97 – Zone bleufoncéBusinessIntelligenceTalkBizNETDot SharePoint...
Aucun animal n’aété maltraité pourla préparation decette session
• C’est quoi une SPA ?– Définition– A quoi ca sert ?– Exemples d’applications SPA• Comment c’est fait ?– Structure– Librai...
C’est quoi une SPA ?
Une application à page unique est un site ou uneapplication web entièrement contenu dans une seuleet unique page.Les éléme...
Améliorer les performances• Échange de données brutes(XML ou JSON) plutôt que despages ou fragments HTML• Chargement de te...
A quoi ca sert ?Applications mobiles• Les gains d’ergonomie et deperformances sontparticulièrement sensibles surplateforme...
A quoi ca sert ?Applications mobiles• Windows 8 permet dedévelopper des applicationsSPA natives !
• Référencement dans les moteurs de recherche• Gestion de l’historique de navigation et du bookmarking• Gestion de la publ...
QUELQUES EXEMPLES DE SPA
Comment c’est fait?
clientserveurStructure d’une application SPAHTML / CSS / JSSERVICES(XML, JSON)IHMLOGIQUEAPPLICATIVEACCESDONNEESNAVIGATIONP...
Il est souvent nécessaire destructurer une SPA pour pouvoircoordonner les différentesbriques, tout en gardant une basede c...
• Gestion des données– amplify.js– Breeze.js– JayData• Templates– underscore– mustache– Handlebar• Historique de navigatio...
Un peu de code
SPAAVEC ASP.NET MVC
APPLICATION WINDOWSSTORE
Pour aller plus loin…
• temps réel  web socket• Stockage local de données  IndexedDB, localStorage• applications offline  App Cache• multithr...
• Avec ASP.Net– Cache– Bundles et minification• Avec Visual Studio + plugin Web essentials– Optimisation des images– Utili...
• Prendre le temps d’apprendre (vraiment) javascript• Utiliser une librairie AMD (asynchronous module definition) commereq...
Questions /Réponses
Donnez votre avis !Depuis votre smartphone, sur :http://notes.mstechdays.frDe nombreux lots à gagner toutes les heures !!!...
Formez-vous en ligneRetrouvez nos évènementsFaites-vous accompagnergratuitementEssayer gratuitement nossolutions ITRetrouv...
Prochain SlideShare
Chargement dans…5
×

Tout sur les SPA

873 vues

Publié le

Nous ne parlerons pas ici d'animaux mais de "Single Page Application", ou en Français, applications à page unique. Ce pattern d'application web, issu des concepts web 2.0, est de plus en plus prisé dans la réalisation d'applications web, notamment à destination des terminaux mobiles. Il permet de proposer une expérience et des temps de réponse proche des applications natives (c'est d'ailleurs le pattern utilisé dans les applications Modern UI en HTML/javascript). Dans cette session, nous présenterons les concepts fondamentaux des applications SPA, et comment les mettre en œuvre avec ASP.NET MVC4, en utilisant les outils proposés par MVC (knockout, upshot, ...), ou avec d'autres frameworks comme Backbone.js.

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive
  • Notation
  • Intro code / dev
  • http://happyworm.com/jPlayerLab/single-page-apphttp://www.mah-jongg.ch/mahjongg/mahjongg.htmlhttps://soundcloud.comhttp://www.nytimes.com/skimmerhttps://manage.windowsazure.com
  • Notation
  • Exemple de page de code pour le secteur dev
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Tout sur les SPA

    1. 1. Donnez votre avis !Depuis votre smartphone, sur :http://notes.mstechdays.frDe nombreux lots à gagner toutes les heures !!!Claviers, souris et jeux Microsoft…Merci de nous aider à améliorer les TechDayshttp://notes.mstechdays.fr
    2. 2. Tout sur les SPAGuillaume LeborgneArchitecte .NetMCNEXTgleborgne@mcnext.comhttp://www.mcnext.com
    3. 3. 180 collaborateursDepuis 2007 à Paris - Lyon - GenèveStand 97 – Zone bleufoncéBusinessIntelligenceTalkBizNETDot SharePointMicrosoft100 %
    4. 4. Aucun animal n’aété maltraité pourla préparation decette session
    5. 5. • C’est quoi une SPA ?– Définition– A quoi ca sert ?– Exemples d’applications SPA• Comment c’est fait ?– Structure– Librairies• Un peu de code– ASP.Net MVC– Applications Windows Store• Pour aller plus loin…– HTML5 power– Optimiser son applicationAgenda
    6. 6. C’est quoi une SPA ?
    7. 7. Une application à page unique est un site ou uneapplication web entièrement contenu dans une seuleet unique page.Les éléments d’IHM et la navigation sontintégralement gérés côté client, au sein de cettepage.Le terme « Single Page Application » est apparu vers 2005 mais le patternd’application existe depuis au moins 2002Définition
    8. 8. Améliorer les performances• Échange de données brutes(XML ou JSON) plutôt que despages ou fragments HTML• Chargement de templates misen cache pour l’affichage desdonnées• Asynchrone• Réduit la charge serveurAméliorer l’expérience utilisateur• Meilleurs temps de réponse (pasde latence entre pages)• Permet la persistance d’étatcôté client• Comportement identique ouproche de celui des applicationsnativesA quoi ca sert ?
    9. 9. A quoi ca sert ?Applications mobiles• Les gains d’ergonomie et deperformances sontparticulièrement sensibles surplateformes mobiles• Certaines plateformes commeiOS permettent de considérerune SPA comme une applicationnative• Des plateformes commePhoneGAP permettent depackager une SPA en applicationNative
    10. 10. A quoi ca sert ?Applications mobiles• Windows 8 permet dedévelopper des applicationsSPA natives !
    11. 11. • Référencement dans les moteurs de recherche• Gestion de l’historique de navigation et du bookmarking• Gestion de la publicité et des statistiques d’utilisation• Nécessite des compétences javascript plus pointues, et unephilosophie différente d’une application web traditionnelleInconvénients
    12. 12. QUELQUES EXEMPLES DE SPA
    13. 13. Comment c’est fait?
    14. 14. clientserveurStructure d’une application SPAHTML / CSS / JSSERVICES(XML, JSON)IHMLOGIQUEAPPLICATIVEACCESDONNEESNAVIGATIONPERSISTANCE
    15. 15. Il est souvent nécessaire destructurer une SPA pour pouvoircoordonner les différentesbriques, tout en gardant une basede code maintenable• Backbone• Ember• Knockout• Angular• Meteor• Batman• Spine• CanJSLes frameworks MVC / MVP / MVVM
    16. 16. • Gestion des données– amplify.js– Breeze.js– JayData• Templates– underscore– mustache– Handlebar• Historique de navigation– history.js– Sammy.js– Backbone• Gestionnaire de modules– require.jsLibrairies utiles
    17. 17. Un peu de code
    18. 18. SPAAVEC ASP.NET MVC
    19. 19. APPLICATION WINDOWSSTORE
    20. 20. Pour aller plus loin…
    21. 21. • temps réel  web socket• Stockage local de données  IndexedDB, localStorage• applications offline  App Cache• multithreading  web workersTirer parti de HTML 5
    22. 22. • Avec ASP.Net– Cache– Bundles et minification• Avec Visual Studio + plugin Web essentials– Optimisation des images– Utilisation de .less– Minification css et javascriptOptimiser son application
    23. 23. • Prendre le temps d’apprendre (vraiment) javascript• Utiliser une librairie AMD (asynchronous module definition) commerequire.js• Se documenter (par ex : http://boilerplatejs.org/)Structurer son application
    24. 24. Questions /Réponses
    25. 25. Donnez votre avis !Depuis votre smartphone, sur :http://notes.mstechdays.frDe nombreux lots à gagner toutes les heures !!!Claviers, souris et jeux Microsoft…Merci de nous aider à améliorer les TechDayshttp://notes.mstechdays.fr
    26. 26. Formez-vous en ligneRetrouvez nos évènementsFaites-vous accompagnergratuitementEssayer gratuitement nossolutions ITRetrouver nos expertsMicrosoftPros de l’ITDéveloppeurswww.microsoftvirtualacademy.comhttp://aka.ms/generation-apphttp://aka.ms/evenements-developpeurshttp://aka.ms/itcamps-franceLes accélérateursWindows Azure, Windows Phone,Windows 8http://aka.ms/telechargementsLa Dev’Team sur MSDNhttp://aka.ms/devteamL’IT Team sur TechNethttp://aka.ms/itteam

    ×