Coding style

En même temps que s’achevait cette décennie, je passais fin janvier le cap de 10 ans de programmation en milieu professionel. L’occasion de m’essayer à une petite synthèse@ sur les changements survenus entre 2000 et 1010.

Ce qui a changé depuis 2000 :

• PHP n’est plus “le langage pour faire des formulaires de contact”
• Javascript enrichit visuellement la page (et plus seulement avec des alert)
• Les GIF animé ont disparu
• Linux a enfin une vraie distribution orientée utilisateur avec Ubuntu
• ASP, Perl, ColdFusion…
• Les smartphones (surtout depuis l’iPhone)
• La vitesse de connexion à Internet, permettant d’y faire passer la TV et le téléphone
• La sécurité des technologies Microsoft
• Les charlatans qui imaginaient se faire rapidement du fric avec une start-up
• La gestion de configuration, de Subversion à Git

Ce qui n’a pas changé depuis 2000 :

• Flash met le feu au CPU
• Java rame
• Internet Explorer 6 est la lie de l’humanité
• Les Design Pattern, à toujours avoir dans sa caisse à outils
• Google
• L’interprétation des pages par les navigateurs, obligeant à patcher pour chacun d’entre eux
• Les commerciaux qui ne comprennent toujours rien à la technique
• Les développeurs  vus comme des ours mal léchés
• Les charettes dans les agences Web
• Les protocoles utilisés sur Internet
• Il manque toujours un truc à MySQL
• L’open source est un laboratoire de bonnes idées
• La loi de Moore
• La loi de Murphy

La liste est bien entendu pas exhaustive et totalement subjective. Vous voyez d’autres changements (ou pas) pendant cette décennie ?

Cet article présente quelques astuces en Javascript pour optimiser vos algorithmes et la performance de vos scripts.

Au niveau du code

Précalculer le plus possible

Mise en “cache” dans des variables : par exemple l’accès à la propriété d’un objet enfouie sous plusieurs niveaux, ou un valeur utilisée dans la déclaration d’une boucle for.

// Pas bien
for (var n = 0; n < monObjet.maPropriete1.maPropriete2.valeur; n++) {
	// ...
}
 
// Bien
var len = monObjet.maPropriete1.maPropriete2.valeur;
 
for (var n = 0; n < len; n++) {
	// ...
}

Interdiction d’utiliser eval !

A l’instar de n’importe quel langage, la fonction eval est un gouffre à performances. L’éviter autant que possible. Il y a bien entendu des alternatives :

// Pas bien
eval("obj."+prop)
 
// Bien
obj[prop]

Concaténation de chaines

Utilisation d’un Array pour concaténer les chaines et liaison à l’aide de la méthode join(). Les développeurs de Microsoft le recommandent dans le doc en bas, à la manière d’un StringBuilder en .Net ou en Java :

var sb = new Array();
sb.push("
 
");
sb.push(monTexte);
sb.push(monTexte2);
sb.push("
 
");
 
var s = sb.join("");

Au niveau des fichiers

Minifier les Javascripts en production

But : optimiser le chargement du script pour l’interprétation (bande passante utilisée, temps d’interprétation par le moteur JS du navigateur). Il existe d’excellents outils pour effectuer cette tâche : YUICompressor, JSMinifier… Dans l’idéal, s’assurer que tout le JS est envoyé avec un seul appel HTTP.

Mettre les déclarations en bas de page

Le plus près possible de la fermeture de l’élément body (</body>). Cela permet d’exécuter le code à l’issue du chargement complet du HTML, évitant du coup un blocage en plein milieu du rendu de la page.

Bibliographie rapide

• IEBlog : IE+Javascript Performance Recommendations : Partie 1, Partie 2, et Partie 3
• JScript Blog : Performance optimization of arrays : Partie 1 et Partie 2

Dernier volet de cet article sur Google Gears. Nous avons vu dans la partie précédente le socle de l’application, c’est-à-dire la mise en place du cache pour le mode déconnecté. Nous verrons dans cette partie comment sauvegarder les données dans la base SQLite en mode hors ligne et comment synchroniser les données lors de la reconnexion.

Lire la suite »

Suite de l’article sur Google Gears qui rentre dans le vif du sujet, c’est-à-dire le codage des éléments HTML, CSS et JS du mini-site, ainsi que l’utilisation des fonctions de cache de l’API.

Lire la suite »

Google annonce une mini-révolution dans le monde du web grâce à Google Gears. Son applicatif marie le fonctionnement des applications offline/online, chasse gardée jursqu’à présent des clients lourds, avec celui des applications internet/intranet (contenu + HTML + JS).
Cet article en trois volets rentre dans le coeur de Gears, illustré par un exemple de mini-sondage.

Lire la suite »

Les widgets sont dans l’air du temps. Une récente affiche pour UPS dans le métro, relayée par e-Marketing Garden, montre que leur démocratisation est en marche.
D’autre part, une des grandes tendances techniques qui se dégage ces derniers mois concerne les principes d’API unifiées. Il y a entre autres OpenSocial de Google pour regrouper sous une même bannière des petits réseaux sociaux (Hi5, Orkut etc.), ou encore UWA, l’API de Netvibes destinée à l’écriture de widgets.

C’est sur cette dernière que je vous propose de nous plonger et de découvrir au travers d’un projet concret comment développer un widget universel.

Lire la suite »

Je vais commencer ce billet en souhaitant à tous une excellente année, pleine de code bien indenté et de non-régressions
Il est temps de faire un petit point sur les évènements techniques marquants dans le domaine du développement web en 2007, et de jeter un oeil sur ce que cette nouvelle année nous apportera.

Lire la suite »

Par le biais d’AJAX, l’utilisation intensive du Javascript a permis de soulever de nombreux problèmes de mémoire au sein des navigateurs du marché. Ni IE, ni Firefox ne sont épargnés par ce sujet qui empoisonne la vie des développeurs web. Petite explication de texte.

Lire la suite »

Les fonctionnalités natives des navigateurs sont en passe de rattraper leur retard sur les extensions multimedia comme Flash.

Lire la suite »

Démarré voilà déjà deux ans, Aptana vient de passer en version 1.0. La version beta que j’avais eu l’occasion d’utiliser il y a 1 an était déjà très prometteuse, et durant ce laps de temps les IDE web basés sur Eclipse ont pris leur envol comme Eclipse PDT, Eclipse RAP…

Lire la suite »