Szkielety Cordova: Ionic vs. Framework7

Obecnie światem rządzą twórcy stron internetowych. JavaScript jest używany wszędzie, gdzie można programować. Wśród tych obszarów tworzenie aplikacji mobilnych było jednym z pierwszych sposobów na rozszerzenie działalności: około dziesięć lat temu PhoneGap umożliwił instalację aplikacji HTML i JavaScript na iOS i Androida.

Od tego czasu technologia miała swoje wzloty i upadki: pomimo łatwości tworzenia aplikacje te oczywiście różniły się od aplikacji natywnych. Waniliowy HTML i JavaScript oparty na przeglądarce były skierowane do przeglądarek i nie było możliwości bezbłędnej migracji do tej nowej dziedziny.

Do dziś głównymi problemami nadal są:

• Trudności w trzymaniu się natywnego designu i animacji
• Złożone efekty przejścia ekranu
• Obsługa zdarzeń dotykowych
• Wydajność na dużych listach
• Pozycjonowanie stałych elementów
• Dostosowanie do różnych rozmiarów ekranu
• Lokalizacje natywnych elementów sterujących (na przykład pasek stanu iOS)
• Dostosowanie do różnych przeglądarek mobilnych

Dlaczego warto korzystać z frameworka dla aplikacji Cordova?

Technologia Cordova jest często niedoceniana ze względu na aplikacje, które mają powyższe problemy. Frameworki mają na celu ich zrównoważenie i zbliżenie aplikacji HTML do aplikacji natywnych, zarówno pod względem projektu, jak i wydajności.

Spójrzmy na kilka przykładów aplikacji hybrydowych. Zostały stworzone z wykorzystaniem dwóch obecnie odnoszących największe sukcesy frameworków — poza interfejsem Onsen UI — które mają ułatwić rozwój twórców stron internetowych we współczesnym świecie: Framework7 i Ionic.

O Ionic Framework

Ionic został opracowany przez Drifty Co. w 2012 roku i jest oparty na Angularze. Od tego czasu aktywnie się rozwija, otrzymując znaczące inwestycje i silną społeczność deweloperską. Oficjalna strona twierdzi, że na jej podstawie powstały miliony aplikacji.

W chwili pisania tego artykułu najnowsza wersja to Ionic 3 oparty na Angular 5. Ionic 4, mający na celu elastyczność i niezależność od Angulara, jest we wczesnej fazie beta.

Oprócz silnika interfejsu użytkownika, wspaniałej biblioteki komponentów i interfejsu umożliwiającego dostęp do natywnych funkcji urządzenia, Ionic oferuje wiele dodatkowych możliwości, usług i narzędzi.

Ionic CLI

Interfejs wiersza poleceń Ionic jest używany do interaktywnego inicjowania projektu (tj. kreatora), generowania stron i komponentów oraz uruchamiania serwera programistycznego, który umożliwia tworzenie aplikacji w ruchu i ponowne ich ładowanie na żywo. Zapewnia również integrację z usługami chmury Ionic.

Lab i DevApp

Lab to niezwykle przydatna mini-usługa pozwalająca na naśladowanie pracy aplikacji na różnych platformach w przeglądarce dewelopera Ionic. DevApp pomaga szybko wdrożyć aplikację na rzeczywistym urządzeniu.

Pakowanie, wdrażanie i monitorowanie

Ionic jest dostarczany z pakietem usług internetowych, które upraszczają i przyspieszają tworzenie, debugowanie, testowanie i aktualizowanie aplikacji dla testerów i użytkowników.

Jednak plany Ionic często się zmieniają. Niektóre istniejące wcześniej usługi — takie jak Auth, Push, Analytics i View — zostały zamknięte, co wywołało oburzenie subskrybentów.

Twórca

Jest to edytor graficzny typu „przeciągnij i upuść” firmy Ionic do tworzenia interfejsów funkcjonalnych.

O Framework7

Ten framework został opracowany w 2014 roku przez rosyjskie studio iDangero. Ostatecznie nad projektem pracował jeden programista, nie licząc kilku pomniejszych współtwórców repozytorium GitHub.

Pierwotnie Framework7 składał się z zestawu komponentów interfejsu użytkownika w stylu niedawno wydanego iOS 7, od którego wziął swoją nazwę. Później dodano motyw Androida i oba motywy zostały zaktualizowane do najnowszych systemów iOS i Material Design.

Ostatnio rozwój projektu nabrał tempa i rozszerzył się z zestawu komponentów na pełnoprawną platformę dla aplikacji mobilnych, integrującą popularne technologie i narzędzia.

Wsparcie Framework7 i przykłady wykorzystujące Vue.js istnieją od wersji v1, a v3 obsługuje również React. To może pozwolić projektowi poważnie konkurować z popularniejszym Ionicem, który oferuje jedynie Angular i TypeScript.

Instalacja i pierwsze uruchomienie

joński

Aby rozpocząć pracę z Ionic, zainstaluj go z NPM:

 npm install -g ionic

Następnie wybierz szablon dla przyszłej aplikacji. Oficjalna strona internetowa Ionic oferuje wiele szablonów lub możesz wybrać pusty szablon, aby zbudować aplikację od podstaw za pomocą ionic start myApp blank .

Wybierzmy prosty projekt. Wykonaj następujące polecenie:

 ionic start Todo tabs

Odpowiedz „Tak” , gdy instalator zapyta „Czy chciałbyś zintegrować swoją nową aplikację z Cordova, aby kierować na natywne systemy iOS i Android?” To automatycznie zintegruje aplikację z Cordova i przygotuje ją do wdrożenia na platformy mobilne.

W następnym kroku instalator zaproponuje połączenie nas z Ionic Pro SDK. Na razie odpowiedz „Nie” , aby przykład był prosty.

Zainstaluj dodatkowy pakiet @ionic/lab , aby uzyskać wygodny interfejs do debugowania — imitacje w przeglądarce urządzeń z systemem iOS, Android i Windows:

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

Teraz możesz uruchomić aplikację w trybie debugowania. Pozwala to na rozwijanie i debugowanie aplikacji na żywo w przeglądarce internetowej:

 ionic lab

W rezultacie otrzymasz kilka przydatnych adresów:

Usługa debugowania Ionic Lab jest uruchamiana na porcie 8200. Sama aplikacja działa na porcie 8100, do którego prowadzi link Open fullscreen z Ionic Lab. Okno przeglądarki z uruchomionym laboratorium Ionic Lab otworzy się automatycznie.

Dodatkowo Ionic udostępnia adres aplikacji w sieci lokalnej . Jest to niezwykle przydatne, ponieważ pozwala otworzyć aplikację w przeglądarce urządzenia mobilnego, o ile urządzenie znajduje się w sieci lokalnej (np. przez Wi-Fi). Dodatkowo możesz użyć przycisku Dodaj do ekranu głównego , aby ponownie otworzyć aplikację w trybie pełnoekranowym. To najszybszy sposób na przetestowanie aplikacji na urządzeniu.

Innym sposobem jest aplikacja Ionic DevApp, którą można zainstalować na urządzeniu mobilnym i zapewnia dostęp do aplikacji przez sieć lokalną. Oferuje obsługę wtyczek (Ionic Native) w celu uzyskania dostępu do natywnych funkcji urządzenia i wyświetlania dzienników.

Ramy7

Narzędzia programistyczne F7 są mniej zaawansowane niż Ionic, a CLI automatycznej inicjalizacji nie jest udokumentowane. Jednak oficjalna strona internetowa udostępnia kilka repozytoriów GitHub z projektami szablonów, które pomogą Ci rozpocząć programowanie.

Podobnie jak szablon Tabs w Ionic, F7 oferuje widoki w kartach , ale użyjemy bardziej funkcjonalnego szablonu, który integruje Framework7 z React. Wsparcie dla React zostało dodane w wersji 3. W tym celu sklonuj repozytorium szablonów:

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

Przejdź do folderu projektu, pobierz zależności i rozpocznij proces:

 cd Todo npm install npm start

Wyniki wykonania są podobne do Ionic: Otrzymasz łącze lokalne i łącze w swojej sieci, aby uzyskać natychmiastowy dostęp z prawdziwego urządzenia:

Teraz możesz otworzyć http://localhost:3000/ w przeglądarce. Framework7 nie zawiera wbudowanych emulatorów urządzeń, więc użyjmy trybu urządzenia Chrome DevTools, aby uzyskać podobny wynik:

Jak widać, Framework7 jest podobny do Ionic, ponieważ ma iOS i Material Design jako dwa standardowe motywy. Motyw jest wybierany na podstawie platformy.

Niestety, w przeciwieństwie do podobnego szablonu z obsługą Vue.js w oficjalnych szablonach React, Webpack nie został jeszcze zaimplementowany, co uniemożliwia nam używanie Hot Module Replacement, aby szybko aktualizować aplikacje bez ponownego ładowania strony. Mimo to możesz użyć domyślnej funkcji ponownego ładowania na żywo, która ponownie ładuje stronę po każdej zmianie kodu źródłowego.

Konfiguracja Cordova

Aby zainstalować aplikacje na urządzeniach i emulatorach z Cordova, musisz pobrać i skonfigurować narzędzia programistyczne dla systemów iOS i Android, a także Cordova CLI. Możesz przeczytać więcej na ten temat w naszym poprzednim artykule oraz na oficjalnej stronie Cordova w sekcjach Przewodnik po platformach iOS i Przewodnik po platformach Android.

joński

Doświadczenie pokazuje, że do skutecznego rozwiązania większości problemów Ionic wystarczy debugowanie w przeglądarce z okazjonalnymi testami na rzeczywistych urządzeniach.

Pomimo akceptacji integracji dla iOS i Androida oraz przygotowania przez Ionic wymaganych ustawień w pliku config.xml oraz zasobów w folderze resources , nadal trzeba połączyć obie platformy z aplikacją za pomocą Cordova:

 cordova platform add ios cordova platform add android

Teraz możesz uruchomić aplikację Cordova w „prawdziwych” emulatorach, zainstalować ją na urządzeniu mobilnym, a nawet wysłać do App Store i Google Play.

Następne polecenie instaluje aplikację na urządzeniu z systemem iOS, jeśli jest ono podłączone przez USB. W przeciwnym razie aplikacja zostanie zainstalowana w Symulatorze iOS.

 cordova run ios

Najprawdopodobniej narzędzia wiersza poleceń Xcode poinformują Cię o konieczności skonfigurowania certyfikatów deweloperskich. Będziesz musiał otworzyć projekt w Xcode i wykonać wymagane czynności. Wystarczy to zrobić tylko raz, a potem będziesz mógł uruchomić aplikację z Cordova CLI.

Czasami iOS Simulator nie uruchamia się automatycznie. W takim przypadku uruchom go ręcznie, na przykład przez Spotlight.

Emulator Androida można uruchomić w podobny sposób:

 cordova run android 

Zwróć uwagę, że polecenie cordova run uruchamia i instaluje już skompilowaną aplikację, która nie korzysta z serwera ionic serve / ionic lab , więc Live Reload nie będzie działać. Aby rozwijać i debugować aplikację na żywo, użyj przeglądarki w sieci lokalnej lub zainstaluj aplikację Ionic DevApp.

Doświadczenie pokazuje, że do skutecznego rozwiązania większości problemów Ionic wystarczy debugowanie w przeglądarce z okazjonalnymi testami na rzeczywistych urządzeniach.

Ramy7

Wybrany wcześniej szablon „React” Framework7 nie zapewnia automatyzacji konfiguracji dla Cordova, więc będziesz musiał dodać platformy ręcznie. Utwórz projekt Cordova w podfolderze cordova folderu projektu:

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

Szablon jest oparty na aplikacji Create React, więc aby uruchomić skompilowany projekt w środowisku Cordova, musisz dodać "homepage": "." ustawienie na plik ./package.json . Ten plik można znaleźć na głównym poziomie projektu:

Skompiluj projekt Framework7 i skopiuj wynik do projektu Cordova:

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

Teraz możesz uruchomić aplikację na urządzeniu lub emulatorze:

 cd cordova/ cordova run ios 

Gotowe! Miejmy nadzieję, że Framework7 dogoni standardom programowania Ionic i wygodzie początkowej konfiguracji.

Tworzenie list zadań

joński

W końcu zacznijmy tworzyć aplikację! Ponieważ jest to aplikacja To Do, strona główna (plik src/pages/home/home.html ) będzie zawierała listę zadań z możliwością „oznaczenia ukończonych” i „dodania nowych”.

Ionic oferuje komponenty <ion-list> i <ion-item> dla list. Najpierw usuń właściwość padding z elementu <ion-content> , aby lista była cały ekran. Na liście umieść tekst za pomocą elementu <ion-label> i dodaj element <ion-toggle> , aby oznaczyć ukończone zadania.

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

Wróć do zakładki przeglądarki z uruchomioną usługą Ionic Lab. Aplikacja została zaktualizowana automatycznie:

Świetnie! Teraz przenieś dane zadania do obiektu JS i skonfiguruj jego prezentację HTML za pomocą Angulara. Przejdź do pliku src/pages/home/home.ts i utwórz właściwość task dla instancji klasy HomePage :

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

Teraz możesz odwołać się do tablicy tasks w kodzie HTML. Użyj konstrukcji *ngFor Angular, aby iteracyjnie tworzyć elementy listy dla każdego elementu tablicy. Kod staje się mniejszy:

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

Pozostało tylko dodać przycisk do tworzenia nowych zadań do nagłówka strony. W tym celu użyj <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>

Zwróć uwagę na konstrukcję kątową (click)="addTask()" . Jak można się domyślić, dodaje on obsługę dotknięcia do przycisku i wywołuje addTask() dla naszego komponentu. Zaimplementujmy tę metodę, aby otworzyć okno dialogowe nazwy zadania po dotknięciu przycisku.

Do tego potrzebny jest komponent AlertController Ionic. Aby użyć tego komponentu, zaimportuj jego typ:

 import { AlertController } from 'ionic-angular';

I określ go na liście parametrów konstruktora dla strony:

 constructor(public alertCtrl: AlertController) { }

Teraz możesz go wywołać w metodzie addTask() . Ustaw go po kontrolerze. Możesz utworzyć i wyświetlić okno dialogowe z następującymi wywołaniami:

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

Określ nagłówek wiadomości, opis pola i dwa przyciski w obiekcie options . Przycisk „OK” doda nowe zadanie do tablicy tasks :

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

Po dodaniu elementu do tablicy this.tasks , komponent zostanie odbudowany, a na liście pojawi się nowe zadanie.

Pełny kod strony wygląda teraz tak:

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

Zainstaluj ponownie aplikację na urządzeniu:

 cordova run ios

Otóż ​​to! Nie takie trudne, prawda? Teraz spróbujmy zrobić to samo z Framework7.

Ramy7

Szablony Framework7 mają na celu pokazanie wszystkich możliwości komponentów, więc wystarczy pozostawić tylko stronę src/components/pages/HomePage.jsx w src/components/App.jsx i src/routes.js , wyczyścić jej zawartość i usuń dodatkowe komentarze do kodu.

Teraz utwórz listę zadań. Framework7 zapewnia do tego składniki <List simple-list> i <ListItem> . Aby umieścić w nim przełącznik zakończenia zadania, dodaj komponent <Toggle slot="after"/> . Pamiętaj o zaimportowaniu wszystkich tych komponentów z modułu framework7-react . Teraz kod strony wygląda tak:

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

A sama aplikacja wygląda tak:

Całkiem dobry początek. Spróbujmy ponownie przenieść dane statyczne z kodu HTML. W tym celu użyj inteligentnego komponentu zamiast bezstanowego, który mieliśmy. Zaimportuj klasę abstrakcyjną Component z Reacta:

 import React, { Component } from 'react';

I zapisz tablicę zadań do instancji zmiennej state :

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

Prawdziwa aplikacja prawdopodobnie użyje bardziej abstrakcyjnego przepływu danych — na przykład w przypadku Redux lub MobX — ale w małym przykładzie będziemy trzymać się wewnętrznego stanu komponentów.

Teraz możesz użyć składni JSX do iteracyjnego tworzenia elementów listy dla każdego zadania w tablicy:

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

Pozostało tylko dodać nagłówek z przyciskiem, aby ponownie utworzyć nowe zadanie. Element <Navbar> już istnieje, więc dodaj <Link iconOnly> do elementu <NavRight> :

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

W React dodajesz moduły obsługi dotknięcia, używając właściwości onClick i ustawiając w niej wskaźnik wywołania zwrotnego. Zaimplementuj procedurę obsługi, aby wyświetlić okno dialogowe nazwy zadania.

Każdy element w Framework7 ma dostęp do wystąpienia aplikacji poprzez właściwość this.$f7 . W ten sposób można użyć metody dialog.prompt() . Przed zamknięciem okna dialogowego wywołaj metodę setState() komponentu React i przekaż jej kopię poprzedniej tablicy z nowym elementem. Spowoduje to reaktywną aktualizację listy.

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

Oto pełny kod komponentu:

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

Sprawdź wynik:

Pozostało tylko przebudować i wdrożyć na urządzeniu:

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

Gotowy!

Ostateczny kod dla obu tych projektów jest dostępny na GitHub:

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

Wyniki

Teraz zapoznałeś się z pełnym samouczkiem dotyczącym każdego frameworka Cordova. W jaki sposób Framework7 wypada na tle Ionic?

Początkowe ustawienia

Ionic jest znacznie łatwiejszy w instalacji dzięki interfejsowi CLI, podczas gdy F7 wymaga więcej czasu na wybranie i skonfigurowanie szablonu lub instalację krok po kroku od podstaw.

Różnorodność komponentów

Oba frameworki mają pełny zestaw wspaniale wykonanych standardowych komponentów w dwóch motywach: iOS i Material Design. Ionic dodatkowo dostarcza te komponenty w motywie Windows i gigantycznym rynku motywów użytkownika.

Oprócz pełnego naśladowania natywnego projektu i animacji, dużą wagę przywiązuje się do optymalizacji wydajności, co zapewnia fantastyczne rezultaty: często prawie niemożliwe jest odróżnienie aplikacji na obu platformach od tych natywnych.

Framework7 zapewnia dodatkową listę bardziej złożonych i przydatnych komponentów, takich jak Smart Select , Autouzupełnianie , Kalendarz , Lista kontaktów , Ekran logowania , Wiadomości i Przeglądarka zdjęć . Z drugiej strony Ionic zapewnia ogromny wybór komponentów tworzonych przez użytkowników.

Ekosystem i społeczność

Ionic oczywiście wygrywa na tych parametrach dzięki dłuższej żywotności, silnemu wsparciu finansowemu i aktywnej społeczności. Infrastruktura Ionic stale się rozwija: usługi wsparcia i rozwiązania chmurowe ustępują miejsca nowym, a liczba wtyczek stale rośnie.

Framework7 jest lepszy niż kiedykolwiek, ale bardzo brakuje mu wsparcia społeczności.

Zależności stron trzecich

Framework7 jest bardziej elastyczny w stosunku do rozwiązań firm trzecich. Jego największą siłą jest prawdopodobnie możliwość wyboru, czy w projekcie użyjesz Vue czy React, a także Webpacka czy Browserify. Ionic jest oparty na Angularze i wymaga wiedzy w nim (a więc także TypeScript).

Jednak ostatnio deweloperzy Ionic ogłosili nową wersję beta Ionic 4, twierdząc, że są całkowicie niezależne od frameworka interfejsu użytkownika — koniec z zależnościami Angular, jeśli ich nie chcesz.

Szkielety Cordova: wciąż potężny sposób na tworzenie wieloplatformowych aplikacji mobilnych

To, czy użyć Cordova, zależy od konkretnego projektu. Rzeczywiście, szybkość tworzenia hybrydowych aplikacji mobilnych i obsługa wielu platform to jej główne zalety. Ale zawsze jest to kompromis i czasami możesz napotkać pewne wady, które nie istniałyby przy natywnym podejściu. Te wspaniałe struktury i ich społeczności wykonują świetną robotę, aby zmniejszyć te wady i ułatwić nam życie. Dlaczego więc nie spróbować?