Framework JS front-end et Vue.js

Vue.js et un framework JS front-end, trop bien non ?
Sérieusement, un framework JS front-end ??????

Qu’est ce qu’un Framework JS front-end ?

Commençons par le commencement, un « framework » signifie en anglais un « cadre de travail ». Derrière cette traduction ce cache en fait une méthodologie de travail se basant à la fois sur des composants existants, des fichiers pré-développés à utiliser sur les projets, mais aussi des ensembles de préconisations sur de la conception ou du développement. Un framework JS front-end représente donc un ensemble de fichiers, basés principalement sur le langage JavaScript, à utiliser en respectant des conventions de code, afin de développer des interfaces front-end, c’est à dire la partie accessible à tous d’un site Internet (à la différence du back-end).

Vue.js, React.js, Angular.js, et bien d’autres…

Depuis quelques années, nous entendons donc de plus en plus parler de framework front-end JavaScript. Ils sont censés révolutionner le monde du développement. Vous avez sans doute déjà entendu les noms React.js, Angular ou du coup Vue.js. Ce sont aujourd’hui les trois les plus utilisés. Angular.js a été initié par Google en 2009 et React.js par Facebook en 2013. Vue.js, dernier arrivé, a été créé en 2014 par Evan You, ingénieur chez Google pendant plusieurs années, notamment sur le projet Angular. Vue.js est notamment utilisé par Adobe, Alibaba ou encore Gitlab. Voilà pour la présentation.

En terme de statistiques, react.js est aujourd’hui le plus utilisé, à plus de 50%. Angular, quand à lui, a été très utilisé mais c’est celui qui génère le plus d’insatisfaction, il est donc maintenant moins utilisé que Vue.js. Ce dernier reste le framework qui génère le plus d’intérêt dans la communauté des développeurs, que voulez-vous, l’attrait de la nouveauté couplée à une utilisation probante et satisfaisante, pas de secrets. En gros, Vue.js est le framework à la mode !

Chaque année, le site stateofjs.com publie les statistiques d’utilisation des Framework JS et les avis de leurs utilisateurs.

Pourquoi c’est bien un framework JS ?

Les framework js front-end sont à la mode car ils permettent d’améliorer l’expérience utilisateur sur 2 points importants :

• Le temps de chargement des pages et leur affichage. En utilisant React.js ou Vue.js, les pages sont envoyées vides avec les informations en parallèle et le contenu de la page est généré à partir du navigateur du client, au contraire des sites générés par exemple en php où le serveur générait les pages entièrement puis les envoyait. Cette exécution coté client (navigateur) est bien plus rapide et nécessite moins d’information à transmettre du serveur vers le client. tout se passe donc beaucoup plus vite. Cette méthode s’appelle le client side rendering (CSR), le rendu côté client.
• Les transitions de page. Les transitions de pages sont aussi plus rapide car les framework JS ne rechargent pas tout d’une page à une autre mais seulement les nouvelles informations. La page HTML en elle même n’est pas entièrement régénérée mais ce sont encore une fois les seuls éléments qui ont été modifiés qui sont changés. Tout se passe donc plus vite. Enfin, comme seuls certains bouts de code sont changés dans la page, il est possible de faire des transitions plus agréables visuellement d’une page à une autre et de créer une navigation plus fluide pour le visiteur.

Avec l’utilisation de Vue.js sur nos projets, nous atteignons des résultats Google Page Speed proche de la perfection : Résultat Google page Speed

Framework JS et SEO

Là, ça se complique ! Si comme annoncé plus haut, les pages sont générées sur le navigateur du client, que se passe-t’il quand Google essaye d’indexer les pages ?

Le monde est plutôt bien fait aujourd’hui et on n’imaginerait pas une nouvelle technologie Web faire l’impasse sur le SEO. Il est maintenant possible de coupler le CSR, le rendu côté client, avec le SSR, le rendu côté serveur. Ainsi, vous êtes un moteur de recherche ou un navigateur qui n’utilise pas JavaScript, votre page est générée pas le serveur et vous est envoyée. Vous avez en revanche un navigateur utilisant le JS, seuls les informations nécessaires au CSR vous seront envoyées. Nous avons donc le beurre et l’argent du beurre.