Il y à quelques semaines, je vous présentais un excellent outil de présentation Reveal.js. A cette occasion, je vous avais annoncé que je travaillais sur une présentation en rapport avec les web performances. Et bien, voilà, la présentation est disponible à cette adresse : http://supports.severin-bruhat.com/web-performance.

Au programme :

  • conseils sur les étapes de maquettage, d'intégration et de développement
  • les différents types de cache
  • quelques outils d'analyse
  • une démo

Cette introduction est basée principalement sur mon expérience LAMP, c'est pourquoi vous trouverez des références à Apache et PHP. Cependant, la majorité des concepts abordés s'applique à tous les languages.

Bonne lecture !

 

Mardi et mercredi dernier, j'ai eu l'occasion d'assister à certaines conférences du BLEND. Le Blend Web Lix, comme son nom l'indique, est un mélange : un mélange d'ingrédients du web. Les conférences étaient organisées autour des thématiques suivantes : business, design, marketing, recherche et technique.

Pour ma part, voici le programme que j'ai suivi :

jour 1 jour 2
Introduction aux design patterns avec PHP Concevoir son API web
Ciel, mes données ne sont plus relationnelles Tour d'horizon de Node.js
More CSS secrets La technique au service de l'entreprenariat
Le futur des effets graphiques en CSS3 / Automatisez vos tâches répétitives avec Grunt.js Pourquoi les workers queues sont-elles importantes pour dynamiser votre application web ? 
La web performance Dart, one language to rule them all

Je vais vous donner, dans ce post, un petit résumé de ce que j'ai retenu de ces différentes conférences. Cette article n'a pas vocation à vous "instruire" sur un sujet, c'est plus un retour d'expérience , je vous invite donc à vous référer aux supports de présentation pour plus de détails. 

Introduction aux design patterns avec PHP

​Speakers : Julien Pauli & Hugo Hamon
Support de présentation : 
https://speakerdeck.com/hhamon/introduction-to-design-patterns-with-php

Cette conférence étaient consacrée aux différents patrons de conception applicables dans le domaine professionnel. Tout le monde a appris durant ses études ce qu'était un patron de conception, mais qui applique réellement ces concepts au quotidien ? Si vous faites parti des développeurs qui, comme moi, travaillez avec des CMS ou framework au quotidien, vous manipulez probablement ces patterns sans même vous en rendre compte. Mais une petite piqûre de rappel ne fait de mal à personne, voci un petit résumé de ce qui a été dit.

Les design patterns reposent sur le principe SOLID :

  • Single Responsability Principle : « A class should have one reason to change. »
  • Open Closed Principle : « Classes, methods should be open for extension, but closed for modifications. »
  • Liskov Substitution Principle : « Subtypes must be substituable for their base types. »
  • Interface Segregation Principle : « Clients should not be forced to depend on methods that they do not use. »
  • Dependency Inversion Principle : « High level modules should not depend on low level modules. Both should depend on abstractions. », « Abstractions should not depend on details. Details should depend on abstractions. »

​Voici un aperçu des 5 design patterns étudiés :

Design Pattern Intérêt Cas d'utilisation
Composite Présenter un objet comme une collection d'objets Arbre, XML, formulaire (symphony)
Decorator Eviter trop de surcharge d'héritage, ne pas "casser" l'existant Ajout d'un système de log ou d'un système de cache
Strategy Encapsuler des algorithmes de même nature pour qu'ils soient interchangeables  Changer le système de stockage des sessions, comparaison/tri de tableaux
Factory Simplifier la création d'objets : une seule classe permet d'instancier des objets de différentes classes ("keep instanciation process in one single place") Gérer des produits et des "packages" de produits de manière transparente
Observer Permet de coupler les modules de manière à réduire les dépendances Gestion d'évènements, une classe déclenche des actions

Ciel, mes données ne sont plus relationnelles

​Speaker : Xavier Gorse

Dans certains cas, le classique schéma de données "relationnelles" ne permet pas de répondre aux besoins, notamment si la volumétrie est importante ou bien que la complexité d'un algorithme est élevée (domaine de la recherche par exemple). On peu alors mettre en place une architecture NoSQL (Not Only SQL) devant répondre à 4 problématiques :

  • Données non relationnelles
  • Scalabilité
  • Absence de schéma (structure)
  • Architecture distribuée

On distingue 4 grandes catégories d'outils (la dernière étant surtout réservée au domaine de la recherche) :

Key / value

Concept : hashmap permettant de stocker les informations sous forme de paire.
Cas d'utilisation : cache, session
Avantage : simple

Inconvénient : trop simple -> impossible d'effectuer une requête sur une partie de la valeur
Exemple d'outil : redis

Document

Concept : hashmap contenant une clé et une collection de valeurs (JSON)
Avantage: plus souple que le modèle clé / valeur
Inconvénient : performance limitée en cas de forte volumétrie
Exemple d'outil : mongoDB

Graph

Concept : modélisation des connexions entre les données ; manipulation de nodes, propriétés et relations
Avantage : puissant et rapide
Inconvénient : non scalable 
Exemple d'outil : Neo4j

Column-oriented

Concept : les données sont représentées sous la forme de blocs de colonnes stockés de manière triée. Ce système est conçu pour gérer des volumétries importantes de données
Avantage : très scalable
Inconvénient : complexe
Exemple d'outils : cassandra, bigtable

La modélisation a un impact sur l'applicatif, ainsi, le choix de l'outil à mettre en place dépend du projet. Pour faire simple : "il faut stocker les données en fonction de la manière dont vous devez les requêter" dixit Xavier Gorse.

More CSS secrets

​Speaker : Lea Verou
Support de présentation : http://lea.verou.me/more-css-secrets/#intro

Cette conférence était très technique et intéresante. Le speech étant en anglais, je n'ai malheureusement pas eu le temps de prendre de notes. Je vous conseille de jeter un oeil à la présentation qui est d'une excellente qualité (à l'image du speech).

Le futur des effets graphiques en CSS3

Speaker : ​Vincent De Oliveira
Support de présentation : http://www.iamvdo.me/conf/2013/blend/

Suite à un petit problème de timing, j'ai manqué le début de la scéance. Vincent De Oliveira présentait des fonctionnalités CSS encore à l'état expérimental. Une présentation très sympa donnant envie de tester ces différents effets.

Voici les différents points abordés :

  • fonctions d'image
  • masques
  • exclusions et formes
  • filtres

Je vous conseil de jeter un oeil au support. L'ensemble de ces effets sont foncionnels sous webkit.

Automatisez vos tâches répétitives avec Grunt.js

Speaker : Corinne Schillinger 
Support de présentation : http://fr.slideshare.net/inseo/grunt-corinne-schillinger-26743692 

Grunt est un outil permettant d'automatiser les tâches répétitives d'un projet telles que : compacter et minifier les fichiers JS et CSS, compiler les sources sass ou less, exécuter des tests unitaires, et compresser les images. Il repose sur node.js et npm (Node Packaged Modules), il est donc nécessaire de disposer de ces deux éléments pour l'utiliser.

De mon point de vue cet outil est très simple à manipuler et permet de gagner un temps précieux et d'améliorer la qualité de vos projets. 

Je pense rédiger prochainement un article consacré à cet outil.

Web performace

Speakers : Damian Le Nouaille, Goulven Champenois

Cette conférence fût pour moi, plus une piqûre de rappel, qu'un réel apprentissage, mais un petit "bourage de crâne" de temps en temps ne fait pas de mal. Damian et Goulvien ont principalement parlé des éléments suivants:

  • minification / compression js et css
  • minification des images
  • sprite css
  • chargement asynchorne (AJAX)
  • webfonts
  • cache busting
  • CDN

Cette conférence s'orientait autour de deux axes: une présentatrion théorique et une présentation plus concrète basée sur une timeline présentant les différents axes d'amélioration et leurs résultats. 

Conclusion

Ce fut une expérience très enrichissante, tant d'un point de vue professionnel qu'humain. Un tel évènement permet de rencontrer un tas d'acteurs du web intervenant dans des domaines différents et complémentaires à la fois (développement, marketing, référencement, design, veille…).

J'ajouterai les supports manquant lorsque je les aurai récupérés.

Et comme un peu de teasing ne fait de mal à personne, je vous annonce qu'un deuxième billet détaillant les conférences du deuxième jour est à venir 😉