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

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.


Les sites Webs

Structure Style Traitement Ressources

2023-04-12 6

Cascading Style Sheet



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/bootstraphttp://twitter.github.com/bootstrap/examples/hero.html

http://twitter.github.com/bootstrap

http://twitter.github.com/bootstrap/examples/hero.html

http://twitter.github.com/bootstrap/examples/hero.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 { 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



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"42 === "42"

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

truefalse

myInt === 0 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

2023-04-12 16

Développer en javascript



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



⦿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 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>


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/


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>


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>


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


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


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

2023-04-12 30

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êtesFichiers + 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><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



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


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 / Webstormcoloration, refactoring, auto complétion, analyse, payant

⦿Aptana, Bracketcoloration, auto complétion, gratuit

⦿Notepad++, SublimTextcoloration, gratuit

⦿scripted, Cloud9coloration, 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 !

http://www.browserstack.com/

http://www.browserstack.com/


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


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


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…



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

http://dailyjs.com/

http://googlewebmastercentral.blogspot.fr/

http://googlewebmastercentral.blogspot.fr/

http://bonsaiden.github.com/JavaScript-Garden/

http://bonsaiden.github.com/JavaScript-Garden/


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


Des questions ?

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

Technology

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