Salut à tous! Ajourd’hui on va parler webperf et notamment temps de chargement des pages. Quand on développe en javascript on utilise souvent jQuery comme framework qui assure la compatibilité de son application sur presque tous les navigateurs. Qui simplifie certains fonctionnement, etc. Et souvent quand on utilise ce framework on ne prend pas la peine de redévelopper l’existant, on va chercher un plugin. Et forcément au final on se retrouve avec l’inclusion de 15 javascripts par page ce qui ralenti considérablement le temps de chargement. Je fais la passe sur la configuration du serveur web, on va considéré que de ce côté là la durée d’expiration est précisée, la compression activée, etc. Reste que même si la requête est faite sur le cache du navigateur, ça fait quand même une requête.

Deuxième point, la plupart du temps les plugins fournis ne sont pas minifiés, c’est à dire que le code est lisible et compréhensible. Une minification simple consiste a raccourcir les noms de variable et supprimer les espaces blancs et sauts de ligne. De ce fait on peu avoir un gain non négligeable sur la taille du javascript.

Le problème qui se pose c’est le passage en production du site. Quelles sont les posibilités  avec symfony 1.4 pour minifier et compresser les javascripts de façon automatique ? Le plus simple serait de passer par un service ou un programme et de minifier à la main chaque javascript avant de déployer. Pour peu que les mises en production soient régulières, ce processus devient vite barbant. Le fait est aussi qu’il y aura toujours autant de requêtes de faites pour récupérer les javascripts au chargement de la page. Et le plus long n’est pas le téléchargement de la ressource mais l’attente de la réponse du serveur. Je me suis donc sit qu’il fallait minifier et commpresser tous les javascripts dans un seul fichier. Le problème c’est que pour un gros site, suivant les pages, il n’y aura pas les mêmes javascripts d’appelés. Et donc comment faire pour parcourir toutes les pages différentes du site de façon automatique ? Le plus simple c’est de laisser cette tâche à l’utilisateur. Comprenez au premier affichage d’une page on va lancer une tâche de minification des javascripts et mettre un fallback avec les javascripts non minifiés pour que le site fonctionne toujours correctement. Une fois cette tâche terminée le prochain affichage de cette même page va appeler l’unique javascript minifié.

La se pose plusieurs problèmes. Comment savoir qu’une page ne contient pas les mêmes javascripts qu’une autre ? On va calculer un hash MD5 de tous les javascripts de la page qui est demandée, lancer le processus et stocker le résultat avec comme nom de fichier le hash calculé précédemment.

Deuxième problème, comment savoir qu’il n’y a pas déjà une tâche de lancée ? Il y a plusieurs possibilités, mais après avoir essayé flock() ou d’autres technique plutôt propres, je n’ai pas eu d’autres choix que de faire mon propre système de lock. C’est à dire, au lancement de la tâche, je vérifie que le fichier de lock avec le hash n’existe pas, s’il n’est pas présent je le crée et je commence la tâche de minification. Sinon le processus se termine. Avec cette technique on est sûr qu’un seul processus va essayer d’ouvrir le fichier pour y stocker le résultat de la minification. Si le site a pas mal de visite, la génération de tous les javascripts devrait se faire assez vite pour les différentes pages.

Le dernier point à aborder, c’est la mise a jour de ces javascripts minifiés. Si on modifie un javascript, au prochain déploiement vu que les javascripts minifiés existent déjà, il ne sera pas pris en compte. Il suppit juste de passer une petite tâche des javascripts minifiés à chaque déploiement et c’est réglé.

Pour le code, voici les différents fichier :
Tout d’abord le AssetHelper.php

function get_javascripts()
{
  $response = sfContext::getInstance()->getResponse();
  $host = sfContext::getInstance()->getRequest()->getHost();
  sfConfig::set('symfony.asset.javascripts_included', true);
 
  $params = '';
  $absolute = array();
  $html = '';
  $fallback = '';
  foreach ($response->getJavascripts() as $file => $options)
  {
    $absolute[] = javascript_path($file, false);
    $params .= '&code_url=http://'.$host.javascript_path($file, false);
    $fallback .= javascript_include_tag($file, $options);
  }
  sort($absolute);
  $absolute = http_build_query($absolute);
  $md5 = md5($absolute);
  $path = '/uploads/min.'.$md5.'.js';
  $generate = file_exists(getcwd().$path) ? false : true;
 
  if ($generate) {
    $param_array = array(
      'output_format' => 'json',
      'compilation_level' => 'SIMPLE_OPTIMIZATIONS',
      'output_info' => 'compiled_code'
    );
    $params = http_build_query($param_array).$params;
    $exec = '/usr/bin/php -f '.getcwd().'/../lib/genMinifiedJs.php "'.$params.'" "'.getcwd().$path.'" 2&> /dev/null &';
    popen($exec, 'r');
    $html = $fallback;
  }
  else {
    $html = javascript_include_tag($path, $options).$html;
  }
 
  return $html;
}

Ensuite la tâche de minification genMinifiedJs.php à placer à la racine du répertoire lib du projet symfony

#!/usr/bin/env php
<?php
 
if ($argc) {
  $params = $argv[1];
  $path = $argv[2];
 
  if (!file_exists($path.'.lock')) {
    touch($path.'.lock'); //Création d'un fichier de lock pour empecher toute autre instance de travailler en meme temps
 
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'http://closure-compiler.appspot.com/compile');
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $retour = curl_exec($ch);
    curl_close($ch);
 
    $retour = json_decode($retour, true);
 
    if (array_key_exists('compiledCode', $retour) && !empty($retour['compiledCode'])) { //Vérification du retour de google closure compiler
      $fp = fopen($path, 'a');
      fwrite($fp, $retour['compiledCode']);
      fclose($fp);
    }
    else {
      unlink($path.'.lock'); //Suppression du fichier de lock en cas d'échec de compilation pour autoriser une nouvelle génération
    }
  }
  else {
    die; //Une instance existe déja, on quitte le navire
  }
}

Et voilà, maintenant, à chaque page un seule javascript sera chargé et une fois qu’il sera mis en cache par le navigateur, le temps de chargement du site sera bien réduit.

Dernier point technique, j’ai utilisé l’API REST Google Closure Compiler pour minifier mes javascripts. Je vous laisse voir la documentation pour modifier les paramètres a envoyer. Il y a aussi la possibilité de télécharger le compiler en java et d’utiliser celui-ci pour la génération, mais pour des questions techniques et pour alléger le serveur je préfère faire une requête externe plutôt que de charger du java…

Faites en bon usage !!

Certes il est un peu tard pour faire un compte-rendu du startup week-end de lyon du 7-8-9 octobre 2011, mais je tiens quand même à partager certains points de ce week-end qui fût très intéressant et très enrichissant.

Tout d’abord l’événement comment le vendredi soir à partir de 19h pour un petit pitch des organisateurs sur le déroulement du week-end et des retours de personnes ayant participé à la précédente édition. Petit point sympa durant ce pitch, sur la projection du vidéo on voyait défilé les derniers tweets postés comportant le hashtag #swlyon avec des effets de transition plutôt sympa. Deuxième étape du soir, le pitch par projet. Le but est symple, chaque personne qui a une idée passe sur scène et la présente en une minute top chrono en essayant d’intéresser le plus de monde possible pour qu’elle soit retenue par les organisateurs et pouvoir trouver des partenaires pour travailler sur le projet.

Nous étions environ 36 à pitcher, pour 13 projets à retenir au maximum. C’est la que commence la troisième étape. Munis de 3 « billets » nous permettant « d’investir » dans les idées qui nous ont plus durant les pitchs, il faut alors savoir attiré les investisseurs pour que son projet soit retenu et la c’est litéralement la guerre. Toutes les techniques sont bonnes pour récolter le plus de billets possible. Si on a déjà une équipe c’est assez facile, les membres de l’équipe investissent sur la personne qui a pitcher et les chances d’être sélectionné sont déjà plus élevées.

Cette bataille a duré a peu près une demi heure. Après ça, chaque personne qui a pitché ramène dans une enveloppe le total de billet qu’elle a récolté et les organisateurs procèdent ensuite a un vote en interne. Après l’annonce des 13 projets retenus, c’est l’heure de former les équipes. Soit durant la phase de sélection on a trouvé une idée intéressante, soit on continue de chercher et de se renseigner sur les projets qui ont été retenus.

Une fois les équipes formées on peut commencer à travailler sur le projet, sachant qu’à la fin du week-end, il faut présenter son projet devant des investisseurs et des professionnels. Mon idée de départ n’ayant pas été sélectionnée, j’ai rejoint le projet Citizens. L’idée de base c’est les sites institutionnels des villes sont moches, n’ont aucune ergonimie et souvent il manque des informations. Et donc la volonté c’est de fournir un portail standardisé pour les villes leur permettant de mettre en ligne du contenu facilement par rubriques tout en agrégeant différents flux comme twitter, yelp ou foursquare basé sur la géolocalisation.

Dans l’équipe qui s’est formée nous sommes étions donc 2 développeurs, 2 étudiants en marketing et un étudiant en dernière année de master en management, initiateur du projet. Commence donc le travail autour du projet, essayer de mettre à plat les idées, trouver un business model, etc. La soirée du vendredi se termine à 22h, direction la maison pour une courte nuit de repos avant re rattaquer le samedi matin à 8h.

Donc debout 6h tapante pour prendre le bus, arrivé trop tôt à Perrache, vient de temps de faire quelques provisions pour le week-end. Même si les repas sont compris dans l’inscription, le café, et autres besoins pour 48 sans dormir sont à la charge des participants. Donc j’arrive à Charpennes et là, pas moyen de trouver une épicerie ouverte à 6h30 du matin… Enfin après 10 minutes à tourner en rond je tombe sur un Casino ouvert. Miracle Donc 2kg de café et de quoi grignoter, direction l’INSA pour reprendre le projet. Je ne vais pas décrire le déroulement du week-end à partir d’ici mais plutôt les annecdotes vécues.

Point intéressant, plusieurs entrepreneurs sont là pour faire le tour des projets et répondre aux différentes questions et problèmatiques des participants. C’est vraiment sympa car quand tu viens de passer 2h sur une problèmatique en ne trouvant aucune solution, un point de vue extérieur avec de l’expérience dans la création d’entreprise fait gagner beaucoup de temps. Mais ça pose un autre problème, quand plusieurs entrepreneurs viennent répondre à la même problématique successivement, on récolte plusieurs points de vue différents dont certains contradictoires. Enfin c’est le risque mais au moins ça donne matière à réfléchir.

La journée se déroule en musique, les organisateurs ont créé une playlist spotify ouverte ou chaque participant peut y ajouter ses morceaux. Ca motive et ça permet de resté éveillé. Arrive 20h, ça fait maintenant 12h qu’on planche sur le projet et que les cerveaux fument de tous les côtés, il est temps de faire une petite pause. Direction le bar pour relâcher la pression et penser à autre chose une heure ou 2. Retour vers minuit à l’INSA pour reprendre le projet et commencer la partie intéressante, le développement ! Quelques heures pour mettre en place un mini portail fonctionnel pour la ville de Lyon, greffer différents flux de données, mettre en place l’édition de contenu, …

Durant ce week-end se livrait une petite bataille sur twitter avec l’édition de Nantes la semaine passée. A savoir le nombre de tweets comportant le hashtag #swlyon ou #swna Merci à Camille Roux pour son comparateur HashtagBattle. Tout au long des deux jours le score de Lyon n’a pas beaucoup augmenté, par contre le soir des présentations, étant donné qu’il y avait un mur des tweets, le score s’est envolé.

La nuit fût longue, malgré le café, j’ai quand même dormi 2h sur des chaises entre 4 et 6h du matin. Le dimanche fût assez dur étant donné que le projet n’avait pas beaucoup avancé mais qu’il fallait quand même montré qualque chose. On a donc décidé de se focaliser sur le concept plutôt que d’essayer de faire une démo fonctionnelle. En bossant un maximum la présentation, en fournissant différents slides de l’interface du site et un business model qui tient la route.

Arrive 18h, l’heure de rendre les présentations, de faire les essais sur le projecteur et de manger un bout avant de présenter. Durant les présentation on peut voir les commentaires en direct sur le mur de tweet et ça clash sévère sur la moindre petite erreur. A commencer par Julie, la mascotte de la première équipe qui a présenté son projet. Qui a été reprise par les projets suivants, mais en la torturant et en faisant des jeux de mots plus ou moins douteux à son sujet. Enfin après 54 heures sans dormir ou presuqe, c’est compréhensible. Donc chaque équipe dispose de 20 minutes pour présenter et ensuite 10 minutes de questions. A la fin des présentations, tout le monde est bien fatigué et à envie de rentrer chez lui, mais il reste la délibération du jury pour choisir les 3 meilleurs projets. Jury composé de business angels, d’investisseurs, d’entrepreneurs et d’organisateurs de l’événement. Il est presque 21h quand les résultats sont annoncés. Le meilleur projet repartait avec de l’argent pour des formations, un article pour le lancement de son projet dans 2 magazines du groupe Lagardère et des livres sur l’entreprenariat.

Quoiqu’il en soit, tous les participants repartaient avec une Poke the Box de Seth Godin et un passe pour le salon Innorobo, salon sur la robotique qui se déroulera prochainement sur Lyon.

Bref ce week end fût intense, beaucoup de rencontres, beaucoup de données à engrange. Le monde de l’entreprenariat est vraiment génial, et le simple fait de partir d’une idée pour en arrivé à une startup en 54 heures est génial. Il m’aura fallu a peu près une semaine pour revenir à un rythme de vie a peu près normal, mais toujours des projets en tête que je compte mener à bien maintenant que je vais avoir un peu plus de temps pour moi.

Sur ce, bonne après midi

Après plusieurs années à la « campagne » limitrophe de Lyon, chez mes parents ou en colocation. Je vais enfin habiter en ville !! Il était temps. C’est vrai que la demi heure de transport matin et soir qui me sépare de mon lieu de travail ne me dérange pas, mais pouvoir se lever à 8h pour commencer à 9h ça sera quand même apréciable. Je ne vais pas emménager seul puisque je prend cet appartement avec ma copine.

Pour la description, c’est un petit 50m2 dans le huitième arrondissement de Lyon vers la mairie. Dans un immeuble assez ancien mais tout l’intérieur est refait à neuf. Très grand sous plafond, salon avec bar, grande cuisine avec de grands plans de travail. La chambre donne sur la rue avec le tram, mais d’après les dires des anciens locataires, après une semaine d’adaptation on ne l’entend plus. Et la cerise sur le gâteau qui n’était pas sur l’annonce c’est une véranda et un jardin pour les 6 locataires de l’immeuble. Le tout pour 570€ par mois avec 30€ de charges, je trouve ça plutôt honnête pour cette taille en ville.

Bref, le déménagement se passe normalement la semaine prochaine, des photos à venir sur la décoration.
PS: j’aurai sûrement besoin de mains pour le déménagement, faites signe dans les commentaires

Bonjour à tous, aujourd’hui je vais écrire un article plutôt incendiaire sur les différents choix faits par Apple concernant iOS. Je ne parlerai que d’un seul point car mon but n’est pas de créer un troll mais de partager la solution que j’ai trouvé pour pallier à ce problème.

Je ne sais pas si vous le savez, mais sur iPhone, iPod et iPad il est impossible de cliquer sur le bouton parcourir d’un formulaire sur une pag web pour joindre un fichier. Celui-ci est tout simplement grisé… On ne peut pas accéder a son arborescence de fichier depuis le navigateur safari sur iOS. Ceci est du au fait que ce système d’exploitation, chaque application possède son propre système de fichier et ne peut pas accéder au contenu d’une autre application. Je ne comprend pas le choix des développeurs Apple sur ce point là. Pourquoi brider l’expérience web mobile et de forcer à passer à des applications tierces pour pallier à ce problème.

Enfin arrêtons de « troller » mais j’ai trouvé une solution pour pouvoir contourner le bridage de Apple. Il s’agit de Picup. Cette application va transformer les champs <input type= »file »> en lien fileupload:// qui va ensuite faire appel a l’appli installée sur le périphérique. Pour intégrer cette appli a son site internet il suffit d’ajouter le fichier javascript téléchargeable ici sur la page contenant le formulaire. Et ensuite il suffit d’utiliser le helper pour générer l’url à passer a l’appli pour traiter le fichier.

$(function() {
  Picup.convertFileInput('input',{
    'referername': escape('referer'),
    'callbackurl': escape('url de callback'),
    'postimageparam': 'file',
    'posturl': escape('url de post'),
    'postvalues': escape('paramètres additionnels a envoyer avec la requete POST'),
    'purpose': escape('texte a afficher en dessous de l application'),
    'referrerfavicon': escape('icone a afficher dans l application')
  });
});

Ne pas oublier de faire de la détection de navigateur ajant d’ajouter ce script, car sur le navigateur natif android l’upload marche. Sur la page indiquée en callback, il peut être utile de créer une fonction de callback avec le helper picup pour faire un traitement supplémentaire sur les fichiers uploadés avec l’application.

Picup.callbackHandler = function(params){
  for(var key in params){
    alert(key+' == '+params[key]);
  }
}

Pour voir le résultat il y a une démo sur le site de l’application, avec un scratchpad qui permet de modifier les paramètres de la requête afin de faire les tests directement sur son serveur.

Voilà pour le côter javascript, il reste a écrire côter serveur la méthode qui va traiter la requête POST qui va être faite par picup et l’intégration est terminée. Le rendu est un bouton à la place du champ <input type= »file »> qui va ouvrir l’application et permettre à l’utilisateur de choisir une image parmis sa galerie.

Il y a quand même deux limites à cette technique, impossible de choisir plusieurs fichiers en même temps, et il est seulement possible de parcourir sa galerie. Donc impossible d’ajouter un pdf, un document ou tout autre type de fichier.

Voilà voilà

Edit:

J’ai modifié le fichier javascript a inclure à son site, en utilisant le helper de la même manière, si l’application Picup n’est pas installée le visiteur est dirigé vers l’appstore.

Aujourd’hui je vais parler de l’intégration de Akismet dans Symfony 1.4 afin de réduire le spam sur ses commentaires. Si vous avez un blog wordpress vous devez sûrement savoir ce qu’est Akismet, sinon je vous invite à visiter le site officiel ici.

Tout d’abord, il va falloir créer un compte pour récupérer une clé d’API. Pour le développement j’ai choisi le plan « Personal » à 0€, mais si votre site fait du profit ou si vous faites la promotion d’un produit dessus vous devrez souscrire à une offre payante.

Une fois votre compte créé, vous recevez un mail avec votre clé API et vos informations personnelles. Conservez bien cette clé. Maintenant, on va passer à l’intégration dans symfony. C’est assez simple, vu qu’il y a déjà un plugin de disponible à cette adresse. Donc je vous laisse télécharger le plugin et l’extraire dans le répertoire plugins/ de votre projet symfony. Et ensuite bien renommer le dossier du plugin en « drAkismetPlugin ».

On va d’abord commencer par la configuration, donc ouvrez le fichier akismet.yml.example dans le sous-répertoire config/ du plugin et enregistrez le en akismet.yml.

akismet:
  user_agent:
    application:
      name: drAkismetPlugin
      version: 0.3.2
    plugin:
      name: Akismet
      version: 1.1

  api_keys:
    www.example.com: ############
    localhost: #host utilisé pour le dev
      host: www.example.com
      key: ############

Maintenant le plugin configuré, il faut activé le plugin dans le fichier config/projectConfiguration.class.php.

$this->enablePlugins('drAkismetPlugin');

Maintenant que le plugin est activé et disponible, il faut se poser la question de comment on va l’intégrer à notre application. Pour ça il y a plusieurs possibilité, la plus simple c’est d’utiliser le sfValidator fourni avec le plugin. Il y a d’autres possibilité, mais je vais décrire l’intégration avec le validateur. Nous verrons les autres pour signaler à Akismet un Spam ou un Ham dans l’administration.

Donc pour utiliser le validateur, rien de plus simple, il s’utilise comme un validateur symfony classique. Ouvrez le form de votre projet et allez dans la méthode configure().

$this->validatorSchema['text'] = new sfValidatorAnd(array( //text est le contenu du commentaire, adaptez à votre modèle
  $this->validatorSchema['text'],
  new drAkismetValidatorSpam(array(
    'blog' => 'http://www.example.com',
    'user_ip' => $_SERVER['REMOTE_ADDR'],
    'referrer' => (array_key_exists('HTTP_REFERER', $_SERVER) ? sfContext::getInstance()->getRequest()->getReferer() : sfContext::getInstance()->getRequest()->getUri()),
    'comment_author' => 'John Doe', //Nom de l'auteur du commentaire
    'comment_author_email' => 'john.doe@example.com', //Email de l'auteur du commentaire
    'comment_content' => $this->getValue('text')
  ))
));

Et voilà, maintenant dès que vous posterez un commentaire, si Akismet le déclare comme spam, le formulaire ne sera pas valide et le commentaire ne sera pas sauvegardé.

Maintenant on peut se dire qu’on a besoin de faire un peu plus que ne pas sauvegarder le commentaire. C’est possible, on peut écouter la requête avant qu’elle soit envoyée à Akismet et récupérer la réponse avant qu’elle ne soit traitée par le validateur. Pour ça j’ai du faire une petite modification du plugin pour qu’il récupère le dispatcher d’événement de l’application au lieux d’en créer un nouveau. Ouvrez le fichier lib/api/connection/drAkismetApiSocketConnection.class.php et remplacez le contenu du constructeur pa ça :

$this->_dispatcher = sfContext::getInstance()->getEventDispatcher();

Donc maintenant le dispatcher est connecté à symfony, il faut ensuite récupérer l’événement pour indiquer quelle méthode va l’écouter :

$this->dispatcher->connect('akismet.pre_request', array('listenToPreRequest'));
$this->dispatcher->connect('akismet.raw_response', array('listenToRawResponse'));

Maintenant qu’on écoute les événements et qu’on a défini les méthodes qui vont les traiter voici quelques méthodes utiles pour parser la réponser qu renvoit le serveur.

public static function listenToRawResponse(sfEvent $event)
{
  $rawResponse = new drAkismetApiResponse($event['response']);
}

Voilà voilà, à votre tour d’intégrer Akismet à votre projet Symfony. Si vous avez des retours, n’hésitez pas à utiliser les commentaires.