Les technologies web client

Le web de demainDe zéro à héros – Côté clientPar Freyburger Romain et Quentin Sallat

Feedback• Please provide feedback• http://goo.gl/FXsYw

Sommaire• Hier, aujourd’hui, demain• La famille Jquery• L’indispensable Modernizr• L’Artillerie lourde : GWT• Coffeescript et Dart• MVVM/MVC avec Batman.js et Knockout.js• Et les RIA ?

Le Javascript : hier• LiveScript

Le Javascript : aujourd’hui• AJAX

Le Javascript : demain• One platform to rule them all

Les défis du web de demain • Productif• Cross-browser• Mobile• Performant

La famille JQuery

Avant JQuery• Prototype : ancêtre de JQuery• Scriptaculous• Ajax à la main

Jquery c’est quoi ?• Framework Javascript open-source• Relativement léger• Nombreuses fonctionnalités• Nombreux plug-ins

A quoi ça sert ?• Sélecteurs• Effets• Manipulation DOM/CSS• AJAX• Parser json• …

Et les enfants…• Jquery UI• Nouveaux effets• Contrôles UI : calendrier, fenêtres, progressbar…• Gestionnaire de thème

• Jquery mobile• Adapté aux applications web mobiles• Léger• Large compatibilité• Transitions, style, AJAX…

L’indispensable Modernizr• Framework Javascript très répandu• Détecte la compatibilité html5/CSS 3• Compatibilité html5 avec les vieux navigateurs (sémantique)• Chargement de ressources à la volée• Personnalisable

Démo Modernizr ?

L’artillerie lourde : GWT• Google Web Toolkit• Puissant framework de développement web• Compilation Java ->HTML/CSS/Javascript• Cross-browser• Ultra productif

Démo GWT

Coffeescript et Dart

• Langages de substitution au Javascript• Censés être plus productifs• Orientés objet

Coffeescript• Open-source• Ressemble au Python• Compilation en Javascript (serveur ou à la main)• Disponible sur Github • https://github.com/jashkenas/coffee-script

Dart• Créé par Google• Compilation en Javascript (serveur ou à la main)• Compilation client sur Google Chrome• Se veut être un remplaçant du Javascript• Plus performant

Démo : Coffeescript

MVVM/MVC avec Batman.js et Knockout.js

• MVVM : Model-View-ViewModel• Ressemble à MVC• Principe du binding• Surtout présent en .NET• Maintenant en Javascript !

Batman.js• Open-source• Créé en coffeescript• Orienté objet• Architecture MVC

Knockout.js• Architecture MVVM• Système de templates• Orienté objet• Améliore la productivité

Démo Knockout.js

Et les RIA ?• Flash et Silverlight : technologies mortes ?• HTML 5 introduit video, audio et canvas• Support du offline• HTML 5 multi-plateformes de base

Flash• Enorme communauté • Designers-friendly• Quasi-omniprésent dans le jeu en ligne• 3D ultra-poussée

Silverlight• Ultra-productif• Enterprise-ready• Grosse communauté• Smooth Streaming• Windows Phone 7/Windows 8/XBOX

Bien démarrer votre projet web

• Choix du langage : Javascript, Coffeescript, Dart, GWT…• Jquery et Modernizr• Plug-ins Jquery/autres librairies suivant les besoins• Architecture MVC ou MVVM (Knockout.js/Batman.js/Autres)

Conclusion• Javascript peu productif de base• Devient intéressant avec des librairies• Langage du futur• Compétence obligatoire du dev de demain

Merci !