Pourquoi et comment implémenter Flow sur un projet React Native

Rédigé par Maxime Gourdol | Nov 15, 2022 3:14:33 PM

Intro

Flow est un outil de développement déclaratif qui permet d’ajouter du typage de manière statique sur du Javascript et JSX. Il permet de réduire les potentiels bugs liés au développement du programme durant le développement et non durant le runtime. Il permet entre autres de fournir une description plus complète lors de l’autocomplétion. C’est entre autres une des recommandations de l’équipe React : https://fr.reactjs.org/docs/static-type-checking.html

Dans cet article nous aborderons quatre points principaux :

L’utilité de Flow
L’implémentation Flow
Exemples concrets d’utilisation
Comparaison rapide avec TypeScript

Pourquoi j’utiliserai Flow ?

La première fonctionnalité de Flow est le typage des variables. En React Native ou plutôt JavaScript, les variables ne sont pas typées. Ce qui au cours de l’évolution du programme peut devenir un handicap en termes de maintenance, et de fiabilité. Les changements de types au cours du déroulement du programme peuvent être dramatiques s’ils ne sont pas maîtrisés. Or avec Flow, on peut maîtriser ces changements de type, à conditions de bien les typer. Et bien sûr, grâce au typage des variables, on obtient une autocomplétion encore plus intelligente et plus précise.

Implémentation et utilisation de Flow

Pour commencer à utiliser la bibliothèque Flow, il vous faut tout d’abord l’installer

yarn add flow-bin

Ou

npm install --save flow-bin

Ensuite, on modifie le package.json (si celle-ci n’est pas ajoutée automatiquement lors de l’installation).

{

//…rest,

« flow »: »flow »

}

On initialise Flow via la commande ci-dessous :

npm run flow init

yarn run flow init

Et voilà ! Flow est installé.

Étayons un peu plus le sujet avec flow focus-check. C’est une bibliothèque comprise dans Flow qui permet de vérifier les fichiers passés en pre-commit (ce qui est très utile pour déceler de potentielles erreurs qui peuvent être envoyées sur le git). C’est-à-dire que Flow va uniquement vérifier les dépendances des fichiers qui seront poussées au serveur et les fichiers eux-mêmes bien sûr.

Utilisation de Flow

Il faut ajouter à chaque début de fichier auquel on veut que Flow reconnaisse les fichiers qu’il doit parser :

// @flow

on peut désormais utiliser la commande :

yarn run flow

ou :

npm run flow

Celle-ci permet de demander à Flow de vérifier que notre code Javascript est typé correctement. Flow permet de signaler des erreurs de type de manière statique (au niveau de l’IDE) durant le développement.

Exemples concrets

Au sein de cette sous-partie, nous allons voir les points évoqués lors de la présentation de Flow. Vous aurez donc des exemples concrets pour chaque point. Pour l’occasion, nous créons un petit projet qui permet d’incrémenter un compteur. Tout d’abord, la déclaration des props ne se fait plus via les prop-types, mais via Flow :

type Props = {
/**
* Count value to increment
*
* @type {number}
*/
counter: number;
}

Ensuite on définit la View, et on type les props reçues par le composant :

const CounterView = ({ counter, incrementCounter }: Props) => (
<View style=>
<Text>{counter}</Text>
<Button onPress={incrementCounter} title= »Increment » />
</View>
);
export default CounterView;

Dans le container on instancie la View :

const CounterContainer = () => {
const [counter, increment] = useState(0);
const incrementCounter = useCallback(() => {
increment(counter+1);
},[counter]);
return (<CounterView />);
}

Et on constate que Flow nous indique que le composant CounterView n’est pas implémenté correctement.

On implémente correctement notre CounterView.

return (<CounterView counter={counter} incrementCounter={incrementCounter} />);

On ajoute maintenant un label optionnel à notre CounterView :

type Props = {
….restProps
/**
* Optional Label for our counter
*
* @type {string}
*/
label?: string;
}

Si on retourne sur le fichier de notre CounterContainer, on se rend compte que Flow ne lance aucune erreur puisqu’il n’y en a pas. Label est optionnel, donc mon composant doit être fonctionnel même si je ne déclare pas la propriété label. Maintenant coté View, je veux que mon label soit en majuscules, pour qu’il soit bien visible.

Donc on tente ça :

<Text>{label.}</Text>

L’autocomplétion ne fonctionne pas, alors on force, parce que cette méthode on la connait par coeur quoi :

<Text>{label.toUpperCase()}</Text>

Mais là Flow n’est pas d’accord avec nous, et c’est normal ! On peut également caster nos variables, et faire la majorité des choses qu’on peut faire avec un langage comme Java ou Swift en termes de typage.

En l’état mon composant n’est pas fonctionnel si label n’est pas défini ! Et Flow me le dit avant même que je lance l’application sans définir de label. Donc je vérifie que label soit bien défini pour afficher le label !

{label && <Text>{label.toUpperCase()}</Text>}

Bingo ! Mon composant est fonctionnel !

Bien évidemment avec cet exemple, nous avons seulement vu les bases de Flow, comment on l’utilise, pourquoi l’utiliser. Mais sur un projet de grande envergure, le typage est d’une grande aide, et permet d’assurer une certaine fiabilité sur le long terme. Généralement Flow s’utilise au cours du développement et également dans une chaîne d’intégration continue.

Rapide comparatif entre TypeScript et Flow

TypeScript est un langage de programmation Open Source conçu par Microsoft qui est utilisé pour le typage statique donc sensiblement la même utilité que Flow (sauf que Flow vient de Facebook). Vous l’aurez compris TypeScript est un langage de programmation alors que Flow n’est qu’un outil de productivité.

Sur ce point là, Flow est d’une utilisation bien plus simple que TypeScript. Comme dit précédemment, TypeScript est un langage de programmation, il faut donc apprendre la syntaxe, ce qui peut prendre du temps. Or Flow n’étant qu’un outil de productivité, on ajoute juste //@flow (comme vu dans la rubrique “Utilisation de Flow”). Flow possède donc un certain avantage sur la rapidité de prise en main.

Le choix entre TypeScript ou Flow ne se résume pas seulement à la prise en main mais aussi à l’environnement dans lequel vous travaillez. Bien souvent les développeurs utilisant Angular vont opter pour l’utilisation de TypeScript qui représente le langage prédominant de cette technologie. Or si vous utilisez React, Flow s’intègre beaucoup mieux à une architecture déjà en place.

Pour conclure notre comparatif, il n’y a pas de “meilleur” entre Flow et TypeScript. Ils ont des utilisations similaires mais chacun avec des spécificités utiles. L’environnement d’utilisation est souvent un facteur de décision entre TypeScript et Flow. Néanmoins il est important de noter que, actuellement, la communauté React Native/ReactJS a tendance à s’orienter vers TypeScript.

Conclusion :

Et c’est ainsi qu’on termine cet article sur Flow. Tout du long de cet article, vous avez pu lire l’intérêt de Flow, comment installer sa bibliothèque dans un projet React Native et comment l’utiliser avec des exemples concrets, ainsi qu’un comparatif entre TypeScript et Flow qui permet de peser le pour et le contre de chacun de ces outils.

Voir l'article complet