Architecture JS Less, première approche

Les architectures web ont tendance à devenir de plus en plus complexes. Impossible d’installer un projet sans y passer des heures ou de modifier un morceau de code sans avoir peur de tout casser ! Heureusement, de nouvelles approches cherchent à simplifier ces architectures. Vous cherchez une architecture simple et robuste ? Vous souhaitez réduire les technologies afin de monter une équipe plus rapidement ? L’approche JS Less est peut-être faite pour vous !


Qu’est-ce que le JS Less ?

Le JS Less est une approche pour développer une application moderne, c’est-à-dire similaire à une single page application, sans les inconvénients de l’utilisation du framework Javascript. Il s’agit de permettre à des langages normalement orientés back-end, comme PHP, de pouvoir créer de l’interactivité côté front, sans par exemple recharger la page à chaque remplissage de champs. 

En effet, l’utilisation de Javascript entraîne de nombreux inconvénients :

  • Il est nécessaire de créer et de maintenir une API pour gérer l’échange de données entre le front et le back.
  • Cela nécessite l’apprentissage d’une multitude de technologies (Bundler, Transpiler, Linter…) et de frameworks (Vue.JS, Angular.JS…) supplémentaires.
  • Cette approche à tendance à doubler les logiques métiers : une logique côté front et une côté back.

Les avantages du JS Less

Faire le choix d’une approche JS Less permet donc :

  • D’optimiser la productivité de vos équipes : avec moins de langages à maîtriser, pas besoin de deux équipes (une front et une back). De plus, l’on-boarding de développeurs est plus rapide car il y a moins de technologies à maîtriser et moins de code à maintenir. 
  • De diminuer les coûts : gagner en productivité permet de diminuer les coûts de développement et réduire le nombre de technologies contribue à réduire les coûts de maintenance. Tout cela permet de baisser le prix de votre application.
  • D’avoir un rendu initial plus rapide (sans avoir besoin de configurer un Server Side Rendering) : sur une application JS Less tout est là depuis le début, pas besoin de télécharger des MBs de JavaScript, pas besoin de démarrer un framework JS complet, pas besoin de faire des appels d’API pour remplir les données d’une vue utilisateur, etc.
  • De mettre votre produit sur le marché plus rapidement : moins de choses peuvent mal tourner car moins de langages, c’est aussi moins de sources potentielles de bugs. Il n’est pas nécessaire de mettre en place un framework front, un bundler, une API, une authentification correcte, ni de doubler les logiques métiers.

Les solutions techniques JS Less

FrameworkPlug-inMoteur de template
Laravel Livewire :

Livewire est un framework full-stack pour Laravel qui simplifie la création d’interfaces dynamiques. Lorsqu’une interaction se produit, Livewire envoie une requête AJAX au serveur avec les données mises à jour.


Turbo :

Un plug-in en beta permettant de réduire considérablement la quantité de JavaScript personnalisé à écrire pour la plupart des applications Web. Par exemple, Turbo accélère les liens et les soumissions de formulaires en supprimant la nécessité de recharger une page complète.

Symfony UX :

Un ensemble de librairies pour intégrer de manière transparente les outils JavaScript dans une application.
Blade :

Blade est un moteur de templating simple mais puissant qui est inclus avec Laravel. Contrairement à certains moteurs de modèles PHP, Blade ne vous empêche pas d’utiliser du code PHP brut dans vos modèles. Tous les modèles Blade sont compilés en code PHP simple et mis en cache jusqu’à ce qu’ils soient modifiés.

Twig :

Twig est un moteur de templates pour le langage de programmation PHP, utilisé par défaut par le framework Symfony.

Au final, quand choisir du JS Less ?

Bien que le débat fasse rage entre les ardents défenseurs de Javascript et ses détracteurs, au final ce qui importe est de trouver la technologie la plus adaptée à votre projet ! En ce sens, une approche JS Less se présente comme étant la meilleure solution quand :

  • Il y a seulement besoin d’un unique site, non relié à un Back Office externe ou à une application mobile.
  • Il y a peu d’impératifs sur la réactivité. Le JS Less pouvant entraîner une latence de 50-100ms lors du remplissage de champs ou du clique sur un bouton.
  • Il y a peu de contraintes sur la connexion internet. En effet, le JS Less est moins adapté car il génère de nombreuses requêtes avec des payloads importants.
  • Il s’agit de dynamiser à moindre coût, de rendre plus interactif, un vieux site.
  • Il s’agit de gagner du temps et de faire des économies.

Pour aller plus loin et en savoir plus sur les différentes technologies, découvrez notre blog technique.

JS LESS - Comprendre en 5 minutes


par Charles Dupaix

Articles similaires TAG