Software Craftmanship

Les tendances du développement front end en 2020

Découvrez nos jobs
Vous ambitionnez de devenir Tech Lead ou de faire du conseil de haut-niveau ? Nous avons des challenges à votre hauteur !

Dans cet article nous allons aborder les tendances du développement front end en 2020, les frameworks à suivre, GraphQL, les micro front end et nous terminons avec une introduction au concept Jamstack.

LES FRAMEWORKS FRONT END

Dans la continuité de 2019, les deux framework front end les plus en vogue sont ReactJS (développé par Facebook) et VueJS (développement communautaire).

Ils ont respectivement 142 000 et 156 000 « stars » sur GitHub, ce qui montre leur popularité !

2020 sera aussi une année très importante pour Angular, avec la sortie de la version 9 et le très attendu moteur de rendu Ivy. On peut déjà anticiper cette nouveauté depuis la version 8.1 avec la commande :

Pour résumer, Angular reste très utilisé dans les gros projets d’entreprise, mais il est très intéressant de se former à Vue et React.

Autre framework à suivre en 2020 : Svelte.js

GRAPHQL

GraphQL est un langage de requête pour API ainsi qu’un environnement pour exécuter ces requêtes. Au même niveau que les API RESTGraphQL est indépendant des langages de programmation et de l’environnement technique.

Comme les API RestGraphQL se positionne entre le front end et le back end. En tant que développeur front il est donc très important en 2020 de connaître ce langage.

En quoi GraphQL se différencie de REST ? GraphQL a été créé par Facebook lors du développement de leur première application iOS, dans le but de réduire la taille des réponses REST afin que l’application mobile consomme un minimum de data.

Prenons un exemple REST : une API toute simple de gestion des articles, un article étant composé d’un numéro, un titre, une description, un auteur, une date de mise en ligne, une ou plusieurs catégories, … :

Dans le premier cas, l’API va nous renvoyer un tableau JSON avec toutes les propriétés de tous les articles. Dans le 2e cas nous allons récupérer toutes les propriétés de l’article numéro 1.

Si dans mon application mobile je souhaite afficher une liste des articles et uniquement le titre et la date de mise en ligne, l’API REST va me renvoyer énormément de données qui ne seront pas affichées dans le tableau et donc on va consommer des ressources et des données alors que cela n’est pas nécessaire.

GraphQL permet de préciser dans la requêtes les attributs à renvoyer :

Cette requête va demander à l’API de nous retourner tous les articles, mais uniquement les attributs numéro, titre et date de création. Ce qui est bien plus optimal !

MICRO FRONT END

Nous avons déjà abordé les architectures micro services, qui remplacent les applications monolithiques. En effet depuis quelques années nous sommes passé d’architectures qui séparent le back du front vers des architectures avec un seul front et plusieurs micro services. Le front est donc resté monolithique !

L’idée des micro front end est de décomposer le front selon différents services indépendants, permettant par exemple à différentes équipes de travailler ensemble sur une même page, chacune s’occupant d’un compostant ou d’un service.

De plus, comme pour les micro services back, nous avons ici en théorie la liberté d’utiliser la stack technique de son choix.

Je vous invite à voir des exemples sur le site https://micro-frontends.org/.

JAMSTACK ET STATIC SITE GENERATORS

Autre tendance amorcée depuis quelques années, la création de sites statiques. Il s’agit d’une nouvelle façon de créer des sites web et des applications. Ces sites peuvent être construits à la main, ou avec des outils tels que Hugo, Gatsby, Next, Nuxt ou encore Jekyll.

Quels sont les avantages ?

Tout le coté dynamique des sites est géré par du Javascript et des APIs (commentaires, boutiques en ligne, …)

Pour bien comprendre, je vous invite à lire cet article qui explique comment déployer un blog sur GitHub Pages : https://github.com/barryclark/jekyll-now

N’hésitez pas dans les commentaires à nous faire part de vos tendances 2020 en matière de front end !

0