All U Need Is Pizza 🍕

Damien Chazoule
Nov 12 · 13 min read

Il y a quelque temps de cela (mi-Septembre), je me suis mis au dĂ©fi de coder pendant 100 jours consĂ©cutifs. À la diffĂ©rence du challenge #100DaysOfCode, je n’ai pas publiĂ© mon avancement sur Twitter. Pendant cette durĂ©e, j’ai expĂ©rimentĂ© plusieurs frameworks (frontend / backend) sous un thĂšme commun : la crĂ©ation, la lecture, la mise Ă  jour et la suppression de
 pizzas !

NB : Mon amour pour la gastronomie Italienne à eu raison de moi sur ce coup-là


ArrivĂ© Ă  mi-chemin de mon objectif, je vous explique dans cet article ma dĂ©marche, ainsi que les choses que j’ai dĂ©couvertes en Ă©prouvant les frameworks (et librairies) frontend suivants : Angular, React, Svelte et Vue. Mon point de vue sera orientĂ© composant du fait des technologies utilisĂ©es.

Le rĂ©sultat final est disponible ici. Voyez cet article comme un retour d’expĂ©rience.

Introduction

Avant d’aller plus loin, et surtout avant d’ouvrir mon IDE favori (VSCode), il m’a fallu trouver une idĂ©e. J’avais dĂ©jĂ  pour objectif de tester plusieurs frameworks et / ou langages (aprĂšs tout, je suis un passionnĂ©, je mange du code matin, midi et soir), il ne me manquait donc plus que le thĂšme


Au dĂ©but, je pensais rĂ©aliser une sĂ©rie de compteurs, mais l’idĂ©e Ă©tant trop classique, j’ai choisi de l’abandonner. Quelques jours plus tard, lors d’un passage dans une pizzeria, au moment de faire mon choix, je me dis : “Tiens ! Cela serait gĂ©nial de pouvoir crĂ©er ses propres pizzas !”

La voilĂ  mon idĂ©e : un CRUD ayant pour sujet principal la pizza. L’idĂ©e du CRUD n’est pas trĂšs originale
 Cependant, il m’a permis de mettre au point plusieurs boilerplates (certains constituĂ©s de routes, d’autres implĂ©mentant un paradigme de programmation rĂ©active) pour mes dĂ©veloppements futurs. Autre point important, j’ai dĂ©cidĂ© de coder une sĂ©rie d’applications isomorphes en termes de rendu graphique, c’est-Ă -dire que le visuel devra ĂȘtre le mĂȘme, peu importe le framework (ou la librairie) utilisĂ©.

Design

PremiĂšre Ă©tape : le design ! Le style est un Ă©lĂ©ment capital lors de la crĂ©ation d’une application web. N’étant pas UI/UX, j’ai optĂ© pour un design simple avec un soupçon de Material Design (pour les couleurs). J’ai modĂ©lisĂ© les diffĂ©rents Ă©crans grĂące au super outil qu’est Figma. Je n’utilise pas pleinement les fonctionnalitĂ©s de l’application, nĂ©anmoins, l’outil n’a rien Ă  envier Ă  Sketch. Petite parenthĂšse : Figma peut ĂȘtre agrĂ©mentĂ© de fonctionnalitĂ©s (sous forme de plugins) dont une indispensable : SVG To JSX ; extrĂȘmement pratique pour un dĂ©veloppeur React !

Maquettes réalisées avec Figma

Bref, une fois les maquettes rĂ©alisĂ©es, je me suis offert une piqĂ»re de rappel sur le CSS. ParticuliĂšrement sur les notions de flexbox et de grid layout que je ne maĂźtrisais pas pleinement (CSS3 Ă©tant modulaire, on en apprend quasiment tous les jours). J’ai rĂ©ellement commencĂ© Ă  coder Ă  partir de ce moment-lĂ  : ouverture de VSCode, crĂ©ation d’un fichier .scss, mains sur le clavier et go !

SĂ©duit par le modĂšle atomique de Brad Frost, j’ai Ă©crit les diffĂ©rentes parties de mon application en suivant ce principe de dĂ©composition : atomes, molĂ©cules, organismes, etc
 Ainsi, vous trouverez facilement les couleurs en tant qu’atomes, ou encore les “briques” qui vont composer mon application (telle que l’élĂ©ment de liste) en tant qu’organismes. Le modĂšle atomique est un concept vraiment intĂ©ressant, et idĂ©al pour organiser son code lorsqu’on rĂ©alise un projet de Design System. Encore une fois, je ne suis pas UI/UX, mon organisation n’est donc pas parfait, mais suivre ce modĂšle m’a permis d’optimiser le dĂ©coupage de mes fichiers SASS.

Et voilĂ , quelques lignes de code plus tard (et quelques modifications de maquettes aussi), j’ai enfin une application statique complĂšte prĂȘte Ă  ĂȘtre “dynamisĂ©e”.

Architecture

DeuxiĂšme Ă©tape : l’architecture du code ! Comme expliquĂ© prĂ©cĂ©demment, je souhaite crĂ©er des applications isomorphes les unes des autres. J’ai poussĂ© le concept un peu plus loin en essayant d’avoir une organisation commune. Mis Ă  part pour le framework Angular oĂč l’organisation du code est dĂ©jĂ  profondĂ©ment dĂ©finie Ă  l’initialisation, j’ai rĂ©ussi Ă  obtenir l’architecture applicative suivante :

+-- public             # 'index.html' Is Here
+-- src
+-- assets # Resources Like Fonts
+-- components
+-- layers # Dumb Components
+-- containers / views # Smart Components
+-- services
+-- utils # Utility Methods
+-- index.(s)css # Global Styles
+-- index.js / main.js # App Entry Point
+-- pizzas.json # Data
+-- .prettierrc # Formatter Config
+-- package.json

Les habitués de React et de Vue reconnaßtront ce mode de fonctionnement. Pour les autres, voici un bref récapitulatif du contenu des différents dossiers :

  • public : Fichiers statiques dont l’index.html et le favicon.png ;
  • assets : Ressources appelĂ©es par le code, telles que les polices de caractĂšres ;
  • components : Composants du projet dĂ©coupĂ©s selon le modĂšle Smart Vs. Dumb (voir plus bas) ;
  • services : MĂ©thodes faisant les appels asynchrones permettant notamment de rĂ©cupĂ©rer des donnĂ©es ;
  • utils : Autres mĂ©thodes utilitaires.

NB : En Angular, le dossier services est propice Ă  accueillir de “vrais” services qui seront ensuite injectĂ©s dans l’application.

DĂ©veloppement

Maintenant que nous avons la structure Ă  l’esprit, lançons-nous dans le dĂ©veloppement de composants. Pour ce faire, et afin d’éviter la redondance de code, j’ai optĂ© pour un dĂ©coupage en deux parties : Smart Vs. Dumb. Les Dumb Components (ou composants de prĂ©sentation) sont dĂ©pourvus de logique mĂ©tier, et sont souvent associĂ©s Ă  une portion de style pour pouvoir mieux maĂźtriser le rendu graphique. Au contraire, les Smart Components (parfois appelĂ©s “conteneurs”) consomment les composants de prĂ©sentation tout en y injectant des donnĂ©es. Pour ce projet de CRUD, j’ai choisi de crĂ©er 3 vues qui rĂ©fĂšrent directement Ă  3 composants de type “conteneurs”. Le reste de mes composants seront dĂ©diĂ©s au visuel.

NB : Dan Abramov explique plus en dĂ©tail ce mode de fonctionnement dans son article. Bien qu’il ait changĂ© de point de vue rĂ©cemment, je persiste Ă  utiliser ce modĂšle (notamment avec d’autres frameworks orientĂ©s composants) afin de conserver des composants de taille acceptable.

React

TrĂšs vite, je me suis orientĂ© vers React pour la rĂ©alisation de ma premiĂšre application web. J’ai l’habitude de travailler avec la librairie de Facebook depuis plusieurs annĂ©es. La difficultĂ© de la syntaxe .jsx disparaĂźt rapidement, offrant Ă  son dĂ©veloppeur plus de lisibilitĂ© dans les composants qu’il construit.

Pour crĂ©er un projet React, rien de mieux que de faire appel Ă  l’utilitaire CLI create-react-app. Cette dĂ©pendance permet de gĂ©nĂ©rer une structure de code stable et flexible (embarquant l’indispensable bundler Webpack) de maniĂšre trĂšs simple.

Block.jsx

On peut lire ce premier composant React, de la maniĂšre suivante : c’est un composant stateless qui prend 3 propriĂ©tĂ©s, dont une (children) qui permet de dĂ©lĂ©guer du contenu dans ce mĂȘme composant. Ici Block.jsx est un composant de prĂ©sentation, et n’a donc pour vocation que de mettre en forme les donnĂ©es qui lui sont passĂ©es. La notion stateless fait rĂ©fĂ©rence au fait que le composant n’est pas Ă©crit de maniĂšre explicite en Ă©tant Ă©tendu d’une instance de composant de React (sinon cela aurait Ă©tĂ© un composant dit stateful).

List.jsx

Dans ce second composant (toujours Ă©crit de maniĂšre stateless), on remarque deux choses : l’usage de plusieurs composants de prĂ©sentation (dont notre Block.jsx) et l’omniprĂ©sence des hooks. Le “conteneur” List.jsx ci-dessus, va se charger de faire appel aux Dumb Components, et de les enrichir d’un ensemble de donnĂ©es.

Apparaissant avec la version 16.8.0, les hooks permettent de rajouter de la logique aux composants qui en sont dĂ©pourvus (c’est-Ă -dire les composants stateless). En optant pour ce principe, React a clairement dĂ©finit son appartenance au paradigme de programmation fonctionnelle, se dĂ©tachant ainsi des autres frameworks orientĂ©s composants.

NB : Dans la suite de cette article, on s’amusera Ă  comparer les composants Block et List (notamment en termes de syntaxe) avec les autres librairies prĂ©sentĂ©es ci-dessous.

Vue

En parallĂšle de React, j’ai rapidement (re)dĂ©veloppĂ© cette mĂȘme application de CRUD avec le framework Vue. Le framework communautaire n’a rien Ă  envier de ses principaux concurrents : Angular et React. Fonctionnellement, il est Ă  mi-chemin entre ces deux derniers, avec notamment les notions de directives ou encore de DOM virtuel.

Tout comme React, pour crĂ©er mon projet, j’ai utilisĂ© l’outil CLI de Vue. À la diffĂ©rence de son homologue de chez Facebook, il permet d’agrĂ©menter la structure du projet de dĂ©pendances optionnelles (telles que SASS, TypeScript on encore Prettier). Cerise sur le gĂąteau, tous ces choix peuvent s’effectuer graphique ! En effet, dans les derniĂšres versions, @vue/cli est capable dâ€™â€Ă©muler” le package.json.

Block.vue

Contrairement au framework Ă  la librairie prĂ©cĂ©dente, on retrouve explicitement du HTML et du JavaScript. La force de Vue rĂ©side dans l’écriture de SPCs (Single Page Components). La syntaxe des fichiers .vue permet au dĂ©veloppeur d’avoir accĂšs au HTML, au JavaScript (et mĂȘme au CSS) dans un seul et mĂȘme fichier (par composant bien sĂ»r).

En mettant de cĂŽtĂ© la syntaxe, on s’aperçoit que Block.vue possĂšde maintenant 2 propriĂ©tĂ©s (un numĂ©rique et une chaĂźne de caractĂšres comme prĂ©cĂ©demment). Cette fois-ci, le passage de contenu s’effectue grĂące Ă  l’élĂ©ment <slot />. Il est d’ailleurs possible de nommer ces Ă©lĂ©ments afin de dynamiser plusieurs portĂ©es du composant de prĂ©sentation.

List.vue

Toujours en faisant abstraction de la syntaxe. On remarque Ă  nouveau l’usage “massive” de composants de prĂ©sentation dans la partie dĂ©diĂ©e au template HTML. Vue hĂ©rite du fonctionnement par directives d’AngularJS. Ainsi on retrouve les notions v-bind et v-on qui permettent respectivement d’évaluer du code, et de jouer un Ă©vĂ©nement du DOM. Dans l’exemple ci-dessus, j’utilise des raccourcis :

  • : Ă©quivaut Ă  la directive v-bind
  • @ Ă©quivaut Ă  la direction v-on

Pour les adeptes d’Angular, Vue conserve le principe de binding bidirectionnel grĂące Ă  la directive v-model. Monter en compĂ©tence sur cette technologie est plus facile qu’il n’y parait. La difficultĂ© de Vue rĂ©side (peut-ĂȘtre) dans l’utilisation du this pour la partie JavaScript.

Le framework crĂ©Ă© par Evan You a encore de beaux jours devant lui puisqu’il reprĂ©sente une vĂ©ritable alternative Ă  la librairie de Facebook. De plus, sa communautĂ© attend de belles choses d’ici 2020, avec notamment la prochaine version majeur de Vue.

NB : Bien que la popularité de ce framework soit faible face à React, il représente toutefois une belle réussite de projet open-source. En effet, depuis le 3 Novembre 2019, Vue est (enfin) passé devant Angular en termes de téléchargements sur NPM.

Svelte

AprĂšs React et Vue, j’ai dĂ©cidĂ© de me confronter Ă  un challenger : Svelte ! D’aprĂšs Rich Harris (son crĂ©ateur), Svelte se dĂ©finit non pas comme un framework, mais plutĂŽt comme un compilateur. Il est aussi radicalement plus lĂ©ger que ses prĂ©dĂ©cesseurs, et se prĂŽne mĂȘme comme Ă©tant plus performant. À l’inverse de React et Vue, qui utilisent un DOM virtuel pour calculer les changements et (re)rendre seulement la partie du DOM impactĂ©, Svelte agit directement sur le DOM tout en restant rĂ©actif en cas de mutations de donnĂ©es.

Pour dĂ©buter un projet avec Svelte, il suffit de cloner un template disponible sur le dĂ©pĂŽt dĂ©diĂ© et de rapatrier les dĂ©pendances via le gestionnaire de paquets (la librairie degit peut faire ce travail pour vous). En gĂ©nĂ©ral, les templates sont configurĂ©s pour fonctionner avec le bundler RollupJS Ă  l’instar des autres CLI qui initialisent leurs projets respectifs en embarquant Webpack.

Block.svelte

La syntaxe du composant Block.svelte ci-dessus n’est pas si diffĂ©rente de Vue. En effet, on s’aperçoit trĂšs vite des similitudes avec les SPCs de Vue. À la diffĂ©rence que Svelte arrive Ă  s’absoudre de l’usage du this. Depuis l’arrivĂ©e de la troisiĂšme version du compilateur, plus besoin de se soucier du this.

Tout comme Vue, le composant de prĂ©sentation Block.svelte, contient 2 propriĂ©tĂ©s exposĂ©es au composant parent via le mot-clĂ© export, ainsi que l’élĂ©ment <slot /> qui fonctionne de la mĂȘme maniĂšre que le framework communautaire (il est donc possible de nommer les diffĂ©rentes portĂ©es).

NB : Je ne sais pas si Svelte est suffisamment mature pour lui imposer le découpage de composants Dumb Vs. Smart, mais je persiste à utiliser ce modÚle ici.

List.svelte

Dans ce second composant Svelte, je charge le jeu de donnĂ©es relatif aux pizzas grĂące Ă  la fonction onMount de la librairie. Les donnĂ©es sont ensuite injectĂ©es Ă  mes composants de prĂ©sentation. La rĂ©activitĂ© de Svelte, rĂ©side dans son langage. Le compilateur choisit d’utiliser le symbole $: pour rendre une variable rĂ©active. En effet, en JavaScript cet usage va lier une variable Ă  une autre. Ainsi, lorsque la variable liĂ©e sera modifiĂ©e, le compilateur recalculera le changement et rĂ©percutera son impact sur le DOM.

Le compilateur possĂšde une syntaxe vraiment intĂ©ressante avec notamment beaucoup de raccourcis. Je vous conseille d’aller faire un tour sur le site de Svelte, la documentation est relativement bien faite, et l’apprentissage se fait grĂące Ă  un playground. Le compilateur de Rich Harris a toutes ses chances d’arriver sur le podium des frameworks orientĂ©s composants dans les annĂ©es Ă  venir (bien qu’il ne s’agisse pas vraiment d’un framework, comme React aprĂšs tout). La derniĂšre version de Svelte embarque deux superbes implĂ©mentations :

  • Sapper : ImplĂ©mentation dĂ©diĂ©e au fonctionnement SSR (Server-Side Rendering) ;
  • Svelte Native : ImplĂ©mentation dĂ©diĂ©e au dĂ©veloppement mobile, via NativeScript.

Angular

J’ai mis beaucoup de temps avant de me (re)mettre au framework de Google. Je suis mĂȘme passĂ© par une phase de programmation orientĂ©e objet avant de l’éprouver Ă  nouveau. La raison : l’outil CLI d’Angular (@angular/cli) gĂ©nĂšre une structure de projet trop complĂšte. C’est-Ă -dire qu’avant mĂȘme d’avoir commencĂ© Ă  dĂ©velopper des composants, on dispose dĂ©jĂ  de tous les outils (et surtout d’une panoplie de fichiers de configuration). Personnellement, je prĂ©fĂšre greffer mes dĂ©pendances au fur et Ă  mesure de l’avancement de mon projet.

Vous l’aurez compris, pour crĂ©er un projet rapidement et simplement avec Angular, utiliser @angular/cli. Dans l’ensemble, la CLI d’Angular est vraiment trĂšs puissante, elle permet notamment de gĂ©nĂ©rer les Ă©lĂ©ments nĂ©cessaires au projet : composants, services, directives, etc
 Les fichiers ainsi gĂ©nĂ©rĂ©s seront directement instanciĂ©s dans le module principal d’Angular : app.module.ts. Les derniĂšres versions d’@angular/cli permettent mĂȘme le dĂ©ploiement de votre code sur des plateformes dĂ©diĂ©es telles que Now (by Zeit).

block.component.ts

Par rapport aux frameworks (et librairie) prĂ©sentĂ©(e)s ci-dessus, on voit tout de suite la diffĂ©rence dans l’écriture des composants. Angular supporte officiellement (et nativement) le sur-ensemble typĂ© de JavaScript qu’est TypeScript. DĂ©veloppĂ© par Microsoft depuis 2012, TypeScript apporte de la rigueur dans les structures de donnĂ©es JavaScript. IdĂ©al pour les dĂ©veloppeurs qui viennent de la programmation orientĂ©e objet / Parfois trop lourd pour les dĂ©veloppeurs qui prĂ©fĂšrent la programmation fonctionnelle.

NB : À noter que React et Vue peuvent eux aussi ĂȘtre surchargĂ©s par TypeScript (d’ailleurs @vue/cli propose ce choix Ă  l’initialisation de votre projet).

À nouveau, le composant de prĂ©sentation block.component.ts expose 2 propriĂ©tĂ©s (respectivement height et color) grĂące Ă  un procĂ©dĂ© appelĂ© dĂ©corateur (@Input). Les dĂ©corateurs font partie intĂ©grante du framework de Google, et permettent de rajouter du comportement Ă  la fonction ou la variable qu’il prĂ©fixe. Enfin, la dĂ©lĂ©gation de contenu s’effectue avec l’élĂ©ment <ng-content /> en Angular.

list.component.ts

Le second composant TypeScript ci-dessus, contient plus de code que le prĂ©cĂ©dent. On remarque ici encore l’omniprĂ©sence des composants de prĂ©sentation (dont block.component.ts), l’usage d’un dĂ©corateur (@Component) et surtout le typage de variable ! La notion d’interface permet de dĂ©clarer une structure de donnĂ©es pour ensuite typer les objets du code JavaScript TypeScript. Le dĂ©corateur ici prĂ©sent sert Ă  transformer la classe qui suit en composant Angular, et lui associer des propriĂ©tĂ©s telles qu’une portion de template HTML (d’ailleurs le HTML peut ĂȘtre dissociĂ© du code TypeScript, et affiliĂ© au composant par son chemin via templateUrl).

J’ai un avis assez tranchĂ© sur Angular. Le framework de Google est complet, peut-ĂȘtre trop. Par exemple, il fournit nativement des modules pour la gestion des routes, ou encore pour la gestion des formulaires (ce que d’autres frameworks n’implĂ©mentent pas pour laisser cela Ă  des dĂ©pendances externes spĂ©cifiques). La notion qui m’intĂ©resse le plus est le paradigme de programmation rĂ©active par flux : RxJS (donc pas vraiment propre Ă  la librairie). Angular a le mĂ©rite d’exister pour le plus grand bonheur des dĂ©veloppeurs Java.

The End

J’ai pris beaucoup de plaisir Ă  expĂ©rimenter ces diffĂ©rentes technologies. Je m’aperçois que finalement ces frameworks (et librairies) ont beaucoup de points communs, notamment dans l’écriture de composants. La diffĂ©rence des uns et des autres s’effectue Ă  la fois sur la syntaxe (.jsx, .vue, .svelte, .ts) et sur le mode de fonctionnement. En effet, certains prĂ©conisent l’usage d’un DOM virtuel pour calculer le changement et l’opĂ©rer rapidement, alors que d’autres prĂ©fĂšrent agir directement sur le DOM, tout en Ă©tant rĂ©actif.

Comme beaucoup de projets, le choix des technologies dĂ©pend majoritairement des compĂ©tences des dĂ©veloppeurs, et de la finalitĂ© du projet. Typiquement, les projets possĂ©dant beaucoup de ressources backend (Java) s’orienteront plus facilement vers un dĂ©veloppement web basĂ© sur Angular. A contrario, d’autres se mĂ©fient du framework de Google Ă  cause de la rupture qu’il y a eu entre AngularJS et Angular 2+. Ils prĂ©fĂšrent prendre parti pour la librairie de Facebook (ou encore pour le framework communautaire Vue qui a le vent en poupe en ce moment).

Je pense qu’au vu des enjeux qui se dessinent pour les annĂ©es Ă  venir, Ă  savoir l’accessibilitĂ© et les technologies embarquĂ©es (wearables, Smart TV, etc
), les compilateurs tels que Svelte ont une carte Ă  jouer du cĂŽtĂ© des performances. Ces librairies sont Ă  prendre en considĂ©ration dĂšs aujourd’hui, peut-ĂȘtre mĂȘme qu’on assistera Ă  la dĂ©mocratisation des frameworks agnostiques de composants (Polymer, Stencil) d’ici un ou deux ans
 Affaire Ă  suivre !

J’espĂšre que cet article vous aura donnĂ© envie d’en savoir plus sur ces technologies. Encore une fois, je vous prĂ©sente ici une Ă©bauche de ce qu’il est possible de faire avec des frameworks (et librairies) frontend orientĂ©s composants. Les fonctionnalitĂ©s ne vont pas trĂšs loin (pas de state management ou encore de routing), mais le concept principal de CRUD permet d’initialiser plusieurs boilerplates bien utiles ! Pour ma part, je retourne Ă  mon challenge de code, avec pour objectif (dans cette deuxiĂšme partie) de dĂ©velopper des APIs RESTful qui exposeront
 des pizzas bien sĂ»r !

Sources

Damien Chazoule

Written by

𝕊𝚘𝚏𝚝𝚠𝚊𝚛𝚎 đ”Œđš—đšđš’đš—đšŽđšŽđš› | đ”ŸđšŽđšŽđš” | 𝕊𝚎𝚛𝚒𝚎𝚜 𝔾𝚍𝚍𝚒𝚌𝚝 | 𝕄𝚞𝚜𝚒𝚌 𝕃𝚘𝚟𝚎𝚛 | 𝕎𝚎𝚋 ℙ𝚊𝚜𝚜𝚒𝚘𝚗𝚊𝚝𝚎

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade