Isi
- PWA vs. Aplikasi asli: Apa bedanya?
- Aplikasi web progresif: Membangun untuk web
- Kekuatan PWA
- Kelemahan PWA
- React Native
- Kekuatan React Native
- Kelemahan dari React Native
- NativeScript
- Kekuatan NativeScript
- Kelemahan NativeScript
Pendekatan mana yang harus Anda ambil saat membuat aplikasi? Haruskah Anda mengambil rute PWA / teknologi web atau haruskah Anda menggunakan versi asli dan merancang untuk platform tertentu? Kedua opsi tersebut memiliki pro dan kontra, dan dalam artikel ini kami berkonsentrasi pada beberapa pilihan populer yang digunakan untuk membuat web dan aplikasi asli.
PWA (Aplikasi Web Progresif) alias aplikasi web, dibuat dengan teknologi web populer HTML, CSS, dan JavaScript dan berfungsi di browser web. (Lihat beberapa tag HTML penting untuk membantu build Anda.) PWA adalah situs web seluler yang efektif dirancang agar terlihat seperti aplikasi, dan penggunaan API web memberi mereka fungsionalitas yang mirip dengan aplikasi asli.
Untuk saran lebih lanjut tentang pembuatan aplikasi, lihat postingan kami tentang cara membuat aplikasi, atau jika itu adalah situs yang ingin Anda buat, lihat pembuat situs web dan layanan hosting web teratas ini.
PWA vs. Aplikasi asli: Apa bedanya?
Aplikasi Web Progresif memiliki keuntungan karena dapat dipasang dan aktif di perangkat tanpa memerlukan toko aplikasi. Dan, bagian dari prosesnya adalah Manifes Aplikasi Web yang memungkinkan pengembang untuk mengontrol bagaimana aplikasi muncul dan bagaimana aplikasi itu diluncurkan. Selain itu, desainer web / pengembang front end sudah memiliki keahlian yang dibutuhkan untuk segera mulai membangun. Tidak perlu mempelajari bahasa baru, tidak seperti aplikasi asli.
Aplikasi asli dibuat dengan mempertimbangkan OS tertentu - yaitu. iOS dan Android - dan menggunakan kerangka kerja atau bahasa untuk memenuhi tujuan itu. Aplikasi iOS biasanya menggunakan Xcode atau Swift, dan aplikasi Android, JavaScript. Namun, untuk artikel ini kami berkonsentrasi pada beberapa kerangka kerja sumber terbuka berbasis JavaScript - React Native dan NativeScript - yang berfungsi untuk kedua platform.
Keuntungan dari aplikasi asli adalah bahwa mereka biasanya menghadirkan fungsionalitas yang lebih baik karena mereka memanfaatkan perangkat keras dan lunak perangkat dengan lebih baik, lebih cepat dan lebih responsif dan Anda mendapatkan jaminan kualitas melalui peringkat di toko aplikasi. Namun, ini berarti harus mempelajari cara menggunakan framework atau library tertentu.
Di sini kita melihat tiga opsi berbeda - satu untuk web (PWA) dan dua untuk native (React Native, NativeScript) - untuk membangun aplikasi. Kami membahas cara mereka beroperasi, apa yang dapat mereka lakukan, dan melihat kekuatan dan kelemahan mereka untuk membantu Anda memutuskan opsi mana yang harus Anda pilih untuk membangun aplikasi Anda.
Aplikasi web progresif: Membangun untuk web
Kekuatan PWA
- Aplikasi juga berfungsi di browser
- Distribusi: browser, perusahaan, dan toko aplikasi
- Dapat menggunakan React, Angular, Vue, vanilla atau framework lainnya
Kelemahan PWA
- Tidak ada akses ke setiap API asli
- Kemampuan dan distribusi toko di iOS dan iPadOS terbatas
- Itu dalam evolusi yang berkelanjutan
PWA adalah pola desain saat ini untuk membuat aplikasi berperforma tinggi, offline, dan dapat diinstal hanya dengan menggunakan tumpukan web: HTML, CSS, JavaScript, dan API browser. Berkat pekerja layanan dan spesifikasi manifes aplikasi web, kini kami dapat membuat pengalaman aplikasi kelas satu setelah menginstal untuk Android, iOS, iPadOS, Windows, macOS, Chrome OS, dan Linux.
Untuk membuat PWA, Anda dapat menggunakan arsitektur apa pun: dari sisi server, vanilla JavaScript, React, Vue, Angular, atau kerangka kerja sisi klien lainnya. Ini bisa menjadi aplikasi satu halaman atau aplikasi web multi-halaman dan kami menentukan bagaimana kami akan mendukung pengguna saat offline.
Dalam pendekatan ini, kita tidak perlu mengemas dan menandatangani sumber daya aplikasi kita: kita hanya menghosting file di server web dan service worker akan bertanggung jawab untuk menyimpan file dalam cache di klien dan menayangkannya setelah penginstalan. Ini juga berarti jika suatu aplikasi perlu diperbarui, Anda cukup mengubah file di server dan logika pekerja layanan akan bertanggung jawab untuk memperbaruinya di perangkat pengguna tanpa campur tangan pengguna atau toko aplikasi.
Dalam hal distribusi, metode yang paling umum adalah browser. Pengguna menginstal aplikasi dari browser dengan menggunakan item menu Tambahkan ke Layar Utama atau Instal, dengan menerima undangan untuk menginstal atau dengan menggunakan antarmuka pengguna aplikasi web khusus pada platform yang kompatibel. Perlu dicatat bahwa Apple menolak PWA murni yang dipublikasikan di App Store dan mendorong pengembang web untuk mendistribusikannya melalui Safari.
Antarmuka pengguna dikelola murni oleh runtime web, yang berarti perancang web bertanggung jawab untuk menampilkan setiap kontrol di layar. Jika Anda menggunakan kerangka kerja UI, seperti Ionic, atau pustaka Desain Material, HTML dan CSS akan meniru antarmuka asli di Android atau iOS tetapi tidak wajib.Saat melakukan PWA, menerapkan teknik kinerja web adalah wajib untuk menjaga pengalaman pengguna yang baik.
Dalam hal kemampuan, PWA hanya akan memiliki akses ke API yang tersedia di mesin browser pada platform tersebut dan tidak dapat diperpanjang dengan kode asli - dengan pengecualian distribusi PWA toko aplikasi. Dalam hal ini, iOS dan iPadOS adalah platform yang lebih terbatas untuk PWA, sementara Chrome (untuk Android dan OS desktop) memiliki lebih banyak ketersediaan dan bekerja keras untuk menambahkan setiap API yang mungkin ke JavaScript dengan proyek Fugu.
- Penyimpanan cloud terbaik: Pilih opsi yang tepat untuk Anda.
React Native
Kekuatan React Native
- Pola yang sama dengan React.js
- Beberapa API web terpapar
- Dukungan web dan desktop
Kelemahan dari React Native
- Tidak dapat menggunakan kembali komponen UI web
- Jembatan asli perlu diperbaiki
- Diperlukan pengalaman React
React Native adalah kerangka komponen berbasis JavaScript open-source, disponsori oleh Facebook, yang menggunakan pola desain React, serta bahasa JavaScript untuk menyusun aplikasi asli untuk iOS, iPadOS dan Android dari satu kode sumber.
Tapi tidak ada elemen HTML yang diterima untuk dirender; hanya komponen asli lainnya yang valid. Oleh karena itu, alih-alih merender a div> dengan p> dan a masukan> elemen dengan JSX, Anda akan merender file Lihat> dengan Teks> dan a TextInput>. Untuk komponen gaya, Anda masih menggunakan CSS dan tata letaknya ditentukan melalui Flexbox.
Antarmuka pengguna tidak akan dirender di DOM browser tetapi menggunakan pustaka antarmuka pengguna asli di Android dan iOS. Oleh karena itu, a Tombol> di ReactNative akan menjadi turunan UIButton di iOS dan android.widget.Button kelas di Android; tidak ada runtime web yang terlibat dalam React Native.
Namun, semua kode JavaScript akan dieksekusi di mesin virtual JavaScript di perangkat, jadi tidak ada konversi JavaScript ke kode asli nyata saat menyusun aplikasi. Ada satu set API terkenal untuk pengembang web, seperti Fetch API, WebSockets dan pengatur waktu browser: setInterval dan requestAnimationFrame. Kemampuan lain diterapkan di platform melalui API khusus, seperti animasi.
Anda dapat memulai proyek React Native cepat dengan dua CLI gratis: Expo atau ReactNative CLI yang lebih canggih dan resmi. Jika Anda menggunakan CLI resmi, Anda juga memerlukan Android Studio untuk mengkompilasi dan menguji aplikasi Android dan Xcode untuk melakukan hal yang sama di iOS dan iPadOS, jadi Anda memerlukan komputer macOS untuk platform itu.
React Native mengompilasi aplikasi asli untuk iOS dan Android, yang berarti distribusi aplikasi Anda akan mengikuti aturan yang sama seperti aplikasi asli lainnya: toko aplikasi untuk aplikasi publik, distribusi perusahaan, dan pengujian alfa / beta. Biasanya, Anda tidak dapat mendistribusikan aplikasi melalui browser, meskipun React Native for Web dan platform Microsoft React Native untuk Windows dapat membantu.
NativeScript
Kekuatan NativeScript
- Alat yang bagus untuk pengkodean dan pengujian
- Galeri aplikasi yang luas siap untuk dimainkan
- Semua API Android dan iOS diekspos di JS
Kelemahan NativeScript
- Komunitas kecil
- Tidak dapat menggunakan kembali komponen UI web
- Tidak ada web, desktop atau dukungan React
NativeScript tidak setenar React Native tetapi bersaing di bidang yang sama: aplikasi iOS dan Android asli dari JavaScript dan kerangka kerja web. Ini memungkinkan Anda menggunakan JavaScript atau TypeScript dan file antarmuka pengguna XML untuk membuat aplikasi asli. Ini juga mendukung Angular dan Vue langsung dari kotak, jadi ini adalah solusi yang bagus untuk pengembang yang terbiasa dengan kerangka kerja ini.
Keuntungan NativeScript lebih jelas saat Anda menggunakan Angular atau Vue. Untuk Angular, Anda membuat komponen yang sama dengan yang biasa Anda gunakan, tetapi menggunakan XML, bukan HTML untuk template, termasuk semua data binding. Dalam XML, bukan div> dengan p> dan sebuah img>, Anda akan menempatkan StackLayout> dengan Label> dan sebuah Gambar> komponen.
CSS dan Sass didukung dengan gaya yang mirip dengan CSS di browser. Perutean dan manajemen jaringan dilakukan melalui implementasi layanan Angular standar. Bagi Vue, ini serupa; Anda menulis template dalam XML alih-alih menggunakan HTML yang sama template> elemen dalam file .vue Anda.
NativeScript menyertakan sekumpulan komponen yang kemudian dipetakan ke kontrol asli Android atau iOS, jadi saat Anda membuat daftar atau picker, itu akan menjadi aplikasi asli, menggunakan ide yang sama seperti di React Native.
Kode JavaScript atau TypeScript Anda (ditranspilasi) dijalankan di mesin virtual JavaScript di perangkat dengan jembatan ke / dari lingkungan asli. Di jembatan itu, seluruh API asli dari Android atau iOS / iPadOS terpapar sehingga meskipun memiliki akses ke API lintas platform, kami dapat membuat instance atau memanggil kode Java atau Objective-C apa pun dari JavaScript / TypeScript dan NativeScript akan mengatur tipe data.
NativeScript memiliki dukungan yang hebat untuk perkakas, termasuk plugin kode VS, CLI, sistem pengujian hot-reload dan aplikasi NativeScript playground, jadi Anda tidak perlu menginstal semua dependensi saat pengujian, serta beberapa layanan tambahan seperti online tempat bermain.
Terakhir, NativeScript hanya mengompilasi aplikasi untuk Android dan iOS yang dapat diinstal dari saluran distribusi resmi dan toko aplikasi jika Anda mematuhi aturan mereka, distribusi perusahaan, dan pengujian alfa / beta. Biasanya tidak akan ada cara untuk mendistribusikan aplikasi dari browser dan tidak ada solusi untuk aplikasi desktop untuk platform ini.
Artikel ini pertama kali diterbitkan di Masalah 325 net, majalah terlaris di dunia untuk perancang dan pengembang web. Membeli Masalah 325 atau langganan untuk menjaring.
Bergabunglah dengan kami pada April 2020 dengan jajaran superstar JavaScript kami di GenerateJS - konferensi yang membantu Anda membangun JavaScript yang lebih baik. Pesan sekarang digenerateconf.comÂ
