Les fondamentaux du langage. Le coté fonctionnel, le coté objet, la dynamicité…

Conférence de Jean-Pierre Vincent
Blog : http://www.braincracking.org/ – Twitter : @theystolemynick

Je vous laisse regarder les slides, c’est une présentation très technique ou le code parle de lui même.

Petit synopsis…

Après un cette courte introduction (historique, …), on aborde les notions de base de Javascript : Portée des variables (var + function), Function(), Contexte(this).
Au passage, un petit tacle au Monde.fr qui contient + de 480 variables globales quand Google n’en compte que 33 malgré ses 450.000 ligne de code JS.
Ensuite, on aborde le concept objet avec Javascript.

Slides de la conférences

http://www.slideshare.net/jpvincent/javascript-fondamentaux-et-oop

 

Tour d’horizon des outils de debug disponibles

Conférence de David Catuhe (Microsoft) / David Rousset (Microsoft)
Blog : http://blogs.msdn.com/b/eternalcoding / http://blogs.msdn.com/b/davrous- Twitter : @deltakosh / @darous

Dans cette cession, David et David vont nous présenter différents outils de débug présent sur les navigateurs « phares » du marché.

Microsoft – IE

La console de debug (qui existe depuis IE 8) est accessible en utilisant la touche F12.
C’est un outils de debuging assez simple qui permet de mettre des breakpoint et même des breakpoint conditionnels (en indiquant la condition pour « activer » le breakpoint – ex. si une variable vaut temps, active le breakpoint, sinon, continue l’exécution du script).
On a également la possibilité :

• d’afficher des informations sur une variables en utilisant console.dir(variable).
• de « démimifier » du code mimifié en le reformatant (mais attention, IE renomme beaucoup de variable donc il faut mieux avoir le code source original sous la main).
• d’utiliser l’outils de profilling pour déterminer les parties les plus lentes de son code.
• de débugger des « applications » en mode WebWorker (depuis IE 10).

Google – Chrome

La console de debug est également accessible via la touche F12.
On retrouve les mêmes fonctionnalités avec quelques différences de présentation

• breakpoint et breakpoint conditionnels (possible dans le DOM et dans les XHR)
• informations sur une variables (scope, closure, …)
• outils de profiling
• …

Chrome propose également un outils d’audit, équivalent à JSLint (voir plus bas), qui permet d’analyser le code JS et de faire ressortir les « erreurs » du développeur.

Mozilla – Firefox

Le debug n’est pas interne à Firefox, il se fait par l’intermédiaire d’une extension : Firebug

Pour David Catuhe, c’est le meilleur des 3, enfin son préféré.
On y retrouve les fonctions de base :

• breakpoint
• informations sur une variables (scope, closure, …)
• profiling
• trafic réseaux
• …

Visual Studio 2010 (Un peu de pub de nos accueillant)

Permet d’avoir une « vraie » expérience de debug directement dans son environnement de développement.

D’autres outils

JSFIDDLE (jsfiddle.net)

Permet de tester du code avec différentes librairies JS et différentes version de ses librairie.
Cela génère également une url raccourcie qui permet un partage plus simple avec d’autre personnes lorsque nécessaire.
Cela intègre directement la possibilité d’utiliser JSLint qui permet de faire remonter les erreurs de développement.

JSLint (http://www.jslint.com/)

Outils qui permet de vérifier la qualité d’un code Javascript. Il permet de faire ressortir les erreurs du développeur.

 

jQuery

Conférence de Aurélien Verla
Site : http://www.wygwam.com/ – Twitter : @Wygwam

Aurélien Verla (Wygwan) nous fait un petit tour d’horizon de jQuery, sa vie, son oeuvre, comment elle fonctionne, ….

Historique

Avant, on utilisait souvent ça :

• if (document.layers){} pour savoir si nous étions sur netscape ou IE
• document.getElementById(« id_element »)
• document.getElementByTagName(« tag_name »)
• document.getElementsByClass(« classe »)
• …

Aujourd’hui, on dispose des querySelector (ex. : document.querySelectorAll)

Attention, contrairement aux idées reçues, jQuery ne sait pas faire des choses que l’on ne sait pas faire en Javascript de base.
jQuery est un framework de développement ; par cntre jQueryUI est un framework de composant. Bien faire la différence.

jQuery

• Url :  http://jquery.com/
• Framework de développement créé par John Resig
• Lancé en 2006
• Est une « Fluent API » ce qui veut dire que l’on peut chaîner les instructions.
• Gère la compatibilité avec tous les navigateurs ; les développeurs n’ont plus de question à se poser
• S’appuie sur Sizzle.

Sizzle

• Url : http://sizzlejs.com/
• Framework de sélection CSS supportant les querySelector et le CSS3
• Supporte tous les navigateurs y compris les anciens (IE 6 pour ne pas le citer). Dans le cas des anciens navigateurs, le Framework utilise les fonctions javascript de base (document.getElementsByClass, …) pour les enrichir et simuler les querySelector.
• Analyse le code de la droite vers la gauche. Du coup, il faut mieux commencer une recherche par un #id pour augmenter de manière drastique les performances.

Le sélecteur fonctionne par :

• id #
• class .
• tags (html au sens propre du terme)
• CSS3 selector
• Filtre :last, :even :contains, …
• Formulaires :input :text :checkbos $.serialise() …
• Conditions :not :has (permet de faire des requêtes sur les noeuds enfant d’un noeud

Quelques exemples

Récupérer tous les éléments cochés (radio / checkbox) du containeur :
$element_checked = $(« #container :input:checked »);

Récupéré toutes les valeurs des inputs d’un formulaire et les serialiser (utile pour les requêtes ajax) :
$valeurs_serialize = $(« #container :input »).serialize();
La fonction serializeArray() permet de retourner ces informations sous forme d’un tableau clé/valeur (clé = nom de l’input / valeur de l’input)

Le dernier li d’un ul :
$(« #container ul li:last »).html(« … »);

Matcher les li contenant 2 spans :
$(« #container ul li:has(span span) »).html(« … »);
(ex.: < ul>< li>< span>plop< span>µ))

:odd permet de ne matcher que les éléments « pairs »

Par défaut, le sélecteur de jQuery (Sizzle) ne gère pas la casse.

Les évènements

• $.ready() est le plus « connu »
• Mais il existe « tous » les évènements usuels (.click(), .hover(), keydown(), …)
• Depuis la nouvelle version 1.7, les fonctions live() et delegate() sont depreciées et sont remplacées par la fonction on() (ou off()).

Ajax

• Très simple ; se fait par la fonction ajax() et ses dérivées load(), …
• Par défaut, cela effectue un requête de type POST ; il faut préciser si l’on veut un GET.

La librairie jQuery est hostée par le CDN de Microsoft et de Google :

• Microsoft : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js
• Google : https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js

Les plugins

• Tout est « étendable » dans jQuery et c’est beaucoup plus simple que de le faire dans Sizzle.
• Une communauté énorme.
• Pour développer un plugin il faut tout de même les normes mises en place par jQuery (closure, …).
• Closure par defaut (permet d’éviter le conflit) : (function($) {})(jQuery);

jQuery UI

• Url : http://jqueryui.com/
• Framework de composant, très puissant, de nombreuse choses, …

Canvas et SVG : Faire du graphique avec Javascript

Conférence de David Catuhe (Microsoft) / David Rousset (Microsoft)
Blog : http://blogs.msdn.com/b/eternalcoding / http://blogs.msdn.com/b/davrous- Twitter : @deltakosh / @darous

Base de SVG

• Déssinner en 2nd vectorielle via du XML
• « Retained mode » : l’arbre des objets est conservé en mémoire
• Accès au éléments SVG via le DOM
• Les éléments SVG peuvent être stylés par CSS & décoré avec ARIA
• Chargé depuis un fichier .svg ou inline dans un document HTML5

IE supporte presque tout SVG depuis IE9 excepté 3 fonctionnalités : Filter Effetcs, Declarative animation et SVG Fonts. IE 10 gère Filter Effect.
SVG est indépendant de la résolution ; intéressant pour les expérience multi devices
Google sait indexé le SVG

Les bases de canvas

• Permet de dessiner dans une bitmap « dynamique ».
• un jeu d’APIs Javascript et de primitives de dessin (rectangle, lignes, courbe de bezier, …)
• Mot immédiat : « Fire and Forget » (l’arbre des objets n’est pas stocké en mémoire ; au développeur de le maintenir l’arbre des objets).
• C’est une boite noire : contenu non visible dans le DOM > faire attention aux problèmes d’accessibilité.

Le canvas est acceléré matérialement par la carte graphique, donc très performant.
Le page HTML est donc « vide » puisque pas de DOM.
On doit redessiner le canvas à chaque modification ; pas de mise en mémoire.

Alors, SVG ou Canvas ?

Utiliser SVG pour :

• Les documents vectoriels « complexes ».
• Graphiques, rapports et cartographie (GoogleMaps et BingMap utilise SVG pour gérer leurs cartes).
• Plan d’une maison, plan d’un organe physique, …

A noter qu’il existe des librairies permettant de faire du SVG :

• Raphaeljs.com – http://raphaeljs.com/
• HighCharts : graphisme (http://www.highcharts.com/)

Meilleur SEO et accessibilité (couplage avec ARIA)

Utiliser Canvas pour :

• La manipulation de pixel ; tous les scénarios de calcul et de génération d’image son possible
• La gestion des vidéos ; exemple le mélange de vidéos.
• Faire du charting de très haut niveau avec des formes très complexes.
• Gérer un grand nombre d’images.

Il est possible de faire des propositions du visuel + un backup « simple » pour l’accessibilité.

On peut mélanger SVG et Canvas pour afficher différentes partie d’une application.

L’outillage

Pur générer du SVG :

• MS Visio : permet de faire des exports en SVG
• Adobe illustrator : export en SVG
• Inkspace : logiciel gratuit et opensource
• Svg edit (svg-edit.googlecode.com)

Pour générer du Canvas :

• AI2Canvas plug-in (http://visitmix.com/labs/ai2canvas/)
• Il y a plus de librairie que d’outils ; on est obligé de se faire beaucoup plus de code.

Et sinon

• Canvas marche très bien dans tous les navigators modernes !
• Pour etre “compatible”, le choix du full canvas est presque obligatoire vu qu’SVG n’est pas encore acceléré par les navigateurs autre que IE.
• 60 images par seconde = action toutes les 16 s.
• Framework de jeu melonJS (http://www.melonjs.org/)
• EaselJS.com (http://easeljs.com/) : librairie pour utiliser canvas.

Slides de la conférences + exemples de code/jeu

http://blogs.msdn.com/b/davrous/archive/