Just React it : Acte 1
“La jeunesse est plus apte à inventer qu’à juger, à exécuter qu’à conseiller, à lancer des projets nouveaux qu’à poursuivre des anciens. ” - Francis Bacon
Un peu d’histoire
L’effet papillon. Cette expression est couramment utilisée lorsqu’on pose une question qui pourrait à premier abord, paraître anodine :
« Le simple battement d’ailes d’un papillon peut-il déclencher une tornade à l’autre bout du monde ? »
J’ai l’intime conviction que ce concept s’applique dans le paradoxal monde du développement. La plus petite erreur peut engendrer des problèmes incommensurables, et inversement.
git commit -m "Should work this time - Fix #3745"Le 9 janvier 2007, une nouvelle fenêtre s’est ouverte dans le monde du développement : le smartphone. Empruntant le chemin tracé par les PDA, Apple a révolutionné l’industrie des téléphones portables. L’iPhone 1ère génération était donc le 1er smartphone vendu à une telle échelle.
De la même manière que Nietzsche a établi les 3 grandes frustrations de l’espèce humaine, je parlerais aussi des 3 grandes joies du mobile. Si la 1ère, d’ordre hadware, a tout simplement été sa création, la 2nde (software cette fois) pourrait avoir eu lieu ces 28 et 29 janvier 2015. En effet, Facebook a présenté au monde ce qui pourrait être l’avenir du développement d’applications. J’attends avec impatience de voir ce que sera la 3ème.
« Soyez la mesure de la qualité. De nombreuses personnes n’ont pas l’habitude d’un environnement où ce qui est attendu, c’est l’excellence. »
- Steve Jobs
Application “native” ou web app” ?
Très grossièrement, on pourrait dire qu’il existe 2 différents types d’applications. Premièrement, les applications natives. Ce sont celles que l’on retrouve sur les différents store (App Store, Google Play Store, etc).
De l’autre côté, nous avons les “applications web mobile” ou “web apps”. Il s’agit là de services web qui sont adaptés à un usage principalement mobile. Il existe néanmoins des outils comme Cordova qui permettent d’intégrer ces web apps dans une application native de façon hybride.
La particularité des applications mobiles natives par rapport aux web apps est qu’elles sont développées dans un langage spécifique à chaque support. Le principal avantage est l’accès à certains composants comme le GPS ou encore la caméra. Ensuite, le natif permet d’obtenir de meilleures performances de l’application puisqu‘il s’agit du même langage que le téléphone. Pour n’en citer que quelques-uns on a :
- iOS : Objective-C / Swift
- Android : Java
- BlackBerry : Java
- Windows Phone : C# ou VB.NET
- Bada : C++
Comparées à une web app qui n’est au final qu’un site internet conçu de façon bien spécifique, les applications natives présentent quelques inconvénients. Tout d’abord : le temps de développement !
“Le temps c’est de l’argent !” - Benjamin Franklin
À cause du grand nombre de langages et de la complexité de ceux-ci, il est plus compliqué de développer une application pour chaque écosystème que de réaliser une seule et unique web app. Le fait est que le développement d’une application native est plus long que celui de la version mobile d’un site web. Si vous ne voyez pas encore où je veux en venir avec cet interminable préambule : ne vous inquiétez pas, c’est normal ! Il est très important de se poser les bonnes questions, pour pouvoir savourer à leur juste valeur les bonnes réponses !
“Nulle découverte n’a jamais été faite par déduction logique, aucune oeuvre d’art sans calcul, ni métier; dans l’une comme dans l’autre interviennent les jeux émotifs de l’inconscient.”
- Arthur Koestler
L’architecture Flux
De nos jours, quel développeur digne de ce nom n’a pas entendu parler de l’architecture MVC (Modèle - Vue - Contrôleur) ?
Le modèle MVC a le principal avantage d’apporter une clarté de l’architecture que le développeur ne peut que respecter.
Malgré tout cela, Facebook en est arrivé à la conclusion que le modèle MVC peut devenir très difficile à gérer et que par-dessus tout : il est difficilement scalable, en tout cas pas assez pour des entreprises de sa taille. Ainsi, lorsqu’il s’agit de petites applications, le modèle tient la route, mais dès qu’on parle d’applications de la trempe de l’entreprise au petit “f” blanc : c’est une tout autre question.
Pour répondre à cette problématique qui va être de plus en plus présente, Facebook nous propose donc une nouvelle architecture d’application : Flux. Flux emploie un “flux” de données unidirectionnel, d’où son nom. Pour faire simple : les données ne s’entrecroiseront jamais comme dans l’exemple ci-dessus. Elles ne vont que dans un seul sens.
Nous dédierons un article entier à l’explication de cette architecture (2 ne seraient pas de trop d’ailleurs), mais s’il fallait retenir une chose, ce serait la logique de Flux :
Le Store contient toutes les données de l’application et le Dispatcher remplace le Controller initial, décidant comment le Store doit être mis à jour quand une Action est déclenchée. La Vue est également mise à jour lorsque le Store est modifié, générant éventuellement une Action devant être traitée par le Dispatcher. Cela garantit un flux unidirectionnel de données entre les composants d’un système. Un système avec plusieurs Stores ou Vues peut être considéré comme ayant un seul Store et une Vue étant donné que les données coulent d’une seule façon et les différents Stores et Vues ne s’affectent pas l’un l’autre.
“Chaque fois que vous voyez une entreprise qui réussit, dites-vous que c’est parce qu’un jour quelqu’un a pris une décision courageuse.”
- Peter Drucker
React.js et React Native
Nous en arrivons enfin au coeur du sujet ! React ou React.js est une librairie JavaScript open-source que Facebook développe en interne depuis fin 2011.
“React est une librairie qui ne gère que l’interface de l’application, considéré comme la Vue dans le modèle MVC. Elle peut ainsi être utilisée avec une autre librairie ou un framework MVC comme AngularJS.”
React encourage la création de composants réutilisables, avec en entrée des données, pouvant changer au cours du temps. Pour ce qui est de l’apprentissage de la syntaxe, le leitmotiv serait donc : “Learn it once, write it everywhere” plutôt qu’un “Write once, use it everywhere” (désolé, mais il fallait que je glisse au moins 2–3 mots d’anglais pour préserver une certaine crédibilité !). Il n’est pas le premier à aborder une approche orientée composants, étant donné que Google nous le propose avec son outil Polymer.
Par ailleurs, React n’utilise pas de système de templates et fonctionne sous Javascript, permettant une encapsulation complète du composant au sein d’une unique class. Pour faciliter l’écriture de la vue, l’équipe initiale chez Facebook a développé un langage orienté objet, JSX, qui permet d’écrire du XML au sein du code Javascript. Et c’est là que je vois vos yeux scintiller parce que si ce n’était pas encore le cas, vous venez d’atteindre la substantifique moelle de notre sujet :
“Écrire des applications natives, avec du JavaScript.”
C’est là que repose tout l’intérêt de cette librairie. Dans le cadre de React Native par exemple, plus besoin d’utiliser de solution qui “transformait” par on ne sait quel procédé votre code de développeur front-end, en une application iPhone ou Android. Vous obtenez sans les mêmes difficultés, un résultat semblable à celui que vous auriez avec votre code en Swift ou en Objective-C.
L’autre avantage de React réside dans la rapidité et la performance. Vu qu’il s’agit d’un langage qui n’a pas besoin d’être compilé, le processus de développement n’en est que plus rapide. De plus, vu qu’il s’agit d’une application native, on a accès aux composants du téléphone tels que le GPS ou la caméra.
Pour ce qui est de React.js maintenant, comment l’évoquer sans parler du fameux DOM virtuel ? Pour décrire le procédé en quelques lignes :
React implémente un DOM virtuel, une représentation interne du DOM extrêmement rapide. Il inclut par ailleurs son propre système d’événements, ce qui permet à React de faire bénéficier de la phase de capturing aux navigateurs n’implémentant pas EventTarget.
Ainsi, lorsqu’une nouvelle Vue doit être affichée, il n’y a pas de rafraîchissement/render complet ! Pour notre plus grand bonheur, React va faire une comparaison entre les 2 DOM pour savoir quels composants doivent être mis à jour : magique ! Le DOM virtuel est un sujet assez complexe auquel nous dédierons d’ailleurs un article.
En ce qui concerne le style, le développeur front-end qui sommeille en moi n’a pas su retenir un sourire de satisfaction : du bon vieux CSS. React utilise en effet une synthèse quasiment identique au CSS pour tout ce qui concerne le style (prenez les différentes propriétés CSS, renommez les en camelCase et vous obtenez l’équivalent en React).
En ce qui concerne le positionnement, encore une bonne nouvelle : Flexbox. Pour ceux à qui ce module est étranger, dîtes vous qu’il s’agit tout simplement du futur en ce qui concerne le positionnement en CSS. De part sa nature, son utilisation dans l’univers mobile n’en est que plus judicieuse. Pour vous faire une idée de ce que permet le module, voici un excellent article (dans la langue de Shakespeare).
“Notre influence grandit au moment où un rêve futur se transforme en une action présente.”
- Steve Chandler
Le mot de la fin … ou plutôt du début
React est un langage extrêmement jeune, cela ne fait que quelques mois qu’il est à la disposition des développeurs, mais je garde la conviction qu’il va faire parler de lui de plus en plus. Just React it ! est une Publication (je préfère quand même le terme Collection) qui sera tenue par 2 jeunes développeurs qui connaissent déjà l’ensemble des technologies React : @Leo_LeBras et moi-même (@Charles_Mangwa). Pour l’instant, vous pouvez déjà vous faire la main sur React.js et React Native, sachant que React Native n’est disponible que pour iOS. Android devrait rejoindre la partie d’ici Septembre 2015 d’après le blog de Facebook.
“ La pierre que les bâtisseurs avaient rejeté est devenue la principale d’angle. ”
Bien évidemment, tous ne partagent pas notre envie et notre excitation et c’est parfaitement compréhensible. Pour un développeur front-end, pouvoir créer des applications natives en JavaScript : c’est un rêve qui devient réalité ! Mais il faut aussi penser aux développeurs mobiles qui pourraient, si React évolue bien, être mis un peu plus de côté. Bien évidemment j’évoque là un scénario assez extrême, mais il est indéniable que c’est un cas de figure qu’il faut désormais envisager.
Cet article est le premier d’une longue série qui s’articuleront autour de cette librairie extrêmement prometteuse. Nous étudierons un peu plus en détails Flux, React.js et React Native au cas par cas. Enfin, parce qu’on n’oublie jamais son premier amour, nous poserons sur papier quelques pensées autour du développement front-end en général. Enfin, plutôt que d’être une énième Publication en anglais, nous avons décidé de rédiger des articles de qualité dans la langue de Molière, ce qui est une denrée rare sur ce sujet. Alors haut les coeurs et “Cocorico” !
“C’est un petit pas pour l’Homme, mais un grand pas pour l’Humanité.”
- Neil Armstrong
