Ionic Framework : l’essentiel à savoir sur cette technologie multiplateforme

07 avril 2021

Vous souhaitez vous lancer dans le développement de votre toute première application mobile ? Et de préférence une application mobile multiplateforme pouvant être utilisée sur plusieurs systèmes d’exploitation, donc aussi bien sur Android que sur iOS ? 

Pour concevoir une application mobile multiplateforme rapidement et aisément, vous avez besoin d’une techno de développement mobile appelée « framework ». Il en existe plusieurs. Les frameworks les plus populaires étant React native, Xamarin, Flutter et Ionic Framework. 

Dans les lignes qui suivent, nous allons nous focaliser sur Ionic Framework, ses avantages et ses inconvénients et son mode d’installation. Nous vous dirons également comment créer votre tout premier projet Ionic. 

Mais avant d’aller plus loin, voyons tout d’abord ce qu’est un « framework ».    

Développement mobile : présentation de Ionic-1

Un framework, comment ça marche ?

Définition d’un framework

Un framework, aussi appelé cadre de travail ou cadre applicatif, désigne un ensemble d’outils de développement et de librairies. Il fournit un squelette de base, une sorte de « patron », qui aide le développeur à concevoir une application mobile performante sans que, à chaque nouveau projet, le développeur ait à en créer une de zéro. 

Etablissant les fondations d’un logiciel applicatif, le framework a ainsi pour objectifs de simplifier le travail du développeur, et de réduire considérablement le temps de codage des applications qu’il crée.   

Quand utiliser un framework ?

Les frameworks de développement mobile ont été conçus pour faciliter le développement d’applications mobiles multiplateformes. Le codage d’une application native ne nécessitant pas, quant à lui, l’utilisation d’un framework.  

Notons qu’une application mobile multiplateforme présente la particularité d’être compatible avec plusieurs systèmes d’exploitation, par exemple Android, iOS, Microsoft, Web ou Desktop. Elle n’a besoin pour cela que d’une base de code unique. Et ce, contrairement à une application mobile native qui, elle, ne peut fonctionner que sur un seul système d’exploitation. 

Les 2 types de frameworks de développement mobile

Les frameworks de développement mobile peuvent être classés en 2 catégories :

  • les frameworks dits « native cross-platform » qui compilent la base de code en iOS ou en Android natifs. Etant proches du natif, ils fournissent les meilleures performances au sein de l’univers des frameworks multiplateformes;
  • les frameworks hybrides qui combinent technologies web standard (HTML, CSS, JavaScript) et technologies natives. 

Les 4 frameworks les plus populaires

Dans le domaine du développement mobile multiplateforme, 4 frameworks (native cross-platform et hybride) se démarquent : Xamarin, React native, Flutter et Ionic.  

Frameworks native cross-platform 

Du côté des frameworks de développement natif cross-platform, les plus populaires d’entre eux sont :

  • Xamarin : utilisant le langage C#, cet outil open source basé sur la technologie .NET framework de Microsoft offre des performances assez proches des applications natives;
  • React native : basé sur la librairie Javascript React.js, React native est un framework multiplateforme open source créé par Facebook en 2015;
  • Flutter : créé en 2017 par Google, ce framework multiplateforme utilise le langage de programmation DART.

Framework de développement hybride

Et du côté des frameworks de développement hybride, le plus prisé des développeurs est Ionic framework. Lancé en 2013, ce framework open source permet de créer des applications compatibles avec les plateformes Android, iOS, Windows, Desktop et web.

Après cette brève présentation des frameworks, nous vous invitons à partir d’ici à plonger dans l’univers Ionic Framework. 

Présentation de Ionic Framework

Qu’est-ce que Ionic et comment a-t-il vu le jour ?

Ionic est un framework de développement d’application mobile hybride créé par Drifty. Il permet de construire des applications multiplateformes à partir de : 

  • une technologie web, qui utilise les langages HTML5, CSS et JavaScript;  
  • un framework, en l’occurrence Apache Cordova ou Capacitor. 

Quelles sont les différentes versions de Ionic ?

Ionic a fait du chemin depuis la création de sa première version en 2013.

  • Ionic 1.x : créé en 2013, il utilise Angular 1, Apache Cordova, Gulp et bower;
  • Ionic 2.x : sorti en 2016, il se base sur Angular 2, Apache Cordova et webpack qui vient remplacer Gulp et bower;
  • Ionic 4.x : sorti en janvier 2019, il repose sur Angular 7 ou 8, et sur Capacitor qui remplace progressivement Cordova. En outre, Ionic 4 supporte React Native et Vue.js;
  • Ionic 5.x : publié le 11 février 2020, il privilégie Capacitor par rapport à Cordova. Ionic 5 améliore massivement l’interface utilisateur, conformément aux directives du Material Design. Outre Angular, il prend aussi en charge React Native et Vue.js, et lance Ionic React et Ionic Vue (beta). 
Développement mobile : présentation de Ionic-2

Ionic Framework : avantages et inconvénients 

Utiliser Ionic Framework pour développer des applications mobiles multiplateformes comporte un certain nombre d’avantages :

  • utilisation d’une base de code unique. Ce qui permet de produire une application compatible avec plusieurs OS;
  • facilité de prise en main. Ionic dispose d’une documentation solide et exhaustive. Son support du HTML, CSS, JavaScript facilite aussi la transition des professionnels du web vers la conception d’applications mobiles;
  • intégration aisée avec de nombreux outils et plugins. Ce qui permet à Ionic d’étendre les fonctionnalités de ses applications, y compris l’accès aux capacités natives de l’appareil;
  • vaste choix de composants d’interface utilisateur. Ses composants écrits en HTML, CSS, et JavaScript facilitent la création d’interface utilisateur moderne et de qualité;
  • prototypage rapide des futures applications. Ionic dispose d’un outil de prototypage permettant de créer très facilement des applications par glisser-déposer de ses composants d’interface utilisateur;
  • communauté forte et dynamique. Ionic dispose de plus de 5 millions d’utilisateurs dynamiques facilitant les échanges et l’entraide en cas de besoin. 

Mais malgré ces avantages, Ionic a aussi ses inconvénients. En effet, pour des raisons de performance, il n’est pas fait pour tous les projets, et plus particulièrement s’il s’agit de produire des applications lourdes, telles que des jeux vidéo mobiles ou des applications mobiles avec des animations 3D.  

Préparation de l’environnement de développement

Après cette présentation préliminaire de Ionic, nous vous invitons maintenant à découvrir comment bien démarrer avec ce framework multiplateforme.

La première étape consiste à préparer l’environnement de développement.

Le terminal

Nous utiliserons le terminal intégré à l’ordinateur :

  • pour Windows, Invite de commande;
  • pour MacOs, Terminal.

Node.js

Cet environnement d’exécution JavaScript (runtime environment ou RTE) permet d’utiliser des outils sous forme de lignes de commande écrites en JavaScript. Il permet aussi de faire du Server-side Scripting.

Téléchargez et installez la dernière version LTS (Long Term Support) depuis Node.js.org.  

Pour vérifier que l’installation s’est bien déroulée, ouvrez un terminal et tapez :

node - - version

Si tout s’est bien passé, vous devriez voir s’afficher la version de Node.js installée sur votre machine.

NPM

Egalement appelé Node Package Manager, NPM gère les bibliothèques de programmation JavaScript dont une application pourrait avoir besoin. NPM est installé d’office après installation de Node.js.

Ionic

La création d’applications Ionic se fait principalement à travers l’outil Ionic CLI sous forme de lignes de commande. Pour l’installer, tapez depuis votre terminal :

npm install - g @ionic/cli

Si vous développez pour Android

Pour développer pour Android, vous aurez besoin d’installer le SDK Java ainsi que le SDK Android. Un SDK ou Software Development Kit est une collection d’outils de développement regroupés dans un paquetage.

  • SDK Java : pour l’obtenir, installez la version la plus récente de Java SE JDK (SE = Standard Edition) depuis le site officiel d’Oracle;
  • SDK Android : la manière la plus simple d’installer le SDK Android est d’abord d’installer Android Studio et ensuite d’installer le SDK approprié en se servant de son SDK Manager (Help > Find Action > sdk manager). Référez-vous aux instructions données par le site Officiel de Ionic pour plus de détails.

Si vous développez pour iOS

Pour développer pour iOS, vous avez besoin d’un environnement de développement Mac dotée de la configuration suivante :

  • Système d’exploitation OS X;
  • Logiciel Xcode qui permet le téléchargement d’iOS SDK.

Pour plus de détails, consultez le site officiel de Ionic

Emulateur

Très pratique, l’émulateur est un logiciel qui simule le fonctionnement d’un smartphone sur votre ordinateur, afin de faciliter les tests de votre application. Vous pourrez en trouver toute une panoplie sur Internet.

Une fois votre environnement de développement installé, vous êtes prêt à créer votre application Ionic.

Comment créer votre tout premier projet Ionic ?

Avant de créer une application Ionic, vous devez choisir le framework JavaScript à utiliser comme base de développement. Pour cela, vous avez le choix entre Angular, React.js et Vue.js.

A titre d’exemple, nous allons créer une application Ionic qui va afficher le fameux message cher aux développeurs : « Hello World ! »

Création du projet

Pour créer notre application, nous allons nous servir du terminal et taper la commande ci-dessous pour créer un projet Angular à partir d’un template vide :  » blank « .

ionic start helloworld blank -- type=angular --capacitor

Un dossier helloworld contenant un ensemble de dossiers et de fichiers sera automatiquement créé. Rentrez dans ce dossier.

Ecriture de l’application

Editez ensuite le fichier src/app/home/home.page.html et remplacez son contenu par ce qui suit : 

<ion-header> 
 <ion-toolbar> 
 <ion-title class="ion-text-center"> 
  Mon Projet Ionic 
 </ion-title> 
 </ion-toolbar> </ion-header>  

<ion-content> 
 <div id="container"> 
 <ion-button href="javascript : alert('Hello World')" 
 size="large">Cliquez-ici</ion-button> 
 </div> </ion-content>

Prévisualisation dans un navigateur

Vous pouvez avoir un aperçu du résultat directement dans un navigateur. Pour ce faire, exécutez la commande suivante dans le terminal.

ionic serve

Génération d’un exécutable

A titre de test, nous allons générer un exécutable sous Android. Dans le terminal, tapez les commandes suivantes, afin de préparer la construction du projet :

ionic build 
ionic capacitor build android

Lancez ensuite Android Studio afin que vous puissiez initier manuellement le processus de compilation.

Allez dans Build > Build Bundle(s) / APK(s) > Build APK(s).

Vous pouvez maintenant tester votre application en réel, en transférant et en installant le fichier exécutable .APK produit dans votre smartphone.

En résumé, Ionic Framework est relativement facile à utiliser et à apprendre, si vous connaissez déjà un framework JavaScript tel que Angular, React.js ou Vue.js. Vous aurez tout avantage à utiliser Ionic si vous souhaitez créer, rapidement et à peu de frais, une application web ainsi qu’une application mobile hybride de belle facture.

Largement utilisé, open source et bénéficiant d’une grande équipe de développeurs, Ionic est promis à un bel avenir.  

Pour en savoir plus :

Quel est votre projet ?

Nous vous accueillons dans notre agence, au cœur de Paris pour parler de votre projet.
Notre équipe se fera un plaisir de vous écouter autour d’un café  !

    Un projetUne candidatureWhat else