Mathieu PARISOT              @matparisot2013-04-17       Développer coté client en 2013   1
2013-04-17   Développer coté client en 2013   2
2013-04-17   Développer coté client en 2013   3
Le retour du Client - ServeurLa théorie : découpage en couches, n-tiersLa réalité : code vue et métier intriquéAvec le WOA...
Les sites Webs             Structure   Style                    Traitement   Ressources2013-04-17                   Dévelo...
2013-04-17   Développer coté client en 2013   6
Le CSS⦿Langage très limité :         ⦿Pas de variables         ⦿Beaucoup de valeurs prédéfinies⦿Mais très compliqué :     ...
Le reset CSS⦿Chaque navigateur implémente des styles de base⦿Un reset CSS permet davoir le même rendu de base sur tous les...
Frameworks CSS⦿Facilite la mise en page dun site⦿Mise en page responsive⦿Plugins Javascript⦿Exemple : Twitter Bootstrap   ...
Surcouche CSS⦿Création des styles dans un autre langage que CSS⦿Puis compilé vers CSS⦿Exemple : Less, Sass, Compass2013-04...
LESS@bgcolor:#543633;                                      #header h1 {#header {                                          ...
2013-04-17   Développer coté client en 2013   12
Le javaScript⦿Très puissant⦿Très compliqué⦿Mais facile daccès pour les débutantsCode bogué et impossible à maintenir2013-...
Pourquoi tant de haine ?             42 == "42" true             42 === "42" false             var myInt = parseInt("08");...
Le JavaScript coté Server⦿Explosion du Buzz autours de JavaScript⦿Plein de frameworks coté client …⦿… mais aussi coté serv...
2013-04-17   Développer coté client en 2013   16
JQuery⦿Utilisé par 60% des sites !⦿Fait pour la manipulation du DOM⦿Efficace, facile, bien documenté⦿Des tonnes de plugins...
JQuery : bonnes pratiques 1/3⦿Pas de manipulation de DOM dans les boucles         var parentDiv = $(#emailList);         f...
JQuery : bonnes pratiques 2/3⦿Sélecteurs simples         $("body #page:first-child article.main p#intro div"); ⦿A la place...
JQuery : bonnes pratiques 3/3⦿Eviter les répétitions de selecteurs         $("#myId").css("color","#FFFFFF");         $("#...
Underscore.js⦿Ensemble de méthodes utilitaires⦿Manipulation de tableaux et collections⦿Manipulation dobjets et de méthodes...
Le templating 1/2⦿Simplifier la construction du DOM⦿Plus facile a maintenir et limite les erreurshtml = <div><div> + name ...
Le templating 2/2⦿Mustache : le plus connu mais très lent         http://mustache.github.com/⦿Handlebars : très complet   ...
Encapsulation 1/2⦿Eviter les effets de bords         script1.js :         var variable = "script1";         script2.js :  ...
Encapsulation 2/2⦿Encapsulation de base         script1.js :         (function() { var variable = "script1"; }());        ...
La performance⦿Minifier         YUI compressor⦿Compresser         Mod_deflate sur apache⦿Utiliser des CDN         https://...
Chargement différé⦿JavaScript est monothread⦿La page saffiche une fois que tous les scripts sont exécutés⦿Repousser lexécu...
Require.js : le principe⦿Modularisation de votre JavaScript⦿Encapsulation + gestion des dépendances⦿Chargement différé des...
Require.js : un exemple                   define(function() { return cart!; });                   define(function() {     ...
Require.js : leffet cascade2013-04-17              Développer coté client en 2013   30
Require.js : loptimisation⦿Minify les scripts avec uglify⦿Minify les CSS et inline les @imports⦿Concatène les scripts⦿Inli...
Les Frameworks MVC en JS⦿Gérer des sites Webs complexes⦿Nombreuses solutions :         Angular.js, Backbone.js, Sprout, sa...
Angular.js : le principe⦿Ne plus devoir manipuler le DOM⦿Gérer la navigation⦿Gérer le templating⦿Gérer les modules⦿Fragmen...
Angular.js : un exemple<!doctype html>                                         $scope.yourName = toto;<html ng-app>       ...
2013-04-17   Développer coté client en 2013   35
Bower⦿Gérer ses dépendances⦿Lancé par Twitter mais open source⦿Basé sur node.js⦿Utilise la ligne de commande :         bow...
Grunt⦿Outil de build en JavaScript⦿Basé sur node.js et lancé en ligne de commande⦿Création de projet basé sur des template...
Les IDE⦿IntelliJ / Webstorm         coloration, refactoring, auto complétion, analyse,         payant⦿Aptana, Bracket     ...
Le debug⦿Chrome Dev Tools, Opera Dragonfly, Firefox firebug⦿Inspection CSS⦿Debug avec points darrêt⦿Console avec exécution...
Quelques sites utiles⦿jsconsole.com⦿jsperf.com⦿jsfiddle.net⦿github.com⦿responsinator.com⦿debug.phonegap.com (weinre)2013-0...
Les tests unitaires⦿TDD possible en javaScript !⦿Mais plus compliqué quen java ou .Net⦿Frameworks : Qunit, Jasmine, Mocha⦿...
Selenium⦿Réalise des tests dIHM :         ⦿Tester les écrans         ⦿Tester les interactions utilisateur         ⦿Tester ...
Tester la compatibilité⦿http://www.browserstack.com         ⦿Test plein de navigateurs         ⦿Possibilité de tests via t...
Compiler vers JavaScript⦿Nouvelle tendance⦿CoffeeScript, TypeScript, Dart, etc.⦿Comble les lacunes du langage⦿Syntaxe diff...
Un exemple en CoffeeScript# Assignment:                                 # Assignment:number = 42                          ...
Intégration continue⦿Intégration avec Jenkins         Plugin pour Grunt         Build du projet via Maven/Gradle/etc.⦿Anal...
Yeoman⦿Boite à outil du développement web⦿Création de projets via des templates⦿Build du projet via Grunt⦿Dépendances via ...
2013-04-17   Développer coté client en 2013   48
Je vous ai épargné⦿La programmation Objet par prototype⦿Les scopes⦿Lutilisation de this⦿Les changements de contexte sur le...
Aller plus loin⦿Lire des livres !         ⦿Javascript the good parts         ⦿Pro Javascript techniques         ⦿Secrets o...
Et surtout …     Ne soyez pas dépendant des frameworks !              JavaScript est un vrai langage !    Apprenez le si v...
Merci2013-04-17   Développer coté client en 2013   52
Prochain SlideShare
Chargement dans…5
×

Conception de code javascript cote client dans la continuité du renouveau du web

2 459 vues

Publié le

Mathieu Parisot vous propose un focus sur les outils qui ont changés la manière de concevoir des sites web ces dernières années.

Au programme :
Comment mieux gérer ses CSS avec des préprocesseurs, la présentation de plusieurs frameworks javascripts, indispensables pour faire un site web à l'heure actuelle, une présentation d'éditeurs et des Chrome Dev Tools pour développer plus rapidement des sites.

Bref un condensé de veille et de bonnes pratiques pour que faire vos sites web ne soient plus un cauchemar !

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 459
Sur SlideShare
0
Issues des intégrations
0
Intégrations
173
Actions
Partages
0
Téléchargements
59
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Conception de code javascript cote client dans la continuité du renouveau du web

  1. 1. Mathieu PARISOT @matparisot2013-04-17 Développer coté client en 2013 1
  2. 2. 2013-04-17 Développer coté client en 2013 2
  3. 3. 2013-04-17 Développer coté client en 2013 3
  4. 4. Le retour du Client - ServeurLa théorie : découpage en couches, n-tiersLa réalité : code vue et métier intriquéAvec le WOA on sépare complètement la vue ! Serveur : expose des services REST Client : site Web, appli native, client lourd, etc.2013-04-17 Développer coté client en 2013 4
  5. 5. Les sites Webs Structure Style Traitement Ressources2013-04-17 Développer coté client en 2013 5
  6. 6. 2013-04-17 Développer coté client en 2013 6
  7. 7. Le CSS⦿Langage très limité : ⦿Pas de variables ⦿Beaucoup de valeurs prédéfinies⦿Mais très compliqué : ⦿Héritage en cascade ⦿Déclarations à plat ⦿Surcharge des sélecteurs2013-04-17 Développer coté client en 2013 7
  8. 8. Le reset CSS⦿Chaque navigateur implémente des styles de base⦿Un reset CSS permet davoir le même rendu de base sur tous les navigateurs⦿Nombreux disponibles Eric Meyer, HTML5Reset, etc.2013-04-17 Développer coté client en 2013 8
  9. 9. Frameworks CSS⦿Facilite la mise en page dun site⦿Mise en page responsive⦿Plugins Javascript⦿Exemple : Twitter Bootstrap http://twitter.github.com/bootstrap http://twitter.github.com/bootstrap/examples/her o.html2013-04-17 Développer coté client en 2013 9
  10. 10. Surcouche CSS⦿Création des styles dans un autre langage que CSS⦿Puis compilé vers CSS⦿Exemple : Less, Sass, Compass2013-04-17 Développer coté client en 2013 10
  11. 11. LESS@bgcolor:#543633; #header h1 {#header { font-size: 26px; h1 { font-weight: bold; font-size: 26px; background-color: #543633; font-weight: bold; } background-color:@bgcolor; #header p { } font-size: 12px; p { font-size: 12px; } a { text-decoration: none; #header p a { &:hover { border-width: 1px } text-decoration: none; } } } #header p a:hover {} border-width: 1px; }2013-04-17 Développer coté client en 2013 11
  12. 12. 2013-04-17 Développer coté client en 2013 12
  13. 13. Le javaScript⦿Très puissant⦿Très compliqué⦿Mais facile daccès pour les débutantsCode bogué et impossible à maintenir2013-04-17 Développer coté client en 2013 13
  14. 14. Pourquoi tant de haine ? 42 == "42" true 42 === "42" false var myInt = parseInt("08"); myInt === 0 var myInt = parseInt("08", 10); myInt === 82013-04-17 Développer coté client en 2013 14
  15. 15. Le JavaScript coté Server⦿Explosion du Buzz autours de JavaScript⦿Plein de frameworks coté client …⦿… mais aussi coté server ! A étudier et voir à long terme2013-04-17 Développer coté client en 2013 15
  16. 16. 2013-04-17 Développer coté client en 2013 16
  17. 17. JQuery⦿Utilisé par 60% des sites !⦿Fait pour la manipulation du DOM⦿Efficace, facile, bien documenté⦿Des tonnes de plugins var link = document.createElement(a); link.setAttribute(href, mylink.htm); var elem = document.getElementById("myId"); elem.appendChild(link); $(#myId).append(<a href="mylink.htm">);2013-04-17 Développer coté client en 2013 17
  18. 18. JQuery : bonnes pratiques 1/3⦿Pas de manipulation de DOM dans les boucles var parentDiv = $(#emailList); for (var i = 0; i < 100; i++) { parentDiv.append(<div> + i + </div>); } ⦿ A la place : var parentDiv = $(#emailList); var divs = ; for (var i = 0; i < 100; i++) { divs += <div> + i + </div>; } parentDiv.html(divs);2013-04-17 Développer coté client en 2013 18
  19. 19. JQuery : bonnes pratiques 2/3⦿Sélecteurs simples $("body #page:first-child article.main p#intro div"); ⦿A la place : $("#intro div") ⦿Encore mieux : $("#intro").filter("div")2013-04-17 Développer coté client en 2013 19
  20. 20. JQuery : bonnes pratiques 3/3⦿Eviter les répétitions de selecteurs $("#myId").css("color","#FFFFFF"); $("#myId").css("border","1px solid black"); ⦿ A la place : var $node = $("#myId"); $node.css("color","#FFFFFF"); $node.css("border","1px solid black"); ⦿ Encore mieux : $node.css("color","#FFFFFF"). css("border","1px solid black");2013-04-17 Développer coté client en 2013 20
  21. 21. Underscore.js⦿Ensemble de méthodes utilitaires⦿Manipulation de tableaux et collections⦿Manipulation dobjets et de méthodes⦿Et bien plus… _.each([1, 2, 3], function(num){ alert(num); }); _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });2013-04-17 Développer coté client en 2013 21
  22. 22. Le templating 1/2⦿Simplifier la construction du DOM⦿Plus facile a maintenir et limite les erreurshtml = <div><div> + name + </div><div> + address.street + ;html += address.zipcode + + address.city + + address.country + </div>;html += <div>le site : + website + </div>;html += <div> + creationDate + </div>;html += <div>Capital : + fonds + </div></div>;<div> <div>{{name}}</div> <div>{{address.street}} {{address.zipcode}} {{address.city}} {{address.country}}</div> <div>le site : {{website}}</div> <div>fondée en {{creationDate}}</div> <div>Capital : {{fonds}}</div></div>2013-04-17 Développer coté client en 2013 22
  23. 23. Le templating 2/2⦿Mustache : le plus connu mais très lent http://mustache.github.com/⦿Handlebars : très complet http://handlebarsjs.com/⦿Jquote2 et dot.js : moins connus mais rapides http://aefxx.com/jquery-plugins/jqote2/ http://olado.github.com/doT/2013-04-17 Développer coté client en 2013 23
  24. 24. Encapsulation 1/2⦿Eviter les effets de bords script1.js : var variable = "script1"; script2.js : var variable = "script2"; index.html : <script src="script1.js"></script> <script src="script2.js"></script> <script> console.log(variable); // affiche script2 </script>2013-04-17 Développer coté client en 2013 24
  25. 25. Encapsulation 2/2⦿Encapsulation de base script1.js : (function() { var variable = "script1"; }()); script2.js : (function() { var variable = "script2"; }()); <script src="script1.js"></script> <script src="script2.js"></script> <script> console.log(variable); // variable is not defined </script>2013-04-17 Développer coté client en 2013 25
  26. 26. La performance⦿Minifier YUI compressor⦿Compresser Mod_deflate sur apache⦿Utiliser des CDN https://developers.google.com/speed/libraries/devguide⦿Fusionner vos ressources http://spritegen.website-performance.org/⦿Benchmarker Chrome, PageSpeed, YSlow2013-04-17 Développer coté client en 2013 26
  27. 27. Chargement différé⦿JavaScript est monothread⦿La page saffiche une fois que tous les scripts sont exécutés⦿Repousser lexécution du javaScript au plus tard possibleScripts en fin de pageChargement à la demande : lab.js2013-04-17 Développer coté client en 2013 27
  28. 28. Require.js : le principe⦿Modularisation de votre JavaScript⦿Encapsulation + gestion des dépendances⦿Chargement différé des JavaScript⦿Optimisation des ressources statiques⦿Basé sur Asynchronous Module Definition (AMD)⦿Il existe dautres implémentations de AMD2013-04-17 Développer coté client en 2013 28
  29. 29. Require.js : un exemple define(function() { return cart!; }); define(function() { return { do:function() {console.log(test);} } }); define([./cart,./inventory],function(cart,inv) { console.log(cart); // affiche cart! inv.do(); // affiche test });2013-04-17 Développer coté client en 2013 29
  30. 30. Require.js : leffet cascade2013-04-17 Développer coté client en 2013 30
  31. 31. Require.js : loptimisation⦿Minify les scripts avec uglify⦿Minify les CSS et inline les @imports⦿Concatène les scripts⦿Inline les templates⦿Fonctionne avec node.js ou MavenMoins de requêtesFichiers + petits2013-04-17 Développer coté client en 2013 31
  32. 32. Les Frameworks MVC en JS⦿Gérer des sites Webs complexes⦿Nombreuses solutions : Angular.js, Backbone.js, Sprout, sammy, Spine, Ember.js, batman.js, etc. ⦿ Frameworks très jeunes … ⦿ … donc cest un peu le bazar! ⦿ Mais très prometteur et incontournable dans le futur2013-04-17 Développer coté client en 2013 32
  33. 33. Angular.js : le principe⦿Ne plus devoir manipuler le DOM⦿Gérer la navigation⦿Gérer le templating⦿Gérer les modules⦿Fragments de page⦿Injection de dépendances⦿Appels AjaxRemplace tous les autres frameworks JS2013-04-17 Développer coté client en 2013 33
  34. 34. Angular.js : un exemple<!doctype html> $scope.yourName = toto;<html ng-app> console.log($scope.yourName); <head> <script src="angular.min.js"></script> $scope.func = function() { </head> return une fonction…; <body> } <div> <label>Name:</label> angular.module(project, [dep]). <input type="text" config(function($routeProvider) { ng-model="yourName" /> $routeProvider.when(/, { <h1>Hello {{ yourName }}!</h1> controller:ListCtrl, <span>{{ func() }} templateUrl:list.html </div> }); </body> });</html> 2013-04-17 Développer coté client en 2013 34
  35. 35. 2013-04-17 Développer coté client en 2013 35
  36. 36. Bower⦿Gérer ses dépendances⦿Lancé par Twitter mais open source⦿Basé sur node.js⦿Utilise la ligne de commande : bower search backbone bower install backbone bower install git://github.com/pivotal/jasmine.git bower update2013-04-17 Développer coté client en 2013 36
  37. 37. Grunt⦿Outil de build en JavaScript⦿Basé sur node.js et lancé en ligne de commande⦿Création de projet basé sur des templates⦿Plein de plugins : ⦿Minification ⦿Concatenation ⦿Analyse de code ⦿Lancer les tests2013-04-17 Développer coté client en 2013 37
  38. 38. Les IDE⦿IntelliJ / Webstorm coloration, refactoring, auto complétion, analyse, payant⦿Aptana, Bracket coloration, auto complétion, gratuit⦿Notepad++, SublimText coloration, gratuit⦿scripted, Cloud9 coloration, complétion, gratuit, en ligne2013-04-17 Développer coté client en 2013 38
  39. 39. Le debug⦿Chrome Dev Tools, Opera Dragonfly, Firefox firebug⦿Inspection CSS⦿Debug avec points darrêt⦿Console avec exécution JavaScript⦿Analyse du réseau⦿Profiling et audit⦿et bien plus !2013-04-17 Développer coté client en 2013 39
  40. 40. Quelques sites utiles⦿jsconsole.com⦿jsperf.com⦿jsfiddle.net⦿github.com⦿responsinator.com⦿debug.phonegap.com (weinre)2013-04-17 Développer coté client en 2013 40
  41. 41. Les tests unitaires⦿TDD possible en javaScript !⦿Mais plus compliqué quen java ou .Net⦿Frameworks : Qunit, Jasmine, Mocha⦿Launchers : Karma (Testacular), JsTestDriver describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); });2013-04-17 Développer coté client en 2013 41
  42. 42. Selenium⦿Réalise des tests dIHM : ⦿Tester les écrans ⦿Tester les interactions utilisateur ⦿Tester la navigation⦿Tester plusieurs navigateurs⦿Tests via un IDE ou en code⦿Selenium Grid pour // les tests⦿Une alternative possible CasperJs2013-04-17 Développer coté client en 2013 42
  43. 43. Tester la compatibilité⦿http://www.browserstack.com ⦿Test plein de navigateurs ⦿Possibilité de tests via tunnel SSL ⦿Tests sur les émulateurs mobiles⦿VM IE ⦿Nécessite virtual PC / windows 7 ⦿http://www.microsoft.com/en- us/download/details.aspx?id=11575⦿Pour le mobile cest galère !2013-04-17 Développer coté client en 2013 43
  44. 44. Compiler vers JavaScript⦿Nouvelle tendance⦿CoffeeScript, TypeScript, Dart, etc.⦿Comble les lacunes du langage⦿Syntaxe différente ou non⦿Code souvent plus maintenable⦿Attention : debugging plus compliqué2013-04-17 Développer coté client en 2013 44
  45. 45. Un exemple en CoffeeScript# Assignment: # Assignment:number = 42 var number = 42;opposite = true var opposite = true;# Conditions: # Conditions:number = -42 if opposite number = opposite ? -42 : 42;# Functions: # Functions:square = (x) -> x * x function square(x) { return x * x; }# Objects: # Objects:math = math = { root: Math.sqrt root: Math.sqrt, square: square square: square, cube: (x) -> x * square x cube: function(x) { x * square x } }; 2013-04-17 Développer coté client en 2013 45
  46. 46. Intégration continue⦿Intégration avec Jenkins Plugin pour Grunt Build du projet via Maven/Gradle/etc.⦿Analyse du code JSLint/JSHint/cssLint Plugin JavaScript pour Sonar⦿Tests unitaires sans navigateur ? Phantomjs Rhino/Nashorn2013-04-17 Développer coté client en 2013 46
  47. 47. Yeoman⦿Boite à outil du développement web⦿Création de projets via des templates⦿Build du projet via Grunt⦿Dépendances via Bower⦿Optimisation des ressources⦿Serveur web intégré⦿Tests unitaires avec phantomjs⦿Basé sur node.js2013-04-17 Développer coté client en 2013 47
  48. 48. 2013-04-17 Développer coté client en 2013 48
  49. 49. Je vous ai épargné⦿La programmation Objet par prototype⦿Les scopes⦿Lutilisation de this⦿Les changements de contexte sur les fonctions⦿Les itérations sur les objets⦿Et bien dautres spécificités tordues ou non…2013-04-17 Développer coté client en 2013 49
  50. 50. Aller plus loin⦿Lire des livres ! ⦿Javascript the good parts ⦿Pro Javascript techniques ⦿Secrets of the JavaScript Ninja⦿Lire des blogs ⦿http://dailyjs.com ⦿http://googlewebmastercentral.blogspot.fr/ ⦿http://bonsaiden.github.com/JavaScript-Garden/ ⦿ Communauté ⦿ ParisJS ⦿ DotJs2013-04-17 Développer coté client en 2013 50
  51. 51. Et surtout … Ne soyez pas dépendant des frameworks ! JavaScript est un vrai langage ! Apprenez le si vous comptez faire du web !2013-04-17 Développer coté client en 2013 51
  52. 52. Merci2013-04-17 Développer coté client en 2013 52

×