React & React-Native
Hello, back on my blog. Ça faisait un moment que je n’avais pas rédigé un article. J’avais du boulot, du coup pas trop le temps de m’investir sur de nouveaux projets. Mais la, depuis qq jours, j’ai du temps libre que j’utilise pour me former sur React et React-Native. Comme d’habitude je vais rédiger un article qui va m’aider plus tard, une sorte d’aide mémoire. C’est ma technique, je note des infos sur un fichier. txt, ensuite quand j’ai besoin d’illustrer je rédige un article. Cela me permet de me (re)poser des questions et d’approfondir certain point. Le fait de rédiger un article me force à être plus consciencieux et me pousse aussi à vérifier certaine définition, comprendre certain mécanisme etc… Bref le fait de rédiger un article fait partie aussi de ma formation. Ici je vais présenter ma démarche de formation et quelques notes d’apprentissage. Vous y trouverez peut être qq tuyaux pour bien démarrer. Présentation de React : Je ne vais pas vous réciter un copier coller du net, chercher par vous même. Pour moi React est une surcouche JS, un framework de présentation qui se situe entre le JS et le HTML de votre page web. Il y a une grosse tambouille de code dont je n’ai aucune connaissance qui fait tout un tas de truc sympas ou pas avec votre page web. Toujours est il que j’ai trouvé ma première approche de React fort sympatique. Fin 2015, je m’étais collé sur Angular (1) et ma courbe d’apprentissage n’était pas fulgurante. Mais avec React je me suis senti plus à l’aise. J’ai retrouvé des concepts familier aux apps mobile/desktop native, à savoir un cycle de vie. Votre app web avec React à un cycle de vie ! C’est à dire que vous pouvez lui dire par exemple « avant le Render, fait moi cette opération ». Donc votre app web vie comme une app classique. Le concept de composant m’a tout de suite plu. En effet, vous allez créer ce que React appelle à juste titre « Component ». Ça aurait pu s’appeler « module », « baliseHTMLduFutur », « machinquifaituntruc ». D’ailleurs c’est son but, créer un peu tout et n’importe quoi. Par exemple vous pouvez créer un component « Header » qui peut être rappelé plusieurs fois n’importe ou dans le code. C’est développé une fois et réutilisé dans le code comme une base HTML classique. D’ailleurs je parlais d’un framework qui se situe entre le js et le HTML. Ba du coup on va parler de JSX. C’est du javascript qui génère du code HTML. On aura donc une phase « transpilation ». Comme le dit si bien cette page : https://facebook.github.io/react/docs/introducing-jsx.html, ceci : const element = <h1>Hello, world!</h1>; est du JSX. C’est du JS qui comporte du HTML. Du coup on peut lui balancer aussi du CSS pour styliser le rendu. Donc grâce à React, on va pouvoir réaliser nos propres composant du futur. Bienvenu à Tambouille-Land ! React est crée par Facebook et Instagram et utilisé sur leurs pages. Donc c’est rassurant. Présentation de React-Native : J’avoue que l’intérêt pour moi était avant tout React-Native. Je suis développeur web et mobile (Android et Windows). Depuis maintenant un paquet d’année, je me pose et repose la question « est ce qu’il y aurait un moyen de coder une fois et de déployer sur Android et iOS avec ce même code ». J’ai testé Cordova, PhoneGap, Ionic (c’est la raison pour laquelle j’ai appris à codé sur Angular) donc des solutions Hybrides intéressantes mais pas parfaite. J’ai aussi en 2016 basé une bonne partie de ma formation sur Xamarin (C#). C’est une autre approche quasi native mais avec un seul langage et du XAML pour la couche de présentation. La version Xamarins Forms permet de faire une seule couche de présentation mixte (android et iOS) avec un rendu natif. Dans toutes ces solutions l’apprentissage est relativement long. Et au bout du compte franchement, je me demande si le pure natif n’est pas la vraie solution (au moins ça marche !). Personne n’a la réponse aujourd’hui, y’a pas de solution miracle. Mais bon, étant curieux par nature, je devais de me faire ma propre opinion sur React-Native. Et tant que j’ai pas sorti une app officielle dans un store, avec toutes les contraintes d’un projet (gestion, déploiement, tests, retour client, debug, etc…) je n’ai pas un avis suffisamment éclairé. Enfin c’est ma vision. Donc React-Native c’est React pour faire des app natives Android et iOS. (pas de Windows à ma connaissance). C’est un framework hybride car on va coder en JS et on aura une transpilation de code vers les plateforme cible android et ios. React va ici non pas générer du HTML mais de des composants natif. D’où le nom React-Native. le code de tout à l’heure pourra alors s’écrire : const element = <Text>Hello, world!</Text>; Où la balise <Text> va correspondre à un élément propre à la plateforme cible une fois transpilé et compilé. Car oui, ya un moment ou va bien falloir sortir un apk pour android. (pas encore testé sous iOS à l’heure ou j’écris cet article). Pour le style, on va utilisé qq chose proche du CSS (flexbox étant utilisé pour le layout). Ici j’ai personnellement un gros point noir à placer. Pour avoir peu testé, j’ai déjà rencontré de grosse difficulté de layout. Donc pour un framework dit de présentation, on retombe dans des travers peu enviable. A voir avec un peu plus d’entrainement. Apprentissage : J’ai suivis deux cours (pour le moment) sur Udemy sur React.js https://www.udemy.com/reactjs-pour-les-debutants/learn/v4/overview histoire d’avoir qq base sur React web, puis ce cours : https://www.udemy.com/the-complete-react-native-and-redux-course L’auteur de ce dernier cours (Stephen Grider) est un développeur californien (speak english donc). Ce cours est particulièrement bien fait et nous amène petit à petit à comprendre des éléments clés de la construction d’application avec Reac-Native. On commence avec une simple appli pure React-Native, histoire d’apprendre les fondamentaux. Ensuite on construit une app avec une base de données online (Firebase) et un système d’authentification simple. Déjà c’est pas mal ! Ensuite il nous…