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 !
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 REST
Client : site Web, appli native, client lourd, etc.
2013-04-17 Développer coté client en 2013 4
5. Les sites Webs
Structure Style Traitement Ressources
2013-04-17 Développer coté client en 2013 5
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
2013-04-17 Développer coté client en 2013 7
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.
2013-04-17 Développer coté client en 2013 8
9. 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
2013-04-17 Développer coté client en 2013 9
10. Surcouche CSS
⦿Création des styles dans un autre langage que
CSS
⦿Puis compilé vers CSS
⦿Exemple : Less, Sass, Compass
2013-04-17 Développer coté client en 2013 10
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
13. Le javaScript
⦿Très puissant
⦿Très compliqué
⦿Mais facile d'accès pour les débutants
Code bogué et impossible à maintenir
2013-04-17 Développer coté client en 2013 13
14. Pourquoi tant de haine ?
42 == "42" true
42 === "42" false
var myInt = parseInt("08"); myInt === 0
var myInt = parseInt("08", 10); myInt === 8
2013-04-17 Développer coté client en 2013 14
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
2013-04-17 Développer coté client en 2013 15
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. 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. 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. 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. 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;
});
2013-04-17 Développer coté client en 2013 21
22. 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>
2013-04-17 Développer coté client en 2013 22
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. 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. 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. 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
2013-04-17 Développer coté client en 2013 26
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 page
Chargement à la demande : lab.js
2013-04-17 Développer coté client en 2013 27
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
2013-04-17 Développer coté client en 2013 28
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êtes
Fichiers + petits
2013-04-17 Développer coté client en 2013 31
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
2013-04-17 Développer coté client en 2013 32
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
2013-04-17 Développer coté client en 2013 33
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 update
2013-04-17 Développer coté client en 2013 36
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
2013-04-17 Développer coté client en 2013 37
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 ligne
2013-04-17 Développer coté client en 2013 38
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 !
2013-04-17 Développer coté client en 2013 39
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);
});
});
2013-04-17 Développer coté client en 2013 41
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
2013-04-17 Développer coté client en 2013 42
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 !
2013-04-17 Développer coté client en 2013 43
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. 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. 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
2013-04-17 Développer coté client en 2013 46
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
2013-04-17 Développer coté client en 2013 47
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…
2013-04-17 Développer coté client en 2013 49
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
2013-04-17 Développer coté client en 2013 50
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