PWA vs Flutter: Perbandingan Mendetail

Diterbitkan: 2020-07-10

Daftar Isi

Dengan semua kerumitan yang terjadi di antara para teknisi ini, dapat dimengerti bahwa Anda mungkin merasa sedikit membingungkan pada awalnya ketika mencoba mempelajari perbedaan antara kedua teknologi—Progressive Web App dan Flutter. Bagaimanapun, mereka terdengar sangat mirip dalam teori karena keduanya dapat digunakan untuk memberikan pengalaman yang menarik di seluruh perangkat, menggunakan satu basis kode tunggal.

Dalam upaya untuk membedakan keduanya, hari ini kita akan mempelajari lebih dalam tentang kedua teknologi ini—mulai dari cara kerjanya hingga penggunaannya di kehidupan nyata. Mari kita langsung ke dalamnya:

Ikhtisar singkat

Aplikasi Web Progresif vs Flutter: Ikhtisar

Apa itu PWA?

Sederhananya, Progressive Web Apps adalah situs web yang terlihat dan terasa seperti sebuah aplikasi. Teknologi ini merupakan perpaduan fitur terbaik dari web dan aplikasi asli, yang berarti bahwa pengguna yang menggunakan PWA dapat memperoleh manfaat dari semua fitur yang sebelumnya eksklusif untuk aplikasi asli seperti pemberitahuan push, lokasi geografis, dll—semuanya sambil tetap mempertahankan fitur terbaik dari Web

Ini adalah teknologi baru yang menjanjikan; dan dikombinasikan dengan adopsi massal dari semua orang besar termasuk Microsoft dengan mendorong PWA baru-baru ini ke Windows, Anda dapat yakin bahwa Anda hanya akan melihat lebih banyak PWA mulai sekarang.

Apa itu Flutter?

Dikenal dengan kemampuan pixel-perfect dalam pengembangan, Flutter adalah SDK (Software Development Kit) open-source terbaru dari Google untuk menyelesaikan pekerjaan jika Anda ingin membuat aplikasi seluler yang memiliki tampilan dan nuansa aplikasi asli saat masih tersedia lintas platform. Ini berarti bahwa aplikasi Flutter dibuat dengan mempertimbangkan satu basis kode, sehingga secara substansial mengurangi biaya pengembangan.

Ini mungkin terlihat sangat mirip dengan Progressive Web App tetapi kami dapat meyakinkan Anda, mekanisme dasar yang memungkinkan semua pengalaman aplikasi asli ini sangat berbeda.

Masuk ke spesifikasinya

Bahasa

Progressive Web Apps, seperti yang dinyatakan sebelumnya, lebih seperti standar baru web dan tidak ada aturan ketat tentang bahasa pemrograman apa yang harus dikodekan. Namun, karena pada dasarnya masih merupakan teknologi dari web, web- bahasa berbasis seperti JavaScript masih mendasar untuk pengembangan PWA.

Flutter, di sisi lain, menggunakan bahasa pemrograman Dart . Dart adalah bahasa pemrograman yang sepenuhnya berorientasi objek, dan karena memiliki gaya sintaksis berbasis C, mudah dipelajari dan dipelajari jika Anda terbiasa dengan gaya sintaksis yang serupa. Selain itu, Dart dapat dikompilasi ke kode ARM dan x86, dan dengan versi Flutter yang lebih baru, Anda bahkan dapat berharap dapat mentranspilenya ke JavaScript sehingga kode Dart Anda dapat berjalan secara efektif di web.

Kompleksitas

Karena PWA didasarkan pada JavaScript yang merupakan bahasa yang lebih tua dan lebih matang, Anda dapat mengharapkan kurva pembelajaran menjadi lebih memaafkan karena ada banyak kerangka kerja dan pustaka JavaScript yang tersedia untuk Anda pilih. Flutter—sebagai bahasa yang jauh lebih baru—dapat tampak sedikit lebih rumit pada pandangan pertama, karena semuanya, mulai dari UI hingga kode logika, dapat muncul kurang lebih bercampur di Flutter. Dan karena semuanya pada dasarnya adalah widget di Flutter , Anda dapat menemukan diri Anda dalam situasi di mana Anda berakhir dengan 'pohon widget' yang luar biasa besar, dalam, dan kompleks.

Pertunjukan

Dalam hal kinerja, keduanya saling berhadapan dan bukan pertandingan sepihak seperti yang diharapkan. Jika dibandingkan dengan aplikasi Flutter, PWA tipikal seharusnya memiliki sedikit kinerja saat mencoba 'berbicara' langsung dengan kode asli—karena PWA seringkali masih harus menggunakan jembatan JavaScript untuk mendapatkan akses ke fitur dasar perangkat , misalnya, GPS, kamera, dll.

Namun, ketika melihat tolok ukur, jelas bahwa kerangka kerja JavaScript, misalnya, NodeJS , dapat berkinerja setara, jika tidak lebih baik daripada Dart (tulang punggung aplikasi Flutter) pada beberapa kesempatan.

benchmark nodejs vs dart
NodeJS —kerangka kerja PWA populer—berperforma jauh lebih baik daripada Dart dalam beban kerja multithread [Sumber]

Ini berkat fakta bahwa JavaScript dapat lebih memanfaatkan sifat multicore dari CPU modern dan mendistribusikan beban kerja secara lebih merata, meskipun bahasa itu sendiri bersifat single-threaded. Dengan modul worker_threads baru-baru ini yang diperkenalkan oleh NodeJS yang memungkinkan penggunaan utas untuk eksekusi paralel proses JavaScript, JavaScript sekarang dapat menangani beban kerja intensif CPU dengan lebih baik dan benar-benar dapat mengalahkan bahasa seperti Dart.

Diagram utas pekerja - NodeJS
Sumber: Nodesource

Fitur

Tidak diragukan lagi bahwa Flutter—SDK yang dibuat khusus untuk pengembangan aplikasi seluler lintas platform—jauh lebih berfitur daripada PWA yang dibangun di atas teknologi Web. Aplikasi Flutter memiliki integrasi yang lebih dalam dengan sistem dan dengan demikian dapat memanfaatkan lebih banyak fitur asli perangkat.

Selain itu, dalam hal pengalaman pengguna secara keseluruhan, Flutter lebih unggul di sini karena mengadopsi filosofi piksel-sempurna yang dengannya pengguna dari platform iOS dan Android dapat mengalami pengalaman mulus yang sama.

Ini karena Flutter merender komponen UI-nya sendiri, tidak seperti kebanyakan kerangka kerja lain yang menggunakan komponen platform asli. Dengan cara ini, aplikasi Flutter jauh lebih konsisten di seluruh perangkat tetapi, akibatnya, ukuran aplikasi Flutter biasa jauh lebih besar daripada PWA biasa. Sederhana "Halo, dunia!" Aplikasi Flutter, misalnya, dapat berukuran lebih dari 7 MB, sedangkan PWA dengan konten yang sama tidak pernah melampaui batas 1 MB.

Gunakan kasus

Jadi kapan salah satu dari ini harus dipilih? Nah, di sinilah sulitnya (itulah yang dia katakan), karena keduanya dapat memberikan pengalaman pengguna yang hampir sama di berbagai platform dan perangkat yang berbeda. Poin utamanya adalah poin kuat mana dari teknologi ini yang lebih Anda sukai—jangkauan atau pengalaman pengguna.

Secara alami, PWA bergantung pada teknologi web sehingga dapat menjangkau audiens yang lebih luas dan bahkan dapat tersedia di Microsoft Store, secara efektif memperluas jangkauan Anda ke masing-masing ke seluruh basis penginstalan Windows 10 dari hampir 700 juta pengguna aktif bulanan.

Aplikasi Flutter, di sisi lain, dan dengan filosofi sempurna pikselnya, dapat membuat pengalaman dalam aplikasi jauh lebih menarik sambil tetap menjadi solusi hemat biaya untuk bisnis karena hanya satu basis kode yang diperlukan untuk Android dan platform iOS.

Contoh

Dari aplikasi PWA dan Flutter yang telah kami kumpulkan, berikut ini adalah aplikasi yang paling menonjol yang menurut kami paling mewakili kemampuannya:

Flutter—The New York Times

Flutter memulai babak barunya baru-baru ini pada pertengahan 2019, karena potensinya telah divalidasi dengan versi Web Flutter baru dari game KENKEN New York Times.

Aplikasi Web Kenken Flutter
Sumber: Flutter adalah Segalanya

Bagi developer yang telah berupaya mewujudkan versi Web dari aplikasi Flutter mereka, ini adalah berita bagus karena menunjukkan kemampuan framework Flutter saat didorong secara maksimal.

PWA—Twitter Lite

Twitter Lite dapat dikatakan sebagai implementasi PWA paling sukses yang pernah ada karena melakukan hal terbaik yang dilakukan PWA—memberikan pengalaman menarik seperti aplikasi di seluruh perangkat. Pengguna yang ingin merasakan PWA Twitter dapat meluncurkan aplikasi di setiap perangkat yang dapat mereka pikirkan, baik di desktop, seluler, atau tablet…

Dan perbedaan inti dari PWA berperforma terbaik, jika dibandingkan dengan aplikasi Flutter dengan kinerja yang sama, adalah bahwa ukuran total PWA Anda tidak boleh lebih dari 2MB di perangkat Anda.

Twitter Lite PWA
Aplikasi Web Progresif Twitter

Setelah mengubah situs web mereka menjadi PWA, Twitter melihat hasil yang mengesankan. Angka-angka berbicara sendiri:

  • 20% penurunan rasio pentalan,
  • Kenaikan 65% di halaman per sesi,
  • Kenaikan 75% dalam Tweet yang dikirim.
 Artikel terkait: 12 Contoh Aplikasi Web Progresif untuk Inspirasi Anda

PWA Flutter, apakah mungkin?

Dukungan web untuk Flutter sudah menjadi diskusi yang sedang berlangsung dan dalam tahap beta. Proses membuat Flutter Anda tersedia di Web dapat sesederhana mengkompilasi Dart ke JavaScript, alih-alih mengompilasinya ke kode mesin ARM yang digunakan untuk aplikasi seluler.

Masih ada beberapa komplikasi yang membuat semua ini sedikit lebih sulit untuk dicapai; tetapi seperti yang diamati dalam game KENKEN New York Times di atas, adalah mungkin untuk membuat implementasi Web yang layak dari aplikasi Flutter, dan Flutter PWA kemungkinan akan menjadi sesuatu dalam waktu dekat.

Kesimpulan

Karena keduanya merupakan teknologi yang relatif baru dengan banyak potensi, mungkin bermanfaat bagi Anda untuk menjelajahi lebih banyak opsi dan melihat sendiri mana yang paling sesuai untuk kebutuhan pengembangan Anda.

Di SimiCart, kami adalah Badan Pengembangan PWA yang diakui Google, siap menghadirkan pengalaman belanja generasi berikutnya ke toko Magento Anda.

Jelajahi simicart PWA

Baca lebih banyak:
PWA vs Electron: Penyelaman Jauh

Apa itu PWA? Semua yang perlu Anda ketahui tentang Aplikasi Web Progresif

Magento PWA Studio vs Vue Storefront: Mana yang cocok untuk Anda?