Chez Zol on fait des applications mobiles ! 

Ok mais pourquoi faire ? C’est vrai que la plupart des sites web offrent déjà une expérience de navigation mobile plus que correcte grâce au responsive design (ergonomie qui s’adapte à la taille de l’écran) et à l’avènement du mobile first (sites pensé d’abord pour leurs utilisations mobiles). Mais avec de vraies app mobiles on peut proposer de nouvelles possibilités aux utilisateurs et utilisatrices ! Ces apps s’inscrivent directement dans le quotidien de chacun et chacune avec de plus grandes opportunités de personnalisation, des notifications plus efficaces et paramétrables et l’accès à d’autres objets connectés (bluetooth, NFC …). 

C’est chouette tout ça mais si c’est pas pareil qu’un site web c’est quoi exactement une application mobile ? Y a évidemment des choix techniques à faire pour proposer des solutions optimales et pragmatiques à nos clients. Comme on est tous un peu plus familiers avec le bricolage qu’avec le code on va parler d’étagères pour justifier tous nos choix tu vas voir …

Mr BriZOLage : Une application mobile c’est un peu comme une étagère … 

Une application mobile est une sorte de petit logiciel hébergé le plus souvent sur un store et téléchargée sur un téléphone compatible. Il existe deux stores principaux : AppStore et Google play Store disponibles sur les smartphones en fonction de leur système d’exploitation : IOS et Android. Les usages sont répartis sur ses deux systèmes d’exploitation, il est donc important, pour une bonne adoption du produit, de rendre une application disponible sur Android et IOS.

On peut imaginer une application mobile comme une étagère : un objet du quotidien qui nous permet de ranger toutes sortes d’objets assimilables à des fonctionnalités.

Si les applications sont des étagères alors les systèmes d’exploitation (IOS et Android) sur des murs d’aspect différent.

Les étagères ne sont pas toutes pareilles

Comme chez Casto, il existe plusieurs types d’étagères avec différentes caractéristiques …

Applications Natives : les étagères classiques et robustes

Les applications natives sont assimilables à des étagères classiques et robustes. Ce sont de simples planches droites qui sont attachées au mur par des fixations .. Et c’est là que ça se complique : Les murs ne sont pas tous faits du même matériau ! Le mur bleu est en placo et demande l’utilisation de chevilles Molly alors que le mur vert est plein et préconise l’utilisation de chevilles universelles (s’écartent en vissant). Si on veut être capable d’accrocher nos étagères «natives» sur tous les murs, il faut produire 2 étagères différentes avec chacune des fixations qui lui sont propres. Le résultat donne alors des étagères solides, robustes et parfaitement adaptées aux caractéristiques de chaque mur. Elles permettent d’entreposer toutes sortes d’objets et de supporter un poids important. Si on veut ajouter plus d’objets sur nos étagères ou les réparer, il va falloir modifier indépendamment les deux étagères ce qui augmente les risques de malfaçons et de blessures.

Pour en revenir aux applications mobiles natives, les chevilles correspondent aux langages de programmations et à leur architecture. Ainsi, les applications pouvant être utilisées avec Android (mur vert) sont écrites en JAVA ou Kotlin (chevilles universelles) en suivant une architecture et des règles inhérentes à cette plateforme. Idem pour les applications IOS (mur bleu) qui sont, elles, écrites en Objective-C ou Swift (chevilles Molly) et possèdent également leurs propres règles et architecture.  Les performances des apps natives sont optimales et il est possible d’accéder à tous les composants internes de l’appareil (clavier, appareil photo etc…) mais aussi à des composants natifs (input, date picker …) auxquels les utilisatrices et utilisateurs sont habitués. Néanmoins, cela nécessite le développement de deux applications distinctes qui devront chacune être modifiées pour chaque correction ou évolution du produit. Les sources de bugs et d’erreurs sont alors multipliées par deux ainsi que le temps et donc le coût de développement.

Application hybrides : les étagères d’angle décoratives

Les applications hybrides sont assimilables à des étagères d'angles de décoration. Une seule étagère suffit pour être présente sur les murs bleu et vert à la fois. Elles sont fixées sans chevilles directement dans le mur. Elles ne peuvent donc pas supporter trop de poids, y déposer trop d’objets peut les fragiliser voir même les faire tomber. L’étagère est identique sur les deux murs sans possibilité d’adaptation.

Pour en revenir à nos applications hybrides, elles peuvent être déployées sur les deux stores principaux à partir du même code source. Il s’agit en fait de pages web responsives encapsulées dans des applications natives et possiblement disponibles sur les stores. Le développement est ici grandement simplifié car il est possible de n’implémenter qu’une seule application dans les langages web classiques (HTML/CSS). L’application peut également être comprise par un navigateur web sans besoin de transformation ou de compilation. Néanmoins, les composants natifs n’y sont pas disponibles et il est très difficile de produire une application ressemblant aux applications natives. L’application est ici exactement la même pour les deux plateformes bien que leurs utilisateurs et utilisatrices s’attendent à des designs et des comportements différents selon la plateforme utilisée. De plus, les performances sont nettement inférieures à celles des applications natives, la webview étant une couche d’abstraction supplémentaire s’éloignant encore un peu plus du langage machine. Il n’est également pas possible d’adapter des comportements et des visuels en fonction de l’OS utilisé.

Application cross-platform : les grandes étagères d’angle

Les étagères cross-platform sont assimilables à de grandes étagères d’angles. Une seule étagère est présente sur les murs vert et bleu tout en bénéficiant des fixations caractéristiques de chaque mur. Elles permettent de supporter le même poids que les étagères classiques « natives » mais, passé un certain poids, il faut augmenter le nombre de chevilles fixatrices. Il est également possible de modifier l’étagère sur un des deux murs indépendamment l’un de l’autre.

Revenons à nos apps … Les applications cross-platform permettent donc de construire des applications pour Android et IOS à partir du même code source. C’est la seule similitude avec les apps hybrides car les apps cross platform permettent d’obtenir des performances similaires et compétitives avec les applications natives et également d’adapter certaines fonctionnalités selon les plateformes visées. Elles peuvent accéder à tous les composants natifs ce qui renforce leur ressemblance avec les applications natives. Il est également possible d’y intégrer directement des modules natifs.

Maintenant qu’on sait tout ça on fait quoi ? Il n’est pas toujours évident de maîtriser à 100% la pose de toutes sortes d’étagères ! Chez Zol, comme d’hab, on a choisi de se tourner vers le pragmatisme qui semble mieux représenté par les technologies cross-platform qui permettent un réel gain de temps et d’argent pour sortir les produits rapidement sans négliger les performances et l’expérience utilisateur. Les technologies cross-platform continuent d’évoluer chaque jour et leurs limitations sont de moins en moins visibles. 

Mais le choix ne s’arrête pas là ! Il existe de nombreuses technologies cross-platform sur le marché donc on a encore un choix à faire pour pouvoir installer nos étagères tranquillement…

Pour poser des étagères il faut des outils 

Pour poser nos étagères il ne suffit pas de choisir les bonnes planches … Il faut percer le mur pour y insérer nos chevilles et nos fixations ! Pour ce faire, on va forcément avoir besoin d’une perceuse … C’est là qu’interviennent les fameux frameworks cross-platform ! 

Comme c’est le cas pour les perceuses, il existe beaucoup de framework différents. On a sélectionné les 3 principaux parmi les plus populaires pour les comparer ici … Promis pas de guerre de chapelle ! Aucune de ces perceuses n’est foncièrement meilleure qu’une autre. Elles font toutes de jolis trous mais s’adressent à un public différent. 

NET MAUI : la perceuse de papa

**Description

.NET MAUI, anciennement appelé Xamarin, existe depuis 2011 et fait certainement parti des plus anciens framework cross-platform. Il permet de construire des applications en utilisant les technologies microsoft (C#, .NET) tout en accédant à l’UI native des composants si nécessaire. 

Performances et utilisation

Bien que .NET MAUI soit moins populaire que les autres technologies présentées ici, elle s’inscrit parfaitement dans l’environnement .NET. Cette technologie s’adresse donc plus particulièrement aux développeurs et développeuses C# qui pourront l’utiliser dans leur écosystème habituel et maîtriser rapidement ses spécificités.

Perspectives d’évolution

Bien qu’étant inclus dans l’écosystème .NET qui bénéficie d’une grande communauté et d’une bonne réputation dans le développement d’applications, plusieurs signes nous permettent de douter de la durée de vie du framework. Microsoft est particulièrement impliqué dans le développement des framework open-source concurrents (coucou React Native) et la popularité de MAUI est plutôt en baisse. Très peu d’applications populaires sur les stores utilisent ce framework en 2023 et ce chiffre ne semble pas à la hausse.

Côté perceuse

MAUI c’est un peu comme la perceuse de papa qui dort bien au chaud dans son garage. Elle est un peu poussiéreuse mais suffit pour poser la plupart des étagères ! Le meilleur c’est qu’elle est toujours accompagnée de papa qui a une solide expérience dans le bricolage. En revanche, on ne sait pas pour combien de temps encore ça va durer ! Papa nous parle d’en acheter une autre qu’il a essayée à Leroy Merlin l’autre jour …

React Native : la perceuse du web

Description

React Native est un projet open-source, lancé en 2015 par Facebook après un projet de hackathon interne. Il permet de développer des apps avec du code en JavaScript en utilisant les outils et les logiques de ReactJS. Il est ainsi possible de développer une seule application dans un langage connu et en suivant une architecture éprouvée tout en restant le plus proche possible des performances du natif. Il est possible de construire ses propres modules natifs et il existe de nombreux paquet de la communauté pour gérer toutes sortes de fonctionnalités natives précises.

Performances et utilisation

L’année 2023 a été particulièrement productive pour React Native qui améliore grandement ses performances et sa scalabilité grâce à une toute nouvelle architecture. Le confort de développement a également été amélioré (debugging, symlink support, typescript …), bien que les mises à jour très régulières peuvent rendre les montées de version difficile à organiser au cours de la vie d’un produit. La communauté de React Native est très active et impliquée dans l’évolution du framework, les mainteneurs sont attentifs à la façon dont ils organisent les issues pour faciliter les contributions et répondre aux problèmes de chacun plus rapidement.

Perspective d’évolution

React Native est utilisée par Meta, Microsoft (xbox game pass, skype, suite office), Amazon, Shopify … Elle bénéficie d’une grande notoriété (114k étoiles sur Github) et surtout d’un très grand nombre de contributeurs (2 606) ce qui permet des évolutions et des améliorations constantes. Cette communauté nombreuse et active ajoutée à l’intérêt des grandes entreprises de l’IT pour cette techno nous donne confiance dans l’évolution et la pérennité de la solution.

Côté perceuse

React Native c’est la perceuse du web, celle qu’on voit dans nos pubs insta, elle a remplacé Nord VPN dans les placements de produits de Youtube. Elle est parfaite pour poser les étagères. De nouvelles versions sont sans cesse mises sur le marché.Les bricoleurs et les bricoleuses qui l’utilisent sont d’ailleurs particulièrement actifs et proposent sans cesse de nouveaux contenus pour nous aider à percer nos meilleurs trous ! C’est vrai qu’il faut la racheter régulièrement mais les “murs” se renouvellent également plusieurs fois par an donc ça vaut le coup !

Flutter : la perceuse de google

Description

Flutter est un projet open-source lancé en 2017 par Google. Il permet de développer des apps en utilisant le langage de programmation Dart lui aussi développé par Google. On ne retrouve pas ici la logique de composants des framework web qui sont remplacés par des widgets. Il est possible d’accéder aux fonctionnalités natives des smartphones mais les composants natifs sont eux mis de côté au profit de l’uniformité des widgets de Material 3 (thème graphique et bibliothèque d’éléments visuels). Il est toutefois possible de développer des fonctionnalités et des comportements spécifiques selon les plateformes.

Performances et utilisation

Flutter a pour objectif depuis sa sortie de concurrencer les autres framework cross-platform en proposant des performances supérieures, principalement en termes de rendu visuel (animations, transitions, 3D …). Il permet même de concurrencer Unity3D, leader du cross-platform dans le domaine du jeu mobile. Flutter est très populaire (159k étoiles sur Github) mais les contributions sont un peu plus difficiles (1 300 contributeurs environ). Les librairies développées par la communauté sont disponibles sur une marketplace (pub.dev) et doivent donc être validées par l’équipe de Flutter avant d’être disponibles ce qui réduit le nombre de contributions et ralentit quelque peu les évolutions.

Perspective d’évolution

Flutter est principalement utilisé sur des apps de Google et quelques autres grandes entreprises (Alibaba, BMW …). Google déploie des moyens considérables dans la maintenance et les évolutions de Dart et Flutter ce qui nous permet d’envisager sereinement l’avenir des applications Flutter.

Côté perceuse

Flutter c’est la nouvelle perceuse de Google qui veut se lancer dans le monde du bricolage. Elle est conçue pour être la plus efficace du marché. Pour ça, c’est tout un protocole de perçage qui a été inventé ! La perceuse a une forme différente, une nouvelle façon de la tenir de nouveaux boutons … Google s’est beaucoup investi dans ce nouveau produit et chaque nouveau trou percé dans l’entreprise utilise leur nouvelle perceuse.

React Native : la plus adaptée pour nos étagères

Maintenant que tout est clair, il a quand même fallu faire un choix. Chez Zol notre premier objectif est de répondre aux besoins de nos clients tout en leur assurant des solutions robustes, scalables et pérennes. Encore une fois, il ne s’agit pas ici de comparer les technos pour savoir laquelle est la “plus mieux”, on explique nos choix et comment ils collent parfaitement à ce qu’on fait.

Performance et rendu visuel

Performance

On ne va pas rajouter un énième comparatif de performance “Flutter vs React Native le match”, les mesures étant souvent faites dans des contextes très précis et en dehors de nos réalités quotidiennes. On peut en revanche affirmer que les performances de React Native sont comparables aux performances des technologies natives. D’autant plus depuis fin 2023, avec le nouveau moteur Javascript Hermes et le remplacement du bridge (qui faisait le lien entre le code JS et les langages natifs) par le JSI qui peut être directement compris par les OS. Là où React Native est un petit peu à la traîne c’est au niveau de la fluidité du rendu visuel. Par défaut, le moteur de rendu est moins performant que ceux de Flutter ou de Unity3D par exemple. Mais c’était sans compter sur le développement par la communauté de React Native Skia. Skia étant le moteur de rendu de Flutter et de Chrome il permet des performances optimales et comparables à celles de ses concurrents. Il est donc possible d’utiliser cette librairie au besoin pour certaines animations exigeantes.

Rendu et expérience natifs

React Native met à disposition des composants de base qui sont directement traduits en composants natifs. Ainsi, il est visuellement impossible de faire la différence entre une application React Native et une application native. Ce n’est pas le cas pour les autres frameworks qui ajoutent une surcouche qui a tendance à uniformiser le rendu visuel des composants entre les plateformes (par exemple, Flutter utilise les design de Material 3 pour ses widgets). Le côté négatif c’est que React Native met à disposition une plus petite variété de composants ce qui peut rendre la construction de certaines vues plus complexes. Mais en cas de grande complexité, il est possible de piocher parmi les composants mis à disposition par la communauté React Native qui a pu se heurter au même problème.

Robustesse et scalabilité

Une des plus grandes forces de React Native est qu’il s’inscrit dans l’éco-système React. Il utilise la librairie ReactJS et implémente la même architecture (pattern flux). React est une technologie éprouvée qui a su s’installer dans le monde du web comme une référence en la matière. Une grande communauté de développeurs et développeuses web utilise quotidiennement ces outils et concepts qu’ils continuent d’améliorer d’année en année. React Native peut ainsi faire parti des écosystèmes React, il peut partager des logiques et des services au sein de mono-repo ou consommer des librairies construites pour le Web sans soucis. Chez Zol, on s’est tourné vers React depuis des années, c'est donc tout naturellement qu’on pourra mettre notre expertise au service du mobile en utilisant React Native.

Évolutivité et durabilité

La Core Team de React Native organise les contributions et ses évolutions de façon à ce qu’un maximum de développeurs et de développeuses puissent contribuer à l’avancée de la technologie. Elle organise les bugfixs et les demandes d’évolution et en fait ce qu’elle appelle des “umbrellas issues”. Chaque umbrella issue est découpée en petites tâches très spécifiques pour qu’il soit possible d’y contribuer selon ses compétences (dev React ou dev IOS ou dev Android) tout en étant guidés par un ou une experte de la core team. Ainsi, les sujets sont traités rapidement et de nombreuses idées d’améliorations naissent constamment. C’est cette philosophie qui permet à React Native de rester concurrentielle sans compter sur un gros investissement de la part de Meta.

Toute cette effervescence amène à de nouvelles versions très régulières. Bien que chaque mise à jour soit accompagnée de son guide et de son changelog pour faciliter la montée de version, il peut être difficile de toutes les suivre et il faut prévoir du temps pour mettre régulièrement nos applications à jour et bénéficier de toutes les nouveautés. Ces nouvelles versions sont aussi poussées par les nombreuses mise à jour des OS et permettent aux apps d’utiliser les dernières nouveautés rapidement.

Tout ça pour dire : les apps mobiles c’est pas facile ! Ça n'a pas été de tout repos mais on a choisi les outils et les étagères adéquats pour être en mesure d’implémenter toutes les solutions demandées. La perceuse React Native ce n’est pas qu’un choix de confort mais bien une assurance de performance et d’évolutivité pour construire vos plus belles étagères ! Mais pas question de se reposer sur nos lauriers, on continue chaque jour à surveiller tout ça pour ne laisser passer aucune nouvelle technique de bricolage …