Cordova Frameworks: Ionic vs. Framework7

În zilele noastre, dezvoltatorii web conduc lumea. JavaScript este folosit oriunde se poate programa. Printre aceste domenii, dezvoltarea de aplicații mobile a fost una dintre primele modalități de a se ramifica: în urmă cu aproximativ zece ani, PhoneGap a permis instalarea aplicațiilor HTML și JavaScript pentru iOS și Android.

De atunci, tehnologia a avut suișuri și coborâșuri: în ciuda ușurinței dezvoltării, aceste aplicații erau evident destul de diferite de aplicațiile native. Vanilla HTML și JavaScript bazat pe browser au fost direcționate către browsere și nu a existat nicio modalitate de a migra fără probleme către acest nou domeniu.

Până în prezent, principalele probleme sunt încă:

• Dificultăți în aderarea la designul și animația native
• Efecte complexe de tranziție a ecranului
• Atingeți gestionarea evenimentelor
• Performanță pe liste mari
• Poziţionarea elementelor fixe
• Adaptare pentru diferite dimensiuni de ecran
• Locațiile elementelor de control native (de exemplu, bara de stare iOS)
• Adaptarea la diferite browsere mobile

De ce să folosiți un cadru pentru aplicațiile Cordova?

Tehnologia Cordova este adesea subestimată din cauza aplicațiilor care au problemele de mai sus. Framework-urile urmăresc să le compenseze și să aducă aplicațiile HTML cât mai aproape de aplicațiile native, atât în ​​ceea ce privește designul, cât și performanța.

Să ne uităm la câteva exemple de aplicații hibride. Sunt realizate cu cele două framework-uri cele mai de succes în prezent – ​​în afară de Onsen UI – care sunt setate să faciliteze extinderea dezvoltatorilor web în lumea modernă: Framework7 și Ionic.

Despre Cadrul Ionic

Ionic a fost dezvoltat de Drifty Co. în 2012 și se bazează pe Angular. De atunci, a fost în dezvoltare activă, primind investiții semnificative și o comunitate puternică de dezvoltatori. Site-ul oficial susține că milioane de aplicații au fost dezvoltate pe baza acestuia.

La momentul scrierii acestui articol, cea mai recentă versiune este Ionic 3 bazată pe Angular 5. Ionic 4, care vizează flexibilitate și independență față de Angular, este în versiunea beta timpurie.

Pe lângă motorul UI, o bibliotecă de componente minunată și o interfață pentru accesarea funcțiilor native ale dispozitivului, Ionic oferă mai multe capacități, servicii și utilități suplimentare.

CLI ionic

Interfața de linie de comandă a lui Ionic este utilizată pentru inițializarea interactivă a proiectelor (adică un vrăjitor), pentru generarea de pagini și componente și pentru rularea unui server de dezvoltare care vă permite să construiți aplicații din mers și să le reîncărcați în direct. De asemenea, oferă integrare cu serviciile cloud Ionic.

Lab și DevApp

Lab este mini-serviciul extrem de util care vă permite să imitați munca aplicației pe diferite platforme din browserul dezvoltatorului Ionic. DevApp vă ajută să implementați rapid o aplicație pe un dispozitiv real.

Ambalare, implementare și monitorizare

Ionic vine cu un pachet de servicii web care simplifică și accelerează construirea, depanarea, testarea și actualizarea aplicațiilor pentru testeri și utilizatori.

Totuși, planurile lui Ionic se schimbă des. Unele servicii existente anterior, cum ar fi Auth, Push, Analytics și View, au fost închise, provocând proteste din partea abonaților.

Creator

Acesta este editorul grafic drag-and-drop de la Ionic pentru dezvoltarea interfețelor funcționale.

Despre Framework7

Acest cadru a fost dezvoltat în 2014 de studioul rus iDangero. În cele din urmă, un dezvoltator a lucrat la proiect, fără a include mai mulți contribuitori minori la depozitul GitHub.

Inițial, Framework7 a constat din setul de componente UI în stilul iOS 7, lansat recent, de la care își ia numele. Ulterior, a fost adăugată o temă Android și ambele teme au fost actualizate pentru cel mai recent iOS și Material Design.

Recent, dezvoltarea proiectului a accelerat și s-a extins de la un set de componente la un cadru cu drepturi depline pentru aplicații mobile, integrând tehnologii și instrumente populare.

Suportul Framework7 și exemplele de utilizare a Vue.js există încă de la v1, iar v3 acceptă și React. Acesta este ceea ce poate permite proiectului să concureze serios cu Ionic, mai popular, care oferă doar Angular și TypeScript.

Instalare și prima lansare

ionic

Pentru a începe să lucrați cu Ionic, instalați-l cu NPM:

 npm install -g ionic

Apoi, selectați șablonul pentru viitoarea aplicație. Site-ul web oficial Ionic oferă mai multe șabloane sau puteți selecta un șablon gol pentru a construi aplicația de la zero, cu ionic start myApp blank .

Să alegem un design simplu. Executați următoarea comandă:

 ionic start Todo tabs

Răspundeți „Da” când instalatorul vă întreabă „Doriți să integrați noua aplicație cu Cordova pentru a viza iOS și Android nativ?” Acest lucru va integra automat aplicația cu Cordova și o va pregăti pentru implementare pe platformele mobile.

În pasul următor, instalatorul ne va oferi să ne conecteze la SDK-ul Ionic Pro. Răspundeți „Nu” deocamdată pentru a păstra exemplul simplu.

Instalați pachetul suplimentar @ionic/lab pentru a obține interfața de utilizare convenabilă de depanare — imitații în browser ale dispozitivelor iOS, Android și Windows:

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

Acum puteți porni aplicația în modul de depanare. Acest lucru vă permite să dezvoltați și să depanați aplicația live în browserul web:

 ionic lab

Drept urmare, veți obține mai multe adrese utile:

Serviciul de depanare Ionic Lab este lansat pe portul 8200. Aplicația în sine rulează pe portul 8100, iar linkul Open fullscreen de la Ionic Lab duce acolo. Fereastra browserului cu Ionic Lab care rulează se deschide automat.

În plus, Ionic oferă adresa aplicației în rețeaua locală . Acest lucru este extrem de util, deoarece vă permite să deschideți aplicația în browserul dispozitivului mobil, atâta timp cât dispozitivul se află în rețeaua locală (de exemplu, prin Wi-Fi). În plus, puteți utiliza butonul Adăugați la ecranul de pornire pentru a redeschide aplicația în modul ecran complet. Acesta este cel mai rapid mod de a vă testa aplicația pe dispozitiv.

O altă modalitate este aplicația Ionic DevApp, care poate fi instalată pe un dispozitiv mobil și oferă acces la aplicație prin intermediul rețelei locale. Oferă suport pentru plugin (Ionic Native) pentru accesul la funcțiile native ale dispozitivului și afișarea jurnalelor.

Cadrul7

Instrumentele de dezvoltare ale lui F7 sunt mai puțin avansate decât cele ale lui Ionic, iar CLI-ul de inițializare automată nu este documentat. Cu toate acestea, site-ul oficial oferă mai multe depozite GitHub cu proiecte șablon care vă vor ajuta să începeți dezvoltarea.

Similar cu șablonul Tabs din Ionic, F7 oferă Vederi cu file , dar vom folosi un șablon mai funcțional care integrează Framework7 cu React. Suportul pentru React a fost adăugat în v3. Pentru asta, clonează depozitul de șabloane:

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

Comutați la folderul proiectului, preluați dependențele și începeți procesul:

 cd Todo npm install npm start

Rezultatele execuției sunt similare cu Ionic: obțineți o legătură locală și o legătură în cadrul rețelei dvs. pentru acces instantaneu de pe un dispozitiv real:

Acum puteți deschide http://localhost:3000/ într-un browser. Framework7 nu include emulatori de dispozitiv încorporați, așa că haideți să folosim modul dispozitiv al Chrome DevTools pentru a obține un rezultat similar:

După cum puteți vedea, Framework7 este similar cu Ionic prin faptul că are iOS și Material Design ca două teme standard. Tema este selectată în funcție de platformă.

Din păcate, spre deosebire de un șablon similar cu suport Vue.js în șabloanele oficiale React, Webpack nu este încă implementat și acest lucru ne interzice să folosim Hot Module Replacement pentru a actualiza rapid aplicațiile fără a reîncărca pagina. Totuși, puteți utiliza caracteristica implicită de reîncărcare live, care reîncarcă pagina ori de câte ori schimbați codul sursă.

Înființarea Cordovei

Pentru a instala aplicații pe dispozitive și emulatoare cu Cordova, trebuie să descărcați și să configurați instrumente de dezvoltare pentru iOS și Android, precum și Cordova CLI. Puteți citi mai multe despre acest lucru în articolul nostru anterior și pe site-ul oficial Cordova în secțiunile Ghidul platformei iOS și Ghidul platformei Android.

ionic

Experiența arată că pentru a rezolva cu succes majoritatea problemelor ionice, este suficientă depanarea bazată pe browser cu teste ocazionale pe dispozitive reale.

În ciuda faptului că acceptați integrarea pentru iOS și Android, iar Ionic pregătește setările necesare în fișierul config.xml și resursele din folderul resources , tot trebuie să conectați ambele platforme la aplicația cu Cordova:

 cordova platform add ios cordova platform add android

Acum puteți porni aplicația Cordova în emulatori „adevărați”, să o instalați pe dispozitivul mobil și chiar să o trimiteți în App Store și Google Play.

Următoarea comandă instalează aplicația pe dispozitivul tău iOS dacă este conectată prin USB. În caz contrar, aplicația va fi instalată pe Simulatorul iOS.

 cordova run ios

Cel mai probabil, Xcode Command Line Tools vă va informa despre necesitatea de a configura certificate de dezvoltator. Va trebui să deschideți proiectul în Xcode și să efectuați acțiunile necesare. Acest lucru trebuie făcut o singură dată, iar ulterior veți putea rula aplicația cu Cordova CLI.

Uneori, iOS Simulator nu se lansează automat. În acest caz, porniți-l manual, de exemplu prin Spotlight.

Emulatorul Android poate fi pornit într-un mod similar:

 cordova run android 

Rețineți că comanda cordova run pornește și instalează aplicația deja compilată , care nu folosește serverul ionic serve / ionic lab , așa că Live Reload nu va funcționa. Pentru a dezvolta și depana aplicația live, utilizați browserul în rețeaua locală sau instalați aplicația Ionic DevApp.

Experiența arată că pentru a rezolva cu succes majoritatea problemelor ionice, este suficientă depanarea bazată pe browser cu teste ocazionale pe dispozitive reale.

Cadrul7

Șablonul „React” Framework7 ales mai devreme nu oferă automatizare de configurare pentru Cordova, așa că va trebui să adăugați platforme manual. Creați un proiect Cordova în subfolderul cordova al folderului de proiect:

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

Șablonul se bazează pe aplicația Create React, așa că pentru a rula proiectul compilat într-un mediu Cordova trebuie să adăugați "homepage": "." setarea la fișierul ./package.json . Acest fișier poate fi găsit la nivelul rădăcină al proiectului:

Compilați proiectul Framework7 și copiați rezultatul în proiectul Cordova:

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

Acum puteți porni aplicația pe un dispozitiv sau un emulator:

 cd cordova/ cordova run ios 

Esti gata! Să sperăm că Framework7 ajunge la nivelul standardului Ionic de dezvoltare și comoditate inițială de configurare.

Crearea listelor de sarcini

ionic

Să începem în sfârșit să creăm aplicația! Deoarece aceasta este o aplicație To Do, pagina principală (fișierul src/pages/home/home.html ) va conține lista de sarcini cu posibilitatea de a „marca finalizat” și „adăugați nou”.

Ionic oferă componentele <ion-list> și <ion-item> pentru liste. Mai întâi, eliminați proprietatea padding din elementul <ion-content> pentru a face lista la nivelul întregului ecran. În listă, plasați textul folosind un element <ion-label> și adăugați un element <ion-toggle> pentru a marca sarcinile finalizate.

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

Reveniți la fila browser cu serviciul Ionic Lab rulând. Aplicația a fost actualizată automat:

Grozav! Acum mutați datele sarcinii în obiectul JS și configurați prezentarea HTML cu Angular. Accesați fișierul src/pages/home/home.ts și creați proprietatea tasks a instanței clasei HomePage :

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

Acum vă puteți referi la matricea tasks în cod HTML. Utilizați construcția *ngFor Angular pentru a crea în mod iterativ elemente de listă pentru fiecare element de matrice. Codul devine mai mic:

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

Tot ce rămâne este să adăugați butonul pentru a crea sarcini noi în antetul paginii. Pentru a face acest lucru, utilizați componentele <ion-navbar> , <ion-buttons> , <button> și <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>

Observați construcția unghiulară (click)="addTask()" . După cum puteți ghici, adaugă handlerul de atingere la buton și apelează metoda addTask() pentru componenta noastră. Să implementăm această metodă pentru a deschide fereastra de dialog cu numele sarcinii când este apăsat butonul.

Pentru aceasta aveți nevoie de componenta AlertController Ionic. Pentru a utiliza această componentă, importați tipul acesteia:

 import { AlertController } from 'ionic-angular';

Și specificați-l în lista de parametri ai constructorului pentru pagină:

 constructor(public alertCtrl: AlertController) { }

Acum îl puteți apela în metoda addTask() . Setați-l după controler. Puteți crea și afișa fereastra de dialog cu următoarele apeluri:

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

Specificați antetul mesajului, descrierea câmpului și două butoane din obiectul options . Butonul „OK” va adăuga o nouă sarcină la matricea de tasks :

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

După ce adăugați elementul la matrice this.tasks , componenta va fi reconstruită în mod reactiv și o nouă sarcină va fi afișată în listă.

Codul întregii pagini arată așa acum:

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

Reinstalați aplicația pe dispozitiv:

 cordova run ios

Asta e! Nu atât de greu, nu-i așa? Acum să încercăm să facem același lucru cu Framework7.

Cadrul7

Șabloanele Framework7 sunt create pentru a afișa toate capabilitățile componentelor, așa că trebuie să lăsați numai pagina src/components/pages/HomePage.jsx în fișierele src/components/App.jsx și src/routes.js , curățați conținutul acesteia și eliminați comentariile suplimentare de cod.

Acum creați lista de sarcini. Framework7 oferă componente <List simple-list> și <ListItem> pentru aceasta. Pentru a plasa un comutator de finalizare a sarcinii în acesta, adăugați componenta <Toggle slot="after"/> . Nu uitați să importați toate aceste componente din modulul framework7-react . Acum codul paginii arată astfel:

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

Și aplicația în sine arată astfel:

Un început destul de bun. Să încercăm să mutăm din nou datele statice din codul HTML. Pentru aceasta, utilizați o componentă inteligentă în loc de cea fără stat pe care o aveam. Importă clasa abstractă Component din React:

 import React, { Component } from 'react';

Și scrieți tabloul tasks în instanța variabilei de state :

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

Este posibil ca aplicația reală să folosească un flux de date mai abstract - de exemplu cu Redux sau MobX - dar pentru un mic exemplu ne vom păstra starea componentei interne.

Acum puteți utiliza sintaxa JSX pentru a crea în mod iterativ elemente de listă pentru fiecare sarcină din matrice:

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

Tot ce rămâne este să adăugați antetul cu butonul pentru a crea din nou o sarcină nouă. Elementul <Navbar> există deja, așa că adăugați <Link iconOnly> la elementul <NavRight> :

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

În React, adăugați handlere de atingere folosind proprietatea onClick și setând indicatorul de apel invers în ea. Implementați handlerul pentru a afișa dialogul cu numele sarcinii.

Fiecare element din Framework7 are acces la instanța aplicației prin this.$f7 . Puteți utiliza metoda dialog.prompt() în acest fel. Înainte de a închide dialogul, apelați metoda setState() a componentei React și transmiteți-i copia matricei anterioare cu un element nou. Aceasta va actualiza în mod reactiv lista.

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

Iată codul complet al componentei:

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

Verificați rezultatul:

Tot ce rămâne este să reconstruiești și să implementezi dispozitivul:

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

Terminat!

Codul final pentru ambele proiecte este disponibil pe GitHub:

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

Rezultate

Acum ați văzut tutorialul complet cu fiecare framework Cordova. Cum se comportă Framework7 față de Ionic?

Configurare inițială

Ionic este mult mai ușor de instalat datorită CLI-ului său, în timp ce F7 necesită mai mult timp pentru selectarea și configurarea unui șablon sau a instalării pas cu pas de la zero.

Diversitatea componentelor

Ambele cadre au un set complet de componente standard minunat realizate în două teme: iOS și Material Design. Ionic oferă, în plus, aceste componente în tema Windows și o piață gigantică de teme pentru utilizatori.

Pe lângă imitarea completă a designului și animațiilor native, se acordă multă atenție optimizării performanței, oferind rezultate fantastice: de multe ori, este aproape imposibil să discerneți aplicațiile din oricare cadru de cele native.

Framework7 oferă o listă suplimentară de componente mai complexe și mai utile, cum ar fi Selectare inteligentă , Completare automată , Calendar , Lista de contacte , Ecran de conectare , Mesaje și Browser de fotografii . Pe de altă parte, Ionic oferă o selecție uriașă de componente create de utilizator.

Ecosistem și comunitate

În mod evident, Ionic câștigă pe acești parametri datorită duratei de viață mai lungi, sprijinului financiar puternic și comunității active. Infrastructura ionică evoluează constant: serviciile de asistență și soluțiile cloud fac loc altora noi, iar numărul de pluginuri continuă să crească.

Framework7 este mai bun ca niciodată, dar îi lipsește foarte mult sprijinul comunității.

Dependențe de la terți

Framework7 este mai flexibil în ceea ce privește soluțiile de la terți. Cel mai mare punct forte al său este probabil capacitatea de a alege dacă utilizați Vue sau React în proiect, precum și Webpack sau Browserify. Ionic se bazează pe Angular și necesită cunoștințe în el (și, prin urmare, și TypeScript.)

Cu toate acestea, recent, dezvoltatorii Ionic au anunțat un nou Ionic 4 beta, pretinzând că este complet agnostic de UI-framework - nu mai există dependențe Angular dacă nu le doriți.

Cordova Frameworks: încă o modalitate puternică de a dezvolta aplicații mobile multiplatforme

Dacă să folosiți Cordova depinde de proiectul specific. Într-adevăr, viteza de dezvoltare a aplicațiilor mobile hibride și suportul pentru mai multe platforme sunt principalele sale avantaje. Dar este întotdeauna un compromis și, uneori, vă puteți confrunta cu unele defecte care nu ar exista cu o abordare nativă. Aceste cadre minunate și comunitățile lor fac o treabă grozavă pentru a reduce aceste defecte și a ne ușura viața. Deci, de ce să nu le încerci?