les technologies web client

30
Le web de demain De zéro à héros – Côté client Par Freyburger Romain et Quentin Sallat

Upload: galaad-aerilys

Post on 01-Dec-2014

735 views

Category:

Technology


2 download

DESCRIPTION

A french presentation about client-side web technologies

TRANSCRIPT

Page 1: Les technologies web client

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

Page 2: Les technologies web client

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

Page 3: Les technologies web client

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 ?

Page 4: Les technologies web client

Le Javascript : hier• LiveScript

Page 5: Les technologies web client

Le Javascript : aujourd’hui• AJAX

Page 6: Les technologies web client

Le Javascript : demain• One platform to rule them all

Page 7: Les technologies web client

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

Page 8: Les technologies web client

La famille JQuery

Page 9: Les technologies web client

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

Page 10: Les technologies web client

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

Page 11: Les technologies web client

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

Page 12: Les technologies web client

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…

Page 13: Les technologies web client

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

Page 14: Les technologies web client

Démo Modernizr ?

Page 15: Les technologies web client

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

Page 16: Les technologies web client

Démo GWT

Page 17: Les technologies web client

Coffeescript et Dart

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

Page 18: Les technologies web client

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

Page 19: Les technologies web client

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

Page 20: Les technologies web client

Démo : Coffeescript

Page 21: Les technologies web client

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 !

Page 22: Les technologies web client

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

Page 23: Les technologies web client

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

Page 24: Les technologies web client

Démo Knockout.js

Page 25: Les technologies web client

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

Page 26: Les technologies web client

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

Page 27: Les technologies web client

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

Page 28: Les technologies web client

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)

Page 29: Les technologies web client

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

Page 30: Les technologies web client

Merci !