Contenu

React Light đŸ•Šïž

Intro

Il existe un choix plĂ©thorique de framework front pour prototyper rapidement des applications web. On peut aussi utiliser du VanillaJs car les APIs standards ont quand mĂȘme pas mal Ă©voluĂ© ces derniers temps. Pour ma part j’ai testĂ© React et l’utilise rĂ©guliĂšrement quand je veux faire du prototypage rapide.

Dans l’Ă©cosystĂšme React, le rĂ©flexe pourrait ĂȘtre d’utiliser un projet comme create-react-app mais c’est un peu overkill pour aller rapidement. Le premier npm install fait mal si on a une mauvaise connexion internet.

/react-light/node-modules.png

JSX du sucre mais qui a un prix

On a l’habitude de dĂ©velopper nos composants React en utilisant du JSX. Cela veut dire que l’on va pouvoir ajouter du HTML dans nos composants.

On aime ou on aime pas, mais pour ma part je trouve ça Ă©lĂ©gant. Ça a aussi l’avantage de mettre en exergue le besoin de dĂ©couper un composant quand il devient trop gros/complexe.
Ça reste du sucre syntaxique car on peut tout Ă  fait coder des composants React sans JSX si on le souhaite, mais le sucre c’est difficile de s’en passer une fois qu’on y a goĂ»tĂ©.

1
2
3
4
5
export default function HelloWorldComponent() {
  return (
    <div>Hello world!</div>
  );
}

Pour ĂȘtre utilisĂ© dans notre navigateur, notre code JSX doit ĂȘtre transpilĂ© en javascript. C’est lĂ  que Babel fait son entrĂ©e. Le projet create-react-app Ă©voquĂ© plus haut nous apporte justement tout l’outillage et une configuration par dĂ©faut pour que l’on ai pas Ă  se soucier de cette partie lĂ .

babel-standalone

babel-standalone est une version embarquable dans le navigateur de Babel. On va pouvoir servir notre code JSX statiquement et Babel s’occupera de transpiler en live nos composants JSX en Javascript.

L’intĂ©rĂȘt, aucun outillage nĂ©cessaire et on peut servir notre appli statiquement en local via un python -m SimpleHTTPServer ou autre mais Ă©galement sur un service comme Gitlab Pages.

Template pour “bootstrapper” rapidement un projet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>babel-standalone project</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel" src="components/App.js"></script>
        <script type="text/babel">
            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
        </script>
    </body>
</html>
1
2
3
4
5
6
// components/App.js
export default function App() {
  return (
    <div>Hello world!</div>
  );
}

GrĂące Ă  ces deux fichiers, on a un site statique avec React, qu’on peut facilement Ă©diter dans notre Ă©diteur prĂ©fĂ©rĂ© (VSCode pour ma part).

  • Temps de mise en place du projet: le temps de copier/cloner le template
  • Build time: inexistant : c’est Babel qui transpile dans le navigateur
  • Performance: pour du prototypage ou des petites applis annexes la perte de performance est tout Ă  fait acceptable au vu de la rapiditĂ© pour dĂ©velopper/tester/dĂ©ployer.

DĂ©ploiement dans Gitlab Pages

L’arborescence de notre projet:

1
2
3
4
5
public/
    index.html
    components/
        App.js
.gitlab-ci.yml

Voila une configuration Gitlab minimale pour déployer notre site statique sur Gitlab Pages

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
# .gitlab-ci.yml
image: alpine:latest

pages:
  stage: deploy
  script:
    - echo 'Nothing to do, it's static bro...'
  artifacts:
    paths:
    - public
  only:
  - master

Vous pouvez retrouver le template illustrant cet article sur notre gitlab public : react-light-template.