Dev

Les technologies au service de la performance et de la maintenabilité

Cette semaine nous allons nous attarder sur les technologies que nous utilisons dans notre extension. Que ce soit dans le back, le front, chacune des technologies, langages, outils, ont été choisis dans un but bien précis.

Avez-vous remarqué l’évolution des technologies ces dernières années ? Avec quelle vitesse tout évoluait.

Avant il suffisait de connaitre HTML, CSS, PHP,  JS et un peu de jQuery. Aujourd’hui on se retrouve avec des préprocesseurs, des outils de compilation d’application, des frameworks…

Dans toutes les étapes de la conception nous avons du faire des choix techniques et technologiques pérennes et utiles : nous n’avons pas fait le choix React « parce que c’est la mode » mais bel et bien car la librairie nous apportait un confort d’écriture de code, en gardant à l’esprit 2 critères majeurs  :

  • la maintenabilité : écrire du code propre, réutilisable, logique et lisible afin (on espère) de ne pas avoir  à tout réecrire dans 3 ans.
  • les performances : Notre extension ne doit pas ralentir les performances dans l’administration, et encore moins côté front-end.

Nous essayons au maximum d’adopter la logique composants en front end : des modules indépendants, réutilisables, facilement interopérables.

Côté Back end, nous avons opté pour de la POO et une approche SOLID.

Voici un aperçu des techniques, outils et technologies que l’on a utilisé jusqu’à maintenant :

Maquettes, design, UX

Au début du projet nous avons utilisé Sketch pour réaliser nos premiers mockups, que nous avons ensuite exposé sur Invision afin de créer des zones cliquables et simuler le passage d’une page à l’autre.

Nous avons aussi réalisé une moodboard Invision pour regrouper nos inspirations de couleurs et styles pour l’interface de l’extension mais aussi pour donner une orientation à Matthieu, qui a réalisé notre logo.

Assez tôt dans le projet j’ai basculé sur du design dans le navigateur, c’est-à-dire designer et coder le HTML en même temps (c’est une technique efficace quand on sait où on va, aussi je déconseille de le faire sur un projet client).

Front End

Du côté JS

Nous utilisons React dans la partie éditeur de campagne. La librairie nous apporte le nécessaire pour gérer des modifications de DOM en temps réel, gérer des composants et leurs interactions. React est vraiment en train de s’imposer comme un standard et je pense qu’on ne se mouille pas trop en l’utilisant ici.

Nous ne l’avons pas utilisé sur toute l’extension cependant. On a conservé des changements de page PHP traditionnels pour rester harmonieux avec WordPress. Cela permet aussi de proposer des hooks à toutes les étapes.

Côté Front end, nous devons gérer les interactions des Optin forms, qui dans DeliPress vont être personnalisables et se présenter de diverses manières (barre fixe de haut de site, bloc après le contenu, fenêtre popup). Même leur  comportement sera  personnalisable. Par exemple dans le cas de la Popup, vous pourrez décider qu’elle s’affiche au bout d’un moment ,après avoir visité un certain nombre de pages, au scroll, ou quand votre souris s’apprête à quitter la page (exit intent).

Nous avons opté pour Preact, qui est une librairie qui s’inspire des fonctionnements de React (dont la rapidité du virtual DOM) mais qui est 10 fois moins lourde à charger.

Nous mettons à profit l’ES6 pour bénéficier des dernières avancées de JS mais on compile avec Babel pour assurer la rétrocompatibilité avec les quelques navigateurs à la bourre.

Du côté CSS

Côté front end nous avons utilisé Stylus comme préprocesseur CSS. Même s’il n’occupe que 2% de parts de marché (face à Sass et Less) j’aime beaucoup Stylus car il permet d’enlever toute la ponctuation ({ : ; }) et permet un code très clair.

J’ai également opté pour la notation BEM (Block, Element, Modifier) qui permet d’éviter des conflits d’héritage CSS et un nommage plus sain des classes des composants.

Toutes nos classes sont echappées avec un nommage cohérent qui commence toujours par delipress__ afin d’éviter les conflits avec d’autres extensions.

Nous allons très surement utiliser Styled Components pour Preact, afin de pouvoir facilement transmettre les styles personnalisés à nos optin forms.

Niveau CSS nous avons utilisé les mises en page avec Flexbox, que l’on peut sereinement utiliser depuis 2015. La compatibilité est excellente d’après CanIUse.

Back end

Scoop : on a utilisé PHP ! Au delà des évidences nous sommes partis sur un framework de plugin qui a été conçu par Thomas et intitulé SkyPress.

C’est un framework de base pour concevoir des extensions avec tous les principes SOLID en action (des services, des interfaces…  des trucs complexes quoi).

Nous avons également utilisé MJML pour compiler nos campagnes en un code compatible et responsive à la fois.

Outils

Pour compiler les fichiers, traduire les langages, préparer une structure saine pour notre extension nous avons utilisé des logiciels et outils  :

Brunch nous permet de compiler les fichiers Stylus en vrai CSS. Il nous offre également du Hot Code Reloading qui permet un rafraichissement automatique du navigateur lors de changements dans le code JS ou CSS. Il nous permet également de gérer nos dépendances avec d’autres librairies.

On songe basculer sur Webpack à l’avenir si le besoin se fait ressentir.

Comme je l’ai dit précédemment, on utilise également Babel pour compiler notre JS écrit en ES6 afin d’assurer la compatibilité ES5.

Côté PHP on utilise Composer pour gérer les dépendances avec les librairies, ainsi que Autoload pour charger automatiquement tout ce petit monde.

Nous utilisons également Grunt, notamment pour automatiser le processus d’internationalisation de DeliPress à l’aide de Grunt WP i18n.

Enfin, nous utilisons Yarn pour la gestion de nos paquets à la place de NPM car il est réputé être plus rapide que ce dernier et mieux optimisé.

Logiciels

Et enfin, voici quelques logiciels qui nous permettent de collaborer.

Tout d’abord, nous versionnons notre projet avec Git. Il serait impossible à ce niveau de travailler sans.

Comme nous travaillons en remote, nous utilisons Slack pour communiquer tout au long de la journée. Quand nous avons besoin de nous avoir en call ou partager notre écran, on utilise Sylaps. Pas besoin de compte, de se connecter, d’installer quoi que ce soit. Merci le Web RTC.

Pour organiser notre progression, nous utilisons l’ami Trello qui nous permet d’organiser nos idées, les fonctionnalités, donner des priorités et observer la progression de tout ce petit monde !

Et enfin pour coder, chacun de nous 3 a sa propre préférence : Sublime, Atom ou encore Visual Code Studio. Et bien entendu Codepen lorsque l’on a besoin de se partager un petit bout de code.

A l’avenir

Comme je l’ai dit au début, le paysage du web a énormément évolué ces dernières années. Nombre des outils listés ici sont encore assez récents. J’ai mis les liens vers les sites officiels de chacun d’entre eux, n’hésitez pas à aller les découvrir ou redécouvrir, et les essayer dans votre prochain projet si le besoin s’en fait sentir.

Il nous reste du chemin et nous aurons très prochainement de nouveaux besoins : app pour gérer le support, les bugs, les licences… On refera un point dans quelques temps sur ces sujets.

A très vite pour des nouvelles du projet !

Recevez les derniers articles, un accès anticipé à la beta et suivez la création de DeliPress.

Inscrivez vous à la newsletter !