Supernova, la solution pour accélérer le développement de vos projets mobile ?

Le Designer Ops est-il le nouveau devOps ?

Au cours de ma vie de développeur, j'ai toujours ressenti une attirance pour le monde du design. N'ayant pas particulièrement la fibre créative, j'ai néanmoins toujours cherché un moyen de comprendre les concepts inhérents à cette discipline.

Longtemps convaincu que cet attrait ne prendrait que la forme d'un passe temps personnel, mon arrivée chez Dernier Cri a significativement fait évoluer cette perspective. En effet, nous sommes régulièrement incités à dépasser les frontières de nos fiches de postes, notamment en favorisant la création de ponts entre nos différents métiers.

Il y a déjà quelques années, des concepts tels que la conteneurisation d'environnements, ont bouleversés l'écosystème du développement et ont conduits à l'émergence de développeurs attirés par les enjeux liés à l'hébergement et à l'exploitation pour finalement devenir des profils hybrides, les DevOps. Nous sommes convaincus que des changements similaires sont en train de s'opérer entre le monde du design et le monde du développement.

A l'instar de la conteneurisation, on observe aujourd'hui une tendance autour de la mutualisation des composants, les design systems, ou encore des moyens de plus en plus fiables pour générer du code à partir d'un design. Et même si nous sommes restés très longtemps à la recherche d'une manière élégante de décrire des profils hybrides technique / design, AirBnB nous a devancé de quelques mois en baptisant très justement ces profils "Designer Ops". Ainsi, il s'agit de profils à mi-chemin entre design et technique, capables d'utiliser des solutions telles que Sketch, comprendre l'intérêt des symboles et l'impact de tels concepts dans la phase d'intégration.

Supernova, fer de lance de cette révolution  

Les résultats de la veille de notre équipe créative nous ont permis d'identifier quelques solutions porteuses d'une promesse plus qu'alléchante, la possibilité de générer du code front à partir d'un simple design.

L'objet de cet article est de faire un retour d'expérience sur l'utilisation de l'une de ces solutions : Supernova.

Supernova est une application desktop qui permet de générer du code source à partir d'un design. Disponible uniquement sur MacOS pour le moment, son fonctionnement tel qu'il est décrit par ses concepteurs répond au flow suivant :

1. Vous importez vos fichiers Sketch contenant les écrans de votre application
2. Vous préparez la génération de code, notamment en améliorant le design, par exemple via l'ajout des contraintes, ou encore en changeant certaines propriétés, ou en définissant des transitions ou des animations.
3. Vous choisissez le format de sortie attendu parmi un ensemble de technologies : Swift (iOS), Kotlin et Java (Android), React Native (iOS + Android 🤘) et vous exportez votre projet.
4. Il ne vous restera alors plus qu'à brancher votre prototype à votre backend 🚀

Vous disposez ainsi d'une application "coquille vide" avec l'ensemble des écrans intégrés, animés et correctement connectés les uns aux autres.

• Ce flow est il véritablement exploitable par un développeur ?
• La qualité du code est elle au rendez vous ?
• Le gain de temps est il substantiel ?

Autant de questions auxquelles nous allons tenter d'apporter des réponses.  

Un grand pouvoir implique de bonnes fonctionnalités

Avant de rentrer dans le vif du sujet, voici une liste de fonctionnalités et de concepts qui vous aideront à mieux appréhender le fonctionnement de Supernova et également vous aider à comprendre ce qu'il peut faire et ce qu'il ne peut pas.

• Importer un design Sketch : pour chaque écran designé dans Sketch, Supernova en analyse le contenu et ajuste les différents groupes et contraintes issus du fichier Sketch pour en faire des balises constituants d'une application mobile. Pour ce faire, il vous suffit d'utiliser un plugin Supernova dans Sketch qui se chargera de faire ce transpilage.

• Convertir des éléments graphiques en composants techniques : les différents éléments de design, par exemple les boutons, seront convertis en composants Supernova. Cela génèrera le code source et les méthodes associées. A titre d'exemple, un bouton aura comme méthode btnOnPress() . L'outil dispose d'une gamme de composants plus ou moins avancés, tels que la Navbar, la Tabbar ou encore la List.

• Formatage automatique des fenêtres : à l'import de votre fichier Sketch, Supernova ajoute des contraintes automatiques pour une expérience nativement responsive. Vous pourrez apprécier le résultat directement sur plusieurs appareils parmi ceux définis ou définirez une taille personnalisée. Il est évidemment possible d’éditer les contraintes à posteriori au cas où le rendu n'était pas satisfaisant.

• Organisation des assets graphiques : Supernova centralise les différents assets projet au sein d'un unique répertoire et génère un ensemble de résolutions. Ce répertoire pourra être complété manuellement par la suite.

• Inspection du code : Lorsque vous êtes dans l'interface de Supernova, vous pouvez parcourir l'ensemble du code généré superposé à une vue "rendered" de l'application. Ainsi, lorsque vous sélectionnez un élément de cette vue, vous pourrez inspecter le code associé. Ainsi, toute modification du design mettra à jour le code associé tout en respectant les standards de développement. Il est également possible de renommer les variables.

• Navigation : Il est possible de définir les liens entre chaque écran et spécifier une animation de transition et un déclencheur de transition (trigger).

• Gestion des animations : chaque élément peut être animé de façon simple via une timeline. Vous pouvez ainsi gérer nativement un ensemble de transformations tels que le scaling, la rotation, le changement d’opacité ou de tailles, de radius. Un ensemble de propriétés tels que le tempo et temps d’animation sont également modifiables (Ease, Linear, Custom)

• Préparation à l'internationalisation : chaque texte est nativement défini comme variable. Chaque texte est ainsi nativement prêt à être internationalisé. C'est la librairie i18n-js qui est alors utilisée.

• Exporter le projet : Générer le projet dans le langage désiré, en précisant le nom du projet, le bundler identifier, et différents réglages liés au code, pour obtenir un projet prêt à être démarré via un simple npm start

Un outil pensé par des designers pour ... des développeurs

Des compétences techniques sont indispensables

Le principal intérêt de Supernova réside dans sa capacité à générer du code source. Pour que celui-ci soit en phase avec ce qui serait produit par un développeur, il est indispensable de maîtriser les concepts de développement d'une application mobile et également de comprendre la logique de génération de code qui est utilisée par Supernova. Ainsi la phase d'ajustement des différents composants, la définition de certaines propriétés ou encore l'ajustement des contraintes liées au layout est le fruit d'un apprentissage itératif, parfois un peu long et empirique, mais qui présente l'avantage d'avoir une courbe d'apprentissage relativement contenue pour qui sait ne pas se décourager trop vite.

Ainsi, un designer qui n'aurait aucune notion en terme de développement d'applications ne sera pas en capacité de générer une base de code exploitable par un développeur. Il est donc important de préciser que l'outil  est plutôt destiné à des développeurs qu'à des designers.

Pour essayer Supernova dans de bonnes conditions, il est toutefois nécessaire de maîtriser le processus créatif. Chez Dernier Cri, le processus de conception est séquencé en 3 différentes phases. La première phase, la production des écrans, est réalisée principalement sur Sketch. Les design produits sont ensuite synchronisés sur Abstract, un peu comme un développeur le ferait via Github. Enfin, les designs sont partagés via Zeplin pour être validés en interne puis par les clients. Habituellement, mon travail en tant que développeur ne commence qu'à partir de la fin de cette troisième phase.

Un prérequis : Sketch

La principale compétence à développer consiste donc à prendre en main Sketch. Pour accélérer ma courbe d'apprentissage, je suis parti d'un design d'application déjà existant. J'ai commencé par le "nettoyer", c'est à dire réarranger les groupes de façon à les faire correspondre à des composants, normaliser la manière dont ils sont nommés et créer les symboles correspondants. Cet article (en anglais) explique d'ailleurs très bien comment préparer un fichier Sketch pour Supernova.

Cette première étape m’a permis de me familiariser avec l’interface de Sketch et de ne pas être perdu en ouvrant Supernova. De manière plus générale, cela m’a permis d’avoir du recul sur les contraintes imposées par le design d'une application mobile d'un point de vue UX et UI.

Avantages business liés à l'utilisation de Supernova

Supernova est le premier outil de prototypage que j'ai essayé. Je ne pourrais donc pas faire un comparatif avec d'autres solutions que nous utilisons en interne, telles que Sketch, Invision ou Principle. Néanmoins, ce qui m'a bluffé c'est la possibilité de générer une application réellement utilisable, bien au delà d'une simple animation d'écrans avec des transitions élégantes. Le couple de fonctions "Export du projet vers Expo" (React Native) et la fonctionnalité de "publication" offrent un résultat époustouflant.

La qualité du code produit est également au rendez-vous et respecte la plupart des conventions et bonnes pratiques actuelles.

J'ai toutefois pu constater quelques limites à l'outil, notamment sur des designs d'écrans trop complexes. J'ai premièrement perçu ça comme un défaut de Supernova, mais avec un peu de recul, il est normal qu'un outil de génération de code ne soit pas destiné à gérer des cas trop complexes, le résultat risquant d'être déceptif et à recoder.  

Ainsi, la valeur la plus forte du produit réside dans sa capacité à considérablement réduire la phase d'intégration des design. Le temps passé à ajuster le prototype apporte un effet levier immédiat sur le temps de développement, immédiatement perceptible, tant sur le périmètre couvert par le code généré que par la qualité du code.

Développer plus vite grâce à Supernova ?

Pour reprendre notre flow de production d'une application, il est désormais clair qu'au terme de cette phase de prototypage, le code d'intégration est lui aussi prêt. Mais que reste t'il à faire du point de vue du développeur ?

L'un des principaux axes de progrès de l'outil provient de la duplication de code. En effet, l'utilisation de symboles et de blocs redondants ne génère pas de factorisation intelligente de la part de Supernova. La première étape consistera donc à supprimer cette duplication de code.

Une fois cette étape de nettoyage terminée, le développeur peut alors se concentrer sur la logique métier, s'interfacer aux APIs du backend et ajouter les fonctionnalités des différents composants.

Il peut parfois être fastidieux de démarrer un projet from scratch. Le fait de partir d'une base de code déjà générée nous permet de nous focaliser sur les aspects à plus forte valeur ajoutée, par exemple la mise en place du routeur et le branchement au backend et ainsi accélérer significativement le temps passé au développement de l'app.

Chez Dernier Cri nous pensons que l'utilisateur doit être mis au coeur du processus créatif. Le fait de devoir produire un prototype "réel" et utilisable nous permet de pousser encore plus loin la profondeur des tests utilisateurs et ainsi nous assurer que ce qui sera développée répond effectivement à un besoin client. L'atteinte du market fit n'en est que plus certaine.

Inconvénients

Supernova est un produit encore en développement. Pour cette raison il évolue encore beaucoup. J'ai rencontré quelques bugs qui seront probablement déjà corrigés lorsque vous lirez ces lignes, néanmoins en voici les plus pénibles :

• Il y a régulièrement des différences inexpliquées entre le mode "Preview" et le simulateur, mais ceci est généralement rattrapable via la modification du code
• Le fait d'ajouter une traduction sur un champ texte peut changer la taille du champ si les contraintes ne sont pas fortes, ce qui aura pour effet de casser le design de l’écran
• Il arrive que les traductions ne s'exportent pas correctement
• L'application se bloque quand on ajoute trop de contraintes dans une ScrollView
• Il n’est pas possible de faire usage des symboles Sketch. Ainsi, pour chaque écran, il faut redéfinir chaque élément de l'écran. Excepté pour certains composants natifs comme la Navbar.
• Il n’est pas possible de constituer sa propre librairie de composants, ce qui fait perdre beaucoup de temps.
• L'absence de librairie et de symboles augmente considérablement la duplication de code
• La documentation n’est pas toujours en phase avec les dernières mises à jours du fait de leur croissance rapide (mais les membres de Supernova répondent très rapidement sur Slack et peuvent aider à la moindre difficulté. Ils publient aussi beaucoup d’articles sur Medium)

J’espère voir naître un partenariat entre Supernova et Abstract pour avoir l’historique des fichiers et modifications à un seul endroit, même si Supernova propose une solution de collaboration via le cloud. 🤞

La suite

De bonnes fonctionnalités vont arriver au fil des mises à jours. Néanmoins, la possibilité de prendre en charge des symboles Sketch est de loin la feature que j'attends le plus et qui permettra de significativement factoriser son code et réduire le temps de mise en conformité des sources.

Le support de Flutter est sorti récemment et le support de React (Web) est en cours de développement au moment où j'écris cet article.

Enfin vous pouvez suivre les fonctionnalités demandées par la communauté  et voter pour celles qui vous intéressent le plus.

Conclusion

Supernova est déjà mâture et offre un nombre croissant de fonctionnalités déterminantes pour le lancement de nos projets mobiles. Néanmoins, j'ai le sentiment qu'il manque encore quelques fonctionnalités pour passer d'un usage consistant à générer quelques écrans compliqués et intégrer le code produit dans une base existante vers une utilisation exclusive de Supernova pour générer l'ensemble des écrans dun projet depuis son démarrage. C'est d'ailleurs la prise en charge de symboles qui poussera à cet usage.

Supernova reste une excellente solution et très prometteuse et nous ne pouvons que les féliciter pour le travail accompli jusqu'ici.