Mise en place d’une librairie de composants métier en React Native – [Introduction]

PayZen

PayZen, c’est la plateforme technique de paiement e-commerce du groupe Lyra. Elle peut gérer plusieurs types de paiement (standard, récurrent, fractionné…) et de nombreux moyens de paiement.

Avec PayZen, le marchand bénéficie d’un accès à un back-office complet qui lui permet de gérer ses transactions, ses boutiques, son paramétrage, etc.

Il a également accès à une application mobile qui lui permet de générer et transmettre des liens de paiement. Ces liens sont envoyés aux acheteurs via de nombreux canaux (mail, SMS, WhatsApp…) pour régler leur achat sur une page de paiement sécurisée.

C’est de cette application mobile qu’il sera question tout au long de ces articles. Application téléchargeable sur App Store et Google Play.

Lyra Collect

Lyra Collect, c’est l’offre « tout-en-un » incluant un contrat d’acceptation (VADS) et une plateforme technique de paiement. Cette offre s’appuie sur un statut d’Établissement de Paiement (EP) certifié par l’ACPR.

Comme sur PayZen, avec Lyra Collect le client bénéficie d’un back-office complet qui lui permet de suivre ses activités.

Il a également accès à une application mobile qui lui permet de consulter les informations essentielles de ses activités depuis n’importe où. C’est de cette application mobile qu’il sera question tout au long de ces articles. Téléchargeable sur App Store et Google Play.

Glossaire

Dans cette série d’articles, je vais utiliser certains termes ou abréviations à de nombreuses reprises :

• librairie ou lib : la librairie de composants
• application ou app : l’application finale, celle qui utilise la librairie
• i18n : internationalisation
• RN : React Native
• RNP : React Native Paper
• ODP : Ordre de paiement (aussi appelé « lien de paiement »)

Petit historique

Des applications web en React

Depuis 2015, Lyra développe toutes ses nouvelles applications web avec React.

Plusieurs back-offices ont ainsi vu le jour dans plusieurs projets. Les techniques, les outils et les méthodes ont évolué, mais React reste aujourd’hui le framework de prédilection pour le développement web à Lyra.

Un effort particulier a été apporté pour le développement du back-office Lyra Collect, avec l’intervention d’un ergonome et d’un designer pour proposer à nos clients un back-office moderne et intuitif.

Des applications mobiles en React Native

En 2019, dans la continuité de cette dynamique, nous avons développé une version simple et intuitive du back-office Lyra Collect sous la forme d’une application mobile.

Après étude des solutions et au vu du besoin, des délais de livraison et des compétences disponibles, il a été décidé de développer l’application avec React Native.

En moins d’un an, l’application a été développée et est disponible sur les stores Apple et Google. Le résultat est positif, autant en termes de rendu final que d’expérience de développement.

En 2020, PayZen souhaite proposer une application mobile à destination des marchands pour leur permettre de générer et partager des liens de paiement.

Logiquement, nous avons décidé de développer cette nouvelle application en React Native pour bénéficier de l’expérience acquise avec l’application Lyra Collect.

Même si le contenu est différent, la structure de cette appli est très proche de celle de Lyra Collect. Beaucoup de composants doivent pouvoir être récupérés.

Le besoin d’une librairie commune

Suite au succès de l’appli PayZen, Lyra a souhaité intégrer la fonctionnalité des liens de paiement dans l’appli Lyra Collect.

Malheureusement, bien que ces applications partagent la même base technique, rien n’était prévu pour partager des composants ou des écrans entiers entre les 2 applications (et non, le copier/coller n’est pas une solution envisageable à l’échelle industrielle  ).

L’idée d’une librairie commune a donc commencé à émerger, mais de nombreuses problématiques restaient à résoudre.

En effet, ces applications sont gérées par des équipes distinctes et communiquent avec leur propre backend, qui ont des URLs et une authentification différente. Le thème aussi est différent, ainsi que les langues supportées.

En résumé, le besoin d’une librairie de composants existait bel et bien, mais plusieurs problématiques devaient d’abord être résolues pour s’assurer de la faisabilité d’une telle librairie. 📚

Dans cette série d’articles, nous allons parcourir les problématiques et présenter les solutions que nous avons apportées.

Objectifs

Le développement d’une librairie commune répondait à deux objectifs principaux :

• Réduire le coût des évolutions et de la maintenance en évitant d’avoir à reporter les modifications dans chacune des applications
• Réduire la duplication de code entre les applications

La particularité de cette librairie est de devoir embarquer de la logique métier. C’est-à-dire que ce n’est pas seulement un ensemble de composants graphiques, c’est une librairie qui pourra fournir des écrans complets, voire même des enchainements d’écrans. Cela implique une plus grande « responsabilité » de la librairie, avec une gestion de navigation, de l’internationalisation, des appels serveurs, etc.  

Problématiques

Aussi, avant même de démarrer ce projet, nous avions plusieurs problématiques à régler pour nous assurer de la faisabilité d’une telle librairie.

Gestion des dépendances dans le contexte React Native / Expo

La librairie embarque de la logique métier, cela veut dire qu’elle sera capable d’afficher des écrans complets, des formulaires, gérer des interactions, etc.

Toutes ces responsabilités nécessitent des dépendances, qui pour la plupart, existent déjà dans les applications existantes.

• Comment gérer les dépendances pour éviter les duplications et ainsi surcharger l’application finale ?
• Comment gérer les versions de ces dépendances et éviter des incompatibilités entre les applis et la librairie ?
• Comment va se comporter le bundler React Native avec notre librairie ? Quel type de packaging mettre en place ?
• Est-ce que le bundler React Native saura résoudre correctement les assets de la lib (des images dans notre cas) ?

L’environnement de développement, l’intégration continue et le déploiement

Enfin, ce que nous souhaitons avant tout, c’est que la mise en place de cette librairie ne dégrade pas l’expérience de développement.

Il faut pouvoir travailler sur son application ou sur la librairie de manière transparente, sans procédure complexe de mise à jour, ou des délais trop longs.

• Comment travailler sur la librairie facilement, sans avoir à déployer tout un environnement d’application ?
• Comment permettre aux développeurs des applications mobiles de continuer à pouvoir développer efficacement, sans ajouter des procédures lourdes et compliquées ?
• Comment et où publier la librairie ?
• Comment gérer l’intégration continue de la librairie et celle des applications qui en dépendent ?

Gestion des personnalisations : le thème, l’internationalisation et les paramètres utilisateur

La librairie doit pouvoir s’adapter aux personnalisations des applications, que ce soit au niveau du thème, de la locale ou à n’importe qu’elle paramétrage spécifique à notre métier.

• Les apps n’ont pas la même charte graphique : comment faire pour que les composants de la librairie respectent le thème de l’application cible ?
• Les apps ne gèrent pas les mêmes langues : comment faire pour que les composants de la librairie supportent toutes les langues possibles ?
• Certains composants de la librairie sont paramétrables : comment intégrer ces paramètres spécifiques à l’écran de paramètres de l’application hôte ?

Gestion des appels serveur et de l’authentification

Comme évoqué précédemment, chaque application communique avec son propre back-end, qui en plus n’utilisent pas les mêmes méthodes d’authentification.

Or, pour certains composants comme la création d’un lien de paiement, la librairie doit effectuer des requêtes serveur.

• Comment savoir sur quelle URL la librairie doit faire ses appels pour communiquer avec les services back-end correspondant ?
• Comment gérer les différentes méthodes d’authentification de manière transparente ?
• Comment respecter les spécifications OpenAPI générées par le back-end ?

Quand on a su que près de 80% de la génération Z écoutait des musiques urbaines créées en France, on s’est immédiatement douté que Best Of Both Worlds aurait plein de choses à nous dire. Le fabricant n°1 de merchandising pour les artistes urbains en France est venu dans nos locaux toulousains lors de notre premier atelier de focus client.

Pour l’anecdote, Best Of Both Worlds c’est le nom d’un album entre 2 artistes qui mélange deux mondes : le RnB et le rap. Le parfait équilibre et le meilleur des 2 mondes. C’est exactement ce que nous allons découvrir à travers l’histoire de cette société et la collaboration qu’ils ont décidé de mener avec Lyra.

Un coup de cœur humain qui restera gravé dans la roche

Best Of Both Worlds c’est une histoire atypique, une relation hors du commun et des compétences spécifiques. Augmentez le son et accélérez le beat,  car c’est le genre d’histoire qu’on entend qu’une seule fois !

Aurélien CONIGLIO, ancien rappeur qu’on pouvait entendre crier sur toutes les  scènes « pose avec le mic, le mic est devenu ma tenue de combat » a décidé de raccrocher le micro pour une autre forme d’expression : créer sa propre marque de vêtement « Woodlife ». Véritable concept à part entière, cette marque de vêtement signe le début de l’histoire de Best Of Both Worlds. En effet, les vêtements imaginés par Aurélien étaient produits et fabriqués dans l’ancienne société de Jérémy JAOUI. Immédiatement, la relation professionnelle entre eux deux se transforme en idylle amicale au point de souhaiter poursuivre l’aventure ensemble.

L’un plutôt créatif et l’autre porté sur la fabrication et la logistique, l’évidence apparaît car l’un cherchait ce que l’autre avait : créons des lignes de vêtements pour les artistes urbains !

Rapidement les commandes défilent à toute vitesse, jusqu’au jour où un artiste leur propose de gérer sa marque de vêtement : c’est là que tout commence vraiment.

1 artiste, puis 2, puis 3… puis le premier artiste d’une longue liste qui va leur proposer de gérer les ventes des précommandes de son album. Best Of Both Worlds rejoint définitivement la cour des grands avec ce contrat. À partir de ce moment, ce n’est plus à eux d’aller démarcher les artistes sur Instagram, mais bel et bien les labels qui prennent contact avec eux pour gérer le merch de plusieurs artistes renommés. Ils sont aujourd’hui une équipe de plus de 15 talents qui œuvrent chaque jour pour faire connaître les artistes d’aujourd’hui et de demain : ligne de vêtement, goodies, site internet… tout est bon pour les mettre en avant.

Une solution de paiement à leur image : réactive et flexible

Dès le début, le besoin d’une solution de paiement s’est fait ressentir. Ils se sont, dans un premier temps, tournés vers des petites solutions qui pouvaient répondre à leur besoin de base. Au fur et à mesure des années, quand Best Of Both Worlds a commencé à prendre de l’ampleur, ils ont alors compris l’importance d’avoir une solution de paiement stable et qui serait en mesure de les accompagner dans leur réussite. Ils se sont alors tournés vers Lyra.

Au-delà d’une histoire et d’une activité atypique, Best Of Both Worlds c’est aussi une organisation pointilleuse et de la rigueur à toute épreuve. En effet, ils ont fait le choix d’une stratégie « print on demand », c’est-à-dire qu’ils ne lancent la production de vêtement que lorsque l’achat a été effectué. Il est donc essentiel pour eux d’avoir un suivi constant et détaillé des commandes et des paiements. Grâce au back office de Lyra Collect, ils peuvent voir en temps réel l’état des paiements (effectués, en cours, refusés) et y mener des actions si besoin. Enfin, les dashboards mis à disposition sur le back office leur permettent d’avoir une vision à 360° de chaque activité.

Au-delà d’une solution de paiement classique, une solution flexible était nécessaire. Proposant un site internet pour chaque lancement d’artiste ou d’album, la quantité de boutiques à gérer s’est multiplié au même rythme que leur succès : rapidement !

Avec plus d’une centaine de boutiques, Lyra a su les convaincre grâce à une gestion intuitive et ultra simplifiée des boutiques. Peu importe le nombre, la solution Lyra leur permet d’avoir une vue globale de chaque boutique tout en pouvant mener des actions spécifiques. Cette flexibilité leur permet de pouvoir jouer avec les tendances et les besoins marché tout en proposant des sites internet et promotionnels ultra rapidement, avec une large palette de moyens de paiement adaptée à leurs cibles.

« Lyra a su s’adapter à notre activité assez atypique et travailler ensemble c’est top. Avoir un relationnel comme celui-ci avec vous et pouvoir vous rencontrer, ça fait vraiment la différence. »

Aurélien CONIGLIO, Directeur Artistique et co-fondateur de Best Of Both Worlds.

De plus, Best Of Both Worlds a l’habitude de travailler avec des pics d’activité : lors de la sortie d’un album ou d’une prévente, l’afflux de visiteurs et les achats se font en masse. La nécessité d’avoir une solution de paiement stable, robuste et réactive devient donc essentielle à leur business. Pour savoir comment bien préparer ses ventes flash ou ses pics d’activité, nous vous invitons à lire nos conseils en cliquant ICI.

Enfin, les 2 co-fondateurs ont eu à cœur d’avoir une solution 100% française, comme leur entreprise, et d’avoir une relation de proximité avec leur solution de paiement pour pouvoir être accompagné comme il se doit.