Mise en ambiance
Durant mon dernier diplôme mes formateurs m'ont conseillés à l'unanimité d'apprendre le React. Durant ce cursus j'étais encadré par mon mentor, et dans le cadre de mon projet final je devais réaliser un réseau social d'entreprise. J'ai donc suivis les préconisations de mes professeurs et j'ai donc réalisé ce projet avec le framework développé par Meta. C'était plutôt justifié car à ce moment j'étais étudiant, et j'allais me retrouver propulsé sur un marché du travail inondé d'offres d'emplois pour des postes de développeur Frontend en React.
Depuis que je travail à Quanted Square, j'ai été encadré par Fabien et Julien, qui, plein de bienveillance m'ont guidé dans l'apprentissage de Vue (et je tiens à préciser que je ne dis pas cela sous la menace ! 😋). J'ai rapidement compris que la learning curve était plus important avec Vue plutôt qu'avec React. Bien évidement je parle là des concepts que je ne connaissais pas encore ou qui n'avaient pas été survolés lors de mon apprentissage du React. Avec du recul j'en ai rapidement conclu qu'il y avait une incohérence entre la sous-médiatisation de Vue et l'intérêt que les devs peuvent tirer de celui-ci.
Mais qu'en est-il de vous ?
Vous avez sûrement un projet qui vous tiens à cœur, une aspiration ou peut-être alors vous intéressez vous à la tech en général ?
Alors vous êtes au bon endroit ! Dans cet article je ne vais pas cracher sur les autres framework mais je vais plutôt vous mettre en lumière sur les avantages de Vue lorsque vous décidez de lancer votre projet from scratch.
Il est d'abord nécessaire de comprendre que le choix d'une stack ne se fait qu'en fonction de vos besoins et seulement en fonction de ceux-ci (et non pas selon la popularité de celle-ci).
Présentation des techs
Vue se détache des autres frameworks par sa légèreté et sa simplicité côté syntaxe. En effet le concept de Single File Component (abrégé SFC) permet d’encapsuler le template, les scripts ainsi que le style d’un component. Cela permet entre autres de structurer son projet de manière concise et de rester efficace dans le développement de son application. Vuetify quant à lui est une librairie proposant des composants déjà prêts à l’utilisation, basés sur Material Design qui est l’un des standards les plus connus pour les interfaces utilisateur. Le combo Vue / Vuetify est une solution idéale pour produire un MVP en peu de temps.
Les concepts principaux à connaître
- v-model : les inputs, important pour l'interaction utilisateur
- Vuex -> store
- le conditionnel dans le template : peut-être le plus utile de cette liste, permet en grande partie de faire le lien entre les scripts et le template. Par exemple si votre script retourne une liste d'objets contenant les données des articles de votre blog, la condition v-for vous permettra de faire un composant "CardBlog" réutilisé pour chaque objet de cette liste. Cela rend le développement très intuitif.
- la structure de Nuxt et / ou de Vue : structurer son code de sorte à ce qu'il soit compréhensible, que ce soit par vous ou d'autre collaborateurs. Je l'ai appris à mes dépend durant mon apprentissage, mais on gagne énormément de temps à prendre le temps de structurer son projet.
Parallèle avec React
La notoriété de React n’est plus à faire. Il est probablement le framework frontend le plus utilisé mais cela n’en fait pas forcément la solution la plus efficiente pour tous les projets. Je ne vous ferai pas de comparatif de performances il y en a à la pelle, trouvables facilement sur Google mais je me concentrerai plutôt sur l’ergonomie de développement. J’ai commencé mon apprentissage du frontend avec React et j’ai découvert Vue ainsi que Vuetify par la suite. J’ai trouvé l’approche du SFC de Vue beaucoup plus intuitive que les composants fonction de React (les “class components” étant vouées à être beaucoup moins utilisés). Du côté de Vuetify on pourrait assez facilement la comparer avec la librairie MUI pour React : ici encore, tant du côté de la syntaxe que de la lisibilité de la doc j’ai trouvé Vuetify nettement plus accessible à l’apprentissage.