1. Article : Présentation de Ionic
Ionic est une solution logicielle permettant de faciliter la création d’applications mobiles hybrides et d'application web progressive.
Plus qu’un simple framework, la solution Ionic intègre un nombre important d’outils :
- Création et partage de prototypes
- Services clouds dédiés aux notifications push, compilations multi-plateformes distantes…
- Proposition d’une base de projet fonctionnel
…
Une application native
Application développée spécifiquement pour un système d’exploitation (Android, iOS…)
- Les + : Configuration plus fine, plus grande maîtrise du logiciel
- Les - : Long à développé si plusieurs systèmes visés
Une application web
Application développée en HTML accessible et utilisable depuis un navigateur internet.
- Les + :
- Ne nécessite qu’un navigateur web
- Pas besoin de télécharger l’application
- Les - :
- Pas d’accès au play Store
- Plus lent qu’une application native
- Accès restreints aux fonctions natives
Une application hybride
Une application hybride est Application web s’exécutant sur une webview locale ayant des accès à une brique native intéragissant avec le système d’exploitation du périphérique.
- Les +:
- Plus rapide à développer (un code unique pour plusieurs systèmes d’exploitation)
- Possibilité d’utiliser du code web déjà développé
- Les -:
- Plus lent qu’une application native
- Des accès aux fonctions natives parfois compliquées
Une application web progressive
Une application web progressive est une Application web multiplateforme et fournissent des fonctionnalités aux utilisateurs se rapprochant des avantages des applications natives. Une PWA peut être utilisée en offline, télécharge son contenu de manière progressive (politique de cache, grâce au service worker), propose une expérience utilisateur riche (responsive, plein écran, gestion de l’écran…) , adapte sa structure et son contenu selon la plateforme.
Elle peut être ainsi installée sur un téléphone mobile sans avoir besoin de diffuser une application sur les stores traditionnels.
- Les+:
- Les mêmes que pour une application web: code unique pour toutes les plateformes, code web réutilisable…
- Peut-être téléchargée et consultée en offline
- Plus léger qu’une application hybride ou native
- Les-:
- Plus lent qu’une application native
- Dépendant des versions des APIs web disponibles dans les navigateurs des plateformes
Références
- Ionic Documentation overview, Ionic
- Native web or hybrid apps
- Application mobile native, web ou hybride ?, Supinfo
- Application native VS Progressive Web App: que choisir ?
- Progressive Web apps
En bref
- Framework pour la création d’applications hybrides
- Racine de projet fonctionnel
- Ecosystème cloud
- Build mobiles et publications: Ionic AppFlow
- Prototypage : Ionic Creator et Ionic Studio
- Partage de prototype : Ionic View
Framework Ionic
Le framework Ionic fournit un ensemble de composants web adaptés pour une expérience utilisateur multi-plateformes.
Bien que l’outil ait été initialement conçu pour fonctionner avec Angular, il peut être utilisé en simple JS, React ou Vue.
Ainsi, le framework intègre aussi bien des outils CLI de génération de projet et de contenus, des composants web, une interface adaptée pour l’utilisation de composants natifs (issus de Apache Cordova ou Ionic Capacitor).
Par défaut, le style graphique proposé s’inspire de la charte graphique Material Design/
- Conception d’applications web, hybrides et progressive en Typescript / JS
- Composants natifs : Ionic == surcouche Cordova
- Composants web : Angular et composants personnalisés
- Un thème graphique initial : Material Design
Exemples d’applications Ionic
Framework Ionic
Framework Ionic - Les plugins
Par défaut, une application a accès aux plugins selon les plateformes qu’elle cible.
Une petite partie des plugins natifs intègrent une compatibilité avec les navigateurs. Une attention particulière sera donnée aux plateformes compatibles de chaque plugins ajoutés.
Les applications conçues avec Ionic sont exécutées dans un navigateur web (embarqué ou non). Elles ont ainsi accès aux APIs web standards.
-
Plugins natifs: Interface native / JS
- Le code de chaque plateforme est codé en langage natif (un par plateforme)
- Apache Cordova / Ionic Capacitor: Encapsulation dans des interfaces JS
- Ionic : Encapsulation des interfaces Cordova / Capacitor dans des composants (Angular, Vue…)
-
Webview
- Utilisation des composants Angular
- Utilisation des fonctionnalités natives du navigateur (Micro, caméra…)
La graine de projet, déjà opérationnelle
S’appuie sur les bases Cordova + surcouche ionic-app-script
- Structure initiale de projet
- Générateur de code (pages, services…)
- Tasks runner (minification, transpilation, compression, linter…)
Prototypage : Ionic Creator
- Pratique pour prototyper
- La plupart des options sont payantes (dont la conversion HTML)
- Pas de gestion des composants personnels
- Non OpenSource (outil non modifiable)
Partage de prototype : Ionic View
- Développement : partages et mises à jours de plusieurs applications
- Pas besoin d’inscription sur les stores
- Cas d’utilisation : retour client, collègues et testeurs
Services Cloud
- Système de mise à jour
- Authentification centralisée avec providers Google, facebook…
- Notifications Push pour les utilisateurs
- Compilation multi-plateformes distante
Market
- Projets starters
- Plugins
- Thèmes graphiques
Conclusion
Ionic ==
- Framework de création d’applications mobiles hybrides et progressives
- Des bases de projet quasi-complets + utilitaires
- Des outils de prototypages
- Des services cloud (compilation, notification, authentification…)