le web comme plateforme applicative - comment programme-t ... · comme toute autre plateforme !...
TRANSCRIPT
![Page 1: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/1.jpg)
Le Web comme plateforme applicative
- Comment programme-t-on le Web?
François Daoust (@tidoust)
W3C
#inria_industrie
![Page 2: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/2.jpg)
Une courte histoiredu Web applicatif
![Page 3: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/3.jpg)
![Page 4: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/4.jpg)
Interactions utilisateur
<form action="post.cgi">
<input type="text" name="nom" />
<input type="submit" title="Valider" />
</form>
![Page 5: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/5.jpg)
Interactions utilisateur
<form action="post.cgi">
<input type="text" name="nom" />
<input type="submit" title="Valider" />
</form>
![Page 6: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/6.jpg)
DHTML
• Document Object Model (DOM)• JavaScript• Evénements
![Page 7: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/7.jpg)
AJAX
XMLHttpRequest
![Page 8: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/8.jpg)
![Page 9: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/9.jpg)
![Page 10: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/10.jpg)
Propriétés du Web applicatif
![Page 11: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/11.jpg)
Approche descendante(Top-down approach)
![Page 12: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/12.jpg)
Sécurité
• Primitives de bas niveaudifficilement exposables
• Attention aux empreintes !
![Page 13: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/13.jpg)
Plateforme globale
![Page 14: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/14.jpg)
Ex: base de données locale
IndexedDB API
![Page 15: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/15.jpg)
Plateforme humaine
![Page 16: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/16.jpg)
Philae vs. CSS
![Page 17: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/17.jpg)
Plateforme complète
![Page 18: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/18.jpg)
Communications
API Usage
HTML5 Web Messaging Inter-app (même navigateur)
WebRTC P2P, audio/vidéo temps-réel
Network Service Discovery Réseau local
Presentation API Ecran secondaireInter-app inter-terminaux
![Page 19: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/19.jpg)
Presentation APIpresentation
.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 () { /*...*/ });
![Page 20: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/20.jpg)
Packaging
• Exécution hors-ligneApplicationCacheService Workers
• EmpaquetageFichier manifesteArchive (Zip)Enrobage natif (ex. Cordova)
![Page 21: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/21.jpg)
Fragmentation
![Page 22: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/22.jpg)
Programmer le Web
![Page 23: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/23.jpg)
Comme toute autre plateforme !Besoin Exemple d’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
Tests d’acceptation WebDriver, Selenium, PhantomJS, SlimerJS
Contrôle de qualité esvalidate, jslint, JSCover, Istanbul
« Compilation » Google Closure Compiler, 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
![Page 24: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/24.jpg)
Penser adaptation
• Séparer contenu, design, code
• Ciblez les mobiles
• Attention aux designs au pixel près !
• Amélioration progressive
![Page 25: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/25.jpg)
Client et/ou serveur
• Retour du JavaScript côté serveurex: Node.js
• Permet de partager la même base de code entre client et serveur
ex: code de validation d’une saisie
![Page 26: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/26.jpg)
Performances
• Moteurs JS optimisés
• Bonnes pratiques à connaître
• ASM.js (1.5x C)
![Page 27: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/27.jpg)
Le Web comme plateforme applicative
Une plateforme applicative... Notes
Complète Nombreuses APIs en cours de standardisation
Ubiquitaire Présent dans le monde entierSur tous les terminaux
Sécurisée Protection de la vie privéeNavigation sans effet de bord
Performante Navigateurs optimisésPossibilité de « transpiler » en JS optimisé
Ouverte et libre de droits Technologies non propriétairesInnovation ouverte, inclusive
Humaine Construite à l’échelle mondialeD’intérêt public
![Page 28: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/28.jpg)
Le Web comme plateforme applicative
![Page 29: Le Web comme plateforme applicative - Comment programme-t ... · Comme toute autre plateforme ! Besoin Exemple d’outils open source Composants, MVC, utilitaires Backbone.js, AngularJS,](https://reader036.vdocuments.site/reader036/viewer/2022071018/5fd23b0f0b24b7135f3f04dc/html5/thumbnails/29.jpg)
Le Web comme plateforme applicative
François Daoust (@tidoust)
W3C
#inria_industrie