Autant je n’avais pas été emballé par React, que React Native, sur le papier, m’a beaucoup parlé. Développer des apps mobiles natives à partir d’une base de JS, ça avait tout pour me plaire dans la mesure où je me suis déjà confronté au limites de Cordova (et assimilés). Voici mes quelques notes alors que je me fais une petite appli pour me mettre la main à la pâte.

Du natif, pas de la webview

C’est là le premier point où React Native sort son épingle du jeu : il crée des apps natives, pas des webviews encapsulées dans une app native, comme le fait Cordova (Phonegap), et autres. Pour avoir pas mal utilisé Cordova, c’est vraiment pas négligeable. Autant Cordova donne accès à des API permettant de contrôler des fonctionnalités natives d’un appareil mobile, autant ça reste assez limité. Niveau performances également, pour avoir testé des animations assez simple, on arrive jamais à quelque chose de bien fluide.

Sur une base NodeJS, on code notre app en JS, et React Native, via xcode, nous la compile vers une app iOs.

La logique de composants : pas bête

J’étais sceptique : une logique où chaque composant embarque ses fonctions, son template et ses styles, ça ne me plaisait pas trop à la base. Il est vrai que venant du web, on a tendance à privilégier la mise en communs d’éléments partagés (fonctions, styles, etc.).

Là, c’est le contraire, donc oui, on a moins une vue d’ensemble, mais sinon, chaque composant charge les ressources dont il a besoin.

Des comportements et styles un peu éloignés du modèle HTML/CSS

On a bien un langage balisé, par exemple :


<View>
<Text style={styles.text}>Mon Text</Text>
</View>

Auquel on peut définir des styles via une instance de Stylesheet :


var styles = StyleSheet.create({
text: {
fontSize: 14,
color: '#333'
}
});

C’est pas si mal, mais pour quelqu’un venant d’HTML / CSS, ça reste trop proche pour être autant éloigné. Je m’explique :

  • ce sont des nouveaux éléments qui se comportent selon un modèle inspiré de flexbox, mais certains sont des éléments conteneurs, et d’autres des éléments de phrasés (inline), et le soucis, c’est qu’il n’est pas toujours très clair de savoir quel élément est quoi. Pas trop le choix j’imagine, mais, juste au niveau de la doc, cette précision pourrait être plus claire pour chaque composants. Parce que, à la différence d’HTML/CSS, je n’ai pas l’impression qu’il y ait un système d’héritage, et donc, vous ne pouvez pas attribuer une couleur à un composant <View> (cela génère une erreur, et de toute façon, ça ne donnera aucun résultat).
  • les styles, par contre, aurait pu avoir une syntaxe plus proche de CSS. Les propriétés de Stylesheet viennent directement de l’objet JS style. On s’y retrouve, mais on se retrouve vite en train de taper du CSS par erreur.

Quelques points qui peuvent porter à confusion quand on a un bagage plus HTML/CSS que Java ou Swift (j’imagine).

Une grosse dépendance à xcode ?

Ça ne pose pas trop de problèmes pour le moment, iOs est pour l’instant la seule plateforme supportée, mais encore pas mal de propriétés de l’application se gère via xcode (splashscreen, icones, etc.), quid lors de l’arrivée du support Android ? Contrairement à Phonegap, React Native ne propose pas (il me semble) de fichier global de configuration de l’application (avec des variables propres à Android et à iOs), et s’ils gardent la solution actuelle, il faudra configurer chaque plateforme de son côté.

 

N’hésitez pas si vous voyez des erreurs / imprécisions, je débute avec React Native :)