Rapport de veille technologique

Quelles technologies adopter pour concevoir des applica ons cross-

plateforme ?

Master Informa que Développeur Full-Stack

Septembre 2022 – Décembre 2022
Clément L’HARIDON
[Link]@[Link]
Je soussigné, Clément L’HARIDON, déclare être pleinement conscients que le
plagiat de documents ou d’une par e d’un document publiés sur toutes formes
de support, y compris l’internet, cons tue une viola on des droits d’auteur ainsi
qu’une fraude caractérisée. En conséquence, je m’engage à citer toutes les
sources que j’ai u lisées pour écrire ce rapport.
Table des ma ères

Les principaux systèmes d’exploita on mobiles ................................................. 4

Les technologies et langages cross-plateforme................................................... 6
Compara f des technologies .............................................................................. 8
React Na ve ................................................................................................... 8
Ionic ............................................................................................................... 9
Flu er............................................................................................................. 9
Benchmark ....................................................................................................... 10
Conclusion........................................................................................................ 15
Table des Figures .............................................................................................. 17
Bibliographie .................................................................................................... 18
 Le marché du développement mobile est en constante croissance depuis
l’arrivée des premiers smartphones. En France, deux personnes sur trois
possèdent un smartphone. Ce marché rapporte plus de 106 milliards de dollars
en 2018 au niveau mondial. D’ici 2025, les es ma ons prédisent un marché
supérieur à 400 milliards de dollars.

De plus, la pandémie mondiale de la Covid-19 a fortement favorisé la croissance

de l’u lisa on des smartphones dans la vie quo dienne. Selon [Link], en 2021,
les u lisateurs passent en moyenne 4 heures par jour sur leurs smartphones soit
une augmenta on de 30% par rapport à 2019.

Plus de 250 milliards d’applica ons ont été téléchargé sur les plateformes de
distribu on d’applica on comme AppleStore ou PlayStore.

Trouver sa place dans ce marché est donc essen el pour les entreprises afin de
développer leurs ac vités et toucher un maximum de personne.

Mais la diversité des systèmes d’exploita on qui u lisent des technologies

différentes ont poussé les développeurs à me re en place des méthodes afin de
parvenir à développer des applica ons pour plusieurs plateformes à la fois, d’où
la grande popularité des langages de développement mul plateforme.
Les principaux systèmes d’exploitation mobiles
Sur le marché des applica ons mobiles, il existe deux grandes sociétés qui
dé ennent le monopole des systèmes d’exploita on mobile. Il s’agit biensur de
Android pour Google et IOS pour Apple. Cependant, Android possède plus de
73% des parts de marché contre environ 20% pour IOS selon les données de
GlobalStat (Voir Figure 1).

Figure 1 : Part de marché des systèmes d’exploitation mobile selon les

données de GlobalStat en octobre 2022

Du fait que le système d’exploita on de Google (Android) soit open source, de

nombreuses marques conçoivent des appareils mobiles ou table e u lisant le
système d’exploita on Android. Au contraire, Apple restreint l’u lisa on de son
système d’exploita on à son u lisa on strictement personnelle. D’où le fait que
Android possède trois quarts des parts de marché des systèmes d’exploita ons.
Le reste des systèmes d’exploita on ne dépassent pas les 0,5% des parts de
marché et sont en constante baissent depuis quelques années face au monopole
d’Android et IOS. Si nous analysons les données sur la période de janvier 2009 à
octobre 2022 ( Figure 2 ), nous pouvons apercevoir que seul Android et IOS ont
su pérenniser leur situa on alors que les autres ont vu leur part de marché chuté
précipitamment et même disparaitre à par r de janvier 2019.

Figure 2 : Part de marché des systèmes d’exploitation mobile sur la

période de janvier 2009 à novembre 2022

La principale recommanda on des éditeurs de système d’exploita on est

d’u liser leurs propres solu ons ( leurs ou ls de développement, leur SDK (kit de
développement), leur langage de développement …)
Le développement na f est la solu on à privilégier car ce sera la plus pérenne.
Cependant, ces solu ons sont propres à chaque OS et sont bien sûr incompa ble
entre elles. C’est pourquoi des solu ons sont apparues progressivement afin
d’éviter de mul plier les développements na fs sur différents systèmes
d’exploita on : c’est ce qu’on appelle des langages cross-plateforme. Pendant
longtemps, ces langages n’étaient pas conseillé car ils étaient trop récent et nous
n’avions aucune garan e de résultat au niveau de la qualité (rapidité, expérience
u lisateur, fiabilité, évolu vité…). Mais depuis quelques années, ces langages
commencent à se démocra ser et à faire leurs preuves dans le marché des
applica ons mobiles.

Les technologies et langages cross-plateforme

Dans le marché du développement mobile il existe plusieurs types de
technologies mobile. Les langages Na fs proposés par des marques de système
d’exploita on mobile comme Android (Google) et IOS (Apple), les langages dit
“Hybride” sont les applica ons qui combinent des éléments d’applica ons
na ves et d’applica on web. Leurs avantages sont d’avoir un code commun pour
les deux plateformes, des performances égales au développement d’applica on
na ve. Cependant ces technologies sont très récentes. Flu er, React-Na ve ou
Ionic sont les principaux acteurs du marché des applica on hybride. Enfin, les
progressives web applica on, sont des sites internet qui peuvent apparaitre à
l’u lisateur de la même manière qu’une applica on mobile.
Depuis 2014, les tendances liées aux langages de programma on mobile hybride
commence à se développer et à connaitre un réel succès auprès des développeur.
Nous pouvons le constater grâce aux sta s ques de la plateforme StackOverflow
qui enregistre les ques ons posées chaque mois. La figure 3 montre ces données.
 Figure 3 : Pourcentages des questions posées par mois de 2009 à
2022

On remarque qu’à la sor e de Swi (IOS) en 2014, il y a eu un grand intérêt pour

ce e technologie et que depuis quelques années cet engouement est en chute.
Au contraire, Flu er et React Na ve, qui sont les deux principaux framework
hybride de concep on d’applica on mobile cross plateforme sont en constante
évolu on et ne cessent d’a rer de nouveaux u lisateurs.
Afin de répondre à notre probléma que : quelles technologies adopter pour
concevoir des applica ons cross-plateforme ? nous présenterons un benchmark
des langages Flu er, React Na ve et Ionic.
Dans un premier temps, j’ai commencé par faire une étude rapide des trois
technologies afin de mieux les connaitre et savoir les u liser correctement.
 Figure 4 : Tableau comparatif des technologies étudiées

Comparatif des technologies

React Native
React Na ve est un framework sor e le 26 mars 2015. Ce langage est un
framework d’applica on mobile open-source créé par Facebook (Aujourd’hui
Meta). React-Na ve est régie sous la licence BSD (Berkeley So ware Distribu on
Licence) qui permet aux u lisateurs de distribuer et réu liser une par e ou la
totalité du code sans restric on. Il permet de développer en Javascript des
applica ons mobiles na vement rendues pour Android et Ios en u lisant les
fonc onnalités na ves de ces plateformes. React Na ve exploite l'ensemble des
composants fourni par la bibliothèque React JS pour le développement
d'applica ons mobiles. Il u lise le DOM virtuel, mais il ne le manipule pas. Il
u lise DOM pour communiquer avec les éléments na fs de l'interface u lisateur.
Il permet d’accélérer le développement des applica ons mobiles grâce à sa
grande modularité. Elle permet de garan r la maintenance du code des
applica ons et a une grande capacité d’évolu on en fonc on des besoins des
u lisateurs mobiles.
React-Na ve présente de nombreux avantages.
 Il est facile à u liser, moins d’un mois est nécessaire pour connaitre le
langage et le maitriser.
 Il donne accès à des composants d’applica on na fs comme [Link]
  Il permet de concevoir des interfaces originales et cap vantes grâce aux
différents composants prédéfinis comme Picker, Switch, Slider, Bu on
etc….
 Il accélère le développement grâce aux bibliothèques du framework
comme Génial React Na ve et Redux qui perme ent de simplifier le travail
des développeurs.

Ionic
Ionic est un framework open-source créé en 2013 par Max Lynch, Ben Sperry, et
Adam Bradley. Ce langage permet de concevoir des applica ons na ves en
u lisant des technologies web tels que HTML, CSS et JavaScript. Le framework
permet de construire un site web mobile qui sera packager dans une applica on
grâce à Cordova. Les principaux objec fs de Ionic sont de faciliter son u lisa on
en fournissant un framework graphique complet sans installa on. De plus, il
u lise des ou ls de développement performant, permet l’intégra on de
fonc onnalité na ve des OS (Android et IOS) et propose de nombreux ou ls
professionnels. Cependant, ceux-ci sont payant.
Du fait que ce langage soit issu de technologies web, il est très facile à u liser et
me re en œuvre. Dans les dernières versions du framework, Angular a été
intégré au langage couplé à du Typescript pour assurer une bonne qualité de
code. Pour la ges on des feuilles de style, il u lise SASS qui facilite l’écriture du
CSS grâce aux fonc ons qu’il apporte (les variables, les mixins …).

Flutter
Flu er est un framework de développement mobile open-source développé par
Google qui permet aux développeurs de créer des applica ons na ves pour
Android et iOS en u lisant le langage de programma on Dart. Flu er a été créé
dans le but de fournir une solu on de développement mobile qui soit rapide,
flexible et facile à u liser.

L'un des principaux avantages de Flu er est son moteur de rendu rapide, qui
permet de me re à jour l'interface u lisateur en temps réel pendant le
développement. Grâce à cela, les développeurs peuvent visualiser en temps réel
les modifica ons apportées au code et effectuer des ajustements en
conséquence.
Flu er u lise également le système de widgets pour construire l'interface
u lisateur de l'applica on. Les widgets sont des éléments de l'interface
u lisateur tels que des boutons, des barres de naviga on et des formulaires, qui
peuvent être facilement personnalisés et réu lisés dans différentes par es de
l'applica on. Cela permet aux développeurs de créer rapidement des interfaces
u lisateur cohérentes et a rayantes.
En plus de ses caractéris ques de développement, Flu er offre également une
grande flexibilité en ce qui concerne les plates-formes cibles. Flu er peut être
u lisé pour créer des applica ons pour Android, iOS, Windows, Mac, Linux et le
Web. Cela signifie que les développeurs peuvent créer une applica on unique
qui fonc onne sur de nombreuses plates-formes différentes, ce qui peut être
par culièrement u le pour les entreprises qui souhaitent cibler un large public.
En résumé, c’est un framework de développement mobile qui offre une
expérience de développement fluide grâce à son moteur de rendu rapide et à ses
widgets faciles à u liser. Sa flexibilité en ce qui concerne les plates-formes cibles
en fait également une op on a rayante pour les développeurs souhaitant cibler
un large public.

Benchmark
Afin de me cons tuer un avis sur ces différents langages, j’ai décidé de les u liser
au travers d’une pe te applica on afin de les juger moi-même.
Pour Ionic, nous devons avoir NodeJs d’installé sur notre poste pour pouvoir
installer le package Ionic comprenant l’ensemble des ou ls pour le
développement d’une applica on mobile. Nous commençons par ini aliser un
nouveau projet avec la commande « Ionic start », nous avons la possibilité de
préciser le type de framework JavaScript que nous souhaitons u liser (React,
Angular ou Vue). Puis nous pouvons lancer un serveur pour émuler notre
applica on avec la commande « Ionic start ».
 Figure 5 : Structure de code et visualisation en Ionic

Nos pages sont composées de deux fichier, le premier est un fichier .css pour le
design des pages et le second un fichier .tsx pour décrire le contenu des pages
affichées. Le code en Ionic ressemble à du xml.

Figure 6 : Code du menu en Ionic

En suivant la documenta on de Ionic, j’ai implémenté un slider d’images.
Je me suis rendu compte au travers de l’u lisa on de ce langage qu’il était très
facile a u liser et a me re en place. Ses points fort sont d’u liser une structure
en JavaScript et de pouvoir intégrer d’autre framework JavaScript facilement tel
que Angular ou VueJS.
En ce qui concerne le langage React Na ve, l’ini alisa on est iden que. Nous
devons avoir NodeJs et nous installons simplement react-na ve avec npm (npm
est un ges onnaire de paquets u lisant l’environnement NodeJs). Nous u lisons
la commande « expo init DEMOAPP ». Lors de ce e phase, nous avons la
possibilité de choisir le type d’applica on (applica on vide ou applica on qui
con ent déjà un menu). Dans notre cas, nous choisirons la deuxième op on.
Grâce à npm nous pouvons obtenir une visualisa on de l’applica on créer avec
la commande « npm start ».

Figure 7 : Structure de code et visualisation en react-native

L’ini alisa on de l’applica on nous permet d’avoir un début d’aperçus sur les
fonc onnalités présentent avec ce langage et de nous faire un premier point de
vue sur ce e technologie mobile.
Son principal avantage est de pouvoir être intégré dans des applica ons déjà
existantes comme Android en Kotlin et en Java et IOS en Objec ve-C et Swi .

Un peu de la même façon que les langages présentés précédemment, flu er est

aussi très facile a me re en place. Il suffit de télécharger le kit de développement
(SDK) pour pouvoir u liser le langage au travers de fichier en Dart pour
commencer à concevoir des applica ons mobile cross-plateforme mais aussi des
applica on web et bureau que à par r d’une base commune.
Après avoir ini alisé le projet avec la commande « flu er create appflu er »,
nous avons la possibilité de lancer notre applica on depuis un navigateur, un
émulateur ou un téléphone physique.

Figure 8 : Structure de code et visualisation en flutter

La structure du code (voir Figure 8) est rela vement facile à comprendre :

  Les dossiers "android" et "ios" sont dédiés pour ajouter/modifier du code
na ve pour chacune des plateformes
 Le dossier "assets" con ent toutes les ressources supplémentaires comme
les images et les fichiers .json.
 Le dossier "lib" est le cœur du projet Flu er. Il con ent toute la par e code
qui est commune à toutes les plateformes.
 Le dossier "test" con ent les fichiers de tests de différentes par es du
projet.
 Les dossiers « linux », « macos » et « windows » sont dédiés aux
plateformes du même nom, on retrouve à l’intérieur le code lié à celle-ci.
 Le fichier "[Link]" est la pièce d'iden té du projet. Il con ent
toutes les informa ons sur le projet. C'est grâce à ce fichier qu'on peut
gérer les dépendances et ajouter des plugins externes.
Il est très recommandé d’ajouter un fichier « .env » qui permet de stocker les
données secrètes du projet. Ce fichier fait par e des fichiers listés dans
".gi gnore" pour ne pas le retrouver dans un dépôt GitHub. Afin que ce fichier
soit reconnu par l’applica on il faut ajouter l’extension « flu er_dotenv » au
fichier [Link].
La commande « flu er pub get » est u lisé a chaque fois que l’on ajoute une
dépendance au projet. Nous pouvons retrouver de très nombreuses
dépendances sur le site « [Link] » qui les références et montre la
documenta on associée. On peut retrouver des dépendances qui ajoute des
fonc onnalités comme h p qui permet d’interagir avec le navigateur, geolocator
qui permet l’u lisa on du GPS du téléphone mais aussi des plugins de mise en
forme comme des slidders.
De plus, flu er est compa ble avec de nombreux smartphone sous Android et
Ios comme le montre la Figure 9. On peut voir que les téléphone u lisant iOS 11
ou supérieur ainsi que les téléphones sous Android 4.1 ou supérieur sont pris en
charge. Ceci permet d’avoir une applica on compa ble avec un maximum
d’u lisateur.
 Figure 9 : Plateformes supportées par Flutter

Conclusion
Pour conclure, les langages de développement cross-plateform perme ent aux
développeurs de créer des applica ons pour plusieurs plates-formes en u lisant
le même code source. Cela peut être très pra que car cela signifie qu'ils n'ont
pas à réécrire le code pour chaque plate-forme cible. C’est également bénéfique
pour les u lisateurs finaux car cela signifie qu'ils peuvent u liser l'applica on sur
leur plate-forme de choix sans avoir à a endre qu'une version spécifique soit
créée pour ce e plate-forme. Le langage de développement Flu er a retenu mon
a en on. Je trouve qu’il est très facile a me re en place et facile a apprendre.
De plus, c’est un framework de développement d'applica ons cross-plateform
qui permet aux développeurs de créer des applica ons pour les systèmes
d'exploita on mobiles, les ordinateurs de bureau et les appareils web en u lisant
une seule base de code. Il u lise le langage de programma on Dart et propose
une interface u lisateur na ve pour chaque plate-forme cible. Enfin, il permet
un développement plus rapide et propose une large gamme de widgets et de
bibliothèques de composants qui facilitent la créa on d'interfaces u lisateur
a rayantes et intui ves. Flu er est connu pour être performant et offrir une
expérience u lisateur fluide, ce qui le rend par culièrement adapté aux
applica ons mobiles.
Table des Figures

Figure 1 : Part de marché des systèmes d’exploita on mobile selon les données
de GlobalStat en octobre 2022 ........................................................................... 4
Figure 2 : Part de marché des systèmes d’exploita on mobile sur la période de
janvier 2009 à novembre 2022 ........................................................................... 5
Figure 3 : Pourcentages des ques ons posées par mois de 2009 à 2022 ............ 7
Figure 4 : Tableau compara f des technologies étudiées ................................... 8
Figure 5 : Structure de code et visualisa on en Ionic ....................................... 11
Figure 6 : Code du menu en Ionic ..................................................................... 11
Figure 7 : Structure de code et visualisa on en react-na ve ............................ 12
Figure 8 : Structure de code et visualisa on en flu er ..................................... 13
Figure 9 : Plateformes supportées par Flu er .................................................. 15
Bibliographie
1. Dart packages. (s. d.). Dart packages. [Link]
2. Application cross-plateforme : quelle techno de développement choisir ? (s. d.).
Mobizel. [Link]
3. Tran-Nguyen, T. (2019, 14 avril). Flutter — NOT yet another x-platform framework.
Medium. [Link]
framework-c7edfaadee65
4. Devoxx FR. (2022, 4 mai). Première application mobile Flutter ? Ne faites pas les ...
(Olivier Revial et Sebastien Flochlay) [Vidéo]. YouTube.
[Link]
5. Newsletter Flutter Digest. (s. d.). Flutter Digest. [Link]
6. Flutter. (2022, 20 septembre). Nested Navigation with GoRouter (The Boring Flutter
Development Show, Ep. 63) [Vidéo]. YouTube.
[Link]