25 ans d'expérience en SSIIs, startups et freelance comme Chef de Projet, Lead Dev ou Architecte Système.
Tout en veillant continuellement à me tenir à jour sur les derniers outils, langages, mon intérêt s'étend aujourd'hui de plus en plus à toutes les étapes du Design Produit (Product Design, Service Design Thinking).
Ces méthodologies ont comme objectif de toujours garder en ligne de mire un objectif simple : créer la meilleure expérience utilisateur (UX) possible pour son produit.
Cela consiste notamment à faire des recherches sur les problèmes récurrents des utilisateur, les modéliser sous forme de personas, imaginer les nouveaux parcours utilisateur pour qu'ils accomplissent leurs tâches, et s'assurer de ne livrer que des fonctionalités utiles puis de mesurer l'impact des livrables pour continuer à améliorer de manière incrémentale le produit.
Depuis mes sept années passées à Smile, SSII française leader dans les solutions Open Source, j'ai pu utiliser, contribuer à des centaines de projets open source qui sont au coeur de toutes mes propositions.
Les solutions open source sont bien sur en théorie gratuites à mettre en oeuvre (pas de licence) mais elles nécessitent une forte expertise. En contre-partie, toute évolution est possible en participant directement aux évolutions du code source.
L'écosystème JAMStack et les solutions SAAS, FASS Serverless auto-gérées concentrent toutes mes attentes en terme de solutions scalables, performantes et simples à mettre en oeuvre.
Aujourd'hui ma stack de prédilection est constituée de :
- NextJS pour le framework React open source le plus avancé de son temps
- Chakra UI pour la librairie de composants open source hyper-accessibles
- Vercel pour le déploiement en continu on the edge (CDN)
- Firebase pour la base de donnée temps réel
- Cloudinary en option pour la gestion des fichiers multimédias avec transformations à la volée
Dans le contexte de réalisation de MVP pour des startups, ces solutions légères et rapides à mettre en oeuvre contribuent au succès des équipes réduites qui souhaitent se concentrer sur leur produit et non sur des technologies à la mode (GraphQL, Kubernetes..) mais autrement plus couteuses à mettre en oeuvre.
Mon expertise principale est donc d'éviter l'over-engineering (KISS) tout en mettant en place les bonnes pratiques qui créent la valeur : documentation exhaustive du code, tests unitaires, choix des outils collaboratifs, rituels : revues de code, points de fin de sprint..
| LANGAGES | Javascript (ES7, Node.JS), TypeScript, Java (<=8), PHP |
| METHODOLOGIES | KISS |
| DRY | |
| Test Driven Development | |
| Agile : SCRUM, Design Sprints | |
| Conception Orientée Objet (Héritage, Polymorphisme..) | |
| Gestion des Risques | |
| COMPONENT FRAMEWORKS | React, Vue.js, Knockout.js, jQuery, bit |
| WEB FRAMEWORKS | Next.js, Gatsby |
| APIs, WEB SERVICES | Swagger (Open API), API Blueprint, Kong, Fastify |
| OUTILS COLLABORATIFS | Podio, Notion, Slack, Click Up, Figma |
| OUTILS DE DEPLOIEMENT | Buildify, Gulp, Webpack, Github Hooks |
| GESTION DES SOURCES | Git (Github, Bitbucket) |
| BASES DE DONNEES | NoSQL : Firestore, ElasticSearch, Redis, CouchDB |
| SGBDR : MySQL, Oracle, SQL Server | |
| OS | Linux (Manjaro, Debian, Ubuntu), Mac OS X |
- DEA Informatique spécialité : Compilateurs et IA
- Français (natif)
- Anglais (courant)
Projet : Outil B2B de partage de dossiers multimédias
Mission : Une société de production m'a demandé un outil sur mesure pour partager les dossiers de rushes, montages et extraits sonores lors des phases d'aller-retour intensives avec ses clients. Ces dossiers comportent des playlistes structurées de fichiers sons ou vidéos qui doivent pouvoir être consultés et jouées, mais aussi téléchargées (individuellement ou en groupe de fichiers zippés) avec la possibilité de convertir les assets dans le format audio/vidéo de son choix.
Pour gérer cette problématique technique, j'ai choisi le service Cloudinary et rajouté une surcouche simple pour uploader les dossiers de rushes déjà préparés.
En l'absence de Web designer sur ce projet (c'est un projet B2B donc le design est brut et simple) j'ai utilisé l'outil Figma pour prototyper le produit final et le partager en ligne.
Détails techniques :
- Prototypage avec Figma
- Le prototype est accessible en mode collaboratif et éditable en temps réel
- le guide de style des composants est exportable en CSS
- Utilisation de la librairie de composants Chakra UI
- Création d'un mini design système : typographie, thème de couleurs, boutons, formulaires
- Animations avec framer-notion
- Mobile friendly (pour les clients)
- Authentification avec Firebase
- Les profils administrateur accèdent au backoffice avec leur login habituel (compte Microsoft Office 365)
- Envoi de mails avec SendGrid
- Les templates de mail (au format Handlebar) sont directement stockés dans SendGrid
- Création d'icones SVG
- Les fichers SVGs sont transformés en composants React avec des propriétés dynamiques (ex: changement de couleurs sur hover..)
- Chemins SVG optimisés à la main
- Hébergement des médias avec Cloudinary
- Conversion des formats à la volée (ex: wav > mp3, m4a, ogg)
- Génération dynamique de fichiers compressés (.zip)
- 2 types de playlistes pour les fichiers multimédias basées sur
- Cloudinary Player pour les vidéos
- WaveSurfer pour les sons
- Réalisation d'un backoffice pour simplifier l'upload des assets
- Gestion de la hiérarchie des dossiers : client/projet/dossier
- Composant d'upload des fichiers en batch parallélisés avec 3 ré-essais en cas d'échec
| LANGAGES | Javascript |
| FRAMEWORKS, LIBRARIES | NextJS, Chakra UI |
| SERVERLESS SASS | Vercel, Sendgrid, Cloudinary |
| GESTION DE VERSION | Git (Github) |
| OUTILS COLLABORATIFS | Github, Slack |
Projet :
Mission : J'ai rejoint une petite équipe pour une startup oeuvrant dans le milieu de l'AI. Ma mission a été de développer from scratch en technologies open sources une version minimale (MVP) d'une application destinée à montrer les capacités d'aide au managers d'un système de recommandations de missions et d'évolutions de carrière des équipes.
Détails Techniques:
- Adoption du framework Next.js
- Portage de composants jQuery en React
- Création de nombreux composants graphiques personalisés basés sur :
- Google Charts
- Google Maps
- ChartJS
- composants SVG custom-made
- Scrapping de pages LinkedIn pour créer une base de CVs
- Développement de plusieurs micro-services
- langues parlées dans chaque pays du monde
- extraction des données d'un CV
- Mise en place de Kong comme API Gateway
- Utilisation de Storybook pour tester et présenter l'utilisation des composants React
| LANGAGES | Javascript |
| FRAMEWORKS, LIBRARIES | NextJS, Google Charts |
| CLOUD SERVICES | AWS, Vercel |
| IDE | VS Code |
| GESTION DE VERSION | Git (Gitlab, Bitbucket) |
| OUTILS COLLABORATIFS | Slack, Notion |
Projet : Revamping de la partie front d’un site de vidéos pour le public japonais
Mission : Structuration et conseils sur la rédaction des contenus, développement des composants HTML avec React, publication continue avec Gatsby + git hooks + Netlify .
Détails techniques :
- Paramétrage du CMS Forestry.io (git-based CMS)
- Paramétrage de la saisie des contenus
- Intégration avec le repo git hébergé chez bitbucket
- Intégration du build Gatsby
- Création des composants de présentation React
- Template des pages
- 5 types de sections (Hero Intro, 1 colonne, 2 colonnes, 3 colonnes, call to action) avec background personnalisable (image fixe ou parallaxe, overlay, dégradé..)
- Intégration de composants tierces (librairie Antd)
- Menu de navigation responsive, grille
- Création d’un plugin source pour Gatsby
- Parsing d’un arborescence de répertoires et fichiers Markdown+YAML Front-Matter
- Séparation des données pages et des données globales (site, navigation, seo, ..)
| LANGAGES | Javascript (Front + SSR) |
| FRAMEWORKS, LIBRARIES | Gatsby (a progressive web app generator), Ant Design |
| CMS | Forestry.io |
| IDE + OUTILS DEDIES | VS Code |
| GESTION DE VERSION | Git (Bitbucket) |
| OUTILS COLLABORATIFS | Bitbucket, Podio |
Projet : Reprise d’un forum de mathématiques et ajout d’un site de contenu de cours
Mission : Sur ce projet pour un client indépendant, j’ai du migrer un forum PHP vers nodeBB et utiliser un générateur de pages statiques pour créer le contenu fixe (fiches de cours, présentation du service)..
Pour la partie génération du site statique je souhaitais initialement utiliser un CMS de la JAMStack comme Netlify CMS ou Forestry, mais ils ne supportaient pas encore des structures de données hiérarchiques complexes. Je me suis donc reporté sur Statamic, le CMS à fichiers plats (Markdown+YAML) et un générateur de site statique node.js : Metalsmith avec le moteur de template Handlebars.
Détails techniques :
- Migration d’un forum NukePHP vers NodeBB
- Scrapping des pages de l’ancien site
- Transformation du HTML parsé en Markdown + Katex pour les images cgi représentant des formules mathématiques.
- Génération des pages statiques
- Création de plugins pour Metalsmith : gestion des variables globales, breadcrumbs
- Création d’un système de surveillance qui reconstruit les pages dès qu’un fichier contenu change dans le CMS
- Intégration d’un éditeur Markdown (SimpleMDE) avec prévisualisation dans Statamic (expressions mathématiques + intégrations de contenu riche)
- Création d’un bundle markdown proposant de nombreuses extensions : katex, table des matières, contenu riche comme Geogebra, Youtube Vimeo, ou PDFs..
- Optimisation du pré-rendu du composant SimpleMDE
- Intégration du composant SimpleMDE dans Statamic comme éditeur des zones de texte riche.
| LANGAGES | Javascript (Front + Static site generator), Markdown, YAML |
| FRAMEWORKS, LIBRARIES | Metalsmith, Handlebars, Less, Bootstrap |
| CMS | Statamic (CMS), Nodebb (forum) |
| PROTOTYPAGE | Bootstrap Studio, Bootstrap Live Customizer |
| JAMStack | Statamic (Markdown with YAML Front matter) + Metalsmith |
| GESTION DE VERSION | Git (Bitbucket) |
| OS | Linux Debian |
| OUTILS COLLABORATIFS | Podio |
Projet : Refonte totale du site de l’Union Nationale des Paysagistes
Mission : Sur ce projet au long cours, ma tâche était de développer l’infrastructure nécessaire du back-office pour plusieurs fonctionnalités clé (recherche géocentrique, consultation de documents), et de fournir également une série de composants front-end spécifiques.
Détails techniques :
- Implémentation d’une service de recherche full text géolocalisé sur la base des adhérents actifs
- Création de vues sur la base SQL Server du CRM
- Création de scripts de synchronisation chargés de mettre à jour la base ElasticSearch avec les fiches adhérents
- Utilisation des APIs Google Places et Google Maps pour pouvoir localiser les adhérents dans ElasticSearch à partir de leur adresse postale (souvent fautive)
- Implémentation du service de recherche multi-critère en node.js : API JSON créée sur server.js avec interrogation de la base ElasticSearch
- Réalisation d’une carte des régions de France interactive
- Création et optimisation de la carte en SVG
- Intégration dans une page avec synchronisation d’une liste des régions
- Création d’un service de recherche/consultation de documents PDFs. Les documents étant stockés dans des blobs (!) dans la base SQL Server du CRM. Il faut les indexer pour pouvoir lancer des recherches full-text dessus, et les rendre accessibles dans l’espace membre des adhérents.
- Utilisation du client SQL Server et de la librairie pdfkit pour extraire les PDFs des blobs et les indexer dans ElasticSearch avec leur contexte hiérarchique.
- Recréation d’une arborescence virtuelle des documents dans le système de fichier des assets du CMS pour pouvoir utiliser le composant d’exploration hiérarchique. Les fichiers créés ne sont que ces placeholders (des fichiers YAML pointant vers les vrais documents en base)
- Implémentation du service de visualisation des documents PDFs à la demande.
- Création de plugins PHP pour Craft CMS pour lancer et visualiser les résultats des scripts de synchronisation entre le CRM et le CMS.
- Intégration du composant Algolia Places en remplacement de Google autocomplete car l’API Google ne permettait pas de restreindre les lieux retournés à la France métropolitaine et à ses DOMs et territoires d’Outre mer.
| LANGAGES | Javascript (Front + services back) + PHP (CMS) |
| FRAMEWORKS, LIBRARIES | Flatiron (a decoupled, express-compatible framework), jQuery |
| CMS | Craft CMS |
| APIs | Google Places, Google Maps |
| SERVEURS APPLICATIFS | Server.js |
| IDE + OUTILS DEDIES | Inkscape, SQuirrel, MySQL Workbench, cron |
| GESTION DE VERSION | Git (Bitbucket) |
| SGBD | MS SQL Server (CRM) + ElasticSearch (search) + MySQL (CMS) |
| OUTILS COLLABORATIFS | JIRA + Bitbucket, Podio |
Projet : Développement du premier prototype de l’application mobile Tollens (qui deviendra plus tard my.tollens.com)
Mission : Sur ce projet, réalisé au sein d’une équipe de freelances, j’ai été chargé de développer le MVP d’une application mobile pour les chefs de chantier. Les fonctionnalités étaient : recherche de produits dans la gamme Tollens, ajout au panier, choix d’un magasin Tollens autour du chantier pour retirer la commande dès sa préparation, envoi et suivi de la commande via les web services du back-office. Le back-office a été réalisé en C# par un autre prestataire, sur les bases d’une API spécifiée en mode collaboratif avec API Blueprint et l’outil Apiary.
L’application mobile était en fait une vraie application web, controlée par un CMS (Statamic) mais totalement optimisée pour les clients mobiles grâce au framework App Framework d’Intel (une version allégée de jQuery Mobile). Ce type d’application mobile first allait devenir ce qu’on nomme aujourd’hui PWA : Progressive Web Application.
Détails techniques :
- Spécification d’une API B2B privée
- Création du modèle de données nécessaires au domaine de l’application
- Spécification de l’API REST grâce au langage API Blueprint
- Création des mocks grâce au service apiary.io
- Développement de l’application web mobile (PWA)
- Utilisation du framework mobile AppFramework d’Intel pour la navigation interne (une version light de jQuery Mobile)
- Utilisation du framework MVVM Knockout.js pour rendre les pages complexes (recherche produits + panier)
- Développement de composants webs réutilisables avec la librairie x-tag de Mozilla
- Intégration des itinéraires Google Maps pour guider l’utilisateur vers le magasin de son choix
| LANGAGES | Javascript (Front) + C# (back-office) |
| FRAMEWORKS, LIBRARIES | App Framework, Knockout.js, x-tag |
| CMS | Statamic |
| APIs | Google Maps |
| IDE + OUTILS DEDIES | Apiary |
| GESTION DE VERSION | Git (Bitbucket) |
| SGBD | MS SQL Server (back-office) |
| OS | Windows Debian |
| OUTILS COLLABORATIFS | Assembla |
Projet : Conception-prototypage d’une plateforme applicative (PaaS) pour l’Internet des Objets
Mission : J’ai intégré la startup Violet (créateur du lapin Nabaztag) pour m’occuper exclusivement de la mise en place d’une plate-forme applicatives pour les objets connectés.
A la suite de la banqueroute de Violet au moment ou une première version de la plateforme était déjà utilisée en interne pour créer de nouvelles applications, le projet a été repris à zéro par Mindscape mais subira le même sort.
Détails techniques :
- Architecture d’une Plateforme applicative dans le cloud (PaaS)
- Utilisation de nombreux design pattern : bus de messages, pool de workers, publishers/subscribers
- Spécifications des services internes de provisionnement et de runtime des applications, ainsi que des services publics (API REST)
- Spécification d’un langage de commandes extensible au format JSON : chaque classe d’objet connecté comme Nabaztag ou le Mirror peut implémenter tout ou partie des modalités d’expressions de base (envoi de message texte via mail, sms ou hangouts, lecture d’un fichier média) et avoir des propres modalités d’expression propres à sa classe (clignotement de LEDs colorées, chorégraphie pré-enregistrée..)
- Création d’un runtime d’applications JS sandboxé
- Utilisation de la librairie Rhino pour fournir un contexte d’exécution protégé (sandbox) aux applications, avec injection de dépendances.
- Création d’un toolkit JS pour simplifier l’envoi de messages à destinations de n’importe quel objet connecté.
- Possibilité d’avoir des applications statefull restant en mémoire dans Hazelcast (utile pour des applications temps réel)
| LANGAGES | Java (PaaS) + Javascript (applications) |
| FRAMEWORKS, LIBRARIES | Rhino, Hazelcast |
| ARCHITECTURE | Event Driven Architecture |
| CONCEPTION | Diagrammes de classes UML |
| GESTION DE VERSION | Svn puis Git |
| OS | Linux Ubuntu |
| METHODOLOGIE | Agile (sprints d’une semaine avec réunion de replanification tous les lundis) |