Pull Requests, Open source, Design system, vous connaissez? Smart se lance!

Services et outils Smart et moi

Si vous reconnaissez ces termes, c’est probablement parce que vous jonglez avec les possibilités d’interagir dans un projet de développement informatique en code source ouvert. C’est quoi? C’est du code qui peut être travaillé et amélioré par tout le monde (qui y comprend quelque chose), sans devoir rendre de comptes à une marque ou à une entreprise. Vous êtes développeuse ou développeur? Alors cette innovation dans l’univers des outils informatiques proposés par Smart pourrait vous intéresser… de très près. Faire remonter des soucis techniques, ou des détails améliorables, proposer un autre agencement pour une page ou pour un formulaire, ça va progressivement devenir possible. Võ Minh Thu, directeur technique de Smart, nous explique en détails cette évolution qui ouvre des potentiels énormes vers la collaboration libre et les apports spontanés.
Créer des outils, oui bien sûr. Mais ce que veut Smart c’est les créer ensemble avec les sociétaires de la coopérative.

Thu, peux-tu nous dire qui tu es et ce que tu fais chez Smart ?

Je m’appelle Võ Minh Thu, je travaille pour Smart en Belgique depuis décembre 2018, et je suis son directeur technique depuis l’été 2020. Je travaille principalement avec Louis Bersini, directeur informatique, et l’ensemble de la Direction des systèmes de l’information.

Tu travailles depuis quelques temps avec les équipes de Smart à la mise en place d’un ‘design system’, de quoi s’agit-il ?

Un ‘design system’ est une collection d’éléments de design que l’on va pouvoir utiliser pour créer les interfaces d’une application informatique. On parle par exemple d’un menu, d’un champ de formulaire ou d’un bouton. Ces différents éléments sont présentés individuellement, mais aussi avec les principes de design qu’ils suivent, ainsi que des lignes directrices et de la documentation pour utiliser ces éléments ensemble. Le but est d’assurer une certaine cohérence dans les interfaces visuelles et les expériences d’utilisation ainsi créées. En pratique dans notre cas, ce ‘design system’ est présenté sous forme d’un site web, https://design.smart.coop. Il reprend l’aspect purement design réalisé avec un outil dédié, Figma, et la réalisation de ce design dans les technologies du web, HTML et CSS.

S’il s’agit d’un outil interne, pourquoi avoir souhaité partager la démarche ?

C’est effectivement un besoin interne qui a motivé la création de ce ‘design system’. Néanmoins nous savons que nous ne sommes pas seuls à faire des développements informatiques. Nous avons donc souhaité développer cet outil en ‘open source’ et de façon publique afin que les partenaires de Smart, ses membres et les développeur·euses de tous les pays puissent y avoir accès et y contribuer de manière libre. En fait, toute personne qui le souhaite pourra utiliser le fruit de notre travail sans nous demander la permission. Il s’agit d’un outil collaboratif que chacun peut utiliser ou enrichir. Cette approche ouverte et d’enrichissement mutuel est pleinement alignée avec les valeurs coopératives qui sont les nôtres.

Dans le cas de Smart, à quoi va servir le Design System ?

Nous poursuivons trois objectifs :

  • Le premier objectif est de créer la base visuelle de nos futurs développements logiciels : le design lui-même. Il peut s’agir, par exemple, des différentes couleurs qui peuvent être utilisées, de la forme et de la taille d’un bouton ou de l’emplacement d’un menu ou d’un formulaire sur l’écran. Ce travail visuel s’inscrit bien entendu dans la charte graphique de Smart introduite début 2019.
  • Le deuxième objectif est de créer et d’assembler ces éléments de conception dans un outil collaboratif appelé Figma. Figma est spécialisé dans la conception d’interfaces logicielles. Outre le travail de conception des designers, il peut également être utilisé par les équipes de développement de logiciels pour prototyper les nouveaux écrans et leur organisation.
  • Le troisième objectif est de mettre en œuvre et de présenter le design à l’aide de technologies web : HTML et CSS. Cette mise en œuvre est censée faire office de référence pour d’autres développeur·euses, afin de pouvoir reproduire la même chose dans n’importe quel langage de programmation. Nous savons que différentes équipes utilisent différentes technologies et nous ne voulons pas y faire obstacle.
Qui peut contribuer et comment ?

Comme beaucoup de projets open source, les contributions potentielles et les personnes qui peuvent les réaliser sont diverses. Il peut s’agir de la remontée d’un bug ou d’une faute d’orthographe dont on espère que sa prise en charge sera rapide, ou bien il peut s’agir de proposer une amélioration, comme l’ajout d’un nouvel élément graphique ou la réécriture d’un passage de la documentation. Le projet est hébergé pour la partie code sur GitHub et nous utilisons donc leurs outils de suivi de bug pour la gestion de différentes remontées, et leur principe de ‘Pull Requests’ pour la proposition de changements.
Pour la partie design pure dans Figma, nous devons encore étudier la meilleure façon de nous y prendre mais à minima nous désirons rendre les fichiers Figma disponibles.

C’est la première fois qu’un projet chez Smart est réalisé en open source. Sera-t-il suivi d’autres ?

Les principes de l’open source sont importants pour moi et ont beaucoup de sens pour une coopérative comme Smart mais l’opportunité ne s’était, jusque-là, pas présentée. En effet ouvrir le code existant représenterait une charge de travail trop importante et un intérêt limité pour nos partenaires. En revanche ce ‘design system’ était l’occasion rêvée pour adopter cette démarche. Sans pouvoir trop m’avancer, un autre projet, cette fois une application informatique à part entière, devrait voir le jour prochainement et bénéficiera du même traitement.

8 réponses sur « Pull Requests, Open source, Design system, vous connaissez? Smart se lance! »

Bonjour Frédéric,

Merci pour votre question. Il s’agit d’un choix de l’équipe de design qui possède de l’expérience dans la création et la maintenance de ce genre de projet. Différents choix étaient possibles, dont Bootstrap, mais c’est l’approche ITCSS et BEM (https://design.smart.coop/development/writing-css/architecture.html)qui a été retenue.

Nous pensons que c’est la bonne approche, avec une vision à long terme, pour créer un système cohérent qui répond aux besoins spécifiques, notamment en termes de marque et de communication, de Smart. Le design system est vu comme un ensemble, lié à la charte graphique, plutôt que comme un ajout à quelque chose d’existant.

C’est vrai que c’est étonnant de voir qu’autant de ressources soient dédiées à ce genre de projets alors que des projets matures et qui fournissent toutes les fonctionnalités (et possibilités de personnalisation) existent (Bootstrap, Bulma, Skeleton, Foundation, …).

Je ne remets pas en question les compétences de l’équipe mais le peu de transparence sur les développements techniques et le fait qu’on jongle depuis plusieurs années avec deux interfaces rend un tel projet quelque peu surprenant, et pas très rassurant.

En tout cas, hâte de voir l’open source déployé à plus grande échelle chez Smart!

Bonjour Luis,

Ce message et les projets en cours cherchent précisément à apporter davantage de transparence dans nos développements technologiques, c’est bien notre volonté d’aller dans ce sens.

Vous mentionnez l’existence de deux interfaces. En réalité il y en a bien plus que deux (pour des outils internes, ou dédiés à la France, voir à d’autres pays où Smart est présente). En vue de consolider nos fonctionnalités sur moins d’outils, aucune des solutions à notre disposition ne permettaient de viser cette standardisation. Le design system va donc nous aider à définir un nouveau dénominateur commun.

Bonjour,
L’ouverture d’un API documentée est elle prévue ? Cela permettrai de connecter la plateforme a d’autre type ERP/CRM ?

J’avais déjà un peu regardé pour récup le token JWT d’authentification et voir toute les route utilisée pour faire un plugin maison mais j’ai pas gratté plus loin 🙂

Bonjour Jean,
Merci pour cette question, proposer une API est une idée présente chez Smart depuis un moment mais nous n’avons pas de projet dédié dans ce sens pour le moment. En revanche, nous souhaitons concevoir soigneusement les routes sous-jacentes aux nouveaux écrans réalisés avec le design system. Ça ne correspond pas exactement à ce que vous souhaitez mais s’en rapprochera.
Pouvez-vous dire les fonctionnalités dont vous auriez eu besoin sous forme d’API ?

hello, ceci est vraiment bienvenu et attendu ! super !

maintenant, il reste toute la stratégie de communication, vers l’extérieur mais surtout entre coopérateur·ices … qui actuellement se fait principalement (ou pas surtout) par l’entremise d’entreprises américaines privilégiant leur bénéfices au dépend de la loi, des données personnelles et même de la transmission des messages … (algorithmes d’engagement, tout ça … )
Quand pouvons nous espérer un système basé sur les standards du web (activitypub – ex mastodon, peertube, pixelfed, funkwhale, …) pour échanger entre créateur·ices et s’organiser voir participer légitimement aux Assemblées Générales (qui sont ces 2 dernières années non valables aux termes du RGPD donc pourraient même être juridiquement contestées) ???
j’ai bien essayé de contacter « process » ou quelqu’un responsable le la communication, participé à quelque meeting, proposant aide et solutions, mais sans aucune réponse dans ce sens … c’est particulièrement déprimant/rageant …
merci !!

Bonjour

D’abord merci pour cette réaction. À la comm’ nous n’avons jamais reçu vos messages ou sollicitations mais nous pouvons vous confirmer que ce commentaire-ci nous est bien parvenu. 😉

Par où commencer ? Et bien les choix qui sont faits en matière d’outils et de réseaux répondent à différents besoins et font l’objet d’une réflexion qui évolue constamment.

Dans le cas des podcasts que nous avons diffusés cette année, nous avons fait le choix d’utiliser les plateformes de streaming ‘classiques’ afin de promouvoir notre message en dehors de notre communauté et d’espérer toucher un public plus large.

Dans le travail quotidien mené par l’équipe Vie Coopérative, par contre, les outils et logiciels libres (nuage, pad et chat) ont déjà bien leur place et sont à présent également utilisés par les instances (conseil d’administration) de la coopérative pour développer le travail collaboratif.

En ce qui concerne l’AG, les convocations et la plateforme de vote sont gérées à partir de la solution logicielle opensource Limesurvey.

Enfin, comme en témoigne cet article, des changements sont en cours. Ne nous mentons pas, ce type de petite révolution prend du temps dans une organisation aussi importante que la nôtre mais chaque étape mérite d’être soulignée.

En tout état de cause, vous avez raison sur le fait qu’on ne peut pas se permettre d’être immobile sur cette question, merci de nous avoir partagé votre avis et vos conseils.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *