Premier Octet vous tire les cartes

Votre nouveau projet est dans les starting blocks, seulement voilà vous hésitez encore sur la stack technique. Vous avez entendu parler de ces voyants technophiles à quelques rues d’ici... Vous décidez donc de les consulter afin d’assurer à votre projet félicité et prospérité.

Passé l’épais rideau de velour, Premier Octet vous tire 6 cartes, c’est ainsi qu’elles se révèlent à vous.

La carte où tout commence : React

Je vois une librairie, des composants, des interfaces, un vent de fraîcheur soufflé sur votre futur projet.

Aucune erreur d’interprétation possible, c’est bien de React dont l’on parle ici ! Cette librairie et son écosystème se sont immiscés dans tous les environnements de production des grands (Netflix, Facebook, Uber, Instagram, New York Times, Atlassian...) comme des plus petits. Ayant passé depuis longtemps sa période d’essai, React a transformé le paysage des applications Web et mobiles et des méthodes de développement. Son passage en licence MIT en 2017 a écarté les dernières réticences quant à son utilisation au sein d’une stack technique. L’écosystème s’est largement répandu et React a su s’émanciper dans une certaine mesure de son père fondateur Facebook.

Chez Premier Octet nous en avons fait notre fer de lance. Mais qu’apporte React à mes projets ? Les prochaines cartes nous le diront…

Le Détail

Je vois des UIs aux petits oignons, des micro interactions… Le détail est partout !

Quelle corrélation entre React et le détail ? React a été originellement développée pour créer des interfaces Web et mobiles et répondre à l'augmentation de la complexité de celles-ici. De par son approche orientée composant, React permet de réduire cette complexité en divisant ces interfaces en blocs : le développement devient dès lors moins laborieux.

Le corollaire c'est une augmentation de la qualité et le perfectionnement de vos interfaces : le détail y trouve sa place. De par son design, React couvre automatiquement de nombreux points pénibles à développer dans des applications riches. Ces points ayant la plupart du temps peu de valeurs ajoutées sur le produit, mais plutôt une valeur attendue, minimale, comme par exemple la mise à jour des données de l’interface.

Un exemple récurrent est la gestion d’un panier d’achat : la mise à jour de la quantité d’un produit implique la mise à jour du prix total du panier, des frais de port, de la ligne produit, etc... React permet au développeur de gagner du temps sur cette partie et de se focaliser sur les détails qui comptent : l’expérience utilisateur. Dans notre exemple la cohérence du panier sera pris en charge simplement par React, on peut donc se concentrer sur d’autres détails comme des micro interactions ou animations.

La Mobilité

Je vois une technologie dans votre poche, un gain de productivité, une nouvelle dynamique dans la création d'applications mobiles.

L’un des gros avantages de React est d’abstraire l’implémentation des composants, ainsi il existe une implémentation pour le Web (react-dom) et une implémentation pour le mobile : Hello React Native ! Ce dernier permet de développer des applications mobiles cross platform (Android et iOS) offrantes des performances proches des applications natives.

Les avantages de React Native sont nombreux :

• Développement en React (donc JavaScript) ;
• Cross platform (gain de temps) ;
• Environnement de développement moderne ;
• Nombreux composants existants.

Le partage de code entre applications Web et mobiles devient alors possible. Généralement on peut partager une grosse partie de la logique métier (en général la stack Redux).

Plus aucun doute, c'est un excellent choix. De nombreuses sociétés utilisent maintenant React Native, telles que Facebook, Microsoft ou encore Uber pour ne vous en chuchoter que quelques-unes.

Les Ressources

Je vois une myriade de composants, tous s'imbriquent comme dans un jeu de LEGO, un univers qui se compose.

La philosophie de React est la composition : en divisant son application en différents composants, on réduit la complexité globale. Ainsi, les composants restent simples et disposent d’une API claire.

Ce sont ces composants qui font la force de React et de son écosystème. Il existe des milliers de composants développés par la communauté prêt à l’emploi tels que des calendriers, boutons, maps... Cela permet d’accélérer considérablement les temps de développement. React devient alors semblable à un jeu de LEGO où l’on compose avec ses briques et celles de la communauté. Toute la difficulté réside dans la communication entre les briques (d’où l’intérêt de librairie comme Redux). Voici par exemple une liste de composants React populaires.

Depuis quelques temps, nous voyons de nombreux design system développés en React. Ces librairies regroupent un ensemble de composants souvent indispensables dans une application Web ou mobile (boutons, dropdowns, calendriers...) et accélèrent sensiblement le développement.

Nous pouvons cités Evergreen, Atlassian, Blueprint ou encore Semantic UI. L’ensemble de ces composants sont généralement bien testés et fiabiliseront vos applications.

Le Design

Je vois, je vois... un apaisement entre les designers et les développeurs, réunis autour de cette librairie React. Chacun semble y trouver son compte...

Impossible ? Pas si sûr !

React est une librairie conçue pour créer des interfaces. Ce postulat en fait une librairie légère arborant une API simple permettant une prise en main rapide. Comme déjà évoqué, la complexité arrive lorsque l’on veut faire communiquer ses composants et les brancher à des données (API Rest / GraphQL). Mais cette partie ne concerne pas les designers : ils peuvent prendre en main facilement React pour concevoir leurs composants avec du CSS et du markup JSX (pratiquement identique à du HTML).

En rendant cette phase de conception de composants accessible et peu complexe, des outils graphiques ont vu le jour : Framer, BuilderX, apportant de vraies promesses. Les frictions entre la conception graphique et l’implémentation technique sont alors réduites.

C’est aussi pour ça que le nombre de design system augmente, ceux-ci deviennent plus facile à développer, React apporte un environnement parfait pour leur conception. Des librairies comme Storybook permettent de créer facilement son design sytème en centralisant les composants développés, créant par la même occasion une documentation.

La carte Joker 💫

Mhh… Avec cette carte, plus de doute, vous avez un sérieux avantage !

La dernière carte ! La carte joker Premier Octet 🙌

Vous l’avez deviné, chez Premier Octet, nous nous sommes spécialisés dans React. Si vous avez un projet et pensez que React y trouverait sa place, envoyez-nous un petit mot !

Nous donnons également des formations React et React Native via JoliCampus afin de donner l’opportunité à des développeurs d’apprendre cette magnifique techno 💜 !

Quoiqu’il en soit, merci d’avoir consulté Premier Octet, nous sommes sûrs que toutes ces prédictions trouveront leurs places dans vos projets React !

A très bientôt 🖖