web lowtech

Comment choisir son framework frontend en javascript et produire du code éco-responsable ?

C'est quoi un framework et c'est quoi Javascript ?

Javascript est un langage de programmation qui a été créé en 1995 pour insufler du contenu interactif pour l'utilisateur, dans un navigateur web. Sa popularité n'a cessé de croître depuis, au point de devenir le langage le plus prisé pour le développement web et applicatif aujourd'hui.
Son évolution est passée par la création du framework Jquery en 2006, qui a permis d'homogénéiser les différents comportements du javascript dans différents navigateurs, qui n'étaient pas harmonisés à l'époque. Jquery est une librairie contenant des fonctionalités javascript, permettant au développeur d'écrire moins de code. Il est à noté que depuis la dernière version de javascript (ES6) on peut changer les classes des éléments donc Jquery est peu à peu devenu obsolète, mais est encore très fortement présent et utilisé (et toujours maintenu) sur les projets anciens (comme sur les CMS wordpress ou Grav par exemple). Il est aussi à noter que l'on peut exécuter du javascript côté serveur avec Node JS, créé en 2009.

Une évolution significative des frameworks javascript dans les années 2010

Avec le développement des réseaux sociaux et les interfaces utilisateurs toujours plus compliquées et nécessitant de traiter une grande quantité de données, les GAFAM se sont penchés sur cette problématique et on produit des frameworks répondant à ce besoin. React en 2013 pour Facebook (qui l'a rendu open source) et Angular pour Google, en 2016.

Le problème de ces frameworks, outre leur côté fantastique pour produire des interfaces utilisateurs complexes, est la lourdeur en terme de transfert de datas qu'ils imposent à l'utilisateur. Ceci peut être problématique en cas de réseau mobile 3g, par exemple. Je vous laisse méditer sur le sujet avec cet article de developpez.com qui reprend très bien cette problématique.

Quelles sont les solutions ?

Il existe des versions simplifiées de ces différents frameworks, qui auront un impact significatif sur les performances de votre site web ou application, pour le frontend.
Voici une Tier-list de ceux que je recommande:

• Preact

  C'est la version simplifiée de React. On peut même l'utiliser sans utiliser de Build. Je l'ai utilisé sur cette partie de mon site : comme vous pouvez le voir, la force de ces frameworks modernes est qu'il n'ont pas besoin de recharger une page web pour changer les données manipulées par l'utilisateur. La librairie Preact ne sollicite que 4kb de données, c'est donc très léger.

• Petite-Vue

  C'est la version simplifiée de Vue JS, framework créé par Evan You en 2014. C'est le premier framework que j'ai appris, comme de nombreux développeurs web, car il est plus simple que React et Angular. Il connaît une popularité croissante récemment est s'est imposé à côté de ces deux autres.
  Petite-Vue peut être utilisée sans build également, dans un bloc de code spécifique, rendant ce framework évolutif. Son poids est très léger lui aussi : 5kb.

• Jquery slim

  C'est la version simplifiée de Jquery, attention cependant, vous ne pourrez pas effectuer d'animations avec. Je la recomande pour les projets qui sont déjà en Jquery (legacy code), sinon autant utiliser vanilla JS sur un nouveau projet. Son poids est au alentour des 70 kb. Je l'utilise sur les CMS que je créé et j'ai réduit significativement le transfert en JS.