Cadres Cordova : Ionic contre Framework7

De nos jours, les développeurs Web dominent le monde. JavaScript est utilisé partout où l'on peut programmer. Parmi ces domaines, le développement d'applications mobiles a été l'un des premiers moyens de se diversifier : il y a une dizaine d'années, PhoneGap permettait l'installation d'applications HTML et JavaScript pour iOS et Android.

Depuis, la technologie a connu des hauts et des bas : malgré la facilité de développement, ces applications étaient évidemment assez différentes des applications natives. Vanilla HTML et JavaScript basé sur les navigateurs étaient destinés aux navigateurs, et il n'y avait aucun moyen pour eux de migrer sans problème vers ce nouveau domaine.

À ce jour, les principaux problèmes sont toujours les suivants :

• Difficultés à adhérer à la conception et à l'animation natives
• Effets de transition d'écran complexes
• Gestion des événements tactiles
• Performance sur les grandes listes
• Positionnement des éléments fixes
• Adaptation aux différentes tailles d'écran
• Emplacements des éléments de contrôle natifs (par exemple, la barre d'état iOS)
• Adaptation aux différents navigateurs mobiles

Pourquoi utiliser un framework pour les applications Cordova ?

La technologie Cordova est souvent sous-estimée en raison des applications qui présentent les problèmes ci-dessus. Les frameworks visent à les compenser et à rapprocher le plus possible les applications HTML des applications natives, à la fois en termes de conception et de performances.

Examinons quelques exemples d'applications hybrides. Ils sont créés avec les deux frameworks les plus performants actuellement, en plus de l'interface utilisateur Onsen, qui sont conçus pour faciliter l'expansion des développeurs Web dans le monde moderne : Framework7 et Ionic.

À propos du cadre ionique

Ionic a été développé par Drifty Co. en 2012 et est basé sur Angular. Depuis lors, il a été en développement actif, recevant des investissements importants et une forte communauté de développeurs. Le site officiel affirme que des millions d'applications ont été développées sur cette base.

Au moment de la rédaction de cet article, la version la plus récente est Ionic 3 basée sur Angular 5. Ionic 4, visant la flexibilité et l'indépendance d'Angular, est en version bêta précoce.

Outre le moteur d'interface utilisateur, une merveilleuse bibliothèque de composants et une interface permettant d'accéder aux fonctions natives de l'appareil, Ionic offre plusieurs fonctionnalités, services et utilitaires supplémentaires.

La CLI ionique

L'interface de ligne de commande d'Ionic est utilisée pour l'initialisation interactive du projet (c'est-à-dire un assistant), la génération de pages et de composants et l'exécution d'un serveur de développement qui vous permet de créer des applications en déplacement et de les recharger en direct. Il fournit également une intégration avec les services cloud Ionic.

Labo et DevApp

Lab est le mini-service extrêmement utile qui vous permet d'imiter le travail de l'application sur différentes plates-formes dans le navigateur du développeur Ionic. DevApp vous aide à déployer rapidement une application sur un appareil réel.

Conditionnement, déploiement et surveillance

Ionic est livré avec un ensemble de services Web qui simplifient et accélèrent la création, le débogage, le test et la mise à jour des applications pour les testeurs et les utilisateurs.

Cependant, les plans d'Ionic changent souvent. Certains services existants auparavant, tels que Auth, Push, Analytics et View, ont été fermés, provoquant un tollé de la part des abonnés.

Créateur

Il s'agit de l'éditeur graphique glisser-déposer d'Ionic pour développer des interfaces fonctionnelles.

À propos de Framework7

Ce framework a été développé en 2014 par le studio russe iDangero. En fin de compte, un développeur a travaillé sur le projet, sans compter plusieurs contributeurs mineurs au référentiel GitHub.

À l'origine, Framework7 consistait en un ensemble de composants d'interface utilisateur dans le style d'iOS 7, alors récemment publié, d'où il tire son nom. Plus tard, un thème Android a été ajouté et les deux thèmes ont été mis à jour pour les versions iOS et Material Design les plus récentes.

Récemment, le développement du projet s'est accéléré et il est passé d'un ensemble de composants à un cadre à part entière pour les applications mobiles, intégrant des technologies et des outils populaires.

La prise en charge et les exemples de Framework7 utilisant Vue.js existent depuis la v1, et la v3 prend également en charge React. C'est ce qui peut permettre au projet de concurrencer sérieusement le plus populaire Ionic, qui ne propose que Angular et TypeScript.

Installation et premier lancement

Ionique

Pour commencer à travailler avec Ionic, installez-le avec NPM :

 npm install -g ionic

Ensuite, sélectionnez le modèle pour la future application. Le site Web officiel d'Ionic propose plusieurs modèles, ou vous pouvez sélectionner un modèle vide pour créer l'application à partir de zéro avec ionic start myApp blank .

Choisissons un design simple. Exécutez la commande suivante :

 ionic start Todo tabs

Répondez "Oui" lorsque le programme d'installation vous demande "Voulez-vous intégrer votre nouvelle application à Cordova pour cibler iOS et Android natifs ?" Cela intégrera automatiquement l'application à Cordova et la préparera pour le déploiement sur les plates-formes mobiles.

À l'étape suivante, l'installateur proposera de nous connecter au SDK Ionic Pro. Répondez « Non » pour l'instant afin de simplifier l'exemple.

Installez le package @ionic/lab supplémentaire pour obtenir l'interface utilisateur de débogage pratique, des imitations d'appareils iOS, Android et Windows dans le navigateur :

 cd Todo npm i --save-dev @ionic/lab

Vous pouvez maintenant démarrer l'application en mode débogage. Cela vous permet de développer et de déboguer l'application en direct dans le navigateur Web :

 ionic lab

De ce fait, vous obtiendrez plusieurs adresses utiles :

Le service de débogage Ionic Lab est lancé sur le port 8200. L'application elle-même s'exécute sur le port 8100, et le lien Ouvrir en plein écran d'Ionic Lab y mène. La fenêtre du navigateur avec Ionic Lab en cours d'exécution s'ouvre automatiquement.

De plus, Ionic fournit l'adresse de l'application dans le réseau local . Ceci est extrêmement utile, car il vous permet d'ouvrir l'application dans le navigateur de l'appareil mobile, tant que l'appareil est sur le réseau local (par exemple, via Wi-Fi). De plus, vous pouvez utiliser le bouton Ajouter à l'écran d'accueil pour rouvrir l'application en mode plein écran. C'est le moyen le plus rapide de tester votre application sur l'appareil.

Une autre façon est l'application Ionic DevApp, qui peut être installée sur un appareil mobile et permet d'accéder à l'application via le réseau local. Il offre un support de plug-in (Ionic Native) pour accéder aux fonctions natives de l'appareil et afficher les journaux.

Cadre7

Les outils de développement de F7 sont moins avancés que ceux d'Ionic et la CLI d'initialisation automatique n'est pas documentée. Cependant, le site Web officiel fournit plusieurs référentiels GitHub avec des modèles de projets qui vous aideront à commencer à développer.

Semblable au modèle Tabs dans Ionic, F7 propose des vues à onglets , mais nous utiliserons un modèle plus fonctionnel qui intègre Framework7 avec React. La prise en charge de React a été ajoutée dans la v3. Pour cela, clonez le dépôt de modèles :

 git clone https://github.com/framework7io/framework7-template-react.git Todo

Basculez vers le dossier du projet, récupérez les dépendances et démarrez le processus :

 cd Todo npm install npm start

Les résultats d'exécution sont similaires à Ionic : vous obtenez un lien local et un lien au sein de votre réseau pour un accès instantané à partir d'un appareil réel :

Vous pouvez maintenant ouvrir http://localhost:3000/ dans un navigateur. Framework7 n'inclut pas d'émulateurs de périphériques intégrés, utilisons donc le mode périphérique de Chrome DevTools pour obtenir un résultat similaire :

Comme vous pouvez le voir, Framework7 est similaire à Ionic en ce sens qu'il a iOS et Material Design comme ses deux thèmes standard. Le thème est sélectionné en fonction de la plateforme.

Malheureusement, contrairement à un modèle similaire avec prise en charge de Vue.js dans les modèles officiels de React, Webpack n'est pas encore implémenté et cela nous interdit d'utiliser le remplacement de module à chaud pour mettre à jour rapidement les applications sans recharger la page. Néanmoins, vous pouvez utiliser la fonction de rechargement en direct par défaut, qui recharge la page chaque fois que vous modifiez le code source.

Mise en place de Cordoue

Pour installer des applications sur des appareils et des émulateurs avec Cordova, vous devez télécharger et configurer des outils de développement pour iOS et Android, ainsi que Cordova CLI. Vous pouvez en savoir plus à ce sujet dans notre article précédent et sur le site Web officiel de Cordova dans les sections Guide de la plate-forme iOS et Guide de la plate-forme Android.

Ionique

L'expérience montre que pour résoudre avec succès la majorité des problèmes d'Ionic, un débogage basé sur un navigateur avec des tests occasionnels sur de vrais appareils est suffisant.

Bien que vous acceptiez l'intégration pour iOS et Android et que Ionic prépare les paramètres requis dans le fichier config.xml et les ressources dans le dossier resources , vous devez toujours connecter les deux plates-formes à l'application avec Cordova :

 cordova platform add ios cordova platform add android

Vous pouvez désormais démarrer l'application Cordova dans de "vrais" émulateurs, l'installer sur l'appareil mobile et même l'envoyer à l'App Store et à Google Play.

La commande suivante installe l'application sur votre appareil iOS s'il est connecté par USB. Sinon, l'application sera installée sur le simulateur iOS.

 cordova run ios

Très probablement, les outils de ligne de commande Xcode vous informeront de la nécessité de configurer des certificats de développeur. Vous devrez ouvrir le projet dans Xcode et effectuer les actions requises. Cela ne doit être fait qu'une seule fois, et vous pourrez ensuite exécuter l'application avec Cordova CLI.

Parfois iOS Simulator ne se lance pas automatiquement. Dans ce cas, démarrez-le manuellement, par exemple via Spotlight.

L'émulateur Android peut être démarré de la même manière :

 cordova run android 

Notez que la commande cordova run démarre et installe l'application déjà compilée , qui n'utilise pas le serveur ionic serve / ionic lab , donc Live Reload ne fonctionnera pas. Pour développer et déboguer l'application en direct, utilisez le navigateur dans le réseau local ou installez l'application Ionic DevApp.

L'expérience montre que pour résoudre avec succès la majorité des problèmes d'Ionic, un débogage basé sur un navigateur avec des tests occasionnels sur de vrais appareils est suffisant.

Cadre7

Le modèle "React" Framework7 choisi précédemment ne fournit pas d'automatisation de la configuration pour Cordova, vous devrez donc ajouter des plates-formes manuellement. Créez un projet Cordova dans le sous-dossier cordova de votre dossier de projet :

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

Le modèle est basé sur l'application Create React, donc pour exécuter le projet compilé dans un environnement Cordova, vous devez ajouter la "homepage": "." paramètre sur le fichier ./package.json . Ce fichier se trouve au niveau racine du projet :

Compilez le projet Framework7 et copiez le résultat dans le projet Cordova :

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

Vous pouvez maintenant démarrer l'application sur un appareil ou un émulateur :

 cd cordova/ cordova run ios 

Vous avez terminé! Espérons que Framework7 rattrape le niveau de développement d'Ionic et la commodité de configuration initiale.

Création de listes de tâches

Ionique

Commençons enfin à créer l'application ! Puisqu'il s'agit d'une application To Do, la page principale (fichier src/pages/home/home.html ) contiendra la liste des tâches avec la possibilité de "marquer comme terminée" et "d'en ajouter de nouvelles".

Ionic propose les composants <ion-list> et <ion-item> pour les listes. Tout d'abord, supprimez la propriété padding de l'élément <ion-content> pour que la liste s'étende à l'écran. Dans la liste, placez le texte à l'aide d'un élément <ion-label> et ajoutez un élément <ion-toggle> pour marquer les tâches terminées.

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

Revenez à l'onglet du navigateur avec le service Ionic Lab en cours d'exécution. L'application a été mise à jour automatiquement :

Génial! Déplacez maintenant les données de la tâche vers l'objet JS et configurez sa présentation HTML avec Angular. Accédez au fichier src/pages/home/home.ts et créez la propriété tasks de l'instance de classe HomePage :

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

Vous pouvez maintenant vous référer au tableau des tasks dans le code HTML. Utilisez la construction *ngFor Angular pour créer de manière itérative des éléments de liste pour chaque élément de tableau. Le code devient plus petit :

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

Il ne reste plus qu'à ajouter le bouton pour créer de nouvelles tâches dans l'en-tête de la page. Pour ce faire, utilisez les <ion-navbar> , <ion-buttons> , <button> et <ion-icon> :

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

Notez la construction angulaire (click)="addTask()" . Comme vous pouvez le deviner, il ajoute le gestionnaire de tapotement au bouton et appelle la méthode addTask() pour notre composant. Implémentons cette méthode pour ouvrir la fenêtre de dialogue du nom de la tâche lorsque le bouton est enfoncé.

Pour cela, vous avez besoin du composant AlertController Ionic. Pour utiliser ce composant, importez son type :

 import { AlertController } from 'ionic-angular';

Et spécifiez-le dans la liste des paramètres du constructeur pour la page :

 constructor(public alertCtrl: AlertController) { }

Vous pouvez maintenant l'appeler dans la méthode addTask() . Installez-le après le contrôleur. Vous pouvez créer et afficher la fenêtre de dialogue avec les appels suivants :

 this.alertCtrl .create(/* options */) .present();

Spécifiez l'en-tête du message, la description du champ et deux boutons dans l'objet options . Le bouton "OK" ajoutera une nouvelle tâche au tableau des tasks :

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

Après avoir ajouté l'élément au tableau this.tasks , le composant sera reconstruit de manière réactive et une nouvelle tâche sera affichée dans la liste.

Le code de la page complète ressemble maintenant à ceci :

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 

Réinstallez l'application sur l'appareil :

 cordova run ios

C'est ça! Pas si difficile, n'est-ce pas ? Essayons maintenant de faire la même chose avec Framework7.

Cadre7

Les modèles Framework7 sont conçus pour afficher toutes les fonctionnalités des composants, vous devez donc laisser uniquement la page src/components/pages/HomePage.jsx dans les fichiers src/components/App.jsx et src/routes.js , nettoyer son contenu et supprimer les commentaires de code supplémentaires.

Créez maintenant la liste des tâches. Framework7 fournit les composants <List simple-list> et <ListItem> pour cela. Pour y placer un commutateur d'achèvement de tâche, ajoutez le composant <Toggle slot="after"/> . N'oubliez pas d'importer tous ces composants depuis le module framework7-react . Maintenant, le code de la page ressemble à ceci :

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

Et l'application elle-même ressemble à ceci :

Assez bon début. Essayons à nouveau de déplacer les données statiques du code HTML. Pour cela, utilisez un composant intelligent au lieu de celui sans état que nous avions. Importez la classe abstraite Component depuis React :

 import React, { Component } from 'react';

Et écrivez le tableau des tâches dans l'instance de la variable d' state :

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

L'application réelle est susceptible d'utiliser un flux de données plus abstrait, par exemple avec Redux ou MobX, mais pour un petit exemple, nous nous en tiendrons à l'état du composant interne.

Vous pouvez maintenant utiliser la syntaxe JSX pour créer de manière itérative des éléments de liste pour chaque tâche du tableau :

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

Il ne reste plus qu'à ajouter l'en-tête avec le bouton pour recréer une nouvelle tâche. L'élément <Navbar <Navbar> existe déjà, ajoutez donc <Link iconOnly> à l'élément <NavRight> :

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

Dans React, vous ajoutez des gestionnaires de tapotement en utilisant la propriété onClick et en y définissant le pointeur de rappel. Implémentez le gestionnaire pour afficher la boîte de dialogue du nom de la tâche.

Chaque élément de Framework7 a accès à l'instance d'application via this.$f7 . Vous pouvez utiliser la méthode dialog.prompt() cette façon. Avant de fermer la boîte de dialogue, appelez la méthode setState() du composant React et transmettez-lui la copie du tableau précédent avec un nouvel élément. Cela mettra à jour la liste de manière réactive.

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

Voici le code complet du composant :

 import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

Vérifiez le résultat :

Il ne reste plus qu'à reconstruire et déployer sur l'appareil :

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

Terminé!

Le code final de ces deux projets est disponible sur GitHub :

• ionic-todo-app
• framework7-react-todo-app

Résultats

Vous avez maintenant vu le didacticiel complet avec chaque framework Cordova. Comment Framework7 se compare-t-il à Ionic ?

La configuration initiale

Ionic est beaucoup plus facile à installer grâce à sa CLI, tandis que F7 nécessite plus de temps pour sélectionner et configurer un modèle ou une installation étape par étape à partir de zéro.

Diversité des composants

Les deux frameworks ont un ensemble complet de composants standard merveilleusement conçus dans deux thèmes : iOS et Material Design. Ionic fournit également ces composants dans le thème Windows et un gigantesque marché de thèmes utilisateur.

En plus d'imiter entièrement la conception et les animations natives, une grande attention est accordée à l'optimisation des performances, fournissant des résultats fantastiques : souvent, il est presque impossible de distinguer les applications sur l'un ou l'autre cadre des applications natives.

Framework7 fournit une liste supplémentaire de composants plus complexes et utiles, tels que Smart Select , Autocomplete , Calendar , Contacts List , Login Screen , Messages et Photo Browser . D'autre part, Ionic propose une vaste sélection de composants créés par l'utilisateur.

Écosystème et communauté

Ionic gagne évidemment sur ces paramètres grâce à sa durée de vie plus longue, son solide soutien financier et sa communauté active. L'infrastructure ionique évolue constamment : les services de support et les solutions cloud cèdent la place à de nouveaux et le nombre de plugins ne cesse de croître.

Framework7 est meilleur que jamais, mais manque cruellement de soutien communautaire.

Dépendances tierces

Framework7 est plus flexible en ce qui concerne les solutions tierces. Sa plus grande force est probablement la possibilité de choisir si vous utilisez Vue ou React dans le projet, ainsi que Webpack ou Browserify. Ionic est basé sur Angular et nécessite des connaissances (et donc TypeScript aussi.)

Cependant, récemment, les développeurs d'Ionic ont annoncé une nouvelle version bêta d'Ionic 4, prétendant être complètement indépendant du cadre d'interface utilisateur - plus de dépendances angulaires si vous ne les voulez pas.

Cadres Cordova : toujours un moyen puissant de développer des applications mobiles multiplateformes

L'utilisation de Cordova dépend du projet spécifique. En effet, la rapidité de développement des applications mobiles hybrides et son support de multiples plateformes sont ses principaux atouts. Mais c'est toujours un compromis, et parfois vous pouvez rencontrer des défauts qui n'existeraient pas avec une approche native. Ces merveilleux frameworks et leurs communautés font un excellent travail pour réduire ces défauts et nous faciliter la vie. Alors, pourquoi ne pas les essayer ?