Tendances à suivre en matière de développement du front-end en 2022

Le développement frontal n’a pas toujours eu le respect qu’il mérite par rapport au développement dorsal.

De nombreux ingénieurs avaient l’habitude de regarder JavaScript de haut. Mais les temps ont changé. Les applications Web connaissent une croissance rapide, principalement grâce au développement d’outils open-source.

Cette évolution nous a éloignés de jQuery et a fait que presque toutes les entreprises technologiques utilisent les derniers JavaScript et outils comme Eslint, Babel et Webpack. Aujourd’hui, le front-end évolue à une vitesse telle qu’il est difficile de le suivre.

Ce billet a pour but de rattraper les orientations de ce domaine de développement en 2022. Peut-être trouverez-vous quelque chose pour vous dans ces tendances.

Svelte gagne en popularité

Svelte est un outil relativement nouveau qui, en théorie, a démarré beaucoup trop tard pour avoir une chance contre React, Vue et Angular. Mais il gagne régulièrement en popularité à un rythme sans précédent.

En 2021, les utilisateurs de StackOverflow l’ont annoncé comme le framework front-end le plus aimé.

Mais Svelte est bien plus que cela. C’est un compilateur qui construit un front-end optimisé.
Svelte n’est pas importé dans l’application comme d’autres frameworks populaires. Au contraire, le code écrit en Svelte est compilé en pur JavaScript. Cela permet à Svelte de gagner en termes de vitesse par rapport à des frameworks tels que React ou Vue.

L’utilisation du framework Svelte est très simple. Voici un exemple d’utilisation de state + forms :

L'utilisation du framework est très simple. Voici un exemple d'utilisation de state + forms.  
 

 

{a} + {b} = {a + b}

Aussi simple que cela ! Remarquez trois choses ici :

  1. Les formulaires sont gérés de manière simple et élégante, comme au bon vieux temps, avant les frameworks SPA. Il n’est pas nécessaire d’attacher des props onChange aux entrées.
  2. Le balisage et la logique vivent côte à côte, encapsulant la logique et une couche visible.
  3. L’état est facile à gérer.

Pas étonnant que le framework gagne en popularité dans la communauté. Ce n’est qu’une question de temps avant que de nouvelles plateformes populaires soient créées en Svelte.

React, Vue et Angular sont là pour rester

J’ai commencé mon aventure avec le front-end juste avant la première d’Angular 2, il y a environ six ans. Je ne compte plus le nombre de fois où j’ai lu depuis lors que Vue, React ou Angular était en train de mourir.

Voir aussi :  Scope et Closures en JavaScript - Expliqué avec des exemples

La vérité s’est pourtant révélée bien différente. Chacun de ces trois frameworks a gagné en popularité depuis sa création.

Voici le graphique(Source : Npm Trends). Il convient d’ajouter que toute chute soudaine sur le graphique est due au mois de décembre.

ilDTORi3UIlBJdZXPoQ5u9Y2SQbLdhXeJXLHt_KaRKT-BGKv1WZEYuHnQEDk73ZTfKdUUANCMIHljewTGACDB_6xma8ISwzAV-cU50mj2YJ0L0yAsN_hhF28XRJA9bVRtuVtyCeO
Tendances des téléchargements Angular, React et Vue

Jetez un coup d’œil au graphique ci-dessus. Remarquez qu’Angular a vu sa popularité multipliée par plus de dix. React et Vue ont connu une croissance encore plus rapide. Ces trois frameworks prennent en charge à peu près les mêmes cas d’utilisation.

Cela signifie que, quel que soit le framework que vous choisissez, vous pouvez vous attendre à ce qu’il soit utilisé et soutenu pendant des années.

Il est intéressant de noter que React n’a pas connu de changements significatifs en 2021. Pourtant, le rythme de son adaptation est stupéfiant. C’est probablement en raison de l’écosystème qui entoure la technologie. React dispose de la plus grande sélection de bibliothèques et de frameworks de support.

Deux exemples qui méritent d’être mentionnés sont Next et Gatsby. Ce dernier est l’un des auteurs de la tendance Next.

Les frameworks doivent prendre en charge les pages statiques et dynamiques

Établissons ce que sont les pages statiques et dynamiques en termes pratiques.

Les pages dynamiques récupèrent et traitent le contenu lorsque l’utilisateur les ouvre. Les pages statiques sont prédéfinies au moment de la construction. Elles deviennent des fichiers séparés, générés sur le disque. Elles peuvent avoir le même aspect que les pages dynamiques, mais le navigateur de l’utilisateur a moins de travail à faire.

Si vous avez une boutique, vous pouvez avoir une seule page de produit dynamique, ou des milliers de pages de produit statiques, une pour chaque produit.

Les pages statiques sont donc plus performantes pour les utilisateurs, mais leur construction est beaucoup plus longue.

L’abandon des pages statiques a été motivé par la popularisation des frameworks d’applications monopages (SPA) de type React et Vue. Ces derniers leur ont également rendu la faveur.

Le contenu dynamique que les SPA génèrent généralement est beaucoup plus lent qu’un contenu prêt à être affiché écrit en HTML. La différence est particulièrement importante lorsque la page va chercher des données sur le serveur. Une page dynamique doit généralement télécharger et traiter ces données.

Cela a donné naissance aux pages statiques dans les SPA. Gatsby s’est attaqué à ce problème en créant un cadre et une infrastructure pour les pages statiques dans React.

Un site web comme un blog, un portfolio, ou même une plateforme de cours comme freeCodeCamp sera beaucoup plus rapide en statique. Même le rendu côté serveur, comme c’est généralement le cas avec Next.js, ne garantit pas une meilleure vitesse(Source : Sidney Alcantara).

Voir aussi :  Comment importer du JavaScript et du CSS depuis un CDN public ?

L’accent mis sur le temps de la première peinture contentful donne lieu à un grand nombre de solutions pour générer des pages statiques dans d’autres frameworks, comme Vue ou Svelte.

D’un autre côté, les pages statiques sont difficiles à faire évoluer pour des millions de pages. Si vous construisez une application avec beaucoup de contenu dynamique, comme des profils d’utilisateurs, il est probablement préférable d’utiliser des pages dynamiques. Les deux façons de gérer le contenu sont appelées à durer.

Les plates-formes transforment les développeurs individuels en départements informatiques entiers

Ces dernières années ont vu l’apparition d’une multitude de plateformes qui accélèrent le développement frontal. C’est énorme, car cela permet aux petites équipes d’avancer rapidement.

Vous pouvez facilement mettre en œuvre la vidéo en utilisant Twilio ou Agora.io. Vous pouvez ajouter l’authentification en un rien de temps en utilisant Firebase, Amazon Cognito ou Okta (Okta a également acquis Auth0).

Le déploiement automatique et global du code frontal est un sujet particulièrement intéressant. Il existe trois solutions incontournables : Vercel, Gatsby Cloud et Netlify. Elles peuvent transformer un développeur front-end avec un compte GitHub en un département DevOps complet en 5 minutes.

Au moment où nous écrivons ces lignes, les trois plateformes offrent des temps de chargement moyens relativement similaires (Sources : Netlify vs Vercel, Netlify vs Gatsby Cloud).

Gatsby Cloud est uniquement React mais rend le travail avec d’innombrables pages statiques presque trop facile. Si vous construisez une application Gatsby, c’est probablement votre meilleure option.

Vercel prend en charge les principaux frameworks, y compris les frameworks côté serveur, comme le propre framework des fondateurs de l’entreprise, Next.js. Si vous travaillez sur une application rendue côté serveur, Vercel vous facilitera grandement la vie.

Netlify se concentre sur les frameworks côté client, comme React et Vue. Il offre un large éventail d’outils utiles tels que des formulaires prêts à l’emploi, l’authentification et des fonctions sans serveur. Je pense que c’est le meilleur choix pour les applications traditionnelles côté client.

Shuffle.dev est un outsider qui mérite d’être mentionné. Il peut créer une mise en page de site web professionnelle de manière aléatoire, en quelques secondes. Il dispose d’une sélection relativement large de thèmes et de frameworks CSS et ajoute de nouvelles fonctionnalités et du contenu toutes les semaines. Chez CodeAlly.io, nous l’utilisons beaucoup pour accélérer le prototypage.

Voir aussi :  10 React Interview Questions You Should Know in 2022

L’optimisation du front-end est essentielle

Ces dernières années, la boucle est bouclée pour le front-end. Les sites légers se sont transformés en plateformes lourdes avec de longs temps de rendu. Certaines personnes se souviennent peut-être encore de l’époque où Slack utilisait la version développeur de React(Source : Robert Pankowecki). La tendance à rendre les SPA plus rapides existe depuis des années, mais elle continue de gagner du terrain.

Les bibliothèques qui ont un impact négatif sur les performances, comme Moment.js, sont remplacées par leurs homologues plus légères et performantes, comme Day.js. D’autres sont remaniées pour réduire la taille du paquet. Les exemples incluent Material UI et Lodash.

Sentry, le leader du marché de la journalisation des erreurs, a commencé à travailler sur l’optimisation de la taille des paquets il y a quelques mois seulement. Dans l’ensemble de l’écosystème frontal, l’accent est mis de plus en plus sur l’utilisation du chargement paresseux, le rendu du frontal côté serveur ou l’utilisation de fichiers CSS au lieu de styliser l’application avec JavaScript, comme c’était le cas, par exemple, avec les composants stylisés.

Tailwind a gagné beaucoup de popularité récemment et, en 2022, il le restera sûrement. Il permet de réduire le temps de chargement des applications comme presque aucun autre outil CSS.

Cela étant dit, il a une courbe d’apprentissage abrupte. Le code de Tailwind est souvent difficile à lire.

Je recommande vivement d’essayer aussi Linaria. Linaria combine les avantages des composants stylisés et la rapidité d’utilisation des fichiers CSS statiques. Nous l’utilisons depuis un certain temps à CodeAlly.io et toute l’équipe frontale adore cette bibliothèque : https://github.com/callstack/linaria.

Exemple de code en Linaria :

import { styled } de '@linaria/react' ;
import mainTheme de 'themes/mainThemeV2' ;
 
export const Wrapper = styled.div`
 display : flex ;
 flex-direction : column ;
 align-items : center ;
 hauteur : 100% ;
 largeur : 30px ;
 max-height : 60px ;
 border-bottom : 1px solid ${mainTheme.colors.neutral300} ;
 background-color : ${mainTheme.colors.primary300} ;
 border-radius : 8px ;
` ;

Remarquez comment vous pouvez utiliser JavaScript dans les styles. Il est également possible de réutiliser les styles puisqu’il s’agit de constantes JS ordinaires. Le code est compilé dans un fichier CSS pendant le processus de construction.

Il en résulte une combinaison d’une grande expérience pour le développeur et d’un front-end ultra-rapide.

Conclusion

Lorsque j’ai débuté, les choses allaient beaucoup plus lentement. Il y a beaucoup d’innovations et le front-end évolue rapidement.

Si vous souhaitez travailler dans ce secteur, vous pouvez consulter CodeAlly. Il s’agit d’une plateforme que j’ai fondée avec des amis et sur laquelle les entreprises technologiques rivalisent pour trouver des programmeurs en les invitant à travailler.

Les nouveaux programmeurs ayant peu ou pas d’expérience ont également la possibilité de prouver leurs compétences grâce à des défis intégrés de code VSCode et Docker.

J’espère que cet article a été agréable à lire et que vous y avez trouvé quelque chose d’utile. À la prochaine !