Upload
galaad-aerilys
View
735
Download
2
Embed Size (px)
DESCRIPTION
A french presentation about client-side web technologies
Citation preview
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 !