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

Mathieu PARISOT
@matparisot
2013-04-17 Développer coté client en 2013 1

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 REST
Client : site Web, appli native, client lourd, etc.


Les sites Webs

Structure Style Traitement Ressources


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


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.


Frameworks CSS

⦿Facilite la mise en page d'un site
⦿Mise en page responsive
⦿Plugins Javascript
⦿Exemple : Twitter Bootstrap
http://twitter.github.com/bootstrap
http://twitter.github.com/bootstrap/examples/her
o.html


Surcouche CSS

⦿Création des styles dans un autre langage que
CSS
⦿Puis compilé vers CSS
⦿Exemple : Less, Sass, Compass


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;
}

Le javaScript

⦿Très puissant

⦿Très compliqué

⦿Mais facile d'accès pour les débutants

Code bogué et impossible à maintenir


Pourquoi tant de haine ?

42 == "42" true
42 === "42" false

var myInt = parseInt("08"); myInt === 0
var myInt = parseInt("08", 10); myInt === 8


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

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">');


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);



⦿Sélecteurs simples
$("body #page:first-child article.main p#intro div");
⦿A la place :
$("#intro div")
⦿Encore mieux :
$("#intro").filter("div")


⦿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");


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;
});

Le templating 1/2

⦿Simplifier la construction du DOM
⦿Plus facile a maintenir et limite les erreurs
html = '<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>

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/


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>
console.log(variable); // affiche script2
</script>

Encapsulation 2/2

⦿Encapsulation de base
script1.js :
(function() { var variable = "script1"; }());

script2.js :
(function() { var variable = "script2"; }());

<script>
console.log(variable); // variable is not defined
</script>


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, YSlow


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 page
Chargement à la demande : lab.js

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


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'
});

Require.js : l'effet cascade


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êtes
Fichiers + petits

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


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

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>

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 update


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


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 ligne


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 !

Quelques sites utiles

⦿jsconsole.com
⦿jsperf.com
⦿jsfiddle.net
⦿github.com
⦿responsinator.com
⦿debug.phonegap.com (weinre)


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);
});
});


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

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 !


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é


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 }
};

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/Nashorn

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

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…


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


Et surtout …

Ne soyez pas dépendant des frameworks !

JavaScript est un vrai langage !

Apprenez le si vous comptez faire du web !


Merci


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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

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

Similar to Conception de code javascript cote client dans la continuité du renouveau du web (20)

More from SOAT

More from SOAT (20)

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