Kerangka Cordova: Ionic vs. Framework7

Saat ini, pengembang web menguasai dunia. JavaScript digunakan di mana pun seseorang dapat memprogram. Di antara area ini, pengembangan aplikasi seluler adalah salah satu cara pertama untuk berkembang: Sekitar sepuluh tahun yang lalu, PhoneGap mengizinkan instalasi aplikasi HTML dan JavaScript untuk iOS dan Android.

Sejak itu, teknologi mengalami pasang surut: Terlepas dari kemudahan pengembangan, aplikasi ini jelas sangat berbeda dari aplikasi asli. Vanilla HTML dan JavaScript berbasis browser ditargetkan pada browser, dan tidak ada cara bagi mereka untuk bermigrasi dengan sempurna ke bidang baru ini.

Sampai hari ini masalah utama masih adalah:

• Kesulitan dalam mengikuti desain dan animasi asli
• Efek transisi layar yang rumit
• Penanganan acara sentuh
• Performa di daftar besar
• Memposisikan elemen tetap
• Beradaptasi untuk ukuran layar yang berbeda
• Lokasi elemen kontrol asli (misalnya, bilah status iOS)
• Beradaptasi dengan browser seluler yang berbeda

Mengapa Menggunakan Kerangka untuk Aplikasi Cordova?

Teknologi Cordova sering diremehkan karena aplikasi yang memiliki masalah di atas. Kerangka kerja bertujuan untuk mengimbanginya dan membuat aplikasi HTML sedekat mungkin dengan aplikasi asli, baik dalam desain maupun kinerja.

Mari kita lihat beberapa contoh aplikasi hybrid. Mereka dibuat dengan dua kerangka kerja paling sukses saat ini—selain UI Onsen—yang diatur untuk memfasilitasi perluasan pengembang web di dunia modern: Framework7 dan Ionic.

Tentang Kerangka Ionik

Ionic dikembangkan oleh Drifty Co. pada tahun 2012 dan didasarkan pada Angular. Sejak itu, telah dalam pengembangan aktif, menerima investasi yang signifikan dan komunitas pengembang yang kuat. Situs web resmi mengklaim bahwa jutaan aplikasi telah dikembangkan berdasarkan itu.

Pada saat penulisan artikel ini, versi terbaru adalah Ionic 3 berdasarkan Angular 5. Ionic 4, yang bertujuan untuk fleksibilitas dan kemandirian dari Angular, masih dalam versi beta awal.

Terlepas dari mesin UI, pustaka komponen yang luar biasa, dan antarmuka untuk mengakses fungsi perangkat asli, Ionic menawarkan beberapa kemampuan, layanan, dan utilitas tambahan.

CLI ionik

Antarmuka baris perintah Ionic digunakan untuk inisialisasi proyek interaktif (yaitu, wizard), menghasilkan halaman dan komponen, dan menjalankan server pengembangan yang memungkinkan Anda membangun aplikasi saat bepergian dan Live Reload mereka. Ini juga menyediakan integrasi dengan layanan cloud Ionic.

Lab dan DevApp

Lab adalah layanan mini yang sangat berguna yang memungkinkan Anda untuk meniru pekerjaan aplikasi pada platform yang berbeda di browser pengembang Ionic. DevApp membantu Anda menerapkan aplikasi dengan cepat ke perangkat nyata.

Pengemasan, Penerapan, dan Pemantauan

Ionic hadir dengan paket layanan web yang menyederhanakan dan mempercepat pembuatan, debugging, pengujian, dan pembaruan aplikasi untuk penguji dan pengguna.

Namun, rencana Ionic sering berubah. Beberapa layanan yang sudah ada sebelumnya—seperti Auth, Push, Analytics, dan View—ditutup, menyebabkan protes dari pelanggan.

Pencipta

Ini adalah editor grafis drag-and-drop Ionic untuk mengembangkan antarmuka fungsional.

Tentang Kerangka7

Kerangka kerja ini dikembangkan pada tahun 2014 oleh studio Rusia iDangero. Pada akhirnya, satu pengembang telah mengerjakan proyek tersebut, tidak termasuk beberapa kontributor kecil ke repositori GitHub.

Awalnya, Framework7 terdiri dari kumpulan komponen UI dengan gaya iOS 7 yang baru saja dirilis, dari mana ia mendapatkan namanya. Kemudian, tema Android ditambahkan, dan kedua tema diperbarui untuk iOS dan Desain Material terbaru.

Baru-baru ini, pengembangan proyek meningkat pesat, dan diperluas dari serangkaian komponen ke kerangka kerja lengkap untuk aplikasi seluler, mengintegrasikan teknologi dan alat populer.

Dukungan dan contoh Framework7 menggunakan Vue.js telah ada sejak v1, dan v3 juga mendukung React. Inilah yang memungkinkan proyek untuk secara serius bersaing dengan Ionic yang lebih populer, yang hanya menawarkan Angular dan TypeScript.

Instalasi dan Peluncuran Pertama

ionik

Untuk mulai bekerja dengan Ionic, instal dengan NPM:

 npm install -g ionic

Kemudian, pilih template untuk aplikasi yang akan datang. Situs web resmi Ionic menawarkan beberapa template, atau Anda dapat memilih template kosong untuk membangun aplikasi dari awal dengan ionic start myApp blank .

Mari kita pilih desain yang sederhana. Jalankan perintah berikut:

 ionic start Todo tabs

Jawab "Ya" ketika penginstal bertanya "Apakah Anda ingin mengintegrasikan aplikasi baru Anda dengan Cordova untuk menargetkan iOS dan Android asli?" Ini akan secara otomatis mengintegrasikan aplikasi dengan Cordova dan mempersiapkannya untuk diterapkan pada platform seluler.

Pada langkah selanjutnya, penginstal akan menawarkan untuk menghubungkan kita ke Ionic Pro SDK. Jawab “Tidak” untuk saat ini agar contoh tetap sederhana.

Instal paket @ionic/lab tambahan untuk mendapatkan UI debugging yang nyaman—imitasi dalam browser perangkat iOS, Android, dan Windows:

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

Sekarang Anda dapat memulai aplikasi dalam mode debug. Ini memungkinkan Anda untuk mengembangkan dan men-debug aplikasi secara langsung di browser web:

 ionic lab

Akibatnya, Anda akan mendapatkan beberapa alamat yang berguna:

Layanan debugging Ionic Lab diluncurkan pada port 8200. Aplikasi itu sendiri berjalan pada port 8100, dan tautan Open fullscreen dari Ionic Lab mengarah ke sana. Jendela browser dengan Ionic Lab yang sedang berjalan akan terbuka secara otomatis.

Selain itu, Ionic menyediakan alamat aplikasi di jaringan lokal . Ini sangat berguna, karena memungkinkan Anda untuk membuka aplikasi di browser perangkat seluler, selama perangkat berada di jaringan lokal (misalnya, melalui Wi-Fi). Selain itu, Anda dapat menggunakan tombol Tambahkan ke Layar Beranda untuk membuka kembali aplikasi dalam mode layar penuh. Ini adalah cara tercepat untuk menguji aplikasi Anda di perangkat.

Cara lain adalah aplikasi Ionic DevApp, yang dapat diinstal pada perangkat seluler dan menyediakan akses ke aplikasi melalui jaringan lokal. Ini menawarkan dukungan plugin (Ionic Native) untuk akses ke fungsi perangkat asli dan menampilkan log.

Kerangka kerja7

Alat pengembangan F7 kurang canggih daripada Ionic, dan CLI inisialisasi otomatis tidak didokumentasikan. Namun, situs web resmi menyediakan beberapa repositori GitHub dengan proyek template yang akan membantu Anda mulai berkembang.

Mirip dengan templat Tab di Ionic, F7 menawarkan Tampilan Tab , tetapi kami akan menggunakan templat yang lebih fungsional yang mengintegrasikan Framework7 dengan React. Dukungan untuk React telah ditambahkan di v3. Untuk itu, klon repositori template:

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

Beralih ke folder proyek, ambil dependensi, dan mulai prosesnya:

 cd Todo npm install npm start

Hasil eksekusinya mirip dengan Ionic: Anda mendapatkan tautan lokal dan tautan di dalam jaringan Anda untuk akses instan dari perangkat nyata:

Sekarang Anda dapat membuka http://localhost:3000/ di browser. Framework7 tidak menyertakan emulator perangkat bawaan, jadi mari gunakan Mode Perangkat Chrome DevTools untuk mendapatkan hasil yang serupa:

Seperti yang Anda lihat, Framework7 mirip dengan Ionic karena memiliki iOS dan Desain Material sebagai dua tema standarnya. Tema dipilih berdasarkan platform.

Sayangnya, tidak seperti template serupa dengan dukungan Vue.js di template React resmi, Webpack belum diimplementasikan dan ini melarang kami menggunakan Penggantian Modul Panas untuk memperbarui aplikasi dengan cepat tanpa memuat ulang halaman. Namun, Anda dapat menggunakan fitur live-reload default, yang memuat ulang halaman setiap kali Anda mengubah kode sumber.

Menyiapkan Cordova

Untuk menginstal aplikasi pada perangkat dan emulator dengan Cordova, Anda perlu mengunduh dan menyiapkan alat pengembangan untuk iOS dan Android, serta Cordova CLI. Anda dapat membaca lebih lanjut tentang ini di artikel kami sebelumnya dan di situs web resmi Cordova di bagian Panduan Platform iOS dan Panduan Platform Android.

ionik

Pengalaman menunjukkan bahwa untuk berhasil menyelesaikan sebagian besar masalah Ionic, debugging berbasis browser dengan tes sesekali pada perangkat nyata sudah cukup.

Meskipun Anda menerima integrasi untuk iOS dan Android, dan Ionic menyiapkan pengaturan yang diperlukan di file config.xml dan sumber daya di folder resources , Anda masih perlu menghubungkan kedua platform ke aplikasi dengan Cordova:

 cordova platform add ios cordova platform add android

Sekarang Anda dapat memulai aplikasi Cordova di emulator "nyata", menginstalnya di perangkat seluler, dan bahkan mengirimkannya ke App Store dan Google Play.

Perintah selanjutnya menginstal aplikasi ke perangkat iOS Anda jika terhubung dengan USB. Jika tidak, aplikasi akan dipasang di Simulator iOS.

 cordova run ios

Kemungkinan besar, Alat Baris Perintah Xcode akan memberi tahu Anda tentang perlunya menyiapkan sertifikat pengembang. Anda harus membuka proyek di Xcode dan melakukan tindakan yang diperlukan. Ini hanya perlu dilakukan sekali, dan setelah itu Anda akan dapat menjalankan aplikasi dengan Cordova CLI.

Terkadang iOS Simulator tidak diluncurkan secara otomatis. Dalam hal ini, mulai secara manual, misalnya melalui Spotlight.

Emulator Android dapat dimulai dengan cara yang sama:

 cordova run android 

Perhatikan bahwa perintah cordova run memulai dan menginstal aplikasi yang sudah dikompilasi , yang tidak menggunakan server ionic lab ionic serve / ionic, jadi Live Reload tidak akan berfungsi. Untuk mengembangkan dan men-debug aplikasi secara langsung, gunakan browser di jaringan lokal atau instal aplikasi Ionic DevApp.

Pengalaman menunjukkan bahwa untuk berhasil menyelesaikan sebagian besar masalah Ionic, debugging berbasis browser dengan tes sesekali pada perangkat nyata sudah cukup.

Kerangka kerja7

Template "React" Framework7 yang dipilih sebelumnya tidak menyediakan otomatisasi pengaturan untuk Cordova, jadi Anda perlu menambahkan platform secara manual. Buat proyek Cordova di subfolder cordova dari folder proyek Anda:

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

Template didasarkan pada Create React App, jadi untuk menjalankan proyek yang dikompilasi di lingkungan Cordova Anda perlu menambahkan "homepage": "." pengaturan ke file ./package.json . File ini dapat ditemukan di tingkat root proyek:

Kompilasi proyek Framework7 dan salin hasilnya ke proyek Cordova:

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

Sekarang Anda dapat memulai aplikasi pada perangkat atau emulator:

 cd cordova/ cordova run ios 

Kamu selesai! Mari kita berharap bahwa Framework7 memenuhi standar pengembangan dan kenyamanan pengaturan awal Ionic.

Membuat Daftar Tugas

ionik

Mari kita akhirnya mulai membuat aplikasi! Karena ini adalah aplikasi To Do, halaman utama ( file src/pages/home/home.html ) akan berisi daftar tugas dengan kemampuan untuk “menandai selesai” dan “menambah baru”.

Ionic menawarkan komponen <ion-list> dan <ion-item> untuk daftar. Pertama, hapus properti padding dari elemen <ion-content> untuk membuat daftar selebar layar. Dalam daftar, tempatkan teks menggunakan elemen <ion-label> dan tambahkan elemen <ion-toggle> untuk menandai tugas yang telah selesai.

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

Kembali ke tab browser dengan menjalankan layanan Ionic Lab. Aplikasi diperbarui secara otomatis:

Besar! Sekarang pindahkan data tugas ke objek JS dan atur presentasi HTML-nya dengan Angular. Buka file src/pages/home/home.ts dan buat properti tugas dari instance kelas HomePage :

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

Sekarang Anda dapat merujuk ke larik tasks dalam kode HTML. Gunakan konstruksi *ngFor Angular untuk membuat elemen daftar secara iteratif untuk setiap elemen array. Kode menjadi lebih kecil:

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

Yang tersisa hanyalah menambahkan tombol untuk membuat tugas baru ke header halaman. Untuk melakukannya, gunakan komponen <ion-navbar> , <ion-buttons> , <button> , dan <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>

Perhatikan konstruksi Sudut (click)="addTask()" . Seperti yang bisa Anda tebak, itu menambahkan tap handler ke tombol dan memanggil metode addTask() untuk komponen kita. Mari terapkan metode ini untuk membuka jendela dialog nama tugas saat tombol diketuk.

Untuk ini, Anda memerlukan komponen AlertController Ionic. Untuk menggunakan komponen ini, impor jenisnya:

 import { AlertController } from 'ionic-angular';

Dan tentukan dalam daftar parameter konstruktor untuk halaman:

 constructor(public alertCtrl: AlertController) { }

Sekarang Anda dapat memanggilnya dalam metode addTask() . Mengaturnya setelah controller. Anda dapat membuat dan menampilkan jendela dialog dengan panggilan berikut:

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

Tentukan header pesan, deskripsi bidang dan dua tombol di objek options . Tombol "OK" akan menambahkan tugas baru ke larik tasks :

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

Setelah Anda menambahkan elemen ke array this.tasks , komponen akan dibangun kembali secara reaktif dan tugas baru akan ditampilkan dalam daftar.

Kode halaman penuh terlihat seperti ini sekarang:

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

Instal ulang aplikasi pada perangkat:

 cordova run ios

Itu dia! Tidak terlalu sulit, bukan? Sekarang mari kita coba melakukan hal yang sama dengan Framework7.

Kerangka kerja7

Template Framework7 dibuat untuk menampilkan semua kemampuan komponen, jadi Anda hanya perlu meninggalkan halaman src/components/pages/HomePage.jsx di file src/components/App.jsx dan src/routes.js , bersihkan kontennya dan hapus komentar kode tambahan.

Sekarang buat daftar tugas. Framework7 menyediakan komponen <List simple-list> dan <ListItem> untuk ini. Untuk menempatkan sakelar penyelesaian tugas di dalamnya, tambahkan komponen <Toggle slot="after"/> . Ingatlah untuk mengimpor semua komponen ini dari modul framework7-react . Sekarang kode halaman terlihat seperti ini:

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

Dan aplikasi itu sendiri terlihat seperti ini:

Awal yang cukup bagus. Mari kita coba memindahkan data statis dari kode HTML lagi. Untuk ini, gunakan komponen cerdas alih-alih komponen stateless yang kami miliki. Impor kelas abstrak Component dari Bereaksi:

 import React, { Component } from 'react';

Dan tulis larik tugas ke instance variabel state :

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

Aplikasi sebenarnya cenderung menggunakan aliran data yang lebih abstrak—misalnya dengan Redux atau MobX—tetapi untuk contoh kecil kita akan tetap menggunakan status komponen internal.

Sekarang Anda dapat menggunakan sintaks JSX untuk membuat elemen daftar secara iteratif untuk setiap tugas dalam larik:

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

Yang tersisa hanyalah menambahkan tajuk dengan tombol untuk membuat tugas baru lagi. Elemen <Navbar> sudah ada, jadi tambahkan <Link iconOnly> ke elemen <NavRight> :

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

Di React Anda menambahkan penangan tap dengan menggunakan properti onClick dan mengatur penunjuk panggilan balik di dalamnya. Terapkan handler untuk menampilkan dialog nama tugas.

Setiap elemen di Framework7 memiliki akses ke instance aplikasi melalui this.$f7 . Anda dapat menggunakan metode dialog.prompt() dengan cara ini. Sebelum menutup dialog, panggil metode setState() dari komponen React dan berikan salinan array sebelumnya dengan elemen baru. Ini akan secara reaktif memperbarui daftar.

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

Berikut adalah kode komponen lengkapnya:

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

Periksa hasilnya:

Yang tersisa hanyalah membangun kembali dan menerapkan ke perangkat:

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

Selesai!

Kode terakhir untuk kedua proyek ini tersedia di GitHub:

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

Hasil

Sekarang Anda telah melihat tutorial lengkap dengan setiap kerangka kerja Cordova. Bagaimana Framework7 menumpuk terhadap Ionic?

Pengaturan awal

Ionic jauh lebih mudah dipasang berkat CLI-nya, sementara F7 membutuhkan lebih banyak waktu untuk memilih dan menyiapkan template atau pemasangan langkah demi langkah dari awal.

Keanekaragaman Komponen

Kedua kerangka kerja memiliki set lengkap komponen standar yang dibuat dengan luar biasa dalam dua tema: iOS dan Desain Material. Ionic juga menyediakan komponen-komponen ini dalam tema Windows dan pasar tema pengguna raksasa.

Selain sepenuhnya meniru desain dan animasi asli, banyak perhatian diberikan pada pengoptimalan kinerja, memberikan hasil yang fantastis: Seringkali, hampir tidak mungkin untuk membedakan aplikasi pada kedua kerangka kerja dari yang asli.

Framework7 menyediakan daftar tambahan dari komponen yang lebih kompleks dan berguna, seperti Smart Select , Autocomplete , Calendar , Contacts List , Login Screen , Messages , dan Photo Browser . Di sisi lain, Ionic menyediakan banyak pilihan komponen yang dibuat pengguna.

Ekosistem dan Komunitas

Ionic jelas menang dalam parameter ini berkat umurnya yang lebih panjang, dukungan finansial yang kuat, dan komunitas yang aktif. Infrastruktur ionik terus berkembang: Layanan pendukung dan solusi cloud memberi jalan kepada yang baru dan jumlah plugin terus bertambah.

Framework7 lebih baik dari sebelumnya, tetapi sangat kekurangan dukungan komunitas.

Dependensi pihak ketiga

Framework7 lebih fleksibel dalam hal solusi pihak ketiga. Kekuatan terbesarnya mungkin adalah kemampuan untuk memilih apakah Anda menggunakan Vue atau React dalam proyek, serta Webpack atau Browserify. Ionic didasarkan pada Angular dan membutuhkan pengetahuan di dalamnya (dan karenanya TypeScript juga.)

Namun, baru-baru ini, pengembang Ionic mengumumkan Ionic 4 beta baru, yang mengklaim sepenuhnya UI-framework-agnostik—tidak ada lagi ketergantungan Angular jika Anda tidak menginginkannya.

Cordova Frameworks: Masih Cara yang Kuat untuk Mengembangkan Aplikasi Seluler Lintas-platform

Apakah akan menggunakan Cordova tergantung pada proyek tertentu. Memang, kecepatan pengembangan aplikasi seluler hybrid dan dukungannya terhadap berbagai platform adalah keunggulan utamanya. Tapi itu selalu merupakan trade-off, dan terkadang Anda mungkin menghadapi beberapa kekurangan yang tidak akan ada dengan pendekatan asli. Kerangka kerja yang luar biasa ini dan komunitasnya melakukan pekerjaan yang baik untuk mengurangi kekurangan tersebut dan membuat hidup kita lebih mudah. Jadi, mengapa tidak memberi mereka mencoba?