Pourquoi améliorer les performances ?

Bon à priori personne ne vous pose cette question! Mais on va y répondre brièvement. Il est essentiel d’augmenter les performances et de penser a optimiser son code source de façon automatique en JavaScript.

Une mauvaise optimisation peut causer l’arrêt brutal du navigateur du client, qui perd alors tous les sites en cours de consultation et tous les résultats calculer avant le crash.

Une application est amenée également à évoluer, ce qui implique de rajouter des fonctionnalités ou d’améliorer celles existantes. Donc plus de code, plus de calcul/travail, plus de mémoire utilisé. Résultat: des applications de plus en plus lentes.

Comment mesurer les performances

J’utilise depuis peu un site qui permet très facilement de comparer le fonctionnement de différente méthode pour un même résultat. On obtient de jolies graphiques et des stats très bien faite permettant de trouver la meilleure des solutions.

Ce site s’appelle jsPerf.com et permet de partager les tests aussi facilement que la création.

jQuery: hasClass() versus is()

Pour vous aider un peu sur l’interprétation des résultats de ce site je vous propose deux petites captures d’écran du résultat d’un test comparatif entre les méthodes hasClass() et is() de la librairie jQuery.

Ce test est en utilisation libre à l’adresse suivante : http://jsperf.com/hasclasstest (je n’en suis pas l’auteur).

C’est bien beau! Mais comment décrypter ces différentes informations?

Quelques astuces afin d’améliorer les performances jQuery

Avant tout!

Utiliser au maximum les dernières version de jQuery. L’équipe de dév s’efforce a améliorer les performances entre les versions (tout en pensant au tests de régression sur vos scripts/plugins [:D]).

• Performances améliorés et nouvelles fonctionnalités disponibles
• Des patchs de correction dans les version l.x.y
• Presque 50% des sites utilisent jQuery … Framework très largement testé
• Des milliers d’autres raisons

Utiliser les CDN mis à disposition. Voici quelques liens de repository CDN:

• Google : http://code.google.com/intl/fr-FR/apis/libraries/devguide.html
• Microsoft : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js
• jQuery : http://code.jquery.com/jquery-1.6.2.min.js

Bien choisir les sélecteurs

Il faut garder à l’esprit que pour obtenir la même chose il existe différents moyens. Pour jQuery, plusieurs sélecteurs peuvent retourner le même objet, mais le temps d’exécution est à vérifier. Il faut savoir que certains sélecteurs sont TOUJOURS plus rapide que les autres.

Les sélecteurs jQuery les plus rapides

Les identifiants et les éléments natifs du DOM sont les plus rapide à atteindre. Pourquoi ? Et bien car il existe des fonctions natives utilisées par le framework jQuery (cf. getElementById()).

• #idDeMonElement
• form, input, label, etc…

Les sélecteurs jQuery les plus lent

Les classes

L’utilisation des classes pour récupérer des éléments est assez lent (comparé aux résultats du chapitre précédent évidemment …) pour la simple raison que la méthode native getElementsByClassName() est présente uniquement dans les navigateurs suivant : IE9+, FF3+, Safari 4+, Chrome 4+, Opera 10.10+. Dans les autres versions de navigateur (notamment IE 7 et 8 qui sont très utilisé) l’utilisation des classes comme sélecteur est plus lente.

Les pseudo-class et attribut

L’utilisation de ces sélecteurs est rapide dans les navigateurs récent car ils incluent les méthodes querySelector() et querySelectorAll() dans leur moteur. Pour les autres, l’utilisation est non optimisé car jQuery doit lui même rechercher parmi le DOM les résultats à retourner.

Conclusion

Pour vous faire un idée sur la rapidité entre les versions et autres, je vous invite à consulter les tests présents sur jsperf.com et plus précisément ces tests : http://jsperf.com/dh-jquery-1-4-vs-1-6/13 et http://jsperf.com/jquery-vs-sizzle-vs-midori-vs-mootools-selectors-test/41.

 Mettre en cache votre objet jQuery

Le test ci-dessous vous montre qu’il est plus rapide de stocker l’objet jQuery dans une variable et d’effectuer les modifications sur cet objet.

Petit plus!

Sur mes projets, je met en place un objet qui s’occupe de sauvegarder en cache ces éléments afin d’y accéder plus rapidement. Le code ci-dessous vous montre un aperçu très bref de la mise en place d’élément en cache.

var $manager = {
	header: $("#header"),
	content: $("#content"),
	footer": $("#footer")
}
// Utilisation du manager
var heightHeader = $manager.header.width();
var heightFooter = $manager.footer.width();
// On stock un nouvel élément dans le manager
$manager.connectBox = $("#connectBox");
$manager.connectBox.fadeIn(3000);

Limiter la manipulation direct du DOM : html(), append(), etc.

Ce test parle de lui même. Le plus rapide est celui qui utilise une seule fois la méthode append() qui permet d’ajouter à la fin de l’élément parent du contenu.

Déléguer aux parents les évènements

Si vous souhaitez capter l’évènement du click sur un élémént de list

• vous allez procéder de la sorte:

// Code HTML
<div id="navigation">
	<a href="#menu1">Menu 1</a>
	<a href="#menu2">Menu 2</a>
	<a href="#menu3">Menu 3</a>
	<a href="#menu4">Menu 4</a>
	<a href="#menu5">Menu 5</a>
</div>
// Code javascript
$('#navigation a').bind('click', function(e) {
	e.preventDefault();
	$this = $(this);
	// Changement de couleur par exemple
	$this.css({
		'color':'red',
		'font-weight':'bold'
	});
});

Un sacré gain de temps d’environ 80% pour l’initialisation de l’évènement.

Enlever tous les appels inutiles

En général, nous avons dans les applications des méthodes qui permettent d’initialiser TOUS les éléments, évènements, objet, etc … Même sur une page qui n’a besoin que de 80% des actions, nous utilisons cette méthode init()…

Pensez à créer une méthode init() pour chaque page et en découpant correctement votre code vous aurez des performances plus agréable visuellement pour l’utilisateur.

Compresser vos JS

un outil fabuleux YUICompressor permet de minifier au maximum vos scripts. Toute la place gagnée par des variables plus courtes, les retours à la ligne enlevés, etc. est utile lors du téléchargement par l’utilisateur de votre fichier javascript.

Encore d’autres

Cette liste n’est pas exhaustive et peut-être sujet à modification. Si vous avez quelques idées, je peut venir les intégrer à cette mini-liste.

Conclusion

On peut améliorer les performances de l’utilisation de jQuery en appliquant les bonnes méthodes. Ce n’est pas car le framework jQuery nous met à disposition différentes moyens d’atteindre l’objectif qu’ils sont tous équivalent sur le plan des performance. Il faut donc apporter un soin particulier au choix de cette méthode et essayer de prendre de bonnes habitudes.

Je vous souhaite un bon dév’

Pour mettre en place cette configuration il y a certainement plusieurs méthodes. Je vais ici vous en démontrer une qui permet d’importer une nouvelle version jQuery adaptée au nouveau script sans pour autant altérer le fonctionnement du site.

Pourquoi importer une nouvelle version de jQuery sans écraser l’ancienne?

Vous allez me dire pourquoi vouloir conserver les deux versions jQuery? Et bien on peut avoir besoin de mettre en place ce genre d’artifice dans différents cas de figure mais le vrai pourquoi du comment, c’est que les versions de jQuery sont par définition différentes et suivant les scripts installés sur l’application non compatible.

Cas concret : WordPress

Prenons par exemple WordPress. Ce populaire moteur de blog permet très facilement d’intégrer une multitude de plugins. La dernière version de WordPress (version 3.3.1) inclut une version de jQuery récente et il se peut que certains plugins plus anciens nécessitent une version antérieure de jQuery. Il est donc possible de créer des variables utilisées uniquement par ces plugins pour les protéger de tous changement de version jQuery au niveau du coeur de jQuery ou du template WordPress.

Cas concret : réseaux sociaux

Prenons l’exemple de l’intégration des différents plugins sociaux disponibles sur facebook, google plus, twitter et autres. Ces derniers sont inclus via un code javascript, dans la plupart des cas, à placer dans le code source de l’application. Ces plugins sociaux nécessitent soit des librairies propriétaires, soit d’autres libres comme jQuery, etc. L’objectif est donc de mettre à disposition de façon simple aux utilisateurs ce plugin sans modifier le comportement normal de l’application.

Comment utiliser ces deux versions de jQuery simultanément ?

Sauvegarde de la librairie jQuery courante

Il faut préserver la librairie actuelle afin de la rendre de nouveau disponible après l’inclusion de notre version jQuery.

var jQueryOld = jQuery.noConflict();

Importer la nouvelle librairie jQuery et la sauvegarder

On va maintenant inclure notre librairie jQuery.

var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.onload = scriptLoaded;
newScript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
headID.appendChild(newScript);

Ce code permet d’inclure la version 1.7.1 de jQuery. Une fois la librairie chargée, la méthode scriptLoaded sera appelée. Dans cette méthode, nous allons procéder à la sauvegarde de notre jQuery 1.7.1.

var jQuery171 = jQuery.noConflict();

Restaurer l’ancienne version jQuery

$ = jQuery = jQueryOld;

A lire

Voici un article très intéressant concernant la création d’un “web widget” en utilisant jQuery : http://alexmarandon.com/articles/web_widget_jquery/

Conclusion

Cela permet de maintenir la dépendance des plugins ou script externe sans pour autant générer des erreurs dans le déroulement de l’application.

Bon dév’

Je vous laisse vous faire une idée en lisant quelques un des articles suivant:

• http://lci.tf1.fr/economie/entreprise/google-maps-google-condamne-en-france-pour-abus-de-position-dominante-6967121.html
• http://www.lavoixdunord.fr/France_Monde/actualite/Secteur_France_Monde/2012/02/01/article_google-condamne-a-verser-500-000-euros-de-dommage.shtml
• http://www.developpez.com/actu/41032/Google-Maps-gratuit-ne-plait-pas-a-la-justice-francaise-vers-la-fin-de-l-API-gratuite-pour-les-developpeurs/
• http://www.liberation.fr/medias/01012387291-google-maps-condamne-en-france-pour-abus-de-position-dominante
• http://tempsreel.nouvelobs.com/high-tech/20120201.OBS0346/google-condamne-en-france-pour-abus-de-position-dominante.html

Je vous invite à visiter le site officiel: http://www.kirkas.ch/ascensor/

Pour des informations sur la manipulation de ce plugin je vous invite à lire l’article du blog megaptery à cette adresse : http://www.megaptery.com/2011/09/ascensor-prenez-l-ascenseur-avec-jquery.html

Bon dév’ 

Pour commencer, cette article n’est pas un cours ou un tuto, je le qualifierais plutôt d’un décryptage des différentes balises que nous offre HTML5.

Le HTML5 ! Kezako …

Le HTML5 est le dernier né du standard HTML. Ce dernier créé en 2000 et standardisé en 1997 avec HTML4, s’est offert un relooking complet sur des propositions de spécification de Opera Software. Bon trêve de blablatage, quoi de changé côté technique ?

Et bien beaucoup de simplification sur les balises (DOCTYPE, LINK, etc), de nouvelles balises qui permettent d’organiser de façon sémantique nos pages web, de nouveaux attributs (data-*, etc). Au final ! Beaucoup de changement tous aussi intéressant les uns que les autres.

Pour commencer, je vais essayer de mettre à plat les nouvelles balises disponibles dans les spécifications HTML5.

Balises HTML5

Le but de ces nouvelles balises et de leurs réorganisations permet d’offrir aux moteurs de recherche ou à tout autre outils d’analyse sémantique, une hiérarchisation complète de notre document. Cela permet à terme de retrouver de façon plus précise le document et de cibler au mieux les recherches utilisateurs.

Dans l’ancienne version, nous utilisions allègrement les balises DIV pour structurer notre document. Aussi bien visuellement que sémantiquement. Voici un petit exemple qui montre la conversion de la structure d’une page classique HTML4 en langage HTML5.

Organisées en catégorie

La spécification HTML5 concernant les balises, organise et range ces dernières en 7 catégories. Pour vous aider à mieux comprendre leurs agencements, je vous invite à consulter la spécification en ligne en cliquant sur le schéma ci-dessous.

Pour décrypter ce schéma je vais expliquer brièvement le fonctionnement de chacune d’entre elle.

Zoom sur la catégorie sectioning

Cette catégorie comporte quatre balises : section, nav, aside et article. Je vais récapituler leurs spécificités.

<section/>

Cette balise permet de regrouper de façon thématique du contenu dans le document ou l’application. Elle permet également de remplacer les <div/> pour structurer le document.

Exemple d’utilisation:

• Différente page dans le cas d’onglet dans une boite de dialogue
• Page d’accueil avec plusieurs sections : News, Intro, Contact, etc …

En général, à chaque fois que l’on rajoute un titre, on doit implémenter une nouvelle section!

<nav/>

Cette balise permet de mettre en place des liens pour naviguer entre les différents documents de notre application. Ces liens doivent être uniquement des liens internes.

 Aucune publicité ou lien externe dans cette balise

<aside/>

Cette balise à été implémenter pour permettre de diffuser du contenu indirectement lié au contenu. C’est à dire que dans une section, si on aborde un sujet distinct du contenu, il faut placer ce contenu dans la balise <aside/>

Exemple d’utilisation:

• encadré,
• publicité,
• élément de page de navigation,
• tout autre contenu différent de celui du document

<article/>

La balise <article/> permet de diffuser du contenu externe ou indépendant qui peut être réutilisé. Le contenu présent dans cette balise se suffit à lui-même pour être compréhensible.

Exemple d’utilisation:

• articles de journaux ou de blog

 Les balises footer et header qui appartiennent à la catégorie FLOW et non à celle SECTIONING.

Aller plus loin

• http://www.w3.org/TR/html5/
• http://html5demos.com/
• http://www.html5.fr/
• http://www.html5rocks.com/en/

Voilà ! J’espère vous avoir un peu guidé sur le HTML5 qui en est à ses premiers pas. A vous de le rendre populaire et indispensable!

Bon dév’

Les Objects

Voici la structure de base pour déclarer une structure de donnée.

var unObjet = {}; // Un objet vide
var un Objet2 = new Object(); // Un objet vide également

Cette structure est considéré comme un tableau associatif, on peut venir associer des données à autre chose qu’un indice entier croissant. Par exemple on va écrire un objet calcul qui nous permettra d’effectuer les opérations basiques.

var Calcul = {
     add : function(a, b) { return a + b; },
     sub : function(a, b) { return a - b; },
     mul : function(a, b) { return a * b; },
     div : function(a, b) { return a / b; }
};
Calcul.add(3, 2); // Affiche 5
Calcul['sub'](3, 2); // Affiche 1
// etc ...

Comme vous pouvez le voir, on peut appeler les méthodes de cette objet de différentes manières.  En Javascript, tout est considéré comme un objet. Les tableaux, les chaines de caractère, les fonctions et même les nombre. Je reviendrai dans un autre article sur la programmation Objet en Javascript, pour le moment, je vais vous parler de l’objet natif Array.

Les Array

Les tableaux de type Array (non associatif) se déclare de la manière suivante en Javascript :

var unTableau = []; // Un raccourci pour var unTableau = new Array();
unTableau[0] = "Un chiffre 0";
unTableau[1] = "Un chiffre 1";
// équivalent à
var unAutreTableau = ["Un chiffre 0", "Un chiffre 1"];
// équivalent à
var encoreUnAutreTableau = new Array("Un chiffre 0", "Un chiffre 1");

La syntaxe est sensiblement similaire à la déclaration des objets. Il est également possible de mélanger les types de données dans le tableau, pour comparer avec l’exemple précédent, voici le même résultat mais en utilisant l’objet Array.

var Calcul = [
     function(a, b) { return a + b; },
     function(a, b) { return a - b; },
     function(a, b) { return a * b; },
     function(a, b) { return a / b; }
];
Calcul[0](3, 2); // Affiche 5
Calcul[1](3, 2); // Affiche 1
// etc ...

Bon ok pour cet exemple, on préfère largement l’Objet à l’Array. Donc on se pose maintenant la question suivante : Qu’est ce qui fait que l’on utilise quand même l’Array dans certains cas. Tous simplement car c’est un objet natif à javascript au même titre que l’objet String, Date, etc … Vous pouvez consulter la doc sur ce site : http://fr.selfhtml.org/javascript/objets/array.htm. Il met à disposition sans développement supplémentaire une suite de fonctionnalités assez intéressante comme la gestion de pile en FIFO ou FILO avec les méthode pop(), push() et shift(). Ou encore des méthodes de d’extraction d’une partie du tableau, de taille, de trie, etc. Une attention particulière à l’attribut length() qui retourne toujours 1 de plus que le nombre maximum de l’indice (ce qui est logique vu que l’on part de 0 … [:D]). Mais il faut se méfier également de cet attribut comme le montre l’exemple suivant:

var monTableau = [];
monTableau.length; // Affiche 0
monTableau.push("Toto est présent!");
monTableau.length; // Affiche 1
monTableau[100] = "Tarte au centième";
monTableau.length; // Affiche 101 !!!

Allez plus loin avec les Objets javascript

Si vous souhaitez en savoir plus sur les Objets javascript, je vous invite à visiter ce site http://t-templier.developpez.com/tutoriel/javascript/javascript-poo1/ qui est vraiment bien fait et pose de bonnes bases pour la POO en Javascript.

Bon dév’

Vous pouvez la télécharger sur le site officiel français de wordpress : http://fr.wordpress.org/

Au programme

De nombreux changements intéressants et pas moins de 500 bugs fixés depuis la dernière release …

Un nouveau gestionnaire d’upload

WordPress intègre (enfin !) une solution Open Source. Et pas n’importe laquelle, il s’agit de PlUpload qui permet une intégration rapide et surtout ouvert à toutes les technologies. Ce plugin supporte Flash, Gears, HTML5, Silverlight, BrowserPlus et HTML4.

Plus d’infos sont disponibles sur le site officiel : http://www.plupload.com/

Une nouvelle barre d’outil d’administration

Une intégration complète pour les tablettes ou smartphones

Quelques autres changement

• Nouveau écran d’accueil
• jQuery 1.7 utilisé (pipipipip  [:D])
• Aide amélioré
• etc …

Un peu plus

Bon install’ à tous et surtout très important : FAIRE UN BACKUP AVANT UNE MISE A JOUR!!!

Bon et dans ce versionning, il est toujours difficile de synchroniser les bases de données. Si on est plusieurs à travailler sur le projet, il faut que chaque développeur pense à écrire un patch SQL contenant les modifications à apporter pour une livraison et de reporter ces modifications dans le fichier de base pour de futur nouveau déploiement…

Avec MySQL Workbench, vous pouvez centraliser ce schéma et générer facilement le patch contenant uniquement les modifications a apporter pour mettre à jour votre base de donnée.

Ouvrir MySQL Workbench

Bon pour commencer apprenez à vous servir de MySQL Workbench. De nombreux tutos existe sur la toile :

• http://morgan-blog.over-blog.com/article-tutoriel-mysql-workbench-modeliser-une-base-de-donnee-52480943.html
• http://www.lafermeduweb.net/billet/mysql-workbench-creez-vos-bases-de-donnees-mysql-graphiquement-84.html
• http://www.grafikart.fr/tutoriels/mysql/modeliser-base-de-donnee-75

Lancer la synchronisation

Rendez-vous sur votre diagramme “EER Diagram”.

Lancer la synchronisation en allant dans le menu suivant (CTRL+MAJ+Z par défaut sous Windows).

Une fenêtre de dialogue s’ouvre  et va vous guidez pour effectuer la synchronisation.

Vous pourrez récupérer le patch SQL des modifications, choisir les tables à comparer, exécuter directement le patch et surtout : Utiliser toutes les fonctionnalités de MySQL Workbench pour vos modèles de données…

Quelques liens

Vous avez la doc qui est assez bien faite (en anglais :D) sur le site officiel à l’adresse suivante : http://dev.mysql.com/doc/workbench/en/wb-database-synchronization.html

Un article plus général en anglais toujours mais assez intéressant : http://dev.mysql.com/tech-resources/articles/workbench_database_management.html

Bonne synchro et bon dév’

On connait maintenant très bien les selecteurs des différents Framework Javascript mais kezako en PHP ? …

PHP Simple HTML DOM Parser

Cette classe permet très simplement de venir parcourir, sélectionner du code HTML. Ce code HTML peut être fourni sous forme d’une chaîne de caractère ou d’une adresse (avec la méthode file_get_html ou autre).

Une fois notre objet instancié, nous allons pouvoir effectuer des recherches par sélecteurs très simplement. Ci-dessous un petit bout de code présent sur le site de la classe :

// Create DOM from URL or file
$html = <strong>file_get_html</strong>('http://www.google.com/');
// Find all images 
foreach($html-><strong>find</strong>('img') as $element) 
       echo $element-><strong>src</strong> . '<br>';
// Find all links 
foreach($html-><strong>find</strong>('a') as $element) 
       echo $element-><strong>href</strong> . '<br>';

Documentation

• Le site officiel : http://simplehtmldom.sourceforge.net/
• La forge : http://sourceforge.net/projects/simplehtmldom/files/
• Le manuel : http://simplehtmldom.sourceforge.net/manual.htm

Bon parse HTML et bon dév’ 

A ce que ce HTML fait pour évoluer le Web. Grâce à lui de nouvelles balises qui permettront dans un avenir plus ou moins proche d’optimiser les recherches et le classement des données présentes sur la toile.

Heureusement que les groupes d’études à la rédaction des spécifications ont pensés aux G33K célibataires!

Voici quelques nouvelles balises permettant d’optimiser le classement des amies : <tits> <boobies> <shirt>

Allez c’est fini! On retourne au boulot…

Bon dév’

PS: Si vous connaissez d’autres balises intéressantes, veuillez nous les faire partager!