Si vous lisez ceci, c’est que vous savez déjà à quel point JavaScript est puissant. Avec Ionic, vous pouvez créer des applications Web progressives (PWA), des applications hybrides ou même des applications de bureau à l’aide de ces technologies.
Il existe de nombreux Frameworks parmi lesquels choisir pour réaliser la même chose et certaines fonctionnalités clés peuvent être cruciales pour l’avenir du framework. L’équipe Ionic a fait de très bons choix pour la 4ème version d’Ionic, sortie en janvier 2019; certaines fonctionnalités intéressantes sont la boîte à outils PWA, Capacitor et les Web Components. Discutons-en quelques-uns… mais d’abord, qu’est-ce que Ionic?
Vue d’ensemble d’Ionic
Qu’est-ce que Ionic?
Ionic est un SDK open-source complet pour créer des applications mobiles et de bureau performantes et de haute qualité à l’aide des technologies Web (HTML, CSS et JavaScript). La version originale a été publiée en 2013 et construite sur AngularJS et Apache Cordova. Les versions les plus récentes, connues sous le nom de Ionic 4 ou 5 ou simplement «Ionic», sont basées sur Angular. Ionic a été l’un des premiers frameworks hybrides pour le développement d’applications mobiles.
Qu’est-ce qu’un framework hybride?
Traditionnellement, les entreprises qui souhaitent concurrencer sur le marché mobile devaient créer des applications pour iOS et Android, en utilisant leur plate-forme propriétaire respective; cela impliquait que vous deviez avoir des équipes séparées avec des compétences distinctes pour développer et maintenir deux applications séparées avec exactement la même fonctionnalité; ce qui était très cher.
Les applications hybrides sont venues à la rescousse en fournissant un moyen de développer des applications mobiles en utilisant des langages connus tels que les applications mobiles JavaScript pour les deux plates-formes. Un framework hybride est un outil de développement qui permet aux développeurs d’utiliser une seule base de code et une seule version pour l’App Store et le Play Store.
Ionic 2/3
Ionic était basé sur un framework populaire (Angular) et offrait un moyen d’accéder aux capacités natives à l’aide d’Apache Cordova. En plus de cela, il a fourni des thèmes pour que les boutons et les éléments semblent natifs de la plate-forme sans aucun changement de code.
En un mot, les applications Ionic fonctionnent sur le navigateur mobile; mais les thèmes et la possibilité d’accéder au matériel natif tel que la caméra, les font ressembler à des applications natives.
Ionic a acquis une énorme popularité depuis son lancement pour sa simplicité. Les développeurs pourraient développer des applications pour iOS et Android, avec un look natif en utilisant JavaScript grâce à la puissance des thèmes Ionic, d’Angular et de Cordova.
Les points faibles d’Ionic étaient :
- Tournait sur le navigateur : il y a des craintes qu’Apple n’autorise pas les applications WebView sur l’App Store. Ce sont les mêmes craintes qu’en 2013, même si en 2019, pas une seule application Ionic n’a été supprimée du magasin à cause du framework.
- Performances : puisqu’il s’exécute sur une vue Web (navigateur), il est plus lent. Les principaux problèmes de performances ont été résolus dans Ionic 2/3 et maintenant, pour les applications standard dans les appareils standard, Ionic fonctionne très bien. Sauf si vous avez d’énormes ensembles de données ou des applications graphiquement intensives, Ionic devrait fonctionner assez bien.
Nouvelles fonctionnalités d’Ionic 4
Ionic 4 apporte d’énormes améliorations à la plate-forme. Ionic est passé d’un framework mobile hybride à un framework universe l: vous pouvez créer des applications mobiles hybrides, Web et Desktop.
Il y avait 3 nouvelles fonctionnalités clés qui ont fait de Ionic une tendance en 2019.
Web Components
Les composants Web sont un ensemble d’API de plate-forme Web qui vous permettent de créer de nouvelles balises HTML personnalisées, réutilisables et encapsulées à utiliser dans les pages Web et les applications Web.
Ionic utilise la bibliothèque Stencil.js pour ses composants qui est également basée sur TypeScript.
Les composants Web sont là pour rester. Ils sont sous l’égide de WC3 et des principales sociétés informatiques. Consultez ce didacticiel complet concernant les composants Web.
Prise en charge de React et Vue.js
Outre l’incroyable intégration Angular 8, vous bénéficiez désormais d’un support pour React et Vue.js. Consultez cet article qui compare React vs Angular.
PWAs et Capacitor
Ionic intègre désormais pleinement les Progressive Web Apps. Pensez aux PWA comme les applications Web qui ajoutent des fonctionnalités natives de base telles que l’icône de l’écran d’accueil, l’accès à la caméra, le mode hors ligne, etc. dans votre smartphone.
Capacitor est le remplacement naturel de Cordova pour accéder aux capacités natives lorsque vous utilisez votre mobile. Mais c’est plus que ça :
Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. We call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.
Le même appel API peut être utilisé pour accéder à une fonctionnalité sur le Web, le Desktop ou le mobile.
Capacitor apporte des améliorations de performances et est rétrocompatible avec Cordova. En plus de cela, il fournit des éléments PWA, faisant du rêve d’une base de code unique une réalité. Les API Capacitor détecteront votre plateforme et agiront en conséquence.
Par exemple, si vous essayez d’accéder à la caméra, elle vérifiera si l’application est exécutée en tant que PWA et utilisera l’API Web, ou si vous exécutez nativement, elle utilisera les plugins Ionic Native. l’application pourra également fonctionner sur votre PC grâce à Electron.
L’Upgrade d’ionic 2/3 vers Ionic 4
Malgré cet énorme ensemble de nouvelles fonctionnalités, la mise à niveau est facile:
- Capacitor est rétrocompatible avec Cordova.
- Angular 7 ou 8 sont très faciles à migrer.
- Vous pouvez ajouter les fonctionnalités des PWA une par une.
Par exemple, Ionic 4 utilise la nouvelle navigation Angular 7 et le nouveau style mais il est toujours rétrocompatible avec l’ancien code afin que vous puissiez migrer les fonctionnalités une par une. Vous pouvez toujours utiliser vos anciennes bibliothèques Cordova et les remplacer lentement par Capacitor.
Les Avantages d’Ionic 4
- Facile à utiliser et à apprendre.
- Angular 8 + TypeScript. Y compris l’outillage angulaire.
- Framework universel: iOS + Android + Windows Phone + Web + PWA + Desktop.
- PWA + Native Features sous la même base de code.
- Supporte React + Vue.
- Open Source et basé sur les standards du Web.
- Thèmes natifs et Material Design.
Les Inconvénients d’Ionic 4
- Performance : Bien meilleur et similaire à NativeScript mais inférieur à Flutter.
Quand utiliser Ionic
- Votre objectif principal dans le Web puis le mobile.
- Vous utilisez déjà Angular.
- Vous souhaitez migrer vers une PWA mais vous avez toujours des utilisateurs qui utilisent votre application et vous souhaitez fournir une transition douce.
- Vous avez un petit budget et vous souhaitez créer un site Web et des applications mobiles.
- Votre application n’a pas besoin d’une UX avancée, de graphiques ou ne gère pas beaucoup de données.
- Vous souhaitez vous appuyer sur des normes ouvertes. Vous souhaitez éviter de mettre à jour vos bibliothèques tous les 2 mois.
- Vous n’avez pas de développeurs natifs dans votre équipe et leur principale compétence est JavaScript.
Quand ne pas utiliser Ionic
- Jeux ou applications graphiqument intensives
- Applications complexes avec beaucoup de données et machine à états compliquée. Utilisez React Native pour cela.
- Vous souhaitez créer des expériences utilisateur incroyables et la conception de l’interface utilisateur est la clé du succès de votre entreprise.
- Vous utilisez déjà beaucoup l’écosystème React et vous souhaitez une excellente intégration GraphQL utilisant des frameworks tels que Vulcan ou Gatsby.
Avec Ionic 4, l’équipe Ionic a apporté des améliorations importantes qui font d’Ionic un excellent choix pour un grand nombre de cas d’utilisations. Ionic est largement utilisé, a un excellent support et un excellent écosystème, il est basé sur des standards ouverts, il est rapide, a une grande équipe de développeurs derrière et il est open source.
