Un vendredi sur deux

React Native

Introduction

Comme tous les fans du seigneur des anneaux, je rêve d’un code pour les contrôler tous :). Donc forcément quand j’apprends qu’il existe un “outil” qui permet de réaliser des applications natives Android & IOs depuis du Javascript : je fonce !

Donc pour ce Vendredi, je vais regarder React Native. Pour être 100% honnête, je ne pense pas que ce soit ultra malin, car je ne connais pas React mais bon … j’espère que les tutoriaux permettront de découvrir les deux en même temps :).

Docker

Comme je ne veux pas “pourrir” mon poste et comme j’ai quand même passé une journée sur Docker, je commence par créer une image. Pour ce faire, je me suis largement (voire complètement) inspiré de cette image : ici.

Je ne sais pas si c’est une bonne chose, mais je n’ai pas rencontré de difficultés particulières même pour connecter le portable (ce qui est assez incroyable vu mon passif sur le sujet !) Juste une chose : à priori, ca rebuild pas à chaud mais bon … on va dire que c’est pas grave :).

Premier tuto

Put*** de bières !

Le premier tuto est celui-ci : http://putaindecode.io/fr/articles/js/react/native/introduction/. Déjà parce que cela me permet de découvrir deux choses : React Native et https://punkapi.com/. Une API pour la bière : mon rêve et mon nouveau support pour les développements :).

Premiers pas et bim !

En lisant le tuto, je me suis rendu compte qu’il utilisait la visualisation par chrome. Pour ce faire, il faut lancer la commande

react-native start

. Seulement, j’obtiens l’erreur suivante :

ERROR  watch /home/dev/app/android/app/build/intermediates/res/merged/debug/values-pt ENOSPC
{"code":"ENOSPC","errno":"ENOSPC","syscall":"watch /home/dev/app/android/app/build/intermediates/res/merged/debug/values-pt","filename":"/home/dev/app/android/app/build/intermediates/res/merged/debug/values-pt"}
Error: watch /home/dev/app/android/app/build/intermediates/res/merged/debug/values-pt ENOSPC
    at exports._errnoException (util.js:1026:11)
    at FSWatcher.start (fs.js:1429:19)
    at Object.fs.watch (fs.js:1456:11)
    at NodeWatcher.watchdir (/home/dev/app/node_modules/sane/src/node_watcher.js:144:20)
    at Walker. (/home/dev/app/node_modules/sane/src/node_watcher.js:353:12)
    at emitTwo (events.js:106:13)
    at Walker.emit (events.js:191:7)
    at /home/dev/app/node_modules/walker/lib/walker.js:69:16
    at go$readdir$cb (/home/dev/app/node_modules/graceful-fs/graceful-fs.js:149:14)

En fait, il semble que pour une utilisation via un navigateur, Watchman ne soit pas vraiment une option mais bien une obligation (cf. ici). Il faut donc reprendre la machine Docker et installer Watchman. Ce passage m’a permis d’apprendre une chose sur Docker. Le CD n’est pas persistant entre deux commandes. En fait, chaque appel à RUN est une nouvelle ouverture de shell donc pour installer Watchman :

RUN git clone https://github.com/facebook/watchman.git /home/$USERNAME/watchman && \
        git checkout v4.7.0 && \ 
        ./autogen.sh && \
        ./configure && \
         make && \
         make install

Cela permet (sous chrome au moins) d’avoir les traces. Pour ce faire, il faut :

  • Aller sur l’URL suivante : http://localhost:8081/debugger-ui
  • Ouvrir le menu (dans mon cas, il faut shakker le téléphone !?!?)
  • Sélectionner “Debug JS Remotely”
  • Ouvrir les outils de dev Chrome

Deuxième pas & Bim !

La deuxième étape (simple) est d’appeler l’API pour récupérer une bière au hasard. Souci : erreur à la moindre requête. Comme il y a une notion de droits d’accès, j’ai commencé par changer pour une URL libre d’accès = ça marche. Le souci semble venir de là ?.

Le truc c’est comment en être sur ? En effet, dans le console Chrome, je ne vois pas les requêtes réalisées par fecth. C’est donc pas évident de valider le pourquoi. En cherchant sur la toile, j’ai trouvé deux trois notes sur le sujet (ici & là)

Personnellement, la 2ème solution a fonctionné :

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     
XMLHttpRequest = _XHR

De plus, non seulement, j’ai la requête en debug mais en plus : maintenant çà marche.

Lifecyle

Un point qui n’est pas mis en avant dans le tuto : l’utilisation des méthodes gérant le cycle de vie du composant (oui, car en fait, on utilise des composants …) comme render et componentWillMount. La première est obligatoire et doit retourner un élément “component” qui sera utilisé pour afficher informations. L’autre permet de réaliser des actions une seule fois juste avant le render. C’est là par exemple que la requête HTTP est effectuée. Plus d’infos : https://facebook.github.io/react/docs/component-specs.html

Fini !

Une fois cette difficulté passé le reste est assez simple …

Et là, c’est le drame …

Alors que j’allais passé à la modification de l’écran pour rendre cela plus sympa, je relance une dernière fois : plus rien. Je regarde le code : aucune modification. J’ai cherché et la seule différence : est-ce je suis en debug distant ou pas. En debug distant : pas de souci tout fonctionne mais dès que je le coupe, le flux retourné par le fetch est vide. Pourquoi ? Mystère.

Bilan : frustration

Le bilan de cette journée est frustrant. L’objectif était simple : suivre un tutoriel qui aurait du me prendre quelques minutes (sans l’installation) mais qui au final m’a pris beaucoup plus de temps à cause de blocage que j’ai pas forcément résolu.

Après ayant eu quelques minutes pour parcourir les différentes documentations, je me suis fait une idée de la solution et j’arrive au même résultat que NativeScript (ce qui est normal au final …) : Ok c’est du Javascript mais au final l’interface est quelque peu spécifique car ce n’est pas des composants standards HTML mais bien des composants de la solution. Donc je ne suis pas dans une situation où je peux reprendre des éléments d’un site mobile pour l’intégrer dans une application native.

Pour le moment, je vais donc rester sur de l’hybride malgré ses défauts et retourner regarder Cordova & Ionic.

PS

Par rapport à une remarque que je me suis fait au démarrage : ma méconnaissance de React. Au final et vu les soucis rencontrés, je ne suis pas sûr que cela m’ai finalement manqué …

Liens