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

2,502 views

Published on

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 !

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,502
On SlideShare
0
From Embeds
0
Number of Embeds
173
Actions
Shares
0
Downloads
59
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×