48h pour lancer 9Weeks

Guillaume
Frianbiz
Published in
8 min readSep 26, 2018

Les 13 et 14 septembre, l’équipe Frianbiz a réservé 2 jours pour préparer l’expérience 9 Weeks, une offre de développement et d’accompagnement de projets web et mobiles en 9 semaines.

Nous avions l’habitude d’organiser chaque mois au sein de l’équipe des “journées innovations” de 8 heures. Nous commencions le vendredi matin à 9 heure, puis après 1 à 2 heures de conception nous avions jusqu’à 17 heure pour développer un POC sur le sujet choisi. Mais cela ne permettait pas de sortir des sujets assez explorés pour envisager de les continuer. C’est suite à ce constat que nous avons décidé d’en changer le format, de le passer sur 2 jours, et de le prévoir plusieurs semaines à l’avance pour en lister les sujets potentiels pour permettre aux équipes de se former, de réfléchir et organiser au mieux les 16 heures de travail à venir.

Tableau des projets suite à l’organisation des équipes

5 équipes se sont formées dans le but d’innover sur les sujets suivants, ces 5 projets pouvant être connectés entre eux grâce au projet Back-Office 9 Weeks :

  • Site vitrine 9 Weeks : Améliorer la visibilité de l’offre ainsi que la compréhension que les clients pourrons en avoir.
  • Back-Office 9 Weeks : Améliorer l’expérience pour l’organisation des équipes et le suivi de projets.
  • Dashboard suivi de projets : Améliorer l’expérience des développeurs sur le suivi et l’organisation de leur planning de manière globale.
  • Time Tracker pour développeurs : Améliorer l’expérience des développeurs sur le suivi et l’organisation de leur planning de manière précise et plus personnelle.
  • Coding game : Améliorer l’expérience pour le recrutement des futurs développeurs de l’équipe.

Site vitrine 9 Weeks

Team : Benjamin, Lancelot, Arthur

Pour réaliser le site vitrine de notre nouvelle offre, et pour optimiser le temps disponible, nous nous sommes répartis la charge selon 3 pôles :

  • Arthur sur le design
  • Lancelot sur l’intégration des maquettes
  • Benjamin sur le contenu

Arthur a réalisé la page d’accueil de 9weeks sur Sketch et nous a partagé les maquettes via Invision.

Pour développer le site vitrine, Lancelot a utilisé les frameworks Laravel et Tailwind CSS

La page d’accueil du site vitrine a été découpée de cette façon :

  • Logo + baseline
  • Méthodologie 9weeks
  • L’équipe
  • Nos références
  • Contact

Arthur a réalisé un gros travail sur la mise forme des intervenants pour représenter les 9 semaines et Benjamin sur le discours, le but étant de mettre en avant la partie accompagnement des projets (méthodologie 9weeks).

Les deux premières semaines de l’offre 9 Weeks

Arthur a su proposer des maquettes très rapidement, ce qui a permis à Lancelot de démarrer l’intégration très tôt et d’ajouter quelques animations.

Laravel est un plus lorsqu’il s’agit de mettre en place rapidement un site web.

Back-Office 9 Weeks

Team: Loic Lefebvre, Frédéric Salley, Joe Boureslan

Pour le Back-Office de notre programme 9 weeks, nous avons opté pour le tout nouveau produit de Laravel, Nova.

Notre Back-Office à pour but de permettre la gestion des clients, de leurs projets et de partager avec eux l’avancement des différentes phases de ceux-ci au cours des 9 semaines d’accompagnement / développement, et Nova s’intègre parfaitement dans cet objectif, l’outil permet de créer rapidement et efficacement un Back-Office avec la possibilité de personnaliser différents aspects de ce dernier.

Capture d’écran du Back-Office généré par Nova

Le bilan à tirer de ce POC est que l’outil Nova s’adapte parfaitement au besoin du Back-Office du programme 9 weeks. Grâce à une simplicité d’utilisation et de personnalisation, une documentation claire et une librairie de package déjà conséquente, la réalisation d’un Back-Office en 2 jours à deux fut un succès.

Néanmoins, la personnalisation reste limitée, l’interface n’est pas responsive et les fichiers de traduction ne sont pas complets. Enfin, l’outil est encore trop récent pour avoir une importante communauté.

Mais Nova est un produit très prometteur et qui a besoin d’un peu de temps pour devenir entièrement opérationnel et riche.

Vous pourrez trouver plus de détails en lisant l’article détaillé sur ce sujet

Dashboard suivi de projets

Team: Lucas, Antoine Adam, Fidèle Palouki

Le but de ce projet est d’afficher sur un calendrier les projets sur lesquels chaque développeur a et va travailler à la demi-journée. Ces projets sont récupérés depuis notre Gitlab grâce à leur API, et nous leur affectons une couleur pour une meilleure visibilité.

Capture d’écran de dashboard

Lorsque nous planifions un projet, les estimations sont placées sur le calendrier. Cependant, il arrive que le réel diverge du prévisionnel, c’est pourquoi le développeur peut éditer sa timeline en coloriant directement avec sa souris après avoir sélectionné le projet sur lequel il a ou va travailler, sachant qu’un projet est sélectionné par défaut.

Développé en VueJS, il nous a été facile de mettre en place un projet sur cette techno. Le CLI mis à disposition par VueJS permet d’effectuer une installation rapide d’un projet vide avec les dépendances et la configuration souhaitée.

L’utilisation de TypeScript permet de garder ses repères pour un développeur Angular. Les composants sont simples à mettre en place mais la communication entre eux est assez confuse. Le système d’erreur est peu explicite ce qui rend difficile le débogage. Les fonctionnalités de notre projet n’ont pas permis de découvrir les avantages de la technologie comparé à Angular. Pour une personne ayant l’habitude d’Angular, se retrouver de nouveau face à des problématiques déjà surmontées donne l’impression de ne pas avancer et de tourner en rond. Cette techno n’a pas fait l’unanimité.

Time Tracker pour développeur

Team: Eric De Sa

Maquette de l’outil de Time Tracking

L’intention du projet est de remplacer nos reporting manuels :

  • Temps planifié / consommé / restant
  • Commentaires (afin de maintenir un “carnet de bord”)

Ces informations permettront de faire une projection sur le temps nécessaire à passer sur chaque projet d’ici la deadline prévue.

La saisie se fait via un outil intégré dans la menu bar Mac OS.
La ligne de temps passé se déplace selon le projet :

  • Plus on passe de temps sur le même projet, plus la ligne devient fine et stable
  • Plus on switch, plus elle oscille afin d’illustrer la perturbation engendrée

La saisie est individuelle.
Pour une vision globale, il faudra se connecter au “Dashboard suivi de projets” de Lucas, Antoine et Fidèle.

Les données collectées sont précises, mais l’export peut se faire au choix :

  • Au réel
  • Au prorata (ex. 7h de travail sur une semaine de 35 = 20% du temps passé; afin que le détail reste privé)

Cette application a été l’occasion de tester :

  • Three.js: LA lib qui permet de faire du WebGL, utilisé pour la représentation et l’animation de la timeline
  • Ionic 4: une upgrade majeure de la v3, dont les changements sont étonnamment transparents pour le développeur
  • Capacitor: la très attendue alternative à Cordova, qui permet d’empaqueter l’app dans des conteneurs iOS / Android et dans notre cas Electron

Coding Game

Team: Guillaume, Eric Falsquelle

Le but de notre projet était de faciliter les recrutements au sein de notre structure en donnant envie à nos futurs potentiels collègues de faire partie de l’équipe grâce à un jeu décalé, tout en nous permettant de les évaluer grâce à des questions techniques, des questions plus libres sur la façon d’appréhender le développement et la gestion de projets et pour finir des exercices de code. Nous avons donc décidé de développer un jeu rappelant les RPG retro, modélisant nos locaux et l’équipe entière, le tout sur navigateur en WebGL grâce à PixiJS pour l’environnement et en VueJS pour les interactions et les questions.

Capture d’écran du monde dans lequel le candidat va jouer

Le candidat doit, après une petite scène d’introduction, interagir avec les différents personnages représentant les membres de l’équipe, chacun lié à une technologie ou à des questions plus générales sur la gestion de projet. Avec les touches ZQSD, il peut se balader dans nos locaux et avec la touche ESPACE lancer une conversation.

Chaque conversation contient plusieurs questions sur un sujet, et libre au candidat de choisir d’y répondre. Il y a 3 types de questions, les questions ouvertes, où l’on doit répondre grâce à un champ texte simple, les QCM, où l’on doit choisir la réponse qui semble être la bonne, et les questions de code où un éditeur de texte est présent à droite de la question.

Capture d’écran d’un exercice de code

Une fois que le candidat pense avoir répondu à assez de problèmes, il peut retourner parler au premier personnage qui lui propose de postuler à Frianbiz grâce à un formulaire qui nous est envoyé et qui nous permettra d’évaluer le candidat.

Du côté de la technique, l’utilisation de PixiJS est vraiment simple et bien documentée, elle permet de créer rapidement, dans notre cas, des petits jeux avec peu de code sans trop se soucier des performances (Nous avions préparé les assets à l’avance pour ne pas passer la journée à dessiner, cela aurait été dommage). Et comme pour le projet Dashboard suivi de projets , VueJS nous a permis d’avoir un projet prêt à l’emploi en Typescript. Cependant nos interfaces étant beaucoup plus simples, nous n’avons pu confirmer les soucis qu’ils ont rencontrés.

Le coding-game est en ligne : https://coding-game.frianbiz.com

Bilan des 48 heures

Les 48 heures se sont avérées être très productives pour les équipes. Passer d’une journée où les sujets sont choisis le matin même à 2 jours organisés plusieurs semaines à l’avance nous a permis de sortir des projets et des POC beaucoup plus concrets et d’en faire des démos entre nous avec plus de temps. Ce temps nous a permis de prévoir les modifications à faire sur certains projets, sachant que la majorité des projets va être continuée et finalisée pour, qu’à terme, les projets soient inclus dans notre offre 9 Weeks ou à l’utilisation pour les développeurs de l’équipe.

Une équipe a eu plus de problèmes à cause de soucis causés par l’utilisation de VueJS, cela nous permet de prévoir des solutions de back-up pour éviter aux prochaines équipes de passer 2 jours dans la frustration.

Merci à toutes les équipes de s’être prêtées au jeu et d’avoir fourni tout ce travail. Merci aussi à Fidèle et à Arthur qui ne font pas parti de l’équipe Frianbiz et qui sont venus nous prêter main forte.

Si vous souhaitez rejoindre notre équipe, bonne nouvelle on RECRUTE !
Le meilleur moyen pour postuler c’est de participer à notre coding-game

--

--