Le framework front-end, l’infrastructure déjà préparée pour vous

Dans le monde du développement web, il y a tellement de choses à bâtir du début, mais une partie peut vous être offerte avec du code déjà prêt, déjà testé, un framework front-end. Nous observerons les avantages de s’en procurer un et les différents types.

Avant toute chose, définissons deux termes que nous allons répéter largement. Un framework est une infrastructure de développement, c’est-à-dire un ensemble de composantes logicielles qui soutiennent les applications web, des logiciels applicatifs, des intergiciels et des composants logiciels. De plus, lorsqu’on parle de front end, c’est le développement de toutes les parties du site, de l’application ou du logiciel que l’utilisateur peut voir, contrairement au back end, où l’on travaille plus les fonctionnalités « en coulisses ». Donc lorsqu’on parle d’un framework front end, c’est une structure pour l’aspect d’une application qu’on peut voir. Dans cette structure de code préétabli, on peut apercevoir l’un ou plusieurs des 3 langages de programmation : HTML, CSS ou JavaScript.

Avoir un framework front-end peut comporter de multiples avantages. On parle entre autres d’une série de code déjà préétabli, donc il y a certainement avec cette structure une économie de temps et d’argent. Voici donc les trois types les plus téléchargés : Angular, React et Vue.

Développé en 2016 par Google, le framework Javascript Angular est une structure open source spécialisé dans le développement de sites web.

Avantages

1. Dans cette 9e version, Angular est l’un des frameworks JS les plus performants et robustes. Ses mises à jour fréquentes (la version 6 était sortie en mai 2018) montrent une capacité impressionnante d’adaptation de cette structure.
2. Une large communauté utilise ce framework et il y a énormément de documents d’apprentissage, donc les espaces d’aide sont assez disponibles si besoin.
3. Il prend en charge le CSS + HTML natif, ce qui est très prisé par de multiples entreprises.
4. C’est un environnement de développement complet, capable de s’exécuter sur n’importe quelle plateforme.

Désavantages

1. L’apprentissage d’Angular est long et ardu, ce qui peut être décourageant, étant donné sa grande complexité.

React est une bibliothèque JavaScript libre fondée par Facebook. Elle est surtout utilisée dans la création d’applications web monopages. En plus du réseau social, il est également utilisé par Netflix, Yahoo, Airbnb, Atlassian et bien d’autres plateformes.

Avantages

1. La rapidité du rendu est de loin la plus élevée des trois plateformes.
2. Le JSX, langage avec lequel fonctionne React, autorise les citations et balises HTML lors du rendu de ses composants, ce qui facilite la lisibilité du code.
3. Il est très rapide, étant donné son propre DOM virtuel.

Désavantages

1. Malgré la simplicité du langage, l’apprentissage de la structure React en tant que tel peut s’avérer tout de même ardu.
2. Il y a très peu de documentation officielle, du moins au moment de l’écriture de cet article.

Vue ou vue.js est un autre framework JavaScript open source qui sert également à la construction d’application web monopages, mais aussi à la construction d’interfaces web. La bibliothèque est notamment utilisée par Adobe, Alibaba et GitLab.

Avantages

1. Il est très léger et facile à télécharger (seulement 23 Ko) et la courbe d’apprentissage se fait facilement.
2. Il est performant dans son exécution.
3. Sa syntaxe programmatique est assez simple à comprendre.

Désavantages

1. Le framework est assez pointilleux, donc il faut parfois jouer dans le code pour lui faire faire la commande que l’on veut.
2. La plateforme est assez récente (créée en 2014) donc la communauté d’entraide est assez faible.
3. Étant donné qu’elle n’est pas supportée par de grands acteurs de la technologie, son développement est un peu plus long et son support est limité.

Comment créer une application React ?

Pour créer une véritable application React, rendez-vous via le lien suivant.

1. Pour commencer, ouvrez la page HTML à laquelle vous voulez ajouter React. Ajoutez une balise <div> vide pour indiquer l’endroit dans lequel vous souhaitez afficher quelque chose avec React. Voici un exemple de balise :

<!-- ... code HTML existant ... -->
<div id="like_button_container"></div>
<!-- ... code HTML existant ... -->

L’attribut id de votre balise <div> est unique, et vous permettra de manipuler depuis le code JavaScript afin d’afficher un composant React dans celle-ci.

2. Par la suite, ajoutez trois balises <script> à votre page HTML, juste avant la fermeture de la balise </body>:

<!-- ... autres contenus HTML ... -->
  <!-- Charge React -->
  <!-- Remarque : pour le déploiement, remplacez "development.js"
       par "production.min.js" -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin> </script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin> </script>
  <!-- Charge notre composant React -->
<script src="like_button.js"> </script>
</body>

Les deux premières balises permettent de charger React, alors que la troisième charge le code de votre composant.

Exemple

Voyons un exemple avec LikeButton.js, un bouton J’aime, comme sur Facebook, qui devra être créé à l’intérieur de votre page HTML. Ajoutez d’abord le code de démarrage suivant :

'use strict';
const e = React.createElement;
class LikeButton extends React. Component {
  constructor (props) {
    super (props);
    this.state = { liked: false };
  }
  render () {
    if (this. state. liked) {
      return 'You liked this.';
    }
    return e (
      'button',
      { onClick: () => this. setState ({ liked: true }) },
'Like'
    );
  }
}

Ajoutez par la suite les deux lignes de code suivantes :

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Et voilà! Vous avez installé React, et avez une première composante Javascript.

Et vous, quel framework utilisez-vous ?