Retour • 30/10/2024

JavaScript : front-end ou back-end ? Pourquoi pas les deux ?

Écris par Melvyn Malherbe le 30/10/2024

Ah, JavaScript. Ce langage qu'on adorait détester il y a encore quelques années est devenu le couteau suisse du développeur web moderne. Et beaucoup de personnes se demandent s'il faut l'utiliser en front-end et en back-end.

JavaScript est toujours plus utilisé

Avec l'arrivée de TypeScript et de frameworks comme AdonisJS, JavaScript est devenu incontournable en backend.

Mais c'est sans parler du front-end, certes il y a les frameworks web comme React, mais il ne faut pas oublier que sur ton téléphone aussi tu as du JavaScript avec notamment React Native.

JavaScript en front-end : le roi

Commençons par le commencement. JavaScript est né dans le navigateur, et c'est là qu'il excelle encore aujourd'hui.

À l'époque, LiveScript (comme on l'appelait à l'époque) était un langage qui a permis de venir rajouter des "scripts" dans notre navigateur pour cacher, afficher des éléments. Avec le temps il s'est fait adopter par tous les navigateurs puis des normes, ECMAScript sont arrivées pour rendre le langage stable.

Les frameworks front-end

Quand on parle de JavaScript côté client, impossible de passer à côté des trois mousquetaires du front-end :

1. React : Le chouchou de Facebook (enfin, Meta maintenant). React a révolutionné la façon dont on construit des interfaces utilisateur avec son approche basée sur les composants.

2. Angular : Le mastodonte de Google. Un peu plus verbeux que React, mais avec une structure qui plaît aux entreprises qui aiment tout contrôler (on se comprend).

3. Vue.js : Le petit nouveau qui a su se faire une place. Plus léger et plus facile à prendre en main, Vue est devenu le choix de prédilection pour beaucoup de développeurs.

Ces frameworks ont un point commun : ils permettent de créer des applications web dynamiques et réactives. Plus besoin de recharger la page pour voir les changements, tout se fait en temps réel. C'est magique (enfin, presque).

// Un petit exemple React pour la route
function Welcome({ name }) {
  return <h1>Salut, {name} !</h1>;
}

En front-end web tu n'as tout simplement pas le choix d'utiliser JavaScript.

JavaScript en back-end : la révolution NodeJS

Mais JavaScript a très vite été utilisé en backend. Pour être utilisé en backend, il fallait créer un outil qui permettait d'exécuter du JavaScript en dehors du navigateur, une sorte de "runtime" pour ton OS.

En 2009, Ryan Dahl a eu l'idée un peu folle de faire tourner JavaScript en dehors du navigateur. Et boom, NodeJS est né.

NodeJS a permis aux développeurs front-end de devenir full-stack sans avoir à apprendre un nouveau langage. C'était la révolution.

// Un serveur HTTP basique avec Node.js
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Salut, je suis un serveur Node.js !');
});

server.listen(3000, () => {
  console.log('Serveur en écoute sur le port 3000');
});

Express et Fastify : les frameworks back-end

Avec Node.js sont arrivés des frameworks back-end comme Express et Fastify. Ils ont simplifié la création d'API et de serveurs web en JavaScript.

Express est devenu le standard de facto pour créer des applications web avec Node.js, tandis que Fastify s'est positionné comme une alternative plus rapide et plus moderne.

Actuellement d'autres outils comme hono.dev ou AdonisJS sont des outils plus complets et populaires que je te recommande.

Mais tout ceci, c'est qu'une partie du backend car des outils sont arrivés très récemment et ont bousculé le monde du backend avec NodeJS !

Le meilleur des deux mondes : les frameworks full-stack

Et puis un jour, quelqu'un s'est dit : "Et si on combinait le front-end et le back-end dans un seul framework ?" Et c'est comme ça que sont nés les frameworks full-stack comme Next.js et Nuxt.js.

Next.js et Nuxt.js : la fusion parfaite

Ces frameworks permettent de créer des applications web complètes avec JavaScript (ou TypeScript, pour les plus courageux). Ils gèrent à la fois le rendu côté serveur et côté client, le routing, et même le déploiement.

// Un exemple de page Next.js
export default async function Home() {
  // Ce code est exécuté côté serveur
  const posts = await getPosts();
  return (
    <div>
      <h1>Mon super blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Avec ces frameworks, tu peux avoir le beurre (le SEO et les performances du rendu côté serveur) et l'argent du beurre (l'interactivité du JavaScript côté client).

Mais évidemment, tu perds énormément en contrôle et en flexibilité, sans parler de la tendance "Serverless" que Vercel utilise qui t'empêche de faire certaines choses toi-même et t'oblige à passer par des services tiers.

Conclusion

Alors, JavaScript en front-end ou en back-end ? La réponse est simple : les deux !

Avec la stack JavaScript moderne, tu peux créer des applications web complètes, performantes et interactives sans avoir à jongler entre différents langages. C'est ça, la puissance de JavaScript.

Quand utiliser JavaScript en back-end ?

La réponse c'est : si tu aimes utiliser JavaScript (ou TypeScript). C'est un langage stable, qui va durer dans le temps donc il n'y a pas vraiment de raison pour ne pas l'utiliser.

Si tu veux approfondir tes connaissances en JavaScript et devenir un vrai ninja du web, j'ai une petite surprise pour toi. Ma formation gratuite BeginWeb te donnera toutes les bases pour bien démarrer :

Et n'oublie pas, le meilleur développeur n'est pas celui qui connaît tous les frameworks, mais celui qui sait choisir le bon outil pour le bon job. Alors, expérimente, teste, et surtout, amuse-toi !

Tu pourrais aussi être intéressé par comment fonctionne le protocole HTTP ou le fetch en JavaScript.