Memperkenalkan Fuse untuk Pengembangan Aplikasi Lintas Platform

() translation by (you can also view the original English article)

Banyak tools yang dapat kita gunakan untuk mengembangkan aplikasi lintas platform. Awalnya dimulai oleh PhoneGap, yang kemudian berubah menjadi Cordova. Kemudian muncul hybrid framework "rasa" native, seperti React Native dan NativeScript. Dan yang baru-baru ini muncul Flutter dari Google.

Masih banyak lagi framework yang dapat digunakan. Jika Anda mencari di Google Search dengan keyword "Framework untuk Pengembangan Aplikasi Mobile Lintas Platform", Anda akan menemukan banyak tools lain. Anda akan kebingungan untuk memilih framework mana yang terbaik saat pertama kali akan memulai mengembangkan mobile app. Itulah kenapa penting untuk mengetahui pilihan Anda.

Jadi sekarang saya akan memperkenalkan Fuse, platform lain yang Anda dapat gunakan untuk mengembangkan mobile app lintas platform.

Dalam artikel ini, saya akan menjelaskan hal-hal berikut:

Apa itu Fuse?
Apa kelebihan dan kekurangannya?
Bagaimana cara kerjanya?
Apa saja perbedaannya dengan framework yang lebih populer seperti React Native?

Apa itu Fuse?

Fuse adalah platform untuk mengembangkan aplikasi lintas platform dengan memanfaatkan UX Markup dan JavaScript. Platform ini berada pada kategori yang sama seperti React Native dan NativeScript, tetapi poin utamanya adalah dalam penyediaan tools yang memungkinkan developer dan designer untuk berkolaborasi disaat yang bersamaan (real time).

Fuse menggunakan UX Markup, yang merupakan bahasa berbasis XML yang menyediakan template untuk membuat user interface (UI). Hal ini juga memungkinkan Anda untuk menentukan bagaimana sebuah komponen akan berinteraksi dengan user, atau biasa disebut "UX".

Hal yang penting untuk dipahami ketika pertama kali menggunakan Fuse adalah platform ini bukan platform berbasis browser seperti Cordova. Jadi meskipun kita masih bisa menggunakan JavaScript code, tapi tidak semua fitur JavaScript yang ada pada browser akan berfungsi.

Fuse menyediakan koleksi polyfills yang memungkinkan Anda melakukan hal-hal seperti melakukan AJAX request atau mengatur inteval untuk mengeksekusi code. Selain itu, Anda memiliki keterbatasan saat menggunakan fitur JavaScript.

Kelebihan

Lintas Platform: memungkinkan Anda membangun aplikasi yang dapat berjalan di perangkat Android dan iOS.
Performa Native: UX Markup dikompilasi dengan native code, sehingga membuat performa Fuse sebanding dengan native (jika tidak sama). Efek dan animasi yang berbeda dari platform lain merupakan OpenGL-accelerated, yang dapat menciptakan user experience yang baik.
Declarative code: animasi, efek, dan transisi dinyatakan melalui UX Markup. Jadi hal-hal seperti perubahan warna saat tombol di klik, diatur melalui UX Markup. Hal ini memungkinkan Anda untuk lebih fokus mencari kode JavaScript yang tepat seperti untuk membuat request ke API, melakukan perhitungan, dan menulis business logic.
Developer- dan designer-friendly: Fuse menggunakan teknologi yang dikenal dan banyak disukai oleh web developer: JavaScript untuk memproses tugas dan bahasa yang mirip dengan XML untuk memproses UX. UX Markup yang digunakan pada Fuse untuk membangun UI sangat sederhana dan sangat mudah digunakan, bahkan untuk desainer sekali pun.
Dokumentasi yang baik: seluruh fitur dan API yang berbeda didokumentasikan dengan baik. Mereka juga memiliki banyak contoh, meskipun sebagian besar menampilkan UX mereka.
Extendable: Fuse menggunakan bahasa yang disebut Uno untuk memperluas fungsi native. Hal ini berarti Anda dapat mengimplementasikan fungsi kustom sendiri jika Anda memerlukan native functionality yang tidak disediakan oleh JavaScript API-nya Fuse.

Kekurangan

Komunitas baru: dibandingkan dengan React Native, komunitas Fuse masih baru dan tidak terlalu aktif. Mereka memiliki Slack channel dan forum. Mereka juga memiliki halaman community packages, tetapi ketika Anda cek repositori GitHub-nya, tidak ada banyak aktivitas. Posting blog dan tutorial tentang Fuse juga masih sedikit.
Tidak mendukung JavaScript frameworks yang ada: Fuse hanya mendukung vanilla JavaScript. Jadi jika Anda sebelumnya sudah mencoba Vue, React, atau Angular dan ingin menggunakan skill Anda pada platform Fuse, sayangnya hal itu tidak mudah.
Tidak mendukung Linux: Anda tidak dapat mengembangkan aplikasi dengan Fuse jika tidak menggunakan Windows atau macOS.
Tidak mendukung NPM dan package system: Anda tidak dapat menggunakan NPM untuk menginstal dan menggunakan JavaScript libraries yang ada. Meskipun ada beberapa JavaScript libraries yang dapat berfungsi, platform tersebut tidak akan lengkap tanpa package system yang memungkinkan developer untuk menginstal libraries untuk dapat menerapkan fungsi tertentu!
Tidak mendukung Native ES6: Fuse hanya mendukung ECMAScript 5.1 untuk menulis JavaScript code. Namun, Anda dapat menggunakan transpiler seperti Babel untuk mengubah ES6 code ke ES5.

Bagaimana Cara Kerja Fuse?

Secara praktiknya, Fuse menerjemahkan UX Markup menjadi kode native C++ melalui Uno compiler. Uno adalah bahasa seperti C# yang digunakan untuk menulis semua class inti pada Fuse. Jadi UX Markup yang telah Anda tulis menggunakan Fuse framework, dikompilasi menjadi C++. Setelah itu, native platform tools (seperti Android Studio atau Xcode) mengambil C++ code tersebut dan mengubahnya menjadi aplikasi native.

Sedangkan JavaScript code, diterjemahkan oleh JavaScript VM saat runtime. Ini berarti UI dan business logic tidak bergantung satu sama lain.

Apa Saja Perbedaannya dengan React Native?

Tidak akan ada artikel pengenalan platform yang lengkap jika tidak membandingkannya dengan platform yang sudah populer. Salah satu platform yang sebanding dengan Fuse adalah React Native. Jadi kita akan membandingkan kedua platform ini berdasarkan kriteria berikut:

fitur-fitur yang ada pada platform
performa
kode
dapat dikembangkan (extendability)

Perlu dicatat bahwa saya hanya akan membandingkan fitur gratis yang ada pada Fuse, karena React Native merupakan platform gratis.

Fitur pada Platform

Baik Fuse dan React Native hadir dengan fitur-fitur berikut:

Hot reloading: perubahan pada code secara otomatis terlihat dalam preview aplikasi. Namun, jika Anda membandingkan seberapa cepat pembaruan UI terjadi, Fuse jelas adalah pemenangnya.

JavaScript API untuk menggunakan native functionality: baik Fuse dan React Native memungkinkan Anda mengakses native device functionality seperti kamera, geolocation, dan push notification melalui JavaScript API. Namun, jika Anda membandingkan dokumentasi, jelas bahwa React Native memiliki lebih banyak API yang tersedia.

Berikut adalah fitur yang hanya tersedia di Fuse:

Dapat melalukan preview di beberapa device: hal ini memungkinkan developer dan desainer untuk meninjau aplikasi di beberapa device dengan berbagai bentuk. Satu-satunya syarat adalah device harus berada di wireless network yang sama. Hal ini sangat berguna karena mereka dapat langsung melihat jika ada sesuatu yang tidak terlihat bagus pada area pandang (viewport) tertentu.
Desktop preview: Fuse memungkinkan aplikasi untuk dilihat di desktop. Perhatikan bahwa ini akan berdampak sangat kecil pada performa komputer Anda. Hal ini karena Fuse sebenarnya bukan sebuah device emulator. Desktop preview juga memungkinkan Anda meninjau aplikasi pada beberapa viewport.
Preview App: jika Anda ingin cara cepat untuk melihat preview dari aplikasi Anda, aplikasi klien untuk Android dan iOS juga tersedia. Hal ini memungkinkan Anda memindai QR code, yang kemudian mengarahkan device untuk membuka aplikasi tertentu. Anda dapat melakukan ini untuk banyak device yang diinginkan. Perubahan pada source code otomatis terlihat pada setiap device.

Satu-satunya sisi negatif dari preview app, dibandingkan dengan custom preview (cara default untuk meninjau aplikasi pada device), adalah bahwa kustom pada Uno code dan third-party packages tidak akan berfungsi. Geolocation, push notification, dan local notification juga tidak akan berfungsi. Anda lebih bbaik menggunakan custom preview dalam kasus tersebut.

Performa

Performa Fuse sebanding dengan native karena UX Markup dirubah menjadi native UI untuk platform tertentu. Dan karena semua animasi, efek, dan transisi sudah didefinisikan dalam markup itu sendiri, markup tersebut sudah tahu apa yang harus dilakukan, misalnya ketika tombol ditekan. Seperti yang dibahas sebelumnya, JavaScript akan dijalankan pada tempat yang berbeda, sehingga tidak akan memengaruhi performa UI sama sekali. Selain itu, Fuse menggunakan OpenGL ES, yang menyediakan performa grafis yang dipercepat oleh hardware. Ini berarti animasi dan efek yang berbeda dapat digunakan pada saat yang bersamaan tanpa menimbulkan efek yang berarti pada performa UI. Hal ini membuat Fuse menjadi platform yang sangat cocok untuk mengembangkan game mobile.

Disisi lain, React Native menggunakan modul bridge untuk setiap platform. Modul ini bertindak sebagai koneksi antara JavaScript API (termasuk komponen UI) dan native functionality sehingga mereka dapat berkomunikasi satu sama lain. Hal ini membuat React Native memiliki performa yang kurang dibandingkan Fuse karena biaya komunikasi antara komponen native dan komponen UI pada React Native.

Kode

Baik Fuse dan React Native menawarkan markup language sebagai building block untuk UI. Namun, hanya dengan membandingkan dokumentasi dari Fuse dan React Native, Anda dapat melihat bahwa React Native memiliki lebih banyak komponen yang merepresentasikan komponen native.

UX Markup pada Fuse memungkinkan Anda mendeskripsikan animasi suatu komponen setiap user berinteraksi dengan markup tersebut. Misalnya, ketika tombol ditekan, Anda membuat ukuran tombol menjadi tiga kali lebih besar dari ukuran aslinya. Fuse akan menetapkan seberapa lama transisi akan dijalankan jika Anda tidak menentukannya:

<Rectangle Width="150" Height="50" Fill="#bada55" Margin="10" CornerRadius="4">
  <WhilePressed>
      <Scale Factor="3" />
  </WhilePressed>
</Rectangle>

Di sisi lain, React Native bergantung pada JavaScript untuk hampir semua hal. Dalam code dibawah ini, komponen TextInput bergantung pada text yang akan diinisialisasi. Kemudian memperbarui setiap kali text yang dimasukkan oleh user berubah:

<TextInput
  style={{height: 50, borderColor: '#ccc', borderWidth: 1}}
  onChangeText={(text) => this.setState({text})}
  value={this.state.text}
/>

Beginilah cara membuat text default untuk text field:

constructor(props) {
  super(props);
  this.state = { 
    text: 'Default Text' 
  };
}

Di antara keduanya, cara Fuse memisahkan business logic dari pengaturan UI adalah menguntungkan dalam hal kolaborasi antara developer dan desainer. UX Markup cukup mudah dipahami oleh desainer, sehingga mereka dapat mengerjakan tugasnya sementara developer mengerjakan business logic.

Dapat dikembangkan (Extendability)

Fuse memungkinkan Anda untuk menggunakan bahasa yang sama dengan yang digunakan untuk semua core class mereka sebagai cara untuk memperluas native functionality. Namun, Anda harus memiliki pengetahuan tentang cara menggunakan native API di Android dan iOS. Dari Uno pada Fuse, Anda dapat menggunakan foreign code untuk mengimplementasikan native functionality. Saat ini, Uno hanya mendukung Objective-C untuk iOS dan Java untuk Android. Kelas yang dihasilkan kemudian disimpan sehingga Anda dapat memanggilnya dari JavaScript.

Demikian pula, React Native yang memiliki modul bridge baik untuk iOS dan Android. Modul bridge ini berfungsi sebagai jembatan antara native functionality dan JavaScript. Sama seperti Fuse, Anda harus memiliki pengetahuan yang cukup tentang Objective-C atau Java.

Kedua platform tersebut juga memungkinkan Anda untuk memperluas komponen native UI untuk setiap target platform. Jadi misalnya, Anda ingin menerapkan komponen UI untuk pengaturan native tooltip di Android? Anda dapat melakukaknnya pada Fuse dan React Native.

Apakah Fuse Layak untuk Digunakan?

Jika Anda bertanya tentang pendapat saya, saya akan mengatakan itu tergantung pada kasus yang Anda temui. Fuse sudah pasti dapat langsung digunakan. Keuntungan utamanya adalah performanya dan seberapa cepat Anda dapat beralih dari memikirkan ide ke membuat working prototype. Aplikasi yang dibuat dengan Fuse memiliki performa yang sangat tinggi dan juga memudahkan kolaborasi antara developer dan desainer.

Kerugian utamanya adalah komunitasnya. Fuse jelas berkomitmen menjadi open source dengan merilis library mereka. Namun, mereka masih merupakan perusahaan kecil (jika dibandingkan dengan Facebook). Ini berarti mereka harus menghasilkan uang dengan cara yang lain. Itulah sebabnya mereka menyediakan perencanaan secara berbayar untuk professional yang lebih disarankan untuk tim dan perusahaan. Jadi orang-orang dapat berasumsi bahwa sebagian besar tenaga mereka dilakukan untuk membuat tools berbayar ini. Sedangkan tenaga untuk membuat tools yang open-source dinomor-duakan.

Jika Anda bekerja di perusahaan yang mengembangkan aplikasi setiap hari, maka Fuse adalah pilihan terbaik. Tetapi jika Anda adalah seorang independent developer seperti saya, biasanya kita terjebak pada aplikasi gratis. Jadi untuk kasus tertentu, jika Anda memerlukan custom native functionality, ada baiknya Anda membuatnya sendiri.

Pada akhirnya, semuanya tergantung pada kasus yang Anda temui. Jika Anda melihat aplikasi Anda tidak perlu banyak membutuhkan service, tools, dan native API, maka silahkan gunakan Fuse. Kalau tidak, jangan gunakan Fuse. Kecuali jika Anda memiliki banyak waktu untuk mengembangkan modul native sendiri!

Kesimpulan

Anda sekarang sudah mengerti tentang apa itu Fuse, cara kerjanya, keuntungan dan kerugiannya, dan apakah Fuse layak untuk digunakan sebagai alternatif framework dalam mobile development. Di bagian kedua dari artikel ini, kita juga sudah mengetahui bagaimana cara mengembangkan aplikasi dengan Fuse.