Chapitre 5

Technologies de développement pour

applications mobiles
I- Les Types d’application mobiles
Les technologies de développement mobile sont en constante
évolution avec une multitude de plateformes de
développement technique :
• webapp,
• site mobile, responsive design,
• cross-platform,
• application hybride
• application native…
• progressive web app
I- Les Types d’application mobiles
I- Les Types d’application mobiles
Site mobile :
C’est une interface accessible depuis un navigateur via une
URL et optimisée pour une consultation mobile : hiérarchie du
site, ergonomie orientée tactile, médias adaptés à l’écran, etc.
L’URL d’un site mobile commence généralement par “m.” par
exemple : m.starbusmetro.fr ou m.cinemagaumontpathe.com

Un site responsive design :

Il utilise une technique de développement qui permet la
réorganisation/suppression des contenus d’un site web en fonction
du terminal utilisé (desktop, tablette ou Smartphone).
Pour reconnaître facilement un site responsive design, réduisez la
taille d’une page web depuis votre ordinateur et constatez les
contenus qui s’adaptent à la taille de la fenêtre.
I- Les Types d’application mobiles
Web App
Il s’agit d’un logiciel applicatif pouvant être exécuté soit :
 depuis un navigateur web (webapp desktop). Ils se
présentent comme un logiciel de bureau, par exemple : les
messageries web
 depuis un smartphone (webapp mobile)

Développement natif :
Il est spécifique au système d’exploitation souhaité : pour
développer une application iOS il faudra utiliser le langage
Objective C ou Swif, pour Android c’est le Java et pour Windows
Phone c’est le langage C#.
I- Les Types d’application mobiles

Développement cross-platform :
C’est un développement qui va « générer » plusieurs applications mobiles
en même temps pour des systèmes d’exploitations différents. Cette
méthode permet de générer :
• des applications natives si vous utilisez des technologies telles
que Xamarin, Titanium, Ruby Motion ou Qtmobile. Celles-ci vont
vous permettre de concevoir un socle commun à vos applications
avec du langage C#, Ruby, JavaScript, etc.
• ou des applications dites « hybrides ». Elles sont basées sur un contenu
web commun qui est ensuite « encapsulé » dans une sur-couche
adaptée aux différents systèmes d’exploitations souhaités. Pour cela,
vous pouvez utiliser des technologies telles que PhoneGap, Rho Mobile
ou Apache Cordova. Par exemple, LinkedIn est une application hybride.

Les Applications Web Progressives ?

I-1 Les applications natives
Une application mobile native est un logiciel développé
spécifiquement pour un système d’exploitation mobile (iOS,
Android, Blackberry, Windows Phone, etc.).

Elle doit être téléchargée depuis un magasin d’applications

mobiles (store) puis installée sur le périphérique.

L’application mobile peut fonctionner hors-ligne et se baser

sur les fonctionnalités natives du terminal (appareil photo,
géolocalisation, etc.)
I-1 Les applications natives
Tableau des langages et IDE les plus courants pour
chaque système d’exploitation:
I-1 Les applications natives
Processus de génération d’une application native : rédaction
du code source, compilation, génération du code binaire.
I-1 Les applications natives
Le compilateur transforme le code source en code binaire et
génère un fichier :compilation, génération du code binaire.
I-1 Les applications natives
Avantages :
 Code performant
 Possibilité d’exploiter toutes les capacités de l’appareil
 Possibilité d’exploiter toutes les possibilités de l’OS

Inconvénients
 On doit produire plusieurs versions de l’application : une
version pour chaque OS
I-2 Application mobile native générée
Pour concevoir une application mobile native sur des systèmes
d’exploitation différents, il n’est pas obligatoire de développer
un logiciel pour chaque OS.
Possibilité d’utiliser des technologies cross-platform qui
permettent (en théorie) de réaliser un code source unique qui
sera transformé en plusieurs logiciels adaptés aux OS visés.

Exemple de technologies cross-platform : Xamarin, Titanium,

Qt, etc.
I-2 Application mobile native générée
I-2 Application mobile native générée
 Rédaction du code source
La rédaction du code source unique doit tout de même anticiper les
spécificités de chaque OS visé et faire appel à tous les SDK
nécessaires.

 Compilation du code source

Ce code source est ensuite compilé par la technologie cross-platform
choisie. Celle-ci va être capable de reconnaître les parties de votre
code source qui doivent être intégrées dans tous les logiciels et celles
spécifiques à un OS.

 Génération d’une ou plusieurs application(s) mobile(s) native(s)

Après compilation, vous obtenez différents fichiers d’exécution de
votre application mobile.
I-2 Application mobile native générée
Inconvénients
 Elles nécessitent donc des compétences de développement spécifiques ; plus leur
structure est complexe et plus le développement et la maintenance des interfaces
seront délicats.
 Il faut également prévoir des parties de code spécifiques pour s’adapter aux
éléments natifs de chaque OS. Cela peut parfois prendre plus de temps que de
passer par du développement natif.

Avantages
 En revanche, ces technologies peuvent aussi être utilisées pour réaliser une
application sur un OS unique. L’avantage est qu’une seule compétence de
développement est nécessaire (maîtrise du langage et des outils appropriés).
I-3 Application hybride
I-3 Application hybride
Fonctionnement : « Cas d’Apache Cordova »

 Rédaction du code source

La particularité de l’application mobile hybride est qu’elle est développée avec des langages
web. Le contenu web est alors « encapsulé » avec une interface mobile. Dans le code source, le
développeur fait d’abord appel au SDK* de la technologie qu’il utilise (en l’occurrence Apache
Cordova). Ce dernier va ensuite appeler les SDK des OS mobiles souhaités pour adapter le code
source selon le système d’exploitation.
 Compilation du code source
Ce code source est ensuite compilé par Cordova. Selon les parties du code source et les SDK appelés
en amont, le logiciel va générer des applications spécifiques aux systèmes d’exploitations visés.
 Génération d’une ou plusieurs application(s) mobile(s) hybride(s)
Comme pour les applications mobiles natives générées, on obtient différents fichiers
d’exécution de l’application mobile après compilation. Mais le contenu est très différent. Si
on y regarde de plus près, on s’aperçoit que le code généré dans ces fichiers est mélangé :
• une partie du code est toujours en langages web ;
• certaines parties restent en JavaScript Cordova ;
• enfin, seule une petite partie du code est du code binaire généré (nécessaire pour utiliser les
fonctionnalités du téléphone).
I-3 Application hybride
Avantages

 c’est une technologie multi-plateforme, ce qui est un gain de

temps considérable si le projet n’est pas trop complexe et ne
nécessite pas le développement de plugins spécifiques ;

 les compétences web sont plus répandues que les compétences

mobiles, les coûts de développement sont donc généralement moins
importants ;
 conçue pour être téléchargeable, l’application mobile hybride peut
être monétisée et bénéficie des classements dans les stores
I-3 Application hybride
Inconvénients

En revanche, certains inconvénients sont à prendre en compte :

 le code source est mélangé et la compilation se fait en de multiples
étapes, ce qui peut fragiliser le fonctionnement de l’application mobile
et rendre la maintenance longue et complexe ;
 tout n’est pas réalisable en terme de fonctionnalités avec cette
technologie, il faut s’assurer en amont de la compatibilité de votre projet (et
de ses évolutions futures !) avec les technologies hybrides. Par exemple
l’application peut ne pas supporter toutes les fonctionnalités.
 des contenus trop lourds peuvent avoir de plus forts impacts sur les
performances qu’avec une application native ;
 le mode hors-ligne est plus limité et plus délicat à concevoir ;
 enfin, en utilisant une application hybride, nous devenons dépendant
d’un logiciel tiers – en l’occurence Cordova – et donc de sa compatibilité
avec les nouvelles versions d’OS.
I-4 Progressive Web App
 Une application Web progressive (PWA) est une application mobile
accessible via le Web.
 Les PWA ont la même sensation et la même fonctionnalité que les
applications natives.
 Cependant, les fichiers PWA n'ont pas besoin d'être téléchargés depuis
l'App Store.
 Au lieu de cela, ils sont accessibles via un navigateur Web et charger
instantanément grâce à l'assistance des travailleurs du service.
 La pré-mise en cache permet aux PWA de rester à jour en tout temps,
ce qui garantit que l'utilisateur a accès à la version la plus récente du
PWA.
I-4 Progressive Web App
 Il s’agit d’un ensemble d’améliorations pratiques permettant de faire
fonctionner une application web d’une manière similaire à une
application de bureau ou mobile.

 L’objectif est d’avoir une expérience similaire ou identique à celle d’une

application native afin que l’utilisateur ne remarque pas la différence
entre une application native et une PWA.

 Les progressive web apps peuvent être définies comme une sorte
de mélange entre les web apps et les applications natives. Il est
important de souligner que la différence fondamentale est qu’une PWA
peut être installée depuis une fenêtre de navigation sans avoir à passer
par un App Store.
I-4 Progressive Web App
Avantages
• Les PWA fonctionnent généralement plus rapidement qu’un site web.
• Elles sont accessibles hors ligne.
• Elles sont responsive et fonctionnent donc avec n’importe quel système d’exploitation
et n’importe quel format d’appareil électronique.
• Les PWA fonctionnent comme une application native : l’icône apparaît sur le
téléphone comme n’importe quelle application, des notifications push peuvent être
envoyées et elles ont accès à certaines fonctionnalités du téléphone.
• Les PWA se trouvent dans les moteurs de recherche et l’algorithme de Google les mets
en valeur.
• Elles captent l’attention de l’utilisateur car elles permettent d’envoyer des
notifications.
• Il n’est pas nécessaire de l’installer via un app store. C’est un plus pour l’utilisateur et
le propriétaire. Pour le premier, c’est avantageux parce qu’il n’a pas besoin de passer
par le magasin d’application et le second n’a pas besoin de se soumettre aux règles
des app stores.
• Elles occupent moins d’espace dans la mémoire de l’appareil car il n’est pas nécessaire
de le télécharger.
I-4 Progressive Web App
Inconvénients

• Elle ne bénéficie pas du trafic de l’app store : Listé comme un avantage, il s’agit d’une
épée à double tranchant car de nombreux utilisateurs recherchent leurs applications
exclusivement sur les app stores.

• Elles consomment beaucoup de batterie : les PWA consomment plus d’énergie que les
applications natives, car le code est bien plus complèxe. Les appareils ont donc plus de
difficulté à l’interpréter.

• Elles n’ont pas accès à toutes les fonctionnalités du téléphone : Ceci peut être
considéré comme un point faible important pour les PWAs par rapport aux applications
natives.

• Certaines fonctionnalités ne sont pas compatibles avec iOS : Bien que la plupart des
utilisateurs utilisent des appareils avec un système d’exploitation Android, les PWA ne
sont pas optimisés pour être compatibles avec iOS et ceci représente leur grande
faiblesse.
I-5 Comment choisir ?

1. Quel type d’application pour quel terminal et OS ?

2. Critères de choix d’une techno pour son application mobile
3. Les tendances futur en matière de technologies de
développement,
II- Architectures d’appli mobiles
Généralement, plusieurs scénarios sont à considérer :
 L’application fonctionne complètement sur le Smartphone de
l’utilisateur, sans nécessiter une connexion à un serveur
distant.
- interface utilisateur de l’application
- traitements local des données
- accès aux périphériques : camera, gps, …
Les données sont stockées localement dans :
- des fichiers,
- des bases de données embarquées (SQLite)
II- Architectures d’appli mobiles
 L’application fonctionne sur un mode client/serveur
II- Architectures d’appli mobiles
L’application fonctionne sur un mode client/serveur

 Le Smartphone contient uniquement le code de l’interface

utilisateur
 Les traitements sont déportés vers un serveur distant (Api)
 Les données sont stockées généralement dans des BD
relationnelles classique ou dans le Cloud (BD NoSQL)
II- Rôles/Métiers

 Développeur FrontEnd

 Développeur BackEnd

 Développeur FullStack

 Chef de projet développement mobile

 Responsable stratégie mobile en entreprise

III- Défit des Appli Mobiles

 Ressources très limitées sur les appareils mobiles :

mémoires, processeur, …

 Faible autonomie des batteries

 Taille réduite de l’écran

 Sécurité
IV- Outils de développement
 nodejs,
 npm,
 vscode,
 atom,
 IntelliJIDEA,
 cordova,
 ionic,
 Android SDK,
 Firebase,
 Flutter