D'une plateforme documentaire, le Web s'est peu à peu transformé en plateforme applicative. Cette présentation explore les différentes facettes de la plateforme applicative web qui en font LA plateforme incontournable pour le développement d'applications.

1. Le Web comme plateforme applicative-Comment programme-t-on le Web?
François Daoust (@tidoust) W3C
#inria_industrie

2. Une courte histoiredu Web applicatif

4. Interactions utilisateur
<form action="post.cgi">
<input type="text" name="nom" />
<input type="submit" title="Valider" />
</form>

5. Interactions utilisateur
<form action="post.cgi">
<input type="text" name="nom" />
<input type="submit" title="Valider" />
</form>

6. DHTML
•Document Object Model (DOM)
•JavaScript
•Evénements

7. AJAX
XMLHttpRequest

10. Propriétés du Web applicatif

11. Approche descendante(Top-down approach)

12. Sécurité
•Primitives de bas niveaudifficilementexposables
•Attention aux empreintes !

13. Plateforme globale

14. Ex: base de données locale
IndexedDBAPI

15. Plateforme humaine

16. Philae vs. CSS

17. Plateforme complète

18. Communications
API
Usage
HTML5 Web Messaging
Inter-app(même navigateur)
WebRTC
P2P,audio/vidéo temps-réel
Network Service Discovery
Réseaulocal
PresentationAPI
Ecran secondaireInter-appinter-terminaux

19. PresentationAPI
presentation
.startSession('http://example.org/pres.html')
.then(function (newSession) {
session.onstatechange= function () {
switch (session.state) {
case 'connected':
session.postMessage(/*...*/);
session.onmessage= function() { /*...*/
};
break;
case 'disconnected':
console.log('Disconnected.');
break;
}
};
}, function () { /*...*/ });

20. Packaging
•Exécution hors-ligneApplicationCacheService Workers
•EmpaquetageFichier manifesteArchive (Zip) Enrobage natif (ex. Cordova)

21. Fragmentation

22. Programmer le Web

23. Comme toute autre plateforme !
Besoin
Exempled’outils open source
Composants, MVC, utilitaires
Backbone.js,AngularJS, Ember.js, Enyo, Mustache, SASS
Gestion des dépendances
Bower, npm, Yeoman
Déboguage
Outils de développement du navigateur(F12)
Tests unitaires, fonctionnels
Jasmine, QUnit,Sinon, TestSwarm
Testsd’acceptation
WebDriver, Selenium, PhantomJS,SlimerJS
Contrôlede qualité
esvalidate, jslint, JSCover,Istanbul
«Compilation»
Google ClosureCompiler, RequireJS, SASS
«Transpilation»
Emscripten, Google Web Toolkit, Ocamljs
Automatisation de tâches
Grunt, gulp.js, ant, Make
Contrôle de version
Git, Mercurial,CVS, SVN

24. Penser adaptation
•Séparer contenu, design, code
•Ciblez les mobiles
•Attention aux designs au pixel près !
•Amélioration progressive

25. Client et/ou serveur
•Retour du JavaScript côté serveurex: Node.js
•Permet de partager la même base de code entre client et serveurex: code de validation d’une saisie

26. Performances
•Moteurs JS optimisés
•Bonnes pratiques à connaître
•ASM.js (1.5x C)

27. Le Web comme plateforme applicative
Une plateforme applicative...
Notes
Complète
Nombreuses APIs en coursde standardisation
Ubiquitaire
Présentdans le monde entierSur tousles terminaux
Sécurisée
Protection de la vie privéeNavigationsans effet de bord
Performante
NavigateursoptimisésPossibilité de «transpiler» en JSoptimisé
Ouverte et libre de droits
Technologies non propriétairesInnovation ouverte, inclusive
Humaine
Construite à l’échelle mondiale
D’intérêtpublic

28. Le Web comme plateforme applicative

29. Le Web comme plateforme applicative
François Daoust (@tidoust) W3C
#inria_industrie