Fabien JUIF

Javascript developer - Fullstack

35 ans - 13 ans d'expérience
Fabien est un développeur fullstack qui s'intéresse à tout, expert Javascript. Il est présent sur Youtube, et sur github où ses projets suivent tous une même phylosophie : tendre vers le code le plus propre possible et être KISS. Travailler avec Fabien c'est l'assurance d'un projet qui avance.

Expériences

Lead Développeur Frontend

DARVA, pour le compte de unirakun

January 2020January 2022

  • DARVA est une entreprise experte en solutions web et EDI (Echanges de Données Informatisés) basée à Niort et destiné à tous les acteurs professionnels de l'assurance.
  • Avec Nicolas REMISE (interne DARVA) et Guillaume CRESPEL, nous avons aidé le service BI à faciliter l'accès et la gouvernance des "données sinistres" pour les collaborateurs de DARVA ainsi que les acteurs des métiers de l'assurance.
  • Nous simplifions la visualisation et l'édition des structures de données assureurs grâce à une nouvelle interface graphique. Le but est de remplacer un vieil outil d'édition, et de permettre à tous les collaborateurs de reprendre possession de la connaissance liée à ces données.
  • Pour faciliter l'accès à cette connaissance nous nous devions de proposer une interface graphique ergonomique, réactive, et compréhensible. Nous nous étions appuyés sur des représentations graphiques bien connues comme des arbre (treeview) ou des graphes (radial). Et pour l'édition, quand cela semblait opportun, nous avons utilisé du drag'n'drop. Le tout en utilisant l’écosystème ReactJS.
  • Missions :
    • Atelier UX / UI
    • Développement Front-End de visualisation graphique du datalake
    • Développement Front-End d'édition du datalake
  • Technologies utilisées :
    • ReactJS, D3 et Layout homemade
    • NodeJS, Typescript, Apollo GraphQL, NestJS, Mongoose
    • Babel, Prettier, ESLint
    • Storybook, Cypress, Jest
    • Docker
    • Github

Lead Développeur Backend

DARVA, pour le compte de unirakun

June 2019December 2019

  • DARVA est une entreprise experte en solutions web et EDI (Echanges de Données Informatisés) basée à Niort et destiné à tous les acteurs professionnels de l'assurance.
  • DARVA souhaitant s'appuyer de plus en plus sur la masse de données qu'ils traitent, ils leur est nécessaire d'intégrer celles-ci dans un datalake accessible à tous les services.
  • Dans ce but, nous avons agis sur le stockage des données liées aux sinistres au travers d'un batch NodeJS. Il se doit d'être modulaire, réutilisable, et très performant puisque plusieurs gigaoctets de données doivent être traitées dans une courte fenêtre de temps.
  • Grâce aux streams NodeJS les données sont décodées, désérialisées, puis enregistrées en base de données MongoDB au fil de l'eau.
  • Afin de maitriser la performance du batch, nous avons mis en place des métriques permettant de suivre la vélocité de nos algorithmes tout au long de nos développements.
  • Une fois cette mission terminée, nous avons réalisé le POC d'une interface graphique permettant de mieux comprendre la structure des données concernées.
  • Missions :
    • Développement d'un Batch d'intégration de données
    • Algorithme et métriques de performance
    • Passage de connaissances aux équipes internes
    • Proposition d'un POC d'une interface graphique de naviguation dans la structure des données
  • Technologies utilisées :
    • Javascript, NodeJS, MongoDB
    • ReactJS, D3 et Layout homemade
    • Jest et tests de performances sur-mesure
    • Docker
    • Github

Développeur frontend

Metroscope, pour le compte de unirakun

July 2018March 2019

  • Metroscope est une startup, filiale du groupe EDF, composée d’une dizaine de personnes. Le Metroscope permet de déterminer rapidement les anomalies survenant sur les systèmes de refroidissement des centrales nucléaires.
  • Avec Guillaume CRESPEL, nous avons mis en place et nous avons continué à développer le produit Metroscope sur la partie Front-End, à distance. Une fois celle-ci sécurisée et en production nous avons formé nos successeurs afin qu’ils puissent être autonomes sur la stack mise en place.
  • Missions :
    • Développement Front-End
    • Atelier UX / UI
    • Aide au recrutement : entretiens et choix des successeurs
    • Formation des successeurs
  • Technologies utilisées :
    • ReactJS / Redux / k-ramel / react-vis / D3.js / JSS
    • Java 8 / SpringBoot
    • Webpack / Babel / ESLint
    • Cypress / Jest
    • Docker / CircleCI / Kubernetes / GKE (google cloud)
    • Github / Jira

Expert et formateur NodeJS

DARVA, pour le compte de unirakun

January 2018December 2018

  • DARVA est une entreprise experte en solutions web et EDI (Echanges de Données Informatisés) basée à Niort et destiné à tous les acteurs professionnels de l'assurance
  • J'interviens dans le service BI pour les aider à réaliser des scripts NodeJS de préparation de données dans leur datalake MongoDB.
  • Cette prestation était réalisée en partie à distance et j'intervenais quelques jours réparties dans l'année.
  • Missions :
    • Mise en place de l'architecture "monorepo" du projet de gestion des vues du datalake
    • Conseils et relectures du code produit par l'équipe BI
    • Formation NodeJS de l'équipe BI
    • Développement d'outils d'aide aux développements des scripts de préparation de données
    • Mise en place des outils de qualités : documentation générée (JSDoc), tests unitaires (Jest), tests d'intégration (Jest + Docker)
  • Technologies utilisées :
    • Github / Jenkins
    • NodeJS
    • MongoDB
    • Jest
    • Docker
    • Divers bibliothèques NodeJS

Consultant en architecture et gestion de projet

Metroscope, pour le compte de unirakun

March 2018June 2018

  • Metroscope est une startup, filiale du groupe EDF, composée d’une dizaine de personnes. Le Metroscope permet de déterminer rapidement les anomalies survenant sur les systèmes de refroidissement des centrales nucléaires.
  • Avec Guillaume CRESPEL, nous avons challengé leur MVP afin de produire une première version sur une stack solide et efficace tout en gardant en vue les besoins et contraintes d'une grosse structure comme EDF.
  • Missions :
    • Réflexion sur la structure de base de données
    • Réflexion sur les technologies adéquates Front-end et Back-End à utiliser
    • Mise en place du socle technique Front-End et Back-End
    • Mise en place d’une CI / CD
    • Atelier UX / UI
    • Aide à la gestion de projet et conseils en agilité
  • Technologies utilisées :
    • ReactJS / Redux / k-ramel / react-vis / D3.js / JSS
    • Java 8 / SpringBoot
    • Webpack / Babel / ESLint
    • Cypress / Jest
    • Docker / CircleCI / Kubernetes / GKE (google cloud)
    • Github / Jira

Expert développement Frontend

Sparklane, pour le compte de unirakun

February 2018March 2018

  • L'équipe de développement de Sparklane (située à Nantes), est principalement composée de développeur backend (Java/Go). Leur stack frontend était vieillissante. Sparklane a sollicité uni rakun pour les aider à migrer leur stack frontend.
  • Une des contrainte était de pouvoir faire cette migration par itérations, les deux versions de l'application devaient donc co-exister. Nous avons fait le choix de conserver l'aspect graphique, et de faire des ponts AngularJS vers React, et inversement
  • Missions :
    • Développement d'une architecture technique permettant la migration d'une application front AngularJS vers une stack React / k-ramel
    • Création de composants graphiques permettant la visualisation de leurs données. (data-viz)
    • Formation continue de l'équipe de développement Sparklane sur cette nouvelle stack via des codelabs
    • Réponses techniques à de fortes attentes sur cette migration AngularJS (1) vers ReactJS
  • Technologies utilisées :
    • react-vis
    • ReactJS
    • k-ramel
    • SaSS
    • create-react-app
    • docker
    • nginx
  • Contributions opensources :
    • k-ramel - gestion de l'état de votre application, basé sur Redux et inspiré de CycleJS
    • k-intl - internationalisation rapide de l'application
    • hoc-little-router - HoC de configuration du router avec Redux

Architecte & Développeur fullstack

ICES, pour le compte de Zenika

October 2017January 2018

  • L'ICES (Institut Catholique d'Etudes Supérieures) a besoin de refondre entièrement leur SI. Cela comprend la gestion des prospects, des étudiants, de la facturation, des salles, des notes, etc. Dans ce cadre j'ai mis en place l'architecture logicielle, à base de micro services NodeJS et d'une gateway GraphQL, hébergé sur le cloud Google (kubernetes).
  • Technologies utilisées :
    • Tests d'intégration
      • Cypress
      • Docker
    • Frontend
      • mobx-state-tree (j'ai fais une vidéo sur ce sujet) pour avoir un store immutable réactif
      • ReactJS pour gérer les vues et les composants graphiques
      • Tous les outils habituels de qualités (Jest/ESLint)
    • Gateway / Orchestrateur / Aggrégateur
      • GraphQL pour le contrat de service (protocole)
      • NodeJS en support du GraphQL puisque beaucoup d'I/O
    • Backend
      • NodeJS en micro service
      • Koa2 puisque basé sur l'async/await JS
      • Client logiciel PostgreSQL
    • BDD: PostgreSQL pour avoir accès aux transactions, mais en utilisant des colonnes `json` pour avoir une base de données schemaless, et donc rapide à maintenir.
    • Déploiement: kubectl de Google

Lead Développeur Frontend

Santéclair, pour le compte de Zenika

February 2017September 2017

  • Santéclair, réseaux de soins, souhaite moderniser sa relation avec ses clients et cela passe par de nouvelles applications avec des écrans plus travaillés. Le but principal de la mission est de de former leur lead développeur Front-End sur les technologies liées à ReactJS et Redux, puis de l’aider à mettre en place un socle technique stable et facilement maintenable pour développer toutes les applications
  • Missions :
    • Mise en place d’une architecture frontend réactive et évolutive basée sur une architecture orientée composants proposée par ReactJS (produit Facebook) et une approche unidirectionnelle et événementielle de traitement des données avec Redux et redux-saga
    • Mise en place d’une intégration continue (CI) basée sur Jenkins et Docker
    • Mise en place d’un déploiement continu (CD) basée sur Docker
    • Outils de construction et de tests
    • Création d’une image Docker
    • Création de scripts bash d’aide à la construction de l’application à ses différents stades de maturité
  • Technologies utilisées :
    • ReactJS / Redux / redux-saga
    • Webpack / Babel / ESLint
    • Jest
    • CircleCI / Github
    • Docker
  • Contributions opensources :
    • k-redux-factory - aide à la création de reducers, actions et sélecteurs Redux
    • kriya - bibliothèques de composants React-Redux
    • hoc-little-router - utilitaire de configuration de redux-little-router,
    • roadhog - utilitaire redux-saga d'appels d'API
    • k-redux-saga-tester - utilitaire de test des sagas redux-sagas

Développeur Full Stack

M/COMM, pour le compte de Zenika

June 2016February 2017

  • M/COMM, agence en conseil et communication, souhaite réaliser une application permettant de mettre en avant sa spécificité : son usine d’impression. Pour cela une startup a été créée : Cinquième de Couv.
  • Cinquième de Couv est une application où il est possible d’éditer un magazine en ligne et de le personnaliser grâce à une sélection de près de 20 thèmes, 35 palettes de couleurs et 100 possibilités de mise en page. Il suffit alors d’ajouter son contenu et de demander une impression !
  • Cette application s’adresse à des particuliers, des collectivités, et des entreprises. Elle se doit d’être très simple d’accès, rapide, et robuste.
  • L’équipe se compose de 8 personnes, et la méthode Scrum est utilisée avec des sprints de deux semaines.
  • Missions :
    • Mise en place d’une architecture front-end réactive et évolutive basée sur l’architecture composants proposée par ReactJS (produit Facebook) et de Redux, l’approche unidirectionnelle de traitement des données
    • Mise en place d’une intégration continue (CI) basée sur Jenkins et Docker
    • Mise en place d’un déploiement continu (CD) basée sur Docker
    • Outils de construction et de tests
    • Construction de l’application sur les briques ReactJS et Redux
    • Création d'images Docker
    • Création du docker-compose pour lier backend, frontend et base de données
    • Création de scripts bash d’aide à la construction de l’application à ses différents stades de maturité
    • Mise en place de conventions de développement front-end
    • Mise en place d’un module rendu PDF côté serveur (via React et NodeJS)
  • Technologies utilisées :
    • Github / Jenkins / Docker
    • ReactJS / react-router / react-form / react-cropper / draftjs
    • Sass
    • Redux / redux-devtools / redux-react-router / redux-thunk
    • Mocha / Sinon / Chai
    • Webpack / Babel / ESLint
    • Spring (boot, security, data)
    • Java 8
    • MongoDB

Développeur Frontend

MAIF, pour le compte de Zenika

April 2016June 2016

  • La MAIF, assurance mutuelle, souhaite rapprocher ses clients de leurs agents en charge de la qualification et du suivi des sinistres.
  • Le POC a comme ambition de montrer à ces agents qu’il est possible de travailler dans un environnement plus souple, réactif et moderne. Ce projet se concentre uniquement sur la partie « Déclaration de Sinistre » et présente différentes vues simples à appréhender et à utiliser.
  • Missions :
    • Mise en place d’une architecture frontend réactive et évolutive basée sur l’architecture composants proposée par ReactJS (produit Facebook) et de Redux, l’approche unidirectionnelle de traitement des données
    • Mise en place d’une intégration continue (CI)
    • Mise en place d’un déploiement continu (CD)
    • Outils de construction et de tests
    • Création d’une image Docker
    • Utilisation de styles propres aux composants (sans collision de style) en Sass
  • Technologies utilisées :
    • Github / CircleCI / AppEngine
    • ReactJS / react-router
    • Sass
    • Redux / redux-thunk
    • Mocha / Sinon / Chai
    • Webpack / Babel
  • Contributions opensources :
    • hoc-react-loader, utilitaire de chargement d'un composant graphique avec son indicateur de chargement
    • hoc-react-animate, utilitaire d'animation de composants ReactJS,

Développeur Frontend

GE My Money Bank, pour le compte de Zenika

March 2016May 2016

  • Création d'un front-end avec les technologies Facebook pour une nouvelle application web de la branche "Money", solutions de financement pour les particuliers.
  • Missions :
    • Mise en place du socle technique
    • Mise en place du socle de tests
    • Mise en place de la CI/CD avec les technologies cloud
  • Technologies utilisées :
    • ReactJS / Redux
    • Webpack / Babel / ESLint
    • Mocha / Chai / Sinon
    • CircleCI / Github
    • Docker

Chargé de projet technique (Java/AngularJS)

CGI

November 2014March 2016

  • Missions principales :
    • Architecte et PO d'une solution interne de gestion de projet au sens large (KPI, imputations, gestion des congés, etc) (Java et AngularJS)
    • Gestion d'équipe(s)
    • Support technique (Java/AngularJS) à l'équipe
    • Planification, suivi et coaching
    • Chiffrage, macro-chiffrage, maintient d'un plan de charge cohérent
    • Création de KPI et reporting à mon directeur de projet
    • Propositions constantes d'améliorations :
      • du bien être au travail
      • de la performance de notre projet
      • de la communication entre les équipes
    • Mise en place de méthodologie SCRUM et Kanban
    • Mise en place de communications visuelles construites avec l'équipe et propre à l'équipe

Concepteur fonctionnel et technique

CGI

April 2012October 2014

  • Je suis intervenu comme concepteur fonctionnel et technique sur la plateforme d'intégration des attestations employeurs dématérialisées. J'ai participé au passage de la N4DS vers la DSN. J'ai fais du suivi et du conseil technique dans le cadre de cette mission.
  • Technologies utilisées :
    • OSB (Oracle Service Bus)
    • J2EE
    • JSP + Javascript
    • Hibernate
    • Orika
    • Junit
    • Oracle

Développeur Java

CGI

September 2010March 2012