Quadri Cordova: Ionic vs. Framework7

In questi giorni, gli sviluppatori web governano il mondo. JavaScript è usato ovunque si possa programmare. Tra queste aree, lo sviluppo di app mobili è stato uno dei primi modi per espandersi: circa dieci anni fa, PhoneGap consentiva l'installazione di app HTML e JavaScript per iOS e Android.

Da allora, la tecnologia ha avuto alti e bassi: nonostante la facilità di sviluppo, queste app erano ovviamente molto diverse dalle app native. Vanilla HTML e JavaScript basato su browser erano destinati ai browser e non c'era modo per loro di migrare in modo impeccabile in questo nuovo campo.

Ancora oggi i problemi principali sono:

• Difficoltà nell'aderire al design e all'animazione nativi
• Effetti di transizione dello schermo complessi
• Toccare la gestione degli eventi
• Prestazioni su grandi liste
• Posizionamento di elementi fissi
• Adattamento per diverse dimensioni dello schermo
• Posizioni degli elementi di controllo nativi (ad esempio, la barra di stato di iOS)
• Adattamento a diversi browser mobili

Perché utilizzare un framework per le app Cordova?

La tecnologia Cordova è spesso sottovalutata a causa delle app che presentano i problemi di cui sopra. I framework mirano a compensarli e portare le app HTML il più vicino possibile alle app native, sia in termini di design che di prestazioni.

Diamo un'occhiata a un paio di esempi di app ibride. Sono realizzati con i due framework attualmente di maggior successo, oltre all'interfaccia utente Onsen, che sono destinati a facilitare l'espansione degli sviluppatori web nel mondo moderno: Framework7 e Ionic.

Informazioni sulla struttura ionica

Ionic è stato sviluppato da Drifty Co. nel 2012 e si basa su Angular. Da allora, è stato in fase di sviluppo attivo, ricevendo investimenti significativi e una forte comunità di sviluppatori. Il sito Web ufficiale afferma che milioni di app sono state sviluppate sulla base di esso.

Al momento della stesura di questo articolo, la versione più recente è Ionic 3 basata su Angular 5. Ionic 4, che mira alla flessibilità e all'indipendenza da Angular, è in beta iniziale.

Oltre al motore dell'interfaccia utente, una meravigliosa libreria di componenti e un'interfaccia per l'accesso alle funzioni del dispositivo nativo, Ionic offre molteplici funzionalità, servizi e utilità extra.

Il CLI ionico

L'interfaccia della riga di comando di Ionic viene utilizzata per l'inizializzazione interattiva del progetto (ad es. una procedura guidata), la generazione di pagine e componenti e l'esecuzione di un server di sviluppo che consente di creare app in movimento e di ricaricarle in tempo reale. Fornisce inoltre l'integrazione con i servizi cloud di Ionic.

Lab e DevApp

Lab è il mini-servizio estremamente utile che permette di imitare il lavoro dell'applicazione su diverse piattaforme nel browser dello sviluppatore Ionic. DevApp ti aiuta a distribuire rapidamente un'app su un dispositivo reale.

Imballaggio, distribuzione e monitoraggio

Ionic viene fornito con un pacchetto di servizi Web che semplificano e velocizzano la creazione, il debug, il test e l'aggiornamento di applicazioni per tester e utenti.

I piani di Ionic cambiano spesso, però. Alcuni servizi precedentemente esistenti, come Auth, Push, Analytics e View, sono stati chiusi, provocando proteste da parte degli abbonati.

Creatore

Questo è l'editor grafico drag-and-drop di Ionic per lo sviluppo di interfacce funzionali.

Informazioni su Framework7

Questo framework è stato sviluppato nel 2014 dallo studio russo iDangero. Alla fine, uno sviluppatore ha lavorato al progetto, esclusi diversi contributori minori al repository GitHub.

In origine, Framework7 consisteva nell'insieme di componenti dell'interfaccia utente nello stile dell'allora rilasciato iOS 7, da cui prende il nome. Successivamente è stato aggiunto un tema Android ed entrambi i temi sono stati aggiornati per iOS e Material Design più recenti.

Di recente, lo sviluppo del progetto ha accelerato e si è esteso da un insieme di componenti a un quadro completo per applicazioni mobili, integrando tecnologie e strumenti popolari.

Il supporto e gli esempi di Framework7 che utilizzano Vue.js esistono dalla v1 e anche la v3 supporta React. Questo è ciò che potrebbe consentire al progetto di competere seriamente con il più popolare Ionic, che offre solo Angular e TypeScript.

Installazione e primo avvio

Ionico

Per iniziare a lavorare con Ionic, installalo con NPM:

 npm install -g ionic

Quindi, seleziona il modello per l'applicazione futura. Il sito Web ufficiale di Ionic offre più modelli, oppure puoi selezionare un modello vuoto per creare l'applicazione da zero con ionic start myApp blank .

Selezioniamo un design semplice. Esegui il seguente comando:

 ionic start Todo tabs

Rispondi "Sì" quando il programma di installazione chiede "Vuoi integrare la tua nuova app con Cordova per scegliere come target iOS e Android nativi?" Ciò integrerà automaticamente l'applicazione con Cordova e la preparerà per la distribuzione su piattaforme mobili.

Nel passaggio successivo, il programma di installazione si offrirà di connetterci a Ionic Pro SDK. Rispondi "No" per ora per mantenere l'esempio semplice.

Installa il pacchetto aggiuntivo @ionic/lab per ottenere la comoda interfaccia utente di debug, imitazioni nel browser di dispositivi iOS, Android e Windows:

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

Ora puoi avviare l'applicazione in modalità debug. Ciò consente di sviluppare ed eseguire il debug dell'applicazione in tempo reale nel browser Web:

 ionic lab

Di conseguenza, otterrai diversi indirizzi utili:

Il servizio di debug di Ionic Lab viene avviato sulla porta 8200. L'applicazione stessa viene eseguita sulla porta 8100 e il collegamento Apri schermo intero di Ionic Lab conduce lì. La finestra del browser con Ionic Lab in esecuzione si apre automaticamente.

Inoltre, Ionic fornisce l'indirizzo dell'applicazione nella rete locale . Ciò è estremamente utile, in quanto consente di aprire l'applicazione nel browser del dispositivo mobile, purché il dispositivo sia nella rete locale (ad esempio tramite Wi-Fi). Inoltre, puoi utilizzare il pulsante Aggiungi alla schermata iniziale per riaprire l'applicazione in modalità a schermo intero. Questo è il modo più rapido per testare la tua applicazione sul dispositivo.

Un altro modo è l'applicazione Ionic DevApp, che può essere installata su un dispositivo mobile e fornisce l'accesso all'applicazione tramite la rete locale. Offre supporto plug-in (Ionic Native) per l'accesso alle funzioni del dispositivo nativo e la visualizzazione dei registri.

Quadro7

Gli strumenti di sviluppo di F7 sono meno avanzati di quelli di Ionic e la CLI di inizializzazione automatica non è documentata. Tuttavia, il sito Web ufficiale fornisce diversi repository GitHub con progetti di modelli che ti aiuteranno a iniziare lo sviluppo.

Simile al modello Tabs in Ionic, F7 offre Tabbed Views , ma utilizzeremo un modello più funzionale che integra Framework7 con React. Il supporto per React è stato aggiunto nella v3. Per questo, clona il repository del modello:

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

Passa alla cartella del progetto, recupera le dipendenze e avvia il processo:

 cd Todo npm install npm start

I risultati dell'esecuzione sono simili a Ionic: ottieni un collegamento locale e un collegamento all'interno della tua rete per l'accesso istantaneo da un dispositivo reale:

Ora puoi aprire http://localhost:3000/ in un browser. Framework7 non include emulatori di dispositivi integrati, quindi utilizziamo la modalità dispositivo di Chrome DevTools per ottenere un risultato simile:

Come puoi vedere, Framework7 è simile a Ionic in quanto ha iOS e Material Design come suoi due temi standard. Il tema viene selezionato in base alla piattaforma.

Purtroppo, a differenza di un modello simile con supporto Vue.js nei modelli React ufficiali, Webpack non è ancora implementato e questo ci impedisce di utilizzare Hot Module Replacement per aggiornare rapidamente le applicazioni senza ricaricare la pagina. Tuttavia, puoi utilizzare la funzione di ricarica in tempo reale predefinita, che ricarica la pagina ogni volta che modifichi il codice sorgente.

Allestimento Cordova

Per installare applicazioni su dispositivi ed emulatori con Cordova, devi scaricare e configurare strumenti di sviluppo per iOS e Android, oltre a Cordova CLI. Puoi leggere di più su questo nel nostro articolo precedente e sul sito Web ufficiale di Cordova nelle sezioni Guida alla piattaforma iOS e Guida alla piattaforma Android.

Ionico

L'esperienza dimostra che per risolvere con successo la maggior parte dei problemi di Ionic, è sufficiente il debug basato su browser con test occasionali su dispositivi reali.

Nonostante tu accetti l'integrazione per iOS e Android e Ionic prepari le impostazioni richieste nel file config.xml e le risorse nella cartella resources , devi comunque connettere entrambe le piattaforme all'applicazione con Cordova:

 cordova platform add ios cordova platform add android

Ora puoi avviare l'app Cordova in emulatori "reali", installarla sul dispositivo mobile e persino inviarla all'App Store e a Google Play.

Il comando successivo installa l'applicazione sul tuo dispositivo iOS se è collegato tramite USB. In caso contrario, l'app verrà installata sul simulatore iOS.

 cordova run ios

Molto probabilmente, Xcode Command Line Tools ti informerà sulla necessità di impostare certificati per sviluppatori. Dovrai aprire il progetto in Xcode ed eseguire le azioni richieste. Questo deve essere fatto solo una volta e in seguito sarai in grado di eseguire l'applicazione con Cordova CLI.

A volte iOS Simulator non si avvia automaticamente. In questo caso, avvialo manualmente, ad esempio tramite Spotlight.

L'emulatore Android può essere avviato in modo simile:

 cordova run android 

Si noti che il comando cordova run avvia e installa l'applicazione già compilata , che non utilizza il server ionic serve / ionic lab , quindi Live Reload non funzionerà. Per sviluppare ed eseguire il debug dell'applicazione in tempo reale, utilizzare il browser nella rete locale o installare l'applicazione Ionic DevApp.

L'esperienza dimostra che per risolvere con successo la maggior parte dei problemi di Ionic, è sufficiente il debug basato su browser con test occasionali su dispositivi reali.

Quadro7

Il modello Framework7 "React" scelto in precedenza non fornisce l'automazione della configurazione per Cordova, quindi dovrai aggiungere le piattaforme manualmente. Crea un progetto cordova nella sottocartella cordova della cartella del tuo progetto:

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

Il modello è basato sull'app Create React, quindi per eseguire il progetto compilato in un ambiente Cordova è necessario aggiungere la "homepage": "." impostazione sul file ./package.json . Questo file può essere trovato al livello principale del progetto:

Compila il progetto Framework7 e copia il risultato nel progetto Cordova:

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

Ora puoi avviare l'applicazione su un dispositivo o un emulatore:

 cd cordova/ cordova run ios 

Hai fatto! Speriamo che Framework7 raggiunga lo standard di sviluppo e la comodità di configurazione iniziale di Ionic.

Creazione di elenchi di attività

Ionico

Iniziamo finalmente a creare l'applicazione! Poiché si tratta di un'applicazione da fare, la pagina principale (file src/pages/home/home.html ) conterrà l'elenco delle attività con la possibilità di "contrassegnare completate" e "aggiungere nuove".

Ionic offre i componenti <ion-list> e <ion-item> per gli elenchi. Innanzitutto, rimuovi la proprietà di padding dall'elemento <ion-content> per rendere l'elenco a livello di schermo. Nell'elenco, posiziona il testo utilizzando un elemento <ion-label> e aggiungi un elemento <ion-toggle> per contrassegnare le attività completate.

 <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>

Torna alla scheda del browser con il servizio Ionic Lab in esecuzione. L'applicazione è stata aggiornata automaticamente:

Grande! Ora sposta i dati dell'attività sull'oggetto JS e imposta la sua presentazione HTML con Angular. Vai al file src/pages/home/home.ts e crea la proprietà delle attività dell'istanza della classe HomePage :

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

Ora puoi fare riferimento all'array delle tasks nel codice HTML. Utilizzare il *ngFor Angular per creare in modo iterativo elementi di elenco per ciascun elemento dell'array. Il codice diventa più piccolo:

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

Non resta che aggiungere il pulsante per creare nuove attività all'intestazione della pagina. A tale scopo, utilizzare i <ion-navbar> , <ion-buttons> , <button> e <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>

Nota la costruzione angolare (click)="addTask()" . Come puoi immaginare, aggiunge il tap handler al pulsante e chiama il metodo addTask() per il nostro componente. Implementiamo questo metodo per aprire la finestra di dialogo del nome dell'attività quando si tocca il pulsante.

Per questo è necessario il componente AlertController Ionic. Per utilizzare questo componente, importane il tipo:

 import { AlertController } from 'ionic-angular';

E specificalo nell'elenco dei parametri del costruttore per la pagina:

 constructor(public alertCtrl: AlertController) { }

Ora puoi chiamarlo nel metodo addTask() . Installalo dopo il controller. È possibile creare e visualizzare la finestra di dialogo con le seguenti chiamate:

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

Specificare l'intestazione del messaggio, la descrizione del campo e due pulsanti nell'oggetto options . Il pulsante "OK" aggiungerà una nuova tasks all'array delle attività:

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

Dopo aver aggiunto l'elemento all'array this.tasks , il componente verrà ricostruito in modo reattivo e una nuova attività verrà visualizzata nell'elenco.

Il codice della pagina intera ora appare così:

 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(); } } 

Reinstallare l'applicazione sul dispositivo:

 cordova run ios

Questo è tutto! Non è così difficile, vero? Ora proviamo a fare lo stesso con Framework7.

Quadro7

I modelli Framework7 sono realizzati per mostrare tutte le funzionalità dei componenti, quindi è necessario lasciare solo la pagina src/components/pages/HomePage.jsx nei file src/components/App.jsx e src/routes.js , ripulirne il contenuto e rimuovere i commenti di codice extra.

Ora crea l'elenco delle attività. Framework7 fornisce i componenti <List simple-list> e <ListItem> per questo. Per posizionare un interruttore di completamento dell'attività, aggiungi il componente <Toggle slot="after"/> . Ricorda di importare tutti questi componenti dal modulo framework7-react . Ora il codice della pagina è simile a questo:

 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> );

E l'applicazione stessa si presenta così:

Inizio abbastanza buono. Proviamo a spostare di nuovo i dati statici fuori dal codice HTML. Per questo, usa un componente intelligente invece di quello apolide che avevamo. Importa la classe astratta Component da React:

 import React, { Component } from 'react';

E scrivi l'array delle attività nell'istanza della variabile di state :

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

È probabile che l'applicazione reale utilizzi un flusso di dati più astratto, ad esempio con Redux o MobX, ma per un piccolo esempio manterremo lo stato del componente interno.

Ora puoi utilizzare la sintassi JSX per creare in modo iterativo elementi di elenco per ogni attività nell'array:

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

Non resta che aggiungere l'intestazione con il pulsante per creare nuovamente una nuova attività. L'elemento <Navbar> esiste già, quindi aggiungi <Link iconOnly> <NavRight> :

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

In React aggiungi gestori di tap utilizzando la proprietà onClick e impostando il puntatore di callback in essa. Implementare il gestore per mostrare la finestra di dialogo del nome dell'attività.

Ogni elemento in Framework7 ha accesso all'istanza dell'applicazione tramite this.$f7 proprietà. Puoi usare il metodo dialog.prompt() in questo modo. Prima di chiudere la finestra di dialogo, chiama il metodo setState() del componente React e passagli la copia dell'array precedente con un nuovo elemento. Questo aggiornerà in modo reattivo l'elenco.

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

Ecco il codice completo del componente:

 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> ); }

Controlla il risultato:

Non resta che ricostruire e distribuire sul dispositivo:

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

Fatto!

Il codice finale per entrambi questi progetti è disponibile su GitHub:

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

Risultati

Ora hai visto il tutorial completo con ogni framework Cordova. In che modo Framework7 si confronta con Ionic?

Configurazione iniziale

Ionic è molto più facile da installare grazie alla sua CLI, mentre F7 richiede più tempo per selezionare e impostare un modello o per l'installazione passo dopo passo da zero.

Diversità dei componenti

Entrambi i framework hanno un set completo di componenti standard meravigliosamente realizzati in due temi: iOS e Material Design. Ionic fornisce inoltre questi componenti nel tema di Windows e un gigantesco mercato dei temi utente.

Oltre a imitare completamente il design e le animazioni native, viene prestata molta attenzione all'ottimizzazione delle prestazioni, fornendo risultati fantastici: spesso è quasi impossibile distinguere le applicazioni su entrambi i framework da quelle native.

Framework7 fornisce un elenco aggiuntivo di componenti più complessi e utili, come Selezione intelligente , Completamento automatico , Calendario , Elenco contatti , Schermata di accesso , Messaggi e Browser foto . D'altra parte, Ionic fornisce una vasta selezione di componenti creati dall'utente.

Ecosistema e comunità

Ionic ovviamente vince su questi parametri grazie alla sua maggiore durata, al forte supporto finanziario e alla comunità attiva. L'infrastruttura ionica è in continua evoluzione: i servizi di supporto e le soluzioni cloud lasciano il posto a nuovi e il numero di plugin continua a crescere.

Framework7 è migliore che mai, ma manca gravemente del supporto della comunità.

Dipendenze di terze parti

Framework7 è più flessibile per quanto riguarda le soluzioni di terze parti. Il suo più grande punto di forza è probabilmente la possibilità di scegliere se utilizzare Vue o React nel progetto, oltre a Webpack o Browserify. Ionic si basa su Angular e richiede conoscenza in esso (e quindi anche TypeScript).

Tuttavia, di recente, gli sviluppatori di Ionic hanno annunciato una nuova beta di Ionic 4, affermando di essere completamente indipendente dal framework dell'interfaccia utente, non più dipendenze angolari se non le vuoi.

Framework Cordova: ancora un modo potente per sviluppare app mobili multipiattaforma

Se utilizzare Cordova dipende dal progetto specifico. In effetti, la velocità dello sviluppo di app mobili ibride e il supporto di più piattaforme sono i suoi principali vantaggi. Ma è sempre un compromesso e talvolta potresti dover affrontare alcuni difetti che non esisterebbero con un approccio nativo. Questi meravigliosi framework e le loro comunità fanno un ottimo lavoro per ridurre questi difetti e semplificarci la vita. Quindi, perché non provarli?