Mengenal Flutter Web, Flutter Hummingbird apa Fungsinya?

Last Updated on January 28, 2022 by

Flutter adalah framework yang banyak digunakan untuk membangun aplikasi serta aplikasi web. Flutter web app adalah salah satu aplikasi yang luar biasa dan mampu menyaingi aplikasi dari berbagai framework luar biasa lainnya.

Namun sekarang, Anda juga bisa membangun website dengan project dari Flutter Web yaitu Hummingbird. Flutter Hummingbird digunakan untuk memperluas fungsionalitas Flutter, tidak hanya untuk membangun aplikasi, tetapi juga untuk membangun website.

Pada artikel ini, kami akan membahas tentang Flutter Hummingbird yang digunakan sebagai perangkat dalam membangun website. Sebelum membahas lebih jauh tentang Hummingbird, kita akan membahas tentang Flutter Web.

Apa itu Flutter Web?

Platform Web telah berkembang selama beberapa dekade dan mencakup banyak teknologi dan spesifikasi. Ada beberapa istilah umum yang digunakan untuk menggambarkan koleksi besar fitur terkait: HTML, CSS, SVG, JavaScript, WebGL. Untuk menjalankan Flutter Web, kita membutuhkan:

1. Compile Dart code:

Flutter ditulis dalam Dart dan kita perlu menjalankan Dart di Web.

2. Pilih subset Flutter untuk dijalankan di Web

Hal ini tidak praktis atau tidak berguna untuk menjalankan semua kode Flutter di Web. Beberapa di antaranya adalah platform khusus, seperti bit Android dan iOS.

3. Pilih subset fitur Web yang memadai

Seiring waktu Platform Web mengumpulkan fitur yang tumpang tindih dalam fungsionalitas. Misalnya, Anda dapat menggambar grafik menggunakan HTML+CSS, SVG, Canvas, dan WebGL.

Flutter Web membantu untuk memberikan pengalaman yang sama di web seperti di seluler. Membangun portabilitas Dart, kekuatan platform web, dan fleksibilitas framework Flutter, kini Anda dapat membuat aplikasi untuk iOS, Android, dan browser dari basis kode yang sama.

Anda dapat mengompilasi kode Flutter yang ada yang ditulis di Dart ke dalam pengalaman web karena ini adalah kerangka kerja Flutter yang persis sama dan web hanyalah target perangkat lain untuk aplikasi Anda.

Menambahkan dukungan web ke Flutter melibatkan penerapan lapisan gambar inti Flutter di atas API browser standar, selain mengompilasi Dart ke JavaScript, alih-alih kode mesin ARM yang digunakan untuk aplikasi seluler. Menggunakan kombinasi DOM, Canvas, dan WebAssembly, Flutter dapat memberikan pengalaman pengguna yang portabel, berkualitas tinggi, dan berkinerja tinggi di seluruh browser modern.

Dengan Flutter Web, kita dapat mengimplementasikan lapisan gambar inti sepenuhnya di Dart dan menggunakan kompiler JavaScript Dart yang dioptimalkan untuk mengompilasi inti dan kerangka kerja Flutter bersama dengan aplikasi Anda ke dalam satu file sumber yang diperkecil yang dapat diterapkan ke server web mana pun.

Salah satu fungsionalitas Flutter yang bisa digunakan untuk membangun web adalah Flutter Hummingbird. Apa itu hummingbird dan bagaimana cara kerjanya? Selanjutnya, kita akan membahas tentang Flutter Hummingbird.

Apa itu Flutter Hummingbird?

Project Hummingbird adalah versi lain dari Flutter yang akan membantu pengembang membangun aplikasi web dengan mudah. Sejak awal, tim Google menginginkannya menjadi perangkat UI portabel, bukan hanya perangkat UI seluler.

Membangun Flutter untuk web adalah implementasi Flutter yang kompatibel dengan kode yang dirender menggunakan teknologi web berbasis standar seperti HTML, CSS, dan JavaScript. Dengan flutter untuk web, Anda dapat mengkompilasi kode flutter yang ada yang ditulis di Dart menjadi konten interaktif dan kaya grafis yang dapat disematkan di browser dan disebarkan ke server web mana pun. Anda dapat menggunakan semua fitur core Flutter dan Anda tidak memerlukan plugin browser untuk semua itu.

Flutter Architecture

Flutter adalah sistem berlapis-lapis sehingga lapisan yang lebih tinggi lebih mudah digunakan dan memungkinkan Anda menampilkan banyak dengan sedikit kode sedangkan lapisan bawah memberi Anda lebih banyak kontrol tetapi dengan sedikit komplikasi.

Ketika lapisan yang lebih tinggi tidak mengizinkan pengembang untuk membuat perubahan yang mereka inginkan, mereka dapat turun ke lapisan yang lebih rendah. Pengembang memiliki akses ke semua lapisan yang ada di atas mesin Flutter.

Mesin Flutter diekspos sebagai pustaka level terendah di Flutter, dart:ui. Itu tidak tahu apa-apa tentang widget, fisika, tata letak, atau animasi. Yang ia tahu hanyalah membuat gambar di layar dan mengubahnya menjadi piksel. Akan sulit untuk langsung menulis aplikasi di atas dart:ui itulah sebabnya lapisan yang lebih tinggi dibuat.

Segala sesuatu di atas dart:ui adalah apa yang disebut tim sebagai “kerangka kerja” dan segala sesuatu di bawahnya adalah “mesin”. Sementara kerangka kerja ditulis menggunakan bahasa Dart, sebagian besar mesin ditulis dalam C++ dengan bagian khusus Android di Java dan bagian khusus iOS di Objective C. Beberapa kelas dan fungsi dasar di dart:ui ditulis dalam Dart dan sebagian besar bertindak sebagai jembatan antara Dart dan C++.

Sebelum kita melangkah lebih jauh, penting untuk memberi tahu Anda bahwa proyek ini berada dalam tahap pengembangan yang sangat awal. Nah, itulah beberapa fakta tentang performa burung kolibri dalam situasi saat ini. Web masih tidak mendukung plugin, kinerja mungkin terkadang lambat, tidak semua Flutter API didukung dan interaksi desktop penuh tidak lengkap.

Manfaat Flutter Hummingbird

Meskipun Flutter masih dalam tahap awal pengembangan, tim Google yakin bahwa Flutter Web Hummingbird akan terbukti bermanfaat dalam banyak situasi. Sebagai contoh:

1. Aplikasi web progresif terhubung yang dikembangkan dengan Flutter

Dukungan web untuk flutter memungkinkan aplikasi seluler yang ada dikemas sebagai PWA untuk diperluas ke berbagai perangkat yang lebih besar atau untuk memberikan pengalaman web pendamping ke aplikasi yang sudah ada.

2. Konten interaktif yang disematkan (embedded interactive content)

Flutter menyediakan lingkungan yang kuat untuk membuat komponen yang kaya dan berpusat pada data yang dapat dengan mudah dihosting di halaman web yang ada. Baik untuk visualisasi data, alat online seperti konfigurator mobil atau bagan yang disematkan, ini dapat memberikan pendekatan pengembangan yang produktif untuk konten web yang disematkan.

3. Menyematkan konten dinamis di aplikasi seluler Flutter

Cara pasti untuk menyediakan pembaruan konten dinamis di aplikasi seluler yang ada adalah penggunaan kontrol tampilan web, yang dapat memuat dan menampilkan informasi secara dinamis. Dukungan yang kini ditawarkan flutter untuk lingkungan terpadu untuk konten web dan seluler membantu Anda menyebarkan konten secara online atau disematkan dalam aplikasi tanpa harus menulis ulang.

Mengembangkan web Flutter memberi tim tantangan yang menarik untuk mengganti mesin Flutter yang ada karena tidak kompatibel dengan kompilasi ke web. Oleh karena itu, sebuah versi modifikasi dari mesin yang disebut “flutter web” lahir. Saat proyek menjadi stabil, proyek akan digabungkan kembali ke repo Flutter utama.

Karena hanya mesin dan lapisan di bawah kerangka kerja yang perlu diubah dan diimplementasikan kembali, API Flutter inti hampir tidak berubah sehingga sangat mungkin untuk mem-port UI dari aplikasi flutter Android/iOS Anda ke web.

Seperti yang disebutkan sebelumnya, web flutter masih dalam pengembangan sehingga ada banyak hal yang hilang. Namun, tampaknya sangat mudah untuk memulai dan bekerja dengan web flutter. Pekerjakan pengembang Flutter untuk memulai proyek pengembangan web Anda di Flutter. Jelas bahwa tim Google mencoba yang terbaik untuk menjadikan Flutter sebagai cara terbaik untuk mengembangkan semua jenis aplikasi langsung dari Android dan iOS hingga web dan IoT.

Itulah penjelasan tentang Flutter Web Hummingbird yang harus Anda pahami. Jika Anda ingin tahu lebih banyak informasi seputar teknologi pembangunan website maupun aplikasi, jangan lupa kunjungi Web App di https://appkey.id atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.