conception de code javascript cote client dans la continuité du renouveau du web
DESCRIPTION
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 !TRANSCRIPT
2023-04-12 1
Développer côté client en 2013
Développer coté client en 2013
Mathieu PARISOT@matparisot
2023-04-12 2Développer coté client en 2013
2023-04-12 3Développer coté client en 2013
LESSGruntRequire.jsJqueryYeomanBracketBeurrePain
2023-04-12 Développer coté client en 2013 4
Le retour du Client - Serveur
La théorie : découpage en couches, n-tiers
La réalité : code vue et métier intriqué
Avec le WOA on sépare complètement la vue !Serveur : expose des services RESTClient : site Web, appli native, client lourd, etc.
2023-04-12 Développer coté client en 2013 5
Les sites Webs
Structure Style Traitement Ressources
2023-04-12 6
Cascading Style Sheet
Développer coté client en 2013
2023-04-12 Développer coté client en 2013 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électeurs
2023-04-12 Développer coté client en 2013 8
Le reset CSS
⦿Chaque navigateur implémente des styles de base⦿Un reset CSS permet d'avoir le même rendu
de base sur tous les navigateurs⦿Nombreux disponibles
Eric Meyer, HTML5Reset, etc.
2023-04-12 Développer coté client en 2013 9
Frameworks CSS
⦿Facilite la mise en page d'un site⦿Mise en page responsive⦿Plugins Javascript⦿Exemple : Twitter Bootstrap
http://twitter.github.com/bootstraphttp://twitter.github.com/bootstrap/examples/hero.html
2023-04-12 Développer coté client en 2013 10
Surcouche CSS
⦿Création des styles dans un autre langage que CSS⦿Puis compilé vers CSS⦿Exemple : Less, Sass, Compass
2023-04-12 Développer coté client en 2013 11
LESS@bgcolor:#543633;#header { h1 { font-size: 26px; font-weight: bold; background-color:@bgcolor; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}
#header h1 { font-size: 26px; font-weight: bold; background-color: #543633;}#header p { font-size: 12px;}#header p a { text-decoration: none;}#header p a:hover { border-width: 1px;}
2023-04-12 12
Javascript
Développer coté client en 2013
2023-04-12 Développer coté client en 2013 13
Le javaScript
⦿Très puissant
⦿Très compliqué
⦿Mais facile d'accès pour les débutants
Code bogué et impossible à maintenir
2023-04-12 Développer coté client en 2013 14
Pourquoi tant de haine ?
42 == "42"42 === "42"
var myInt = parseInt("08");var myInt = parseInt("08", 10);
truefalse
myInt === 0 myInt === 8
2023-04-12 Développer coté client en 2013 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 terme
2023-04-12 16
Développer en javascript
Développer coté client en 2013
2023-04-12 Développer coté client en 2013 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">');
2023-04-12 Développer coté client en 2013 18
JQuery : bonnes pratiques 1/3
⦿Pas de manipulation de DOM dans les bouclesvar 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);
2023-04-12 Développer coté client en 2013 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")
2023-04-12 Développer coté client en 2013 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");
2023-04-12 Développer coté client en 2013 21
Underscore.js
⦿Ensemble de méthodes utilitaires⦿Manipulation de tableaux et collections⦿Manipulation d'objets 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; });
2023-04-12 Développer coté client en 2013 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>
2023-04-12 Développer coté client en 2013 23
Le templating 2/2
⦿Mustache : le plus connu mais très lenthttp://mustache.github.com/
⦿Handlebars : très complethttp://handlebarsjs.com/
⦿Jquote2 et dot.js : moins connus mais rapideshttp://aefxx.com/jquery-plugins/jqote2/http://olado.github.com/doT/
2023-04-12 Développer coté client en 2013 24
Encapsulation 1/2
⦿Eviter les effets de bordsscript1.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>
2023-04-12 Développer coté client en 2013 25
Encapsulation 2/2
⦿Encapsulation de basescript1.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>
2023-04-12 Développer coté client en 2013 26
La performance
⦿MinifierYUI compressor
⦿CompresserMod_deflate sur apache
⦿Utiliser des CDNhttps://developers.google.com/speed/libraries/devguide
⦿Fusionner vos ressourceshttp://spritegen.website-performance.org/
⦿BenchmarkerChrome, PageSpeed, YSlow
2023-04-12 Développer coté client en 2013 27
Chargement différé
⦿JavaScript est monothread⦿La page s'affiche une fois que tous les scripts
sont exécutés⦿Repousser l'exécution du javaScript au plus
tard possible
Scripts en fin de pageChargement à la demande : lab.js
2023-04-12 Développer coté client en 2013 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 d'autres implémentations de AMD
2023-04-12 Développer coté client en 2013 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'});
2023-04-12 30
Require.js : l'effet cascade
Développer coté client en 2013
2023-04-12 Développer coté client en 2013 31
Require.js : l'optimisation
⦿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êtesFichiers + petits
2023-04-12 Développer coté client en 2013 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 c'est un peu le bazar!⦿Mais très prometteur et incontournable
dans le futur
2023-04-12 Développer coté client en 2013 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 JS
2023-04-12 Développer coté client en 2013 34
Angular.js : un exemple<!doctype html><html ng-app> <head> <script src="angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" /> <h1>Hello {{ yourName }}!</h1> <span>{{ func() }} </div> </body></html>
$scope.yourName = 'toto';console.log($scope.yourName);
$scope.func = function() { return 'une fonction…';}
angular.module('project', ['dep']). config(function($routeProvider) { $routeProvider.when('/', { controller:ListCtrl, templateUrl:'list.html' });});
2023-04-12 35
Outillage et Build
Développer coté client en 2013
2023-04-12 Développer coté client en 2013 36
Bower
⦿Gérer ses dépendances⦿Lancé par Twitter mais open source⦿Basé sur node.js⦿Utilise la ligne de commande :
bower search backbonebower install backbonebower install git://github.com/pivotal/jasmine.gitbower update
2023-04-12 Développer coté client en 2013 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 tests
2023-04-12 Développer coté client en 2013 38
Les IDE
⦿IntelliJ / Webstormcoloration, refactoring, auto complétion, analyse, payant
⦿Aptana, Bracketcoloration, auto complétion, gratuit
⦿Notepad++, SublimTextcoloration, gratuit
⦿scripted, Cloud9coloration, complétion, gratuit, en ligne
2023-04-12 Développer coté client en 2013 39
Le debug
⦿Chrome Dev Tools, Opera Dragonfly, Firefox firebug⦿Inspection CSS⦿Debug avec points d'arrêt⦿Console avec exécution JavaScript⦿Analyse du réseau⦿Profiling et audit⦿et bien plus !
2023-04-12 Développer coté client en 2013 40
Quelques sites utiles
⦿jsconsole.com⦿jsperf.com⦿jsfiddle.net⦿github.com⦿responsinator.com⦿debug.phonegap.com (weinre)
2023-04-12 Développer coté client en 2013 41
Les tests unitaires
⦿TDD possible en javaScript !⦿Mais plus compliqué qu'en 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); });});
2023-04-12 Développer coté client en 2013 42
Selenium
⦿Réalise des tests d'IHM : ⦿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 CasperJs
2023-04-12 Développer coté client en 2013 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 c'est galère !
2023-04-12 Développer coté client en 2013 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é
2023-04-12 Développer coté client en 2013 45
Un exemple en CoffeeScript# Assignment:number = 42opposite = true
# Conditions:number = -42 if opposite
# Functions:square = (x) -> x * x
# Objects:math = root: Math.sqrt square: square cube: (x) -> x * square x
# Assignment:var number = 42;var opposite = true;
# Conditions:number = opposite ? -42 : 42;
# Functions:function square(x) { return x * x; }
# Objects:math = { root: Math.sqrt, square: square, cube: function(x) { x * square x }};
2023-04-12 Développer coté client en 2013 46
Intégration continue
⦿Intégration avec JenkinsPlugin pour GruntBuild du projet via Maven/Gradle/etc.
⦿Analyse du codeJSLint/JSHint/cssLintPlugin JavaScript pour Sonar
⦿Tests unitaires sans navigateur ?PhantomjsRhino/Nashorn
2023-04-12 Développer coté client en 2013 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.js
2023-04-12 48
Pour conclure…
Développer coté client en 2013
2023-04-12 Développer coté client en 2013 49
Je vous ai épargné
⦿La programmation Objet par prototype⦿Les scopes⦿L'utilisation de this⦿Les changements de contexte sur les
fonctions⦿Les itérations sur les objets⦿Et bien d'autres spécificités tordues ou non…
2023-04-12 Développer coté client en 2013 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⦿ DotJs
2023-04-12 Développer coté client en 2013 51
Et surtout …
Ne soyez pas dépendant des frameworks !
JavaScript est un vrai langage !
Apprenez le si vous comptez faire du web !
2023-04-12 52
Merci
Développer coté client en 2013
Des questions ?