Conception de code javascript cote client dans la continuité du renouveau du web
-
Upload
soat -
Category
Technology
-
view
1.862 -
download
0
description
Transcript of 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.
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 ?