Comme chaque année, direction le Palais des congrés de Paris pour la grande messe Microsoft : les Techdays.
Les techdays c’est 3 jours de sessions et conférences sur l’ensemble des technologies Microsoft, mais pas seulement. Un bon moyen de sentir les nouvelles tendances, ou tout simplement de s’intéresser à des alternatives ou mettre le pied à l’étrier sur des technos. méconnues.
Quelques notes prises au fil des jours, principalement orientées sur le développement / Web (le 1er jour étant dédié principalement au développement me concernant).
Keynote
Un peu déçu par la keynote sur la forme, moins rythmée, il manquait cette petite touche humouristique que l’équipe précédente apportait. Le thème principal était le Cloud computing, en partant de sa définition pour aller sur un cas virtuel d’une startup (Contoso) de vente de voitures avec quelques démos qui couvraient les briques du Cloud computing : IaaS, PaaS, SaaS : infra, système et développement.
Améliorer les performances Web : optimisation côté client
Intervenant : Nicolas Hoizey, directeur technique de Clever Age.
Session axée sur les performances Web, ou l’accès aux pages Web sur les sites, sujet qui m’intéresse fortement. Très important car pour le e-commerce ou tout simplement pour les sites qui tirent leur profit des visites (Amazon, Google, MS, …), une augmentation du temps de chargement, ou plutôt, d’affichage de la page peut créer une baisse de leur CA, chacun des acteurs nommés en ont fait l’amère expérience (de -0.76 à -2.8 % de baisse du CA).
Même si les tuyaux augmentent (avec la fibre, nous atteignons des débit de 100 MBS), l’accès aux ressources des sites n’excèdent pas les 1 600 kbps, alors que les pages Web en 2010 pésent souvent jusqu’à 300 ko, poids courant de nos jours.
En 2010, il y a eu le Web Perf Contest (remporté par un français) : l’exemple pris pour la session fût la Fnac qui a bien voulu jouer le jeu : comment optimiser l’accès à leurs pages, avec quels outils ?
Paradoxalement, et contrairement à l’idée reçue, le temps de la création de la page est composée par 5 % du serveur et 95 % pour le client (navigateur), il est donc important d’axer son optimisation sur ce dernier.
Des extensions (PageSpeed, Speed tracer, YSlow) permettent d’analyser la cascade de chargement d’une page, afin de déterminer tous les éléments qui sont chargés, ainsi que le départ de leur chargement, et le démarrage du rendu (Start render) à afficher sur le navigateur. Un élément (image, css, JS, etc) est composé de plusieurs parties : DNS, connexion TCP, attente réponse, chargement réponse, chaque partie peut être améliorée.
On aura alors ce type d’analyse (ou pour Amazon) afin de corriger les éléments perturbateurs. Le site Webpagetest donne la possibilité de tester n’importe quel site afin de simuler l’accès par IE et à partir de plusieurs zones du monde.
Des solutions d’optimisation vont plus loin, tel que mod_pagespeed, un module Apache qui filtre le flux et l’optimise à la volée ou encore Doloto de Microsoft au stade de Labs.
Quelles actions entreprendre pour optimiser l’accès aux pages ?
- réduire la latence en mettant en place un CDN, nécessaire lorsque l’audience est de niveau international,
- réduire les requêtes DNS, en minimisant le nombre de domaines appelés : Le Monde inclut pas moins 50 appels vers des sites externes (contenus, pubs), sorte de mashup mais où le navigateur effectue tout le travail,
- réduire le nombre de requêtes HTTP :
- exploiter le cache du navigateur (j'en avais présenté une introduction dans la mise en place d'une syndication), - configurer le serveur afin de cacher certains éléments (statiques du type images, css, js) en indiquant une date de péremption, - concaténer les sources javascript et CSS, - réduire le poids des images, - compresser directement par le serveur Web en gzip le flux de données,
pour ces 4 derniers points, j’avais également écrit une introduction sur l’optimisation côté serveur et fichiers, lors de la mise en place du blog sur le NAS Synology
- combiner les images sous forme de sprites, qui consiste à envoyer une seule image contenant l'ensemble des icônes utiles et de la découper grâce au CSS au moment de leur affichage, technique qu'utilise Amazon, cela réduit le nombre de requêtes HTTP afin de ramener l'ensemble des images d'une page, - cookie à supprimer : servir les ressources statiques par un domaine sans cookie (ie & nb OD : via un serveur de cache via un sous-domaine par exemple, nginx peut être une alternative), - le navigateur limite le nombre de téléchargements simultanées par domaine : 2 requête selon le standard HTTP/1.1. La solution étant d'utiliser des sous-domaines afin de répartir le stockage des éléments statiques, solution nommée domains sharding , conseillé entre 2 à 4 domaines, pas plus, - flush partiel du HTML
Ressources
- retour sur le concours de webperf,
- les présentations seront prochainement disponibles sur Slideshare,
- un groupe dédié aux performances Web sur Diigo
Les slides est disponibles sur le blog de Clever Age
Javascript dans tous ses états
Session présentée par Bruno Michel (AF83) et Yann Schwartz (Polom).
Un petit tour sur différentes librairies / frameworks en Javascript où pour certaines, j’avais déjà lu des billets sans en avoir vu des applications concrètes. Avouons-le, je n’aime pas particulièrement écrire du javascript. En revanche, son utilité n’est plus à démontrer et m’appuyer sur des librairies qui facilite son écriture, j’adore ça, découvrons en quelques unes.
node.js
Serveur javascript & asynchrone, efficace pour les I/O (non bloquantes), asynchrone. Cette librairie permet d’écrire des scripts très performants (pour de la messagerie instantanée, notifications en temps réelles, …), tournant sur un seul thread, ce qui simplifie le développement car aucune synchronisation n’est nécessaire (ie : lock de ressources).
Des librairie sont fournies : http, socket, fs, qui facilitent grandement la programmation “bas niveau”, ainsi que l’adjonction de modules basés sur node.js.
Reactive Extensions rx.js
Le pendant de Rx .NET, rx.js est une librairie Javascript pour de la programmation asynchrone, à base d’évènements qui suit le même paradygme que sa version .NET : Observable / Observer. Son lead developper est Matthew Podwysocki.
La démo présentée était sur une recherche Wikipédia (via son API Opensearch avec retours au format JSON) avec des propositions en temps réel, où rx.js est bien adapté pour des appels Ajax (et asynchrone) via la fonction $.ajaxAsObservable et des méthodes chaînées (Select, Where, Min, Max, …), “à la Linq”.
CoffeeScript
Avouons le, écrire du Javascript n’est pas toujours simple et conduit souvent à des erreurs de syntaxes (; } ou ) non fermées), même si nous avons des outils (Firebug le bien nommé); qui n’est pas resté bloqué des heures sur un simple problème de syntaxe ?
CoffeeScript se propose de simplifier la syntaxe du langage Javascript, en enlevant tout ce qui nous pose problème habituellement : les ; {} (), les var, les comparaisons (== et ===) etc. Assez orienté Ruby / Python, CoffeeScript interprète le code et traduit en Javascript standard ce dernier, et reste compatible avec les librairies les plus connues (jQuery, …).
Un portage Windows de CoffeeScript est en cours, hébergé sur le github coffeescript-dotnet.
Le code des différentes démos est disponible sur le répertoire github Techdays 2011 Javascript.
SEO : mythes et technique
Par Aymeric Jacquet, la session était agrémentée par des conseils ou des choses à ne pas appliquer pour le référencement. Très orientée sur Google (en France, il tient plus de 90 % des parts de marché).
2 visions de référenceurs : les white hat (appelés les “bisounours”), les black hat (ou les “spammeurs”) qui ont une vision diamétralement opposée : le premier respecte les règles des guidelines Google, et se repose sur le contenu, un travail, donc, à plus long terme, tandis que l’autre se moque des guidelines, le lien est roi, et a donc une stratégie à court terme.
Wordle peut être utile pour s’assurer de la densité des mots dans un billet ou un article, important pour un meilleur référencement sur un sujet d’actualité par exemple.
Quelques points pour améliorer son référencement Web :
- le rédactionnel est important,
- écrire pour les robots ET les internautes,
- le PageRank reste un indicateur de qualité,
- les meta keywords ne sont pratiquement plus pris en compte par les moteurs, reste la meta description,
- ne pas hésiter à créer des liens vers les pages profondes, les plus importantes,
- le nom de domaine est important, cela peut valoir le coup d’en racheter des anciens qui ont déjà une bonne réputation pour faciliter le référencement, pour cela Sedo peut nous aider,
- le format des URLs (titre), le balisage HTML,
- la rapidité d’affichage,
- les ancres internes ou externes,
- arrêter les “cliquez ici”, “la suite ici”, …
- ne pas publier toutes les pages d’un site d’un coup (s’il y en a des milliers), Google n’aime pas ça, mettre des noindex et libérer au fur et à mesure
Ressources
La référence en SEO : Seomoz
MongoDB et C#
Par Yann Schwartz (Polom) et Rui Carvalho.
Le NoSQL (Not only SQL) est en vogue en ce moment, il était temps de goûter un peu de concret ou du moins un début d’approche par une session sur un moteur NoSQL : MongoDB.
Les “bases” NoSQL répondent souvent à un souci de performance qu’il faut résoudre. D’une façon générale, avec un SGBDR classique, on met en place un cache (sous forme de “Hashtable”) avec les données à afficher sur la page. Vient rapidement la problématique du cache réparti, dans le cas d’une ferme de frontaux, les bases NoSQL tentent alors d’y trouver une solution.
Il existe plusieurs modèles de NoSQL :
- sous forme de clés / valeurs, on pensera à Memcached ou Redis,
- colonnes : BigTable (by Google), Cassandra,
- documents : CouchDB (moteur Erlang / Javascript – API RESTful), MongoDB (moteur C++ / Javascript) (ndr : et j’ajouterais RavenDB) : “documents” décrits sous forme d’arborescence d’objets/valeurs
Le NoSQL ne garantit pas autant de fonctionnalités qu’un SGBD, notamment le transactionnel / journalisation. Il faudra alors accepter un compromis sur les propriétés ACID qu’apportent les SGBDR, les NoSQL sont basées sur le théorème de CAP (Eric Brewer) qui se définit selon 3 principes :
- Consistance / consistency : tous les clients ont la même vue lorsqu’il y a des mises à jour,
- Availability (Haute disponibilité)
- Partition-tolerance (Tolérant à la partition)
et on ne peut garantir uniquement que 2 de ces principes à l’instant T.
Mais sinon, à quoi ça sert ? en gros, avoir un cache à valeur ajoutée : requêtable, distribué et persistant.
Quelques particularités de MongoDB :
- facile à mettre en oeuvre,
- fonctionne sous Windows,
- requêtes en JSON,
- orienté documents : pour effectuer une analogie avec les SGBDR : document (de même nature) = 1 ligne, documents stockés dans des collections (~tables),
- données stockées en BSON (binary JSON),
- supporte la montée en charge,
- drivers dans la majorité des langages,
- propose une console (mongo) pour requêter (en javascript) ou administrer,
- de nombreuses librairies dont C# (supportée 10gen, on peut lui adjoindre l’extension Linq grâce à fluent-mongo) ou la version C# alternative non officielle NoRM (support de Linq)
Attention :
- les documents sont limités à 4 Mo
- flush toutes les 60 s sur le disque
- pas de journalisation (prévue pour la 1.8)
exemples de requêtage :
$ db.get.CollectionNames() $ db.help() $ db.createCollection("counter") $ db.user.save({name:"valeur", value:10000}) $ db.user.count() $ db.user.find({"value":{$gt:9999}}).sort({value:-1}).limit(3) $ db.user.remove() // truncate $ db.user.drop() // delete
Session très intéressante pour les applications possibles de NoSQL et la compréhension des grands principes, cela donne des idées. A ce que je retiens, pour l’instant, cela peut surtout servir à mettre en place du cache, lorsque l’on souhaite mettre à plat des données pour un affichage (sur une page).
A tester !
Le webcast ou les sources de la démo sont en ligne.
Ressources
Sources de la session disponibles sur le bitbucket de Rui.
Retrouvez toutes les années via le tag techdays.
Jeu de briques
Snake
Pacman
Bubble