imjufu

La boîte à outils complète d’animation et de setup pour After Effects !
rainboxprod.coop

Démarrage en 2009 avec 1000 lignes de code.
En 2015, 15000 lignes de code.

C’est codé en js.

822 téléchargements (~6Go) par jour.
Utilisé au niveau mondial.

320000 téléchargements par an.
10000 ouvertures quotidiennes.

Logiciel libre (mais pas gratuit).
À la base, le développeur principal n’est pas codeur, il s’est formé tout seul au code.

Pourquoi a-t-il choisi le libre ?

Vendre un logiciel, c’est compliqué :

Rédiger une licence
Créer une boutique en ligne
Lutter contre le piratage
Réparer les bugs
Aider les utilisateurs

Il est sous GPLv3 :

Liberté d’utiliser le logiciel à n’importe quelle fin
Modifier le programme pour l’adapter à ses besoins
Redistribuer des copies à ses amis
Partager avec les autres ses modifications

Choisir une licence libre, c’est avant tout des valeurs, une vision du monde.
C’est une manière de remercier ceux qui nous ont inspirés.

Tout cela prend du temps et coûte de l’argent :

Développement
Support (forum, emails)
Documentation
Tutoriels
Frais technique (hébergement web)

Comment financer tout ça ?

Commencer par se poser la question “Quel est le coût du logiciel ?”.

2 visions pour définir la valeur :

par le travail
par ce que l’utilisateur est prêt à payer

Actuellement, il faut 15000 € au minimum pour maintenir le logiciel.
Plusieurs moyens de financement :

La pub -> pas éthique
“Choisissez votre prix” -> incompatible avec le logiciel libre
Location -> pas libre

Il reste le crowdfunding et la vente de produits dérivés.

En 2015, 7175 € (258 contributeurs). Ce qui est faible en nombre de contributeurs. Vente de produits dérivés en 2016 : 1000 €.

Vivre du logiciel libre, ça fonctionne mais il ne faut pas vouloir gagner des millions d’euros.
Mais en terme d’ego, c’est très gratifiant. Il est contacté par Nickelodeon, Dreamworks…

Il existe des plateformes comme patreon.com pour financer le développement.

Idée de projet du développeur :

Ce serait top d’avoir une plateforme de crowdfunding uniquement dédiée au logiciel libre.
On fincance sans contrepartie et une fois le seuil atteint, le développeur commence à coder.
Pendant cette phase, les utilisateurs peuvent participer aux beta tests.
Une fois terminé, distibution en licence libre.

Voir opencollective.com

De Start-up à Scale-up: les leçons d’Evernote

Plusieurs étapes dans la création d’une startup :

Formation : phase de création
Validation : phase de rentabilité
Growth : phase de recrutement et de développement

Le speaker est Product Manager. Il est entre la techno, le design et le business. Il a travaillé chez Evernote et maintenant chez SirupeLab.

5 minutes -> temps pour convaincre de revenir.

3 leçons :

Collectez vos data : pour faire de l’apprentissage, prendre des décisions stratégiques
Experimentez : le produit est le laboratoire, testez sur des échantillons d’utilisateurs
Restez simple : se concentrer sur ce qui fonctionne et jeter le reste

Designer pour l’inconscient

L’attention se focalise plus facilement sur des éléments en mouvement.
Plus on est stressé et plus le locus de l’attention rétrécit.
La mémoire n’apparait que si il y a attention.

Si on veut obtenir quelque chose de nos utilisateurs il faut attirer l’attention dessus.
Exemple du formulaire et du message d’erreur en haut d’écran.

Le subconscient est la zone où les habitudes se développent.
Exemple : la marche, conduire

Le bouton “back” Android ne marche pas car il ne respecte pas les attentes utilisateurs.

La fenêtre modal ne fonctionne pas car c’est un automatisme que notre cerveau développe et du coup, on clique sans vraiment le vouloir.
Solution : pas de modal de confirmation mais un bouton annuler.

Le multi-tâche est un mythe.
Si je marche en écoutant de la musique et en mangeant un sandwich et en réfléchissant à un problème mathématique. En vrai, seul le problème de mathématique capte mon attention. Le reste est en mode automatique.

État de flow : buts clairs à chaque étape, un retour immédiat à chaque action, l’activité devient une fin en soi. On devrait tendre vers ça.

Technologie calme, elle ne sur-sollicite pas mon attention. On devrait tendre vers ça.

Conférence inspirée du livre The Human Interface.

Les Progressive Web Apps expliquées aux décideurs

Les apps natives ont plus de fonctionnalités et sont plus solides que les sites web mais touchent moins d’utilisateurs que les sites web mobiles.

PWA = site web mobile enrichi.

Pourquoi progressif ?
Car j’ai une logique progressive de l’application. Je vais délivrer la meilleure expérience possible à mon utilisateur final.
Safari sur iOS ne sait pas gérer correctement les PWA pourtant le site est opérationnel. Chrome sur Android sait gérer le offline, les notifications… et du coup propose tout ça aux utilisateurs finaux.

The Washington Post -> pionier des PWA : 80ms de temps de chargement d’un article.
Flipkart : accès au contenu en hors-ligne et dans les zones de mauvaise connexion réseau.

Quelles sont les limites ?

HTTPS obligatoire
PWA pas disponible sur iPhone mais cela fonctionne quand même

Pourquoi strlen(“🍕”) != 1 ?

ASCII publié en 1963. 7 bits par caractère, 127 possibilités pour encoder du texte. Avant ASCII, c’était le chaos !

Autrement dit, uniquement les caractères américains. Du coup, très problématique pour le reste du monde.

Ajout d’1 bit par la suite pour gérer plus de caractères.

Puis internet arriva. Deviner l’encodage d’un document, c’est pas top et hacker ASCII a ses limites.

L’âge d’or du Mojibake. Problème d’encodage, c’est compliqué.

Unicode publié en 1991. “Un encodage pour les gouverner tous”.

Unicode 1.0 stocké sur 16bits, 1 caractère = 2 octets.
Adopté par JS, C, Java.
Mais toujours pas assez de caractères !

UTF et Unicode 2, publié en 1996.
On ne parle plus de caractères mais de code point.
Unicode = la liste des caractères.
UTF = l’encodage.

3 différents UTF,

UTF8 : le plus connus et utilisé en europe
UTF16 : compatible unicode 1
UTF32 : pas utilisé

Les emojis sont des caractères unicode et ont été ajouté en 2010.

JS est resté sur le standard en 16bits (UTF16).

Tips

Ne pas limiter les caractères valides
Attention à la normalisation
Attention aux homoglyphes (github s’est fait attaquer comme ça)
Attention au charset UTF8 dans mysql, il faut utiliser utf8mb4 !

Ne mourrez pas bêtes, faites des jeux vidéo

Nous, les développeurs web, nous sommes le côté sérieux et chiant de l’informatique.
Le bingo Blend Web Mix 2016 : phygital, scale-up, design thinking, venture capital…

Les préjugés sur le monde du jeu vidéo :

Truc de graphistes
Truc de programmeurs
Complexe & inaccessible
La créativité

Il faut se lancer même si les premiers jeux qu’on fait sont pourris ! C’est normal et c’est pas grave !

La productivité, c’est :

Efficacité
Force de proposition
Innovation

Dans nos travails respectifs, on rentre dans une routine car on est bon dans ce qu’on fait et personne ne va nous demander de faire autre chose.

La spécialisation est mauvaise. On s’enferme nous même dans un monde de routine. Et en plus c’est dangereux, un langage ça disparait…

La meilleure manière d’avancer, d’apprendre c’est de se vautrer !

Le but n’est pas de tout plaquer pour devenir game developer mais bien de faire du jeu vidéo pour s’amuser et s’améliorer.

Voir itch.io pour quelques exemples de jeux vidéo simples et fun.

Quelques vidéos intéressantes :

Indie Game : The movie
Minecraft : The story of Mojang
Double Fine Adventure (sur Youtube)

Paris Web 2016

2016-09-29T00:00:00+00:00

Petit compte rendu de Paris Web 2016.

Anatomie d’une désintoxication au Web sous surveillance

Monétisation de la donnée, de la vie privée.

DataBrokers : courtiers en données -> Acxiom, DataLogics, Mediaposte…
Leur but est de scraper le web, d’acheter des fichiers et de revendre les données.
Ils ont une base de 500 millions d’individus.

Au passage, la page de déontologie d’Acxiom est stupide et hypocrite !

Que peut-on faire avec des données ? Les exploiter et prédire des comportements.

À lire : Dataclisum, livre sur l’analyse des données et qui explique comment faire ressortir des choses intéressantes.

Service gratuit -> publicité ! Affichage de pub prédictif via des études de comportement par les GAFAs.

Principale information exploitée par les GAFAs : la liste des pages que l’on visite. Le tracking…

LightBeam est une application Mozilla qui permet de visualiser la relation entre les sites visités. C’est effrayant !

Toutes données personnelles sont des données sensibles alors que la loi française ne concidère pas cela.

Une donnée peut être sensible, anodine ou indirectement sensible.
Exemple : Une adresse publiée sur societe.com pour un indépendant qui sort avec une policière. Pour le premier, l’info est anodine, pour le deuxième, c’est très sensible.

Pour arrêter de collaborer avec les GAFAs, il faut dératiser les sites :

Supprimer les scripts google analytics et les remplacer par des solutions d’analyse d’audience perso : logstash, kibana, piwik…
Supprimer les boutons de partage : twitter, facebook
Supprimer les fonts : google fonts (alternative : auto-hébergement)
Supprimer les maps : google maps (alternative : open street map)
Supprimer les CDN (alternative : auto-héberger ses ressources)

Disqus est un service super pratique mais à éviter !

Concept à intégrer :

Privacy by design : par défaut, la vie privée est respectée
Chiffrement obligatoire
Débloquer Tor
Stockage des données : d’un côté les données non sensibles et de l’autre les données sensibles
Recueil des données : récolter que des choses utiles et demander vraiment l’autorisation aux utilisateurs
Stockage des mots de passe. Conférence intéressante à ce sujet : Comment stocker les mots de passe de vos utilisateurs ?
Respecter la loi
Non-conservation : ne revender pas les données de vos utilisateurs

Se poser la question de “Peut-on afficher de la pub tout en respectant la vie privée des utilisateurs ?”, cela revient à se demander “Peut-on perdre du poids en mangeant que du Kouign Amann ?”.

Y’a pas d’avancement, pas de grimaces !

Dans l’étude de Nielsen, les sites ayant travaillé leur utilisabilité ont amélioré de 135% le taux de conversion. Voilà des arguments économique en faveur d’une aproche orienté utilisateur. C’est pour ces raisons évoquées par Nielsen que l’équipe de 1001pharmacies a engagé un travail de refonte.

Le livre “Qualité web : La référence des professionnels du Web” de Elie Sloïm a beaucoup aidé.

Ils ont fait des interviews et des tests utilisateurs pour voir les blocages. Et voici les actions qu’ils ont méné :

Réassurrance sur le paiement sécurisé

Les bonnes pratiques et la qualité ne sont pas une fin en soi. Il faut tendre vers. À lire : “La dette technique” par Bastien Jaillot.

Réassurance : contact sav / support

Réassurance : délai de livraison, mode..

La livraison est critique, il faut être vigilant là-dessus. Le prix, le mode, qui… ? C’est important pour l’utilisateur.

Il faut avoir des étapes claires.

Les formulaires sont très importants. Il faut les rendre utilisable.
La saisie d’adresse est très angoissante pour un utilisateur ! Attention à la multiplication des champs compliqués.
Les champs nom / prénom séparés ne sont pas utilisables.
Attention au contrôle sur les champs de type email, c’est insupportable pour un utilisateur.

L’authentification sur les sites de ecommerce n’est pas une bonne pratique. Cela fait fuire les gens.

Une fois la commande terminée, il faut prendre soin de l’utilisateur.
Le simple message “Votre commande a bien été prise en compte”, c’est insuffisant ! Et les emails marketing ne fonctionnent pas.

Le suivi de commande est très important :
Attente de préparation -> Préparation en cours -> Attente d’expédition -> Expédié -> En cours d’acheminement -> En livraison -> Facture disponible.

Lancer son site à l’international, facile ? Oui, si l’on pense à tout !

La base, la traduction

Passer par des Outils I18N.

Les prix

Gestion des devises, utilisation d’api pour la conversion euro -> dollar, gestion de la TVA, des frais de douane…

Les dates

Respecter la norme ISO 8601 et stocker en UTC.

Attention, plusieurs timezones par pays.
Il faut savoir que les heures été / hiver sont très mal gérés par les gouvernements.

Contrôle des champs

Attention aux contrôles des champs surtout pour les pays asiatiques : nom, prénom, email, téléphone, état (pour les États-Unis)…

Divers

Les reCaptcha (google) sont bloqués en chine et empêchent la commande
Le design doit etre retravaillé : sens de lecture des pays arabes
Contenu textuel des images
Utiliser une font supportant tous les alphabets disponibles
Cartographie (maps, openstreetmap, bing)
Paiement (braintree, worldpay, stripe…)
Opportunités business “régionalisées” (exemple : uber)

SEO

C’est un point sensible.
Google n’est pas numéro 1 partout dans le monde. Il est inexistant en chine et il n’est pas le premier au japon.
Le partage social n’est pas un automatisme.

Aspect légal

Attention à la loi !

âge de majorité différent selon les pays
serveur physique obligatoire dans certains pays (exemple : chine)
interdit de stocker le numéro CB des clients
collecte d’impôts régionaux (exemple : airbnb en france)

Pour résumer,
Il faut prévoir l’internationalisation dès le départ au maximum.
Beaucoup de petites adaptations à faire ! Vous allez avoir pleins de questions et c’est normal !

La blockchain, quand l’individu sert au collectif… malgré lui

On fait beaucoup (trop ?) confiance aux intermédaires.
Et ils aiment bien en abuser !

La blockchain est là pour éviter les intermédiaires de confiance.
Tout a commencé avec la finance et notamment le bitcoin. Satochi Nakamoto est l’inventeur du bitcoin mais il est inconnu.

Blockchain = P2P + Crypto asymétrique + Preuve de travail

Blockchain s’appuie sur le P2P.
Tout le monde fait une copie de la donnée. Bitcoin réplique le registre comptable sur tous les noeuds p2p.

Blockchain s’appuie sur la crypto asymétrique pour sécuriser les échanges de données.
La crypto permet de signer un message pour assurer l’identité (privé -> public) mais aussi pour chiffrer un message à communiquer (public -> privé)

Blockchain s’appuie sur la preuve de travail.
Cela permet d’ordonner les transactions pour éviter de tricher sur les échanges de données.

Pour avoir le droit de publier son bloc de transaction, il faut avoir beaucoup de “0000” en début de SHA256 du bloc. Du coup, beaucoup de chance, beaucoup de travail -> preuve de travail.
Cela coûte et est fait par des “mineurs”.

Du coup, avec tout ça, pas besoin de faire confiance à tout le monde. Les moutons noirs sont éliminés direct car les blocs frauduleux sont remplacés par des vrais blocs.
La sécurité est assuré par le nombre. Si plus de la moitié des mineurs jouent franc-jeu, la blockchain est sûre.

Notion de smartcontract. Exemples :

Bitproof.io permet de certifier conforme un document. Cela évite de faire appel à des notaires ultra cher
Slock.it pour ouvrir les appartements sur une durée donnée
La Zooz est une alternive à Blablacar
La DAO est une société de capital risqueur
Storj est un cloud distribué en utilisant les HDD des utilisateurs de la blockchain

On appelle cela des “decentralized apps” ou “DApps”.

Ethereum = Blockchain apps platform
Voir le projet “Zero dollar homepage” de marmelab.

Attention aux réponses asynchrones, le minage prend du temps !
Il faut interroger le réseau pour savoir si la blockchain est diffusé

Attention. Une fois diffusé, un bloc ne peut pas être corrigé !

Pour le minage, il faut l’accompagner d’un peu d’ether. Pour information, Marmelab a obtenu 5 ethers en 5 jours sur un EC2 qui leur a couté 50 dollars. Et cet ether peut être revendu 55 dollars.

Toutefois !

La blockchain n’est pas prete. La documentation n’est pas à jour, les exemples de code sont KO.
Les smartcontracts sont stupides. Pas d’appel à des api externes. Il faut tout pousser dans les smartcontracts.
C’est très compliqué. Les DApps sont ultra-buggés ! En moyenne, 1 bug toutes les 10 lignes de code.
Cela manque de sécurité car le code est la loi, et du coup, si il y a bug, le hacker n’est pas responsable !
Beaucoup de gaspillage. 1 bloc accepté toutes les 10 minutes. 99% des calculs sont rejetés. C’est très coûteux. Et ce sont les utilisateurs de la blockchain qui payent. C’est très lent les blockchains. Il faut attendre 1h sur la blockchain pour valider d’un point de vue sécurité 1 bloc. À noter également, si supression des intermédiaires, pas de business model !

Actuellement, 1 bitcoin = 600 dollars. Mais c’est très variable.

Conclusion de l’orateur

Voir Bitnation.
Beaucoup de problèmes mais il faut parier dessus.

Organisez des cryptoparties !

https://dascritch.net/vrac/Supports/1609-PARISWEB-CRYPTO/1_presentation.html#/

Août 2012, Asher Wolf déclare “Il faut des cryptoparties !”
Octobre 2012, première cryptopartie à toulouse.
Décembre 2012, première cryptopartie faite par Snowden à Hawai.

Pourquoi ?

apprendre à nous exprimer publiquement
évangéliser les bonnes pratiques
valoriser nos métiers

C’est compliqué, il faut aider le néophyte et être humble.

Recettes

restez simple
pas de prosélythisme politique
pas de prosélythisme technologique
dédramatiser les choses et faites les avec humour

Sensibiliser

syndrôme du “rien à cacher” (OK, tu me donnes ta CB ?)
pertes des données / souvenirs

Sujets simples

les métadonnées
réseau informatique
internet ?
https / email chiffré ?
chiffrement / confidentialité

Fictions

Cryptonomicon (romans)
Media entity (bd)
Antitrust (film)
Person of interest (série)

UX et éthique

Les CGV.
Temps de lecture moyen : 7 secondes… :-D

Les cookies.
Personne ne prend le temps de lire l’avertissement.

À voir : Ateliers de co-conceptions.
Très intéressant mais conflit d’intérets !

À voir : code de conduite UXPA.

Web security by design

Yahoo : 500 millions d’utilisateurs dans la nature.
Linkedin : 100 millions de comptes piratés. Castorama : le moteur de recherche suggère des choses bizarres (hacking via injection).

Le règlement européen pousse au “Privacy by design”.

Les mauvaises pratiques

contrôle des données en entrée
mauvais usage du chiffrement
absence de framework
secrets en dur dans le code
manque de logs
des environnements différents : dev / prod

Exemple du drone,
Il génère un wifi ouvert, accès telnet avec un accès root sans mdp.
Apps mobile qui donne des infos à des accès sur les apis des fabriquants.

Beaucoup d’IOT sont problématiques : système d’alarme, caméra de surveillance…

Pourquoi ?

time to market ralenti
faible sensibilisation
mauvaise pratique de dev (top 10 des vulnérabilités)

Les fondamentaux

Disponibilité
Confidentialité
Intégrité des données
Traçabilité

Il faut avoir une approche par les risques. Raisonner en pas-à-pas.

Ressources

OWASP : exemples, fiches de bonne pratiques, outils…
Open SAMM : approche, méthode…

Revue manuelle -> Revues syntaxique -> Analyse statique -> Analyse dynamique -> Test d’intrusion.

Outils

Z Attack Proxy
Sonar Cube

Éco-conception : mon site web au régime

greenit.fr
Le web a grandi mais il a grossi aussi.
Le poids d’une page a été multiplié par 115 en 20 ans.
De 2010 à 2015, il a été multiplié par 3.

L’empreinte environnementale représente un sixième continent.

On a besoin d’une démarche de conception responsable des services numériques.

Cela fait 15 ans qu’on éco-conçoit du matériel.
On peut s’appuyer dessus pour la conception de site web.

À lire : “Vers la sobriété heureuse” de Pierre Rabhi.

Il faut dégraisser les sites, revenir au fondamental.

Mise en oeuvre

Les impacts sont situés essentiellement au niveau des terminaux.

Constitution d’un référentiel.
Cf. livre de l’écoconception en 115 bonnes pratiques.

Il existe une toute jeune certification d’éco-conception.

Outils d’évaluation : ecoindex.fr

L’écoconception passe avant tout par le fonctionnel afin de dégraisser l’interface, le graphisme…

Il existe une liste sur opquast liée à l’écoconception.

Pas de prise de conscience sur l’écoconception car on leur a vendu l’aspect immatériel. Le gouvernement a à peine conscience des problèmes d’accessibilités…

Il n’y a pas que class et id dans la vie

Quelques toolkits

Atomic-css
Tachyons

Quelques conseils

Écrire des classes à responsabilités uniques.

Ben Frain, en 2014, a prouvé que la contre-performance des sélecteurs, c’est faux.

Sélecteurs pestiférés

sélecteur universel : *
sélecteur attr complexe
sélecteur adjacence et de parenté
sélecteur éléments surqualifiés

Auteur intéressant : Heydon Pickering.

Framework de Dropbox à regarder : Scooter.

Quand les militaires se prennent au jeu du design sprint

Design Sprint : processus de 5 jours durant lequel on cherche à résoudre un problème par le design. Créé par Google depuis 2010.

Exemple de Design Sprint :

Lundi : découvrir
Mardi : rechercher
Mercredi : décider
Jeudi : prototyper
Vendredi : tester

Le but est de s’assurer le plus tôt possible que le service est viable.

Prototype : croquis -> maquette -> photoshop -> Marvelab (intéractivité).

Quelques conseils

Il faut libérer la parole. Le “Tu” est de rigueur.
Mettre en place un petit jeu au départ pour détendre l’atmosphère.
La prise de décision rapide est importante, il faut être en présence des décisionnaires sinon ça ne marche pas.
La phase de préparation d’un design sprint est très importante. Il faut gérer toute la logistique : nourriture, boisson, organisation, répartition des rôles, gestion du planning…

L’accessibilité décomplexée - ce qu’elle peut faire pour vous

L’accessibilité est très allocentrée (centrée sur les autres).

En essayant de penser “égocentré”, l’accessibilité permet aussi de faire progresser ses propres compétences.
Exemple : van11y.net.

Ne passons pas à côté des choses simples

Usages

Prototypage
Présentation de contenu

Si besoin de contributions par des non-techniciens, il existe des “Headless CMS”. Exemple : Forestry.io. Il s’appuie sur des APIs pour éviter aux contributeurs d’apprendre git, github…

JAMStack : Javascript, APIs and Markup.
Générateurs : Jekyll, Hugo, Middleman, Gatsby.

Kit de survie en atelier de co-conception fonctionnelle UX

Kit de survie 4 objectifs : se protéger, se signaler, s’hydrater, se nourrir.

Se protéger

Bien comprendre le contexte, anticiper les récalcitrants.
Service Design Toolkit.
DrawTast : apporte une cynergie de groupe au départ de l’atelier.

Alerter

Expliquer, répéter, laisser de la place aux participants, bien restituer la démarche.

S’hydrater, se nourrir

Assister à d’autres ateliers, établir un feedback.

HTML5.1 + web platform APIs

Push API

C’est encore un brouillon.
Compatible : Chrome, Firefox.
Cela permet de pousser des notifications via des webapps.
Cela s’appuie sur les services workers.
Le navigateur a juste besoin d’être actif pour que ça fonctionne. Pas besoin d’avoir le focus sur la page.

Gamepad API

Cela permet d’utiliser des gamepads pour interagir avec Canvas, WebGL.
Compatible avec les gamepads de Nintendo, Xbox, Playstation.

Vibration API

Super simple et permet de faire vibrer le téléphone.
Cela ne fonctionne pas sur Apple car pas d’accès au matériel.

Pointer Lock API

Cela permet de réagir avec l’intégralité de la souris.

Web Speech API

Cela permet de faire des apps avec lesquels on peut parler.
Possibilité de faire de la saisie avec la voie mais aussi de synthétiser du texte en vocal.

HTML5.1

Ajout de balises : picture, srcset.
“images responsives”

details et summary super utile pour afficher, masquer du texte

input type week, month, datetime-local
oncopy, oncut, onpaste

Progressive Web Apps : le futur du web arrive

Avantages

Linkable : pas d’apps à installer
Responsive
Safe : https!
Connectivity independent : offline first !
Fresh : toujours à jour !
App-like interactions : archi “application shell”
Re-engageable : l’amener à réutiliser l’app (via des notifications)
Discoverable : possible d’etre indexer via manifest.json
Installable : via le manifest.json les navs proposent de mettre l’apps sur la page d’accueil

Service Workers

C’est une sorte de proxy programmable dans le navigateur.
Uniquement en https. Et c’est bien normal, ça intercepte toutes les requêtes !
Nouvelle api de cache : Le Cache.
Nouvelle api de requettage (ne pas utiliser XHR car peut-être asynchrone !) : fetch(url) qui retourne une promise.

Exemple : interception pour envoyer des notifications en push.

pwa.rocks

Leboncoin, les coulisses d’une refonte responsive

Pourquoi le fond jaune moche ? Pour une question de lisibilité et de confort de lecture.

UX d’abord, responsive après

En 2016, 40% visiteurs uniques sur mobile et le taux de conversion est très mauvais.

Carte blanche sur cette refonte graphique.
Brief de lancement : “Faites ce que vous voulez”.
Passage d’un cycle en V à plus d’agilité, équipe multi-compétences.

Accompagnement par Alsacréations.

Chiffres

Sixième site français
54% des internautes sont français
24 millions d’utilisateurs

Bonnes idées

Site de beta (beta.leboncoin.fr) pour tester l’interface avec des vrais utilisateurs proposé à 1 user sur 1000
refonte par parcours plutôt que par page
recrutement des beta-testeurs en activant la proposition de bandeau à 100% des utilisateurs
possibilité de revenir à l’ancienne version à tout moment
sondage aux utilisateurs en 4 questions (dont champ libre)

-> 70000 réponses obtenues à analyser à la main.

Résultat

5-6 mois de lancement maitrisé.
Pas de bugs majeurs, utilisateurs contents.

Lancement retardé et expliqué par la loi de brooks : “Ajouter des personnes à un projet en retard accroît son retard”.

WCAG.next - where do we go from here?

WCAG 1.0 : mai 1999.
3 niveaux de conformité : A, AA, AAA.

WCAG 2.0 : décembre 2008.
4 grands principes :

pouvoir etre percu par tout le monde
manipulation du contenu (souris, clavier…)
compréhensibilité du contenu
robustesse

UAAG 2.0 : mêmes principes.

ATAG 2.0

En 2016, Web page vs web app. Il faut mixer les 3 standars : WCAG, UAAG, ATAG.

AG = Accessibility Guidelines

w3.org travaille sur le projet “Silver”. Il devrait prendre 5 à 7 ans.
Du coup, WCAG 2.x !

L’activation de fonctionnalités en production chez BlaBlaCar

État de l’équipe

100 personnes à la technique qui codent, testent et délivrent du code.
C’était un gros bordel.
Beaucoup de problématiques pour delivrer les nouvelles fonctionnalités.

3 problèmes :

Déployer des grosses fonctionnalités
Tester une fonctionnalité avec 25M d’utilisateurs
L’effet capital

Mise en place des “feature flags”.
Un “feature flag” permet d’activer une fonctionnalité ou de la désactiver en production.

Cela va permettre de faire :

des tests en interne
permettre le roll-out

Implémentation

Stockage des fonctionnalités + librairie

Exemples de lib PHP :

etsy/features
joshuaestes/feature-toggle
opensoft/rollout
qandidate/toggle

Ils ont choisis la solution de qandidate.

Storages :

Redis -> stockage principal
APCu -> cache

Stratégies :

Unanimous : toutes les strats soient remplies
Affirmative : au moins une soit remplie
Majority : une majorité des conditions soient remplies

Pour les apps natives, dépôt d’un json sur un S3 récupéré par les apps qui implémentent en natif.

Quelques éléments de R&D en vrac

restlet
window.speechSynthesis
makey makey
node-red
code de conduite UXPA
service Design Toolkit

Mix-IT 2016

2016-04-21T00:00:00+00:00

Cet article est une prise de notes du Mix-IT 2016 qui a eu lieu à CPE Lyon.

La conférence avec des crêpes et du cœur. mix-it.fr

Tester et valider ses déploiements

Résumé sur mix-it.fr

Plusieurs outils pour déployer et monitorer son code :

SaltStack -> Déploiement (alternative : ansible, chef, puppet)
Shinken -> Monitoring mais Sensu est bien mieux pour les API Rest

Les devs mettent en place des tests UF, font du TDD… Mais en tant que sysops, c’est assez pénible de tester les scripts de déploiements.

Plusieurs niveaux de vérifications :

1 - Syntaxe

ansible-playbook foo.yml --check

2 - Script

Utiliser un serveur jetable : préparer une machine virtuelle via VirtualBox et Vagrant, faire une conf, puis exécuter

3 - Supervision

Exécuter des vérifications périodiquement et envoyer des alertes en cas de problème.

Tout cela peut être intégrer dans un Jenkins.

Test Driven Infrastructure

Mise en place des checks -> Checks négatifs -> Déploiement -> Checks positifs

Checks de supervision + configuration de déploiement = Validation des déploiements

Implémentation de déploiement du serveur de supervision :

Config de déploiement du serveur de supervision
Config de déploiement du service
Config de déploiement de la supervision du service

Exécution :

Déploiement de la supervision
Checks -> négatif
Déploiement service
Checks -> positif

Go, from Zero to Hero

Résumé sur mix-it.fr

Très proche de Python ou Ruby mais plus rapide car compilé.

JSON encoding
HTTP server
Types
Interfaces
Goroutines

On peut apprendre les concepts de Go en 2h.

Livre à lire : Site Reliability Engineering

HTTP/2 pour le développeur Web

Résumé sur mix-it.fr

Les problèmes de HTTP/1

Problème de latence. La bande passante n’est plus le problème.

Techniques de contournement :

Domain sharding
Concaténation des assets
Sprites

HTTP/2

Ancêtre de HTTP/2 : SPDY

Plusieurs améliorations :

Une seule connexion TCP
Multiplexing : plusieurs requêtes = une seule connexion
Binary framing
Flow control
HPACK
TLS obligatoire

Informations utiles :

les frames sont visibles dans les net-internals de chrome
Nginx supporte HTTP/2

Stream prioritization

Amélioration de TCP sur les serveurs :

Linux kernel 3.2+
Cache-Control & Etag
Gzip / deflate
Image compression

Dev toolset :

NSSKeyLog
Wireshark
DevToolBar (possibilité d’ajouter de la latence)

Javascript, gardez le meilleur !

2015-02-27T00:00:00+00:00

Javascript est un langage remarquablement puissant. C’est une sorte de Lisp revêtu des habits du C.

Javascript est basé sur de très bonnes idées : fonctions, couplage lâche, objets dynamiques, notation littérale expressive des objets… et quelques mauvaises : modèle de programmation axé sur les variables globales.

Typage faible

Javascript est un langage faiblement typé. Contrairement aux langages à typage fort, les compilateurs Javascript ne détectent pas les erreurs de type. Cela peut inquiéter mais est en fait libérateur. Il permet d’éviter des hiérarchies de classes complexes, de se battre avec le transtypage…

Héritage

Il existe plusieurs patterns d’héritage en Javascript.

Pseudo-classique

Ce pattern est destiné à paraître orienté objet.

var Mammal = function(name) {
  this.name = name;
};
Mammal.prototype.get_name = function() {
  return this.name;
};
Mammal.prototype.says = function() {
  return this.saying || '';
};

var myMammal = new Mammal('Herb the Mammal');
myMammal.get_name(); // Herb the Mammal

var Cat = function(name) {
  this.name = name;
  this.saying = 'meow';
}

Cat.prototype = new Mammal();
Cat.prototype.get_name = function() {
  return this.says() + ' ' + this.name;
};

var myCat = new Cat('Henrietta');
myCat.says(); // meow
myCat.get_name(); // meow Henrietta

Il n’y a pas de portée privée, toutes les propriétés sont publiques, il n’y a pas d’accès aux méthodes super. Attention de ne pas oublier le prefix new lors de l’appel à la fonction constructeur sinon this n’est pas lié à un nouvel objet mais à l’objet global !

Prototypal

Javascript possède un système d’objets sans classe dans lequel les objets héritent directement des propriétés d’autres objets. C’est une relation dynamique. Si l’on ajoute une nouvelle propriété à un prototype, cette propriété est immédiatement visible dans tous les objets qui héritent de ce prototype.

L’héritage pas prototype est plus simple que l’héritage classique. Commencez par créer un objet utile puis créer de nombreux objets analogues à ce premier.

var myMammal = {
  name: 'Herb the mammal',
  get_name: function() {
    return this.name;
  },
  says: function() {
    return this.saying || '';
  }
};

var myCat = Object.create(myMammal);
myCat.name = 'Henrietta';
myCat.saying = 'meow';
myCat.get_name = function() {
  return this.says() + ' ' + this.name;
};

On parle d’héritage différentiel. Ce pattern n’offre pas de portée privée. Toutes les propriétés sont visibles.

Fonctionnel

Appliquons ce pattern à notre exemple mammal.

var mammal = function(spec) {
  var that = {};
  that.get_name = function() {
    return spec.name;
  };
  that.says = function() {
    return spec.saying || '';
  };
  return that;
};
var myMammal = mammal({ name: 'Herb' });

var cat = function(spec) {
  spec.saying = 'meow';
  var that = mammal(spec);
  that.get_name = function() {
    return this.says() + ' ' + this.name;
  };
  return that;
}
var myCat = cat({ name: 'Henrietta' });

L’objet spec contient toutes les informations dont le constructeur a besoin pour créer une instance. Les propriétés sont maintenant complètement privées. Elles ne sont accessibles que par des méthodes.

Un des avantages du pattern fonctionnel est de pouvoir invoquer les méthodes super.

Object.method('superior', function(name) {
  var that = this, method = that[name];
  return function() { return method.apply(that, arguments); };
});

var coolcat = function(spec) {
  var that = cat(spec), super_get_name = that.superior('get_name');
  that.get_name = function() {
    return 'like ' + super_get_name() + ' baby';
  };
  return that;
};

var myCoolCat = coolcat({ name: 'Bix' });
myCoolCat.get_name(); // 'like meow Bix baby'

Si tout est privé, l’objet est sécurisé. Les propriétés de l’objet peuvent être remplacées ou supprimées mais l’intégrité de l’objet n’est pas compromise. Si toutes les méthodes de l’objet n’utilisent pas this ou that alors l’objet est durable. Un objet durable ne peut pas être compromis. Un attaquant ne peut accéder à l’état interne de l’objet que par des méthodes définies.

Parties

Un objet peut être construit grâce à un ensemble de parties. Une fonction peut très bien ajouter des fonctionnalités à un objet.

Par exemple, on peut créer une fonction capable d’ajouter des fonctionnalités de traitement d’évènements simples à n’importe quel objet.

var eventuality = function(that) {
  var registry = {};
  that.fire = function(event) {
    var array, func, handler, i, type = typeof event == 'string' ? event : event.type;
    if(registry.hasOwnProperty(type)) {
      array = registry[type];
      for(i = 0; i < array.length; i++) {
        handler = array();
        func = handler.method;
        if(typeof func == 'string') {
          func = this[func];
        }
        func.apply(this, handler.parameters || [events]);
      }
    }
    return this;
  };
  that.on = function(type, method, parameters) {
    var handler = {
      method: method,
      parameters: parameters
    };
    if(registry.hasOwnProperty(type)) {
      registry[type].push(handler);
    } else {
      registry[type] = [handler];
    }
    return this;
  };
  return that;
};

Grammaire

Nombres

Javascript possède un seul type numérique représenté sous la forme d’un nombre 64 bits à virgule flottante, comme le double Java. Il n’existe pas de type entier séparé, 1 et 1.0 correspondent à la même valeur. Il est toutefois possible d’étendre le type Number pour contourner ce problème.

Number.prototype.method('integer', function () {
  return Math[this < 0 ? 'ceiling' : 'floor'](this);
});
(-10 / 3).integer(); // -3

La valeur NaN est une réprésentation numérique d’une valeur non numérique. On l’obtient lorsqu’une opération numérique ne peut pas renvoyer de nombre. NaN est différente de toute valeur, y compris d’elle-même. NaN peut être détecté avec la fonction isNaN(nombre).

Chaînes

Tous les caractères en Javascript sont codés sur 16 bits. Les chaînes sont immuables. Une fois créée, une chaîne ne peut pas être changée. \ correspond au caractère d’échappement. Les chaînes possèdent une propriété length.

Il n’existe pas de méthode pour supprimer les espaces en début et fin de chaîne. Solution simple en étendant le type String :

String.prototype.method('trim', function() {
  return this.replace(/^\s+|\s+$/g, '');
});

Valeurs égalent à `false`

false
null
undefined
chaîne vide
0
NaN

Toutes les autres valeurs sont true, dont true, la chaîne false et tous les objets.

Tableaux

Les tableaux en Javascript sont sensiblement plus lent qu’un véritable tableau. Javascript convertit les indices de tableau en chaînes qui sont utilisées pour créer des propriétés. La récupération et la mise à jour fonctionnent comme avec les objets. Les tableaux ont des méthodes intégrées de base très utiles.

var empty = [];
var numbers = ['zero', 'one', 'two', 'three'];
// Objet littéral :
var numbers_object = { '0': 'zero', '1': 'one', '2': 'two', '3': 'three' };

empty.length; // O
numbers.length; // 4

L’objet littéral numbers_object produit un résultat similaire à numbers : mêmes propriétés, même longueur. Toutefois, numbers_object hérite de Object.prototype alors que numbers hérite de Array.prototype. C’est pour cela qu’il n’est pas possible d’utiliser la propriété length sur numbers_object.

Javascript permet aux tableaux de contenir n’importe quel type de valeurs.

var misc = ['string', 42, true, null, undefined, ['nested'], {object: true}, NaN, Infinity];
misc.length; // 9

length

length n’est pas une limite supérieure en Javascript. Si un élément est stocké avec un indice supérieur à la valeur de length, alors la propriété length est augmentée. Il n’y a pas d’erreur de limite. length correspond juste à l’index entier le plus grand du tableau + 1.

var myArray = [];
myArray.length; // 0
myArray[10000] = true;
myArray.length; // 10001

length peut être définie de manière explicite. Si on l’augmente, cela n’alloue pas plus d’espace au tableau. Si on le diminue, cela supprime toutes les propriétés dont l’index est supérieur ou égal à la nouvelle valeur de length.

numbers.length = 1;
// numbers == ['zero']
numbers.push('one');
numbers.length; // 2

delete

var numbers = ['zero', 'one', 'two', 'three'];
delete numbers[2];
// numbers == ['zero', 'one', undefined, 'three']

delete laisse un trou dans le tableau. Si on souhaite décaler les éléments du tableau, il faut préférer la méthode splice. Toutefois, cette méthode peut être lente pour les tableaux de grande taille.

numbers.splice(2, 1);
// Cela supprime 1 élément du tableau en partant de l'index 2
// numbers == ['zero', 'one', 'three']

concat

concat produit un nouveau tableau contenant une copie superficielle de ce tableau à laquelle sont ajoutés les éléments. Si un des éléments est un tableau, chacun de ses éléments est ajouté individuellement.

var a = ['a', 'b', 'c'];
var b = ['x', 'y', 'z'];
var c = a.concat(b, true);
// c == ['a', 'b', 'c', 'x', 'y', 'z', true]

join

join permet de créer une chaîne à partir d’un tableau en concaténant ses éléments séparés par un séparateur. Par défaut, ,.

var a = ['a', 'b', 'c'];
var c = a.join('-');
// c == 'a-b-c'

push et pop

Ces méthodes permettent de faire fonctionner un tableau comme une pile. pop supprimer et renvoie le dernier élément. push ajoute un élément à la fin et retourne la longueur du tableau.

var a = ['a', 'b', 'c'];
var c = a.pop();
// c == 'c'
// a == ['a', 'b']
var b = a.push('w');
// a == ['a', 'b', 'w']
// b == 3

reverse

Cette méthode inverse l’ordre des éléments d’un tableau et retourne le tableau.

var a = ['a', 'b', 'c'];
var b = a.reverse();
// a == b == ['c', 'b', 'a']

shift

shift supprime et retourne le premier élément d’un tableau. Attention, cette méthode est bien plus lente que pop.

var a = ['a', 'b', 'c'];
var c = a.shift();
// a == ['b', 'c']
// c = 'a'

slice

Cette méthode crée une copie superficielle d’une portion d’un tableau. Elle copie de tableau[début] à tableau[fin - 1]. Par défaut, le paramètre fin est facultatif et il vaut tableau.length. Si un des paramètres est négatif, tableau.length est ajouté afin de le rendre positif.

var a = ['a', 'b', 'c'];
var b = a.slice(0, 1);
// b == ['a']
var c = a.slice(1);
// c == ['b', 'c']

sort

sort trie le contenu d’un tableau et le remplace. Elle présuppose que les éléments doivent être triés comme des chaînes. Elle ne vérifie pas le type des éléments avant de les comparer ce qui produit le résultat aberrant suivant :

var n = [4, 15, 8, 23, 16, 42];
n.sort();
// n == [15, 16, 23, 4, 42, 8]

Toutefois, la fonction de comparaison peut être remplacé. Celle-ci doit prendre deux paramètres et renvoyer :

0 si égalité
un nombre négatif si le premier paramètre doit être placé en premier
un nombre positif si le second paramètre doit être placé en premier

n.sort(function (a, b) {
  return a - b;
});
// n == [4, 8, 15, 16, 23, 42]

Et on peut même rendre cette fonction de tri plus intelligente,

var m = ['aa', 'bb', 'a', 4, 15, 8, 23, 16, 42];
m.sort(function (a, b) {
  if (a === b) {
    return 0;
  }
  if (typeof a === typeof b) {
    return a < b ? -1 : 1;
  }
  return typeof a < typeof b ? -1 : 1;
});
// m == [4, 8, 15, 16, 23, 42, 'a', 'aa', 'bb']

Portée

La portée contrôle la visibilité et les temps de vie des variables et des paramètres. Cela réduit les collisions de noms et fournit une gestion de la mémoire automatique.

var foo = function() {
  var a = 3, b = 5;
  var bar = function() {
    var b = 7, c = 11;
    // a == 3, b == 7, c == 11
    a += b + c;
    // a == 21, b == 7, c == 11
  };
  bar();
  // a == 21, b == 5
};

La plupart des langages disposent d’une portée de bloc. Les variables sont invisibles en dehors du bloc et sont libérées à la fin de l’exécution du bloc.

Ce n’est pas le cas en Javascript. Il possède une portée de fonction. Les paramètres et les variables sont invisibles en dehors de la fonction. Il est préférable de déclarer toutes les variables utilisées dans une fonction en haut du corps de la fonction.

Closure

Les fonctions internes ont accès aux paramètres et aux variables des fonctions à l’intérieur desquelles elles sont définies (à l’exception de this et arguments). La fonction interne a accès aux variables elles-mêmes des fonctions externes et non à des copies. Cela est possible car la fonction a accès au contexte dans lequel elle a été créée.

C’est une bonne chose car cela permet d’éviter le problème suivant :

// Objectif : Créer une fonction qui attribue correctement des fonctions de gestionnaire d'évènements à un tableau de noeuds. Lorsqu'on clique sur un noeud, une boîte d'alerte affiche l'ordinal du noeud.

// Mauvais exemple
var add_the_handlers = function(nodes) {
  var i;
  for (i = 0; i < nodes.length; i += 1) {
    nodes[i].onclick = function(e) {
      alert(i);
    };
  }
};
// Au lieu d'afficher l'ordinal du noeud, la boîte d'alerte va afficher le nombre de noeuds.
// La fonction échoue car les fonctions de gestionnaire sont liées à la variable i et non à la valeur de la variable i au moment où la fonction a été créée.

// Bon exemple
var add_the_handlers = function(nodes) {
  var i;
  for (i = 0; i < nodes.length; i += 1) {
    nodes[i].onclick = function(i) {
      return function(e) {
        alert(i);
      }
    }(i);
};
// Au lieu d'attribuer une fonction à onclick, on invoque une fonction, en lui passant i, qui retourne une fonction de gestionnaire d'évènements liée à la valeur de i qui a été passée (et non au i défini dans add_the_handlers).

Modules

Grâce aux closures et aux fonctions, il est possible de créer des fonctions ou objets présentant une interface mais masquant son implémentation. C’est ce qu’on appelle un module. Grâce aux fonctions pour produire des modules, il est possible d’éviter complètement les variables globales. Il est très efficace pour encapsuler des applications et produire des objets sécurisés.

// Objectif : créer un objet qui produit des chaînes uniques composées d'un préfixe et d'un numéro de séquence.

var serial_maker = function() {
  var prefix = '', seq = 0;
  return {
    set_prefix: function(p) {
      prefix = String(p);
    },
    set_seq: function(s) {
      seq = s;
    },
    gensym: function() {
      var result = prefix + seq;
      seq += 1;
      return result;
    }
  };
}();

var seqer = serial_maker();
seqer.set_prefix('Q');
seqer.set_seq(1000);
seqer.gensym(); // Q1000

// Les méthodes n'utilisent pas this ou that. seqer ne peut donc pas être compromis. prefix ou seq ne peuvent pas être modifié en dehors des méthodes. seqer est mutable, ses méthodes peuvent être remplacées mais cela ne donne pas accès à prefix et seq. seqer est juste une collection de fonctions.
// Si seqer.gensym est passé à une fonction tierce, cette fonction ne peut que générer des chaînes uniques.

Objets

Les types simples du Javascript sont les nombres, les chaînes, les booléens, null et undefined. Toutes les autres valeurs sont des objets. Les objets en Javascript sont des collections modifiables à clés. Les tableaux, les fonctions, les expressions régulières… sont des objets. Les objets sont passés par référence. Ils ne sont jamais copiés.

Les objets littéraux héritent de Object.prototype, un objet standard.

Récupération

La valeur d’un objet peut être récupérée en y accédant grâce à [] ou ..

foo['bar'] // 42
foo.bar // 42

Mise à jour

Une valeur d’un objet est mise à jour par attribution. Si l’objet ne possède pas déjà la propriété, il est augmenté.

foo['bar'] = 42;
foo.bar = 777;
foo.status = 'up';

Suppression

delete permet de supprimer la propriété d’un objet mais ne touche à aucun objet dans la chaîne des prototypes. Toutefois, la suppression d’une propriété d’un objet peut permettre à une propriété dans la chaîne des prototypes de ressurgir.

another_foo.nickname // 'Bart'
delete another_foo.nickname;
another_foo.nickname // Surnom du prototype : 'Homer'

Fonctions

Les fonctions héritent de Function.prototype, qui hérite de Object.prototype. Elles disposent de deux propriétés supplémentaires : le contexte et le code qui implémente le comportement.

Patterns d’invocation

Il existe 4 patterns d’invocation de fonction :

Pattern d’invocation de méthode Une fonction stockée sous forme de propriété d’un objet, autrement dit une méthode, est liée à cet objet lors de son invocation. Elle peut utiliser this pour accéder (et/ou modifier) le contexte de l’objet, elle est alors considéré comme “méthode publique”.

Pattern d’invocation de fonction En dehors d’un objet, une fonction est invoquée comme… une fonction ! Invoquée de cette manière, une fonction est liée à l’objet global, c’est une erreur de conception du langage. Cette erreur implique qu’une méthode ne peut pas employer de fonction interne pour l’aider car la fonction interne ne partage pas l’accès de la méthode à l’objet. this est lié à la mauvaise valeur. Toutefois, il est possible de contourner cela en attribuant this à une autre variable dans la méthode. Par convention, cette variable s’appelle that.

Pattern d’invocation de constructeur Une fonction invoquée avec le préfixe new crée un nouvel objet. Par convention, ces fonctions sont affectées à des variables dont la première lettre est en majuscule. Il est déconseillé d’utiliser ce type de fonction constructeur.

var Foo = function (string) {
  this.nickname = string;
};
Foo.prototype.get_nickname = function () { return this.nickname; };

var myFoo = new Foo('bar');
myFoo.get_nickname(); // bar

Pattern d’invocation avec apply La méthode apply permet de passer un tableau d’arguments à une fonction. Elle prend deux paramètres : la valeur qui doit être liée à this et le tableau de paramètres.

var add = function (a, b) { return a + b; };
var array = [3, 4];
var sum = add.apply(null, array); // sum == 7

var nicknameObject = { nickname: 'Chuck' };
var nickname = Foo.prototype.get_nickname.apply(nicknameObject); // status == 'Chuck'

Arguments

arguments donne à la fonction tous les arguments fournis à l’invocation.

var sum = function () {
  var i, sum = 0;
  for (i = 0; i < arguments.length; i += 1) {
    sum += arguments[i];
  }
  return sum;
}
sum(1, 30, 11); // 42

arguments n’est pas un vrai tableau à cause d’une erreur de conception du langage. Il est dépourvu de toutes les méthodes de tableau sauf de length.

Return

return peut être utilisé pour provoquer le retour anticipé de la fonction. Une fonction renvoie toujours une valeur. Si elle n’est pas spécifiée, undefined est retournée.

Exceptions

throw interrompt l’exécution. Un objet exception, contenant les propriétés name et message, est alors créé. Si une exception est levée dans un bloc try, le contrôle passe à un unique bloc catch qui capture toutes les exceptions. Il faudra alors inspecter le nom de l’exception pour déterminer son type.

Bonnes pratiques

Commentaires

Il est préférable d’utiliser les commentaires de fin de ligne commençant par //. Les commentaires de bloc /* */ ne sont pas sûrs. Par exemple, /* var rm_a = /a*/.match(s); */ provoque une erreur de syntaxe.

Variable globale par application

Les variables globales doivent être évitées. L’un des moyens de minimiser leur utilisation consiste à créer une variable globale unique par application. Elle représente alors le conteneur de l’application. Cela permettra de limiter les risques de conflits avec d’autres applications, modules ou bibliothèques. De plus, on y gagne en cohérence et lisibilité.

var MYAPP = {};
MYAPP.foo = {
  bar: 42
};

Tableau ou Objet ?

Javascript entretient lui-même une confusion entre les deux. typeof sur un tableau renvoit object. Il est possible de corriger cela.

var is_array = function(value) {
  return value && // permet de rejeter null et false
         typeof value === 'object' && // vrai pour les objets, les tableaux et null
         typeof value.length === 'number' && // vrai pour les tableaux et généralement faux pour les objets
         typeof value.splice === 'function' && // vrai pour les tableaux
         !(value.propertyIsEnumerable('length')); // length n'est pas énumérable (produit par une boucle for in ?) pour les tableaux
};

Quoi qu’il en soit, lorsque les noms de propriété sont de petits entiers séquentiels, vous devez utiliser un tableau sinon, utilisez un objet.

Les choses pas terribles

Variables globales

La pire de toute. Une variable globale est une variable visible dans toutes les portées. Elle peut être modifié à tout moment par n’importe quelle partie du programme. De plus, si des sous-programmes utilisent des variables globales dont le nom est identique, celles-ci risquent de s’interférer. Et malheureusement, Javascript ne fait pas que de les autoriser mais il en a besoin. Toutes les unités de compilation sont chargées dans un objet global commun.

Portée

Javascript ne fournit pas de portée de bloc. Une variable déclarée dans un bloc est visible partout dans la fonction qui contient ce bloc. Il vaut alors mieux déclarer toutes les variables en haut de chaque fonction.

Insertion du point-virgule

Javascript vise à corriger les programmes erronés en insérant des ;. C’est assez horrible car il peut masquer des erreurs plus graves. Exemple pour l’instruction return :

return
{
  status: true
};
// Ce code renvoie `undefined`
return {
  status: true
};
// Ce code renvoie `{ status: true }`

Mots réservés

break else new var case finally return void catch for switch
while continue function this with default if throw delete in
try do instanceof typeof abstract enum int short boolean export
interface static byte extends long super char final native
synchronized class float package throws const goto private
transient debugger implements protected volatile double import public

La plupart de ces mots ne sont pas utilisés dans le langage, toutefois, on ne peut y recourir pour nommer des variables ou des paramètres.

parseInt

parseInt est une fonction qui convertit les chaînes en entier. Elle s’arrête lorsqu’elle voit un caractère qui n’est pas un chiffre. Du coup, parseInt("16") est égal à parseInt("16plop") sans nous alerter. Si le premier caractère de la chaîne est “0”, la chaîne est évaluée en base 8 au lieu d’être en base 10. En base 8, 8 et 9 ne sont pas des chiffres. Du coup, parseInt("08") et parseInt("09") produisent le résultat 0. Cela est gênant quand on analyse des dates et des heures. Il est recommandé de toujours utiliser le paramètre de base de parseInt pour éviter cette erreur. parseInt("08", 10) vaut alors 8.

Virgule flottante

Les nombres binaires à virgule flottante ne sont pas capables de gérer les fractions décimales. Du coup, 0.1 + 0.2 n’est pas égal à 0.3. Ceci est dû à l’adoption volontaire du standard IEEE 754. Cela convient à la majorité des applications mais va à l’encontre de ce que l’on a appris au collège. Pour contourner ce problème, les valeurs monétaires peuvent être converties en valeur entières en centimes.

Gère tes tâches de fond avec Sidekiq

2015-01-18T00:00:00+00:00

Sidekiq est un gestionnaire de tâches de fond écrit en Ruby. Il est parfois très intéressant de gérer des jobs en parallèle et de façon asynchrone.
Exemples : envoi de mailings, stockage de fichier en différé…

Pourquoi ne pas choisir Resque ? Il est plus populaire !

Certes.
Toutefois, contrairement à Sidekiq qui s’appuie sur du multithreading pour traiter les jobs, Resque fork un nouveau processus à chaque traitement. Pour effectuer le même travail, Resque a besoin de 10Gb de RAM alors que Sidekiq en utilise seulement 300Mb. Sidekiq ne consomme pas plus de CPU pour autant.

Ok, c’est cool. Mais comment ça marche ?

Sidekiq se décompose en trois parties : le serveur, le client et le stockage.
Le moteur de stockage utilisé est Redis. Une base clé-valeur simple mais très riche et performante.

Regardons le client de plus près…

Le client tourne dans le même processus que notre application web (Rails). Il va nous permettre de pusher des tâches en fond.

Prenons un worker simple :

# app/workers/hard_worker.rb
class HardWorker
  include Sidekiq::Worker

  def perform(user, count)
    puts 'Doing hard work'
  end
end

Si l’on souhaite programmer un job pour l’utilisateur PKoin, il suffit d’écrire :

HardWorker.perform_async('PKoin', 5)

Notre worker va utiliser le client Sidekiq. Celui-ci va reçevoir un Hash qui représente le job à traiter.
La ligne du dessus peut également être écrite de la façon suivante :

# Lower-level generic API
Sidekiq::Client.push('class' => HardWorker, 'args' => ['PKoin', 5])

Lorsqu’on pousse un job en background, le client reçoit une représentation du job sous forme d’un Hash, le sérialise en Json et le push dans une queue dans Redis.

Étant donné que le client sérialise ses paramètres, ce dernier doit reçevoir des objets simples :

numbers, strings, boolean, array, hash… OK!
Date, Time, ActiveRecord instances… KO!

Regardons maintenant le serveur de plus près…

Dans le but de gérer correctement le multithreading, Sidekiq s’appuie sur Celluloid.

Quand on démarre le serveur Sidekiq, celui-ci crée un processus dans lequel il va créer plusieurs threads.
Il va initialiser un Manager Actor (controller). Ce Manager va initialiser un Fetcher Actor (connector) et N Processor Actor (worker).
Le N est configurable afin d’ajuster la concurrence souhaitée, autrement dit le nombre de jobs qui seront traités en parallèle.

En vrai, ce n’est pas très compliqué. Voici un petit schéma pour illustrer tout ça.

Le Fetcher Actor permet de maintenir une connexion unique et active avec Redis. Celui-ci va puller, à intervalle de temps régulier (par défaut 15 secondes), les jobs en attente de traitement.
Si il trouve un job en attente, il le récupère, le supprime de la base Redis et l’envoie au Manager Actor.

Le Manager Actor va dispatcher les différents jobs, reçus du Fetcher, aux Processor Actors libres.

Le Processor Actor reçoie un job en entrée, le traite et retourne une réponse positive ou négative au Manager. Dans le cas où le job échoue, il en profite pour mettre l’erreur dans des logs. Le Manager prendra alors la décision de renvoyer le job vers un Processor Actor (pas obligatoirement le même) afin de ré-essayer.

Regardons ce que Sidekiq stocke dans Redis…

J’ai codé rapidement une petite application Rails pour faire des tests.
Cette application comporte 3 éléments notables :

1 worker : app/workers/hard_worker.rb
1 tâche rake : lib/tasks/workers.rake pour nous aider à empiler des jobs
1 controller : app/controllers/welcome_controller.rb pour visualiser la base Redis

L’application est disponible sur github : sidekiq-wat-is-da-shit. Lisez le README pour le faire tourner en local.

Commençons par un test simple. Le serveur Sidekiq est éteint et on empile un job grâce à la commande :

$ bundle exec rake job:work_hard['PKoin',45]
# 55722c1724796339f0fd361b

Dans notre application Rails de test, via l’interface Redis, on y retrouve :

> COMMAND Redis: KEYS sidekiq-wat-da-shit*
sidekiq-wat-da-shit:queue:default : list
sidekiq-wat-da-shit:queues : set

Le client a créé deux clés.
La première comporte la liste des jobs à dépiler dans la queue par défaut.
La seconde est un ensemble des différentes queues disponibles.

Regardons maintenant ce que contient la queue par défaut.

> COMMAND Redis: LRANGE sidekiq-wat-da-shit:queue:default 0 -1
{"retry":1,"queue":"default","class":"HardWorker","args":["PKoin","45"],"jid":"55722c1724796339f0fd361b","enqueued_at":1423177060.093096}

Bonne nouvelle, on retrouve bien notre job.

Allumons maintenant le serveur afin de dépiler ce fameux job et voyons ce que contient Redis.

$ bundle exec sidekiq
# 2015-02-05T23:06:21.850Z 17500 TID-ovfc0w2jk HardWorker JID-55722c1724796339f0fd361b INFO: start
# 2015-02-05T23:06:21.850Z 17500 TID-ovfc0w2jk HardWorker JID-55722c1724796339f0fd361b DEBUG: PKoin: I'm doing hard work… ZzZ

Côté Redis,

> COMMAND Redis: KEYS sidekiq-wat-da-shit*
sidekiq-wat-da-shit:MacBook-Air-de-Julien.local:17500 : hash
sidekiq-wat-da-shit:MacBook-Air-de-Julien.local:17500:workers : hash

Deux nouvelles clés font leur apparition…
Regardons ce qu’elles contiennent.

> COMMAND Redis: HGETALL sidekiq-wat-da-shit:MacBook-Air-de-Julien.local:17500
["beat", "1423177341.735065"]
["info", "{\"hostname\":\"MacBook-Air-de-Julien.local\",\"started_at\":1423177276.662422,\"pid\":17178,\"tag\":\"sidekiq-wat-is-da-shit\",\"concurrency\":3,\"queues\":[\"default\"],\"labels\":[]}"]
["busy", "1"]

Cette première clé contient un Hash contenant les détails du serveur Sidekiq.
On peut également voir la variable busy qui est égale à 1. Ce qui est tout à fait normal étant donné que le serveur traite notre job.

> COMMAND Redis: HGETALL sidekiq-wat-da-shit:MacBook-Air-de-Julien.local:17500:workers
["ovfc0w2jk", "{\"queue\":\"default\",\"payload\":{\"retry\":1,\"queue\":\"default\",\"class\":\"HardWorker\",\"args\":[\"PKoin\",\"45\"],\"jid\":\"55722c1724796339f0fd361b\",\"enqueued_at\":1423177560.7913868},\"run_at\":1423177581}"]

Cette deuxième clé contient un Hash décrivant les workers en cours de traitement.
On peut retrouver ici notre job, qu’on a ajouté plus haut, avec une variable supplémentaire : run_at.
On peut constater également que ce job n’existe plus dans la clé sidekiq-wat-da-shit:queue:default.

# … 45 secondes plus tard, côté console …
2015-02-05T23:07:06.855Z 17500 TID-ovfc0w2jk HardWorker JID-55722c1724796339f0fd361b DEBUG: PKoin: IT'S OK. I'M NOT SLEEPING!
2015-02-05T23:07:06.856Z 17500 TID-ovfc0w2jk HardWorker JID-55722c1724796339f0fd361b INFO: done: 45.005 sec

Côté Redis :

> COMMAND Redis: GET sidekiq-wat-da-shit:stat:processed
1

Une nouvelle clé fait son apparition et contient un compteur des jobs terminés.

Que se passe-t-il maintenant lorsqu’un worker échoue ?

$ bundle exec rake job:work_hard['britney',45]
# 1379216acfecac655c5c753f

Côté Redis :

> COMMAND Redis: ZRANGE sidekiq-wat-da-shit:retry 0 -1
{"retry":1,"queue":"default","class":"HardWorker","args":["britney","45"],"jid":"1379216acfecac655c5c753f","enqueued_at":1423178069.9739678,"error_message":"Oops! I did it again.","error_class":"RuntimeError","failed_at":1423178069.980392,"retry_count":0}

Une nouvelle clé fait son apparition et contient les détails du job qui a échoué.
On retrouve le job id, le message d’erreur ainsi que la date à laquelle il a échoué.
Deux éléments importants :

retry : nombre d’essai max pour notre job
retry_count : nombre d’essai total

Il me parait également important d’expliquer comment Sidekiq calcule le temps à attendre entre deux essais.
Entre chaque essai, Sidekiq temporise de manière exponentielle. En effet, il applique la formule suivante :

(retry_count ** 4) + 15 + (rand(30) * (retry_count + 1)) (i.e. 15, 16, 31, 96, 271, ... seconds + a random amount of time)

Sidekiq va donc mettre approximativement 21 jours pour faire 25 essais sur un même job. 25 étant le nombre d’essai max par défaut. Cela nous laisse suffisamment de temps pour corriger le bug et déployer son correctif en production !

Toutefois, que se passe-t-il si on atteint le nombre d’essai max ?

Sidekiq fait mourir le job.

Côté Redis :

> COMMAND Redis: ZRANGE sidekiq-wat-da-shit:dead 0 -1
{"retry":1,"queue":"default","class":"HardWorker","args":["britney","45"],"jid":"1379216acfecac655c5c753f","enqueued_at":1423178069.9739678,"error_message":"Oops! I did it again.","error_class":"RuntimeError","failed_at":1423178069.980392,"retry_count":1,"retried_at":1423178103.004996}

Une nouvelle clé fait son apparition et contient les détails du job mort.

Voilà globalement comment fonctionne Sidekiq.

Quelques conseils…

Il faut absolument passer des objects simples aux workers. Ne passez pas directement vos instances Active Record !
Un worker doit être idempotent (peut être rejoué plusieurs fois) et transactionnel.
Plusieurs workers doivent pouvoir tourner en parallèle.
Utilisez un service d’erreur externe type Honeybadger, Airbrake, Rollbar, BugSnag, Sentry, Exceptiontrap, Raygun…
Monitorez vos serveurs qui font tourner Sidekiq. Par exemple, Inspeqtor est très simple et fait parfaitement le job.

Pour finir, quelques avertissements…

Ne faites pas des dizaines de files. Sidekiq n’aime pas ça !
Il est impossible de traiter une queue en série.
Sidekiq ne garantit pas l’ordre de traitement des jobs dans une queue.
Sidekiq doit être redémarré quand le code source change.
Sidekiq fait du nettoyage tous les 6 mois : dead jobs…
Si Sidekiq part en segfault ou que la VM Ruby crash, tous les jobs qui étaient en cours d’exécution sont perdus !
Attention de bien configurer le pool de connexion d’ActiveRecord… ainsi que le nombre de connexion max du serveur de DB.

Arrêtez d’utiliser la même clé ssh privée partout !

2014-06-26T00:00:00+00:00

J’ai trop souvent vu des développeurs utiliser la même clé SSH pour se connecter à des services totalement différents.
Je suis loin d’être un expert dans le domaine mais utiliser des clés différentes n’est vraiment pas compliqué.

Pourquoi ne doit-on pas utiliser le même couple de clé SSH publique/privée de partout ?

Si vous utilisez une seule et même clé pour vous connecter à différents services (github, ovh, heroku…), le jour où quelqu’un dérobe votre clé privée, cette personne aura accès à tous les services en question. C’est plutôt gênant.

Quelques recommandations

Afin de garantir un minimum de sécurité,

Une clé est privée à un utilisateur et à une machine
- Chacun à sa clé, les clés ne sont pas partagées entre plusieurs utilisateurs
- Chaque machine d’un même utilisateur a sa propre clé
- Ne pas stocker sa clé privée sur des machines intermédiaires
Toutes les clés sont protégées par une passphrase (même si c’est chiant à taper !)
- Les passphrases sont suffisamment complexes et différentes

Comment faire ?

Dans l’exemple qui suit, on va générer une paire de clé qui sera utilisé pour github.com uniquement.

Générer une paire de clé

$ ssh-keygen -t rsa -f ~/.ssh/id_rsa,github.com -C "mon_compte_github,mon_mba_2014"

Note : Il est possible de changer la passphrase ultérieurement,

$ ssh-keygen -f ~/.ssh/id_rsa,github.com -p

Il faut ensuite impérativement changer les droits de la clé privée pour qu’elle soit uniquement accessible par vous.

$ chmod 600 ~/.ssh/id_rsa,github.com

N’oubliez pas d’associer à votre compte github la clé publique générée. Github explique ça bien mieux que moi !

Configurer le client SSH

Il faut ensuite éditer le fichier ~/.ssh/config pour y ajouter,

Host github.com
  Hostname github.com
  User mon_compte_github
  IdentityFile ~/.ssh/id_rsa,github.com

Test !

$ ssh -vT git@github.com

Cette commande va tenter de se connecter en SSH au serveur de github.
La sortie est assez verbeuse mais, normalement, vous devriez voir que votre client SSH utilise bien votre clé privée id_rsa,github.com pour vous authentifier auprès du serveur de github,

debug1: Reading configuration data /Users/pkoin/.ssh/config
debug1: /Users/pkoin/.ssh/config line 5: Applying options for github.com
debug1: Reading configuration data /etc/ssh_config
debug1: /etc/ssh_config line 20: Applying options for *
debug1: Connecting to github.com [192.30.252.128] port 22.
debug1: Connection established.
# C'est la ligne suivante qui nous intéresse plus particulièrement
debug1: identity file /Users/pkoin/.ssh/id_rsa,github.com type 1

PHP Tour 2014

2014-06-22T00:00:00+00:00

Le PHP Tour est une conférence organisée par l’AFUP. Elle se déroule sur deux jours et réunit des experts PHP ainsi que des conférenciers spécialistes dans leur domaine.

L’édition 2014 s’est tenue à la Manufacture des Tabacs de Lyon, dans le 8ème arrondissement, le 23 et 24 juin.

Accompagné d’Anne-Sophie, j’ai présenté comment l’équipe technique de «TEA, The Ebook Alternative» s’est montée.
Les slides sont disponibles ici.

Accompagné de Pascal, j’ai également présenté comment on a fait pour améliorer la mise en place de notre environnement de développement chez TEA.
Les slides sont disponibles ici.

La liste des conférences, ainsi que les notes et commentaires donnés par le public, est disponible sur joind.in.

Coding and dreaming

Conférence donnée par Rasmus Lerdorf.
Slides disponibles ici.

Rasmus nous raconte les débuts de PHP : pourquoi, comment et dans quel contexte il a écrit PHP. Il nous explique aussi les débuts de l’écosystème PHP et à quel point l’ouverture du code à la communauté fut très compliqué pour lui. À chaque fois qu’un patch était soumis, il avait envie de le jeter et de le ré-écrire mais il a du faire des compromis pour le bien du langage.
Selon lui, à l’époque, les gens qui utilisaient PHP se foutaient de la syntaxe ou de l’écosystème autour du langage. Ils voulaient juste solutionner des problèmes. Quand il a écrit PHP, il se moquait des problématiques suivantes :

les noms de fonction insensibles à la casse
l’inconsistance des nommages
les globals
les register_globals
les magic_quotes

Il donne un exemple qui fait beaucoup rire les gens : l’inconsistance des paramètres $needle et $haystack entre les fonctions de manipulation des tableaux et les fonctions de manipulation des strings,

<?php
# OMGWTFBBQ?
array_search($needle, $haystack);
strstr($haystack, $needle);
in_array($needle, $haystack);
substr_count($haystack, $needle);
array_key_exists($needle, $haystack);
strchr($haystack, $needle);

Il passe ensuite sur une petite leçon de morale en nous expliquant que l’on ne devrait plus être en PHP 5.2 ou PHP 5.3. Nous devrions être au moins en PHP 5.4 !

Il aborde ensuite les nouveautés de PHP 5.5 :

les generators
les coroutines (cf. article de Nikita Popov)
le mot clé finally
les fonctions de gestion des mots de passe
- password_hash
- password_verify

Une documentation de migration très complète et fournie est disponible à l’adresse : php.net/migration55.

Il aborde ensuite les nouveautés de PHP 5.6 :

l’amélioration de la syntaxe des fonctions variadiques
l’argument unpacking
les constant scalar expressions
la vérification des certificats SSL par défaut (enfin !)

Une documentation de migration très complète est fourni et disponible à l’adresse : php.net/migration56.

Rasmus nous donne ensuite sa vison sur l’écosystème PHP actuel.
Il sépare les gens en 3 catégories : dreamer, hacker, coder.
Les dreamers rêvent à des choses incroyables. Ils voudraient que PHP soit 20 fois plus rapide. Ils ont beaucoup d’idées mais ils ne servent à rien.
Les coders sont très utiles mais trop opérationnels. Ils ne sont pas assez créatifs.
Les hakers dégagent des idées ultra intéressantes. Ils sont un peu fous et incontrôlables. Ils sont comme les dreamers à part qu’ils codent leurs idées.

Je ne suis pas qu’un objet !

Conférence donnée par Gérald Croes.
Slides disponibles ici.

Gérald nous annonce que le programme parfait n’existe pas et que le but de la conférence est d’essayer d’obtenir des applications plus solides, qui tournent et qui sont maintenables.

La POO a pour but d’écrire du code ré-utilisable. Il doit être lisible par des collègues.

Any fool can write code that a computer can understand. Good programmers write code that humans can understand. Martin Fowler

Un beau code est un code qui déclenche le moins de « WTFs/minute ».

Le code parfait est un code transparent. Il se comporte comme on s’y attend.

Il faut choisir correctement les noms de classe, de variables…
Par exemple, une classe Services ne veut rien dire. Une variable nommée $i est inutile.
Il faut arrêter de croire que le code est lu dans sa totalité. Il est lu par morceaux.

Le code est un jeu sérieux.

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. Martin Golding

Les commentaires sont un aveu de faiblesse.

Good code is its own best documentation. As you’re about to add a comment, ask yourself, “How can I improve the code so that this comment isn’t needed?” Steve McConnell

Selon Gérald, la PHPDoc est inutile car personne ne la génère et qu’en plus elle ment très souvent.

Il met en avant un paradoxe énorme en programmation : quand on commence à coder, on ne connait absolument pas le métier ! À cela, il met en avant deux concepts :

YAGNI (You aren’t gonna need it)
KISS (Keep it simple, stupid)

On programme objet mais ce n’est pas ça l’important, on n’a pas besoin d’objets. On a besoin d’une solution qui fonctionne. Il faut penser interactions.

Gérald nous fait un bref rappel sur les Design Patterns : factory, decorator, adapter… Il s’agit d’un « catalogue d’architecture », d’une liste de problèmes et de solutions connus.

Le principal problème des DP : avoir un marteau et penser que tous les problèmes sont des clous !

Un problème récurrent chez les développeurs : Le code lasagne. Un code avec trop de couches, trop découplé.
Il nous conseille de ne découpler que ce dont on a besoin. Il met en avant le principe SOLID (Single responsibility, Open-closed, Liskov substitution, Interface segregation and Dependency inversion).

Il fait une brève approche du DDD (Domain Driven Design), en expliquant que le fait de parler métier avec le client permettra de leader l’architecture.

Introduction à Docker et au monde des containers

Conférence donnée par Geoffrey Bachelet.
Slides disponibles ici.

Il nous explique la différence entre les VMs et les conteneurs. Cf. article sur Docker.

Il explique que si, dans un conteneur, aucun processus ne tourne en foreground, le conteneur n’a rien à faire et s’éteint. C’est pour cela qu’on parle de «service».

Il explique brièvement les Dockerfile pour éviter d’itérer à la main dans les conteneurs : modifier son conteneur, commiter, modifier, commiter…

Il donne la petite astuce du ENV DEBIAN_FRONTEND noninteractive afin d’éviter les questions pénibles lors d’un apt-get install.

Il énumère ensuite les choses importantes, pour lui, gérées par Docker :

Le réseau : avec le “service discovery” (cela évite d’utiliser d’utiliser etcd ou doorkeeper) et les liens entre conteneurs (--link)
Les volumes : comme nfs mais en bien mieux (ça permet, en autre, de créer des conteneurs juste pour stocker de la data) (--volumes-from)
Le Docker Hub : la communauté est impressionante (plus de contributeurs en 1 an que vagrant en 4 ans) et les builds sont possibles à partir de repos github directement (même les privés moyennant finance)
Docker Remote API : beaucoup de client (php, ruby…)

Il reste un point noir sur lequel les équipes de Docker travaillent : l’orchestration des conteneurs. Cela peut devenir vite très pénible. Le toolkit libswarm a été annoncé à la DockerCon 2014 pour gérer plus facilement cela.
En sachant qu’il existe quand même beaucoup d’outils tiers : fig, gaudi… pour pallier cette problématique.

Les principales utilités : environnement de développement, intégration continue, parallélisation des tests automatisés, déploiement continu, solution de paas privé…

Durant les questions, j’ai appris également que les gens sous MacOSX utilisent sshfs pour partager du code source entre leur host et un conteneur.

Comment grapher et visualiser vos datas

Conférence donnée par Grégoire Pineau.
Slides disponibles ici.

Grégoire commence par nous expliquer pourquoi grapher.

pour tracer le comportement des utilisateurs
pour avoir de la visibilité sur l’utilisation des features
pour mesurer les performances de l’infrastructure

Il recommande de tracer absolument tout et de trier ensuite.
Cela permet de répondre à des questions intéressantes comme :

nouveaux utilisateurs par jour
commentaires ajoutés
commandes validées
erreurs 500
hits par contrôleur / route

Il tente ensuite de répondre à «Comment grapher ?»

Il commence par mettre en avant Graphite. C’est un outil, écrit en Python et utilisant Django, qui permet de stocker des time-series et de rendre des graphiques. Très utile mais très moche !

Graphite s’appuie sur Carbon. C’est un démon qui reçoit les métriques et les injecte dans Whisper, un outil bas niveau de stockage.

Ce qui donne :

Le client (nous) (php, ruby…) envoie des données à Carbon (via tcp ou udp)
Carbon stocke les données dans Whisper
Graphite affiche des graphiques à partir des données dans Whisper

Whisper est une time series database. Très proche d’un RRD (round-robin-database). Il génère et utilise des fichiers .wsp de même taille afin d’accéder le plus rapidemment aux données.

Graphite va permettre de faire des comparaisons dans le temps très facilement.

Grégoire nous explique qu’il faut faire attention car Graphite ne garde que la dernière valeur sur l’intervalle de temps donné. Toutefois, une solution de contournement existe : StatsD (démon Node.js écrit par Etsy). Du coup, notre client communiquera directement avec StatsD, qui communiquera avec Graphite.

Graphite met également à disposition une API assez complète.

En Symfony2, il est possible d’écrire un MetricBundle (qui utilise le client metrics ou StatsD) qui va nous permettre de :

se brancher sur tous les listeners possibles (kernel.terminate)
- pour grapher les temps de réponse
- la mémoire
- les status code
tracer le nombre et le type de requêtes sql / page via Doctrine

Attention au nommage des métriques. C’est très important de les choisir correctement dès le départ car on peut «glober» avec Graphite.
Par exemple, pour les compteurs, on peut suffixer par un verbe au passé (project.created, violation.comment.created…)

Dernière recommandation : il faut absolument installer StatsD sur un SSD. Il effectue des accès au disque très importants.

Pour visualiser les données, il est possible de construire des dashboards ou en utiliser des existants : Giraffe, Cubism, Grafana…

Utiliser PostgreSQL en 2014

Conférence donnée par Dimitri Fontaine.

Un SGBD respectable se doit d’être ACID (atomicité, cohérence, isolation et durabilité).
Un SGBD n’est pas ACID si il a un mauvais système de transactions.
En tant qu’utilisateur, on doit pouvoir réaliser ce genre de requête :

BEGIN
CREATE INDEX …
EXPLAIN ANALYSE SELECT …
ROLLBACK

PostgreSQL permet de faire des backups cohérents à chaud.

Il assure également une réelle cohérence des données avec des typage de données assez complexe :

tsrange : intervalle de temps
circle
iprange
point (earth distance)
array
xml
json

PostgreSQL permet de faire des requêtes sur des ranges d’adresse ip.
Il permet d’utiliser l’opérateur with qui est dans la norme sql depuis très longtemps. Il implémente un opérateur de distance <-> qui peut fonctionner avec les ips, les points, les strings…
Il est également possible d’utiliser xpath pour faire une recherche dans des données xml et ce type de requête peut être indexé.

Transition agile 4 real @ meetic

Conférence donnée par Nicolas Kalmanovitz et Thomas Diavet.
Slides disponibles ici.

Les équipes de Meetic étaient organisées sur des cycles en V. Ils sont ensuite passés à SCRUM.

En 2011, Meetic est un gros paquebot lent dans un milieu où tout va vite.

La méthodo Scrum, facile à apprendre, allait leur permettre une approche structurée, simple et efficace des méthodes agiles.

Avant de passer sous Scrum, ils sont passés sous Kanban afin de séduire la direction. Ils ont appris que c’est compliqué de mettre du Kanban directement et ça a été un échec dans leurs équipes.
La transition de Scrum vers Kanban est, par contre, beaucoup plus facile.

Ils ont joué à GetKanban avec la direction pour les convaincre.

Ils ont également appris que les boards physiques sont très importants. Ils permettent d’identifier rapidement les points de blocage.

À l’époque, leur équipe était dispersée. Le Scrum Master, les développeurs, les intégrateurs et les testeurs ne travaillent pas ensemble physiquement. Ils ont décidé de les rapprocher et ça a vraiment tout changé chez eux.

Ils ont plusieurs équipes sous SCRUM mais chaque équipe fait maximum 8 membres. Ils sont sous des sprints de 15 jours.
Ils font des releases toutes les 2 semaines.
Ils travaillent sous git avec un vrai travail sur les branches.

Ils obtiennent plus d’autonomie, plus de communication, une meilleure priorisation et une amélioration de la qualité assez rapidement.

Ce qu’ils ont appris :

il faut de l’accompagnement : sinon démonstration ratée, sprint raté…
il ne faut pas plusieurs PO : sinon chevauchement des responsabilités
il fallait qu’il retravaillent leur time to market : problématique des releases toutes les 2 semaines alors que la feature était finalisé pendant le sprint
l’outillage est très important

Afin de réduire le time-to-market, ils ont travaillé sur :

le Quality Driven Development
de l’intégration continue (puppet, capistrano)
de l’industrialisation
de la refonte

Ils ont fait appel à un consultant pour appuyer leur choix d’agilité, faire de la formation et de la conduite de changement. Ça leur a été très bénéfique.

Take a walk on the OPS side

Conférence donnée par Baptiste Dupain.
Slides disponibles ici.

Baptiste nous explique tout d’abord comment debugger php sans php avec sysdig. Cela permet, par exemple, de faire remonter des instructions curl sans timeout (60s par defaut, c’est énorme !) qui peuvent faire tomber un site.

On peut également faire ressortir toutes les requêtes sql grâce à :

$ sysdig -w php.scap proc.name=php
$ sysdig -A proc.name=php5-fpm and evt.buffer contains SELECT

Il nous explique ensuite comment surveiller et mesurer des données grâce aux outils comme :

collectd : données systèmes CPU, Ram, I/O, Net
sensu : monitoring distribué (basé sur RabbitMQ) -> hipchat, http, logstash
seyren : alerting basé sur des seuils Graphite (send to hipchat)
mayday : (mieux que seyren) contextualise l’alerte

Il tente ensuite de nous expliquer comment donner du sens à ses logs :

logs http : roadster
logs php : script python
logs mysql : anemometer
logs firewall / syslog : rsyslog central
logs dev : ELK

Chez M6Web, les logs représentent entre 450 et 700 millions de lignes par jour.

Ils en utilisent à peine 50% via :

elasticsearch, logstash, kibana

Sense et Kopf permettent de rendre plus facile les devs sur elasticsearch. Il existe grokdebug.herokuapp.com pour tester des configurations pour logstash.

Il présente ensuite le projet R, le Excel du hipster. C’est un outil simple pour les stats et du machine learning.

Il nous explique ensuite pourquoi bencher son applicatif est important :

test de charge
- capable de tenir 50K users ?
test de stress
- jusqu’où on peut tenir ?
test de perf
- xp utilisateur
- qu’est-ce qui est acceptable ?

Et il nous donne des outils pour faire cela :

jmeter & gatling
siege
wrk : plus simple que siege
tsung
gor : réplique le traffic en temps réel

Quelques saas :

blitz.io : bourrin, gratuit
blazemeter
neotys : les meilleurs du test de charge

Comment migrer un projet majeur sous Symfony2 ?