Meet Up Facebook Developer Circle Malang “React Native” 27–01–2017
Pada pertemuan meet up Facebook Developer Circle kali ini kita akan membahas bagaimana membangun sebuah aplikasi react native mulai dari development hingga production yang akan dipresentasikan oleh Lutfi Dwica dan kita membahas tentang event yang akan dilaksanakan oleh Facebook Developer Circle Malang kedepannya oleh Andi Nugroho Dirgantara.
Dari acara meet up yang sudah dilaksanakan pada hari jumat kemarin begitu banyak antusias dari teman developer malang yang ingin mengetahui lebih dalam mengenai React Native dan keuntungan apa saja yang kita dapatkan jika menggunakannya untuk membangun sebuah mobile application.
Berikut ringkasan dari meet up Facebook Developer Malang.
Development dan Production React Native
What is React Native ?
React native merupakan javascript framework yang memungkinkan developer untuk membangun aplikasi native cross platfrom hanya dengan melakukan satu sumber kode, kita dapat menggunakan pada dua platfrom baik itu android dan iOS yang pastinya sangat membantu developer untuk membangun sebuah aplikasi yang tidak perlu mengembangkan satu per satu pada setiap platfrom.
Why React Native ?
Untuk mempermudah melakukan pengembangan aplikasi, dengan menggunakan javascript dapat berjalan di beberapa devices platfrom, seperti Windows 10 desktop, Windows 10 mobile, Xbox one, Mac OS, Apple TV, Android, iOS.
Problem whit React Native
Problem yang sering dirasakan saat implementasi react native, update versi yang terlalu cepat, debugging sulit karena pesan error yang sulit dimengerti, harus menggunakan console.log() dimana-mana, dan jika kita ingin menggunakan 3rd-party libraries yang sesuai keinginan memang sulit, karena react native merupakan framework yang cukup terbilang masih baru.
We’ve Know
Ada beberapa hal yang harus kita ketahui sebelum kita membangun sebuah aplikasi native dengan menggunakan React Native yaitu :
Apa itu JSX dan ES6 ?
JSX adalah sebuah tahap preprocessor untuk menambahkan syntax XML pada javascript. Kita bisa tidak menggunakan react native tanpa menggunakan JSX namun dengan munggunakan JSX akan membuat react native semakin elegan.
Sama seperti XML, JSX tags memliki sebuah tag nama, atibut dan children. Jika atribut value menggunakan penutup quotes, maka value tersebut adalah string.
ES6 ini sebuah standart baru untuk javascript, bisa dibilang Modern Javascript, jadi syntax-nya ada perbedaan dari yang javascript biasa, untuk browser kita bisa menulis pakai ES6 namun hanya browser terbaru saja yang support, yaitu Chrome dan Firefox, kalau ingin bisa dipakai di seluruh browser ada namanya Babel.js, sebuah library untuk meng-convert kodingan kita yang dari ES6 ke javascript yg biasa, jadi bisa digunakan di semua browser. Kalau untuk React Native sendiri sudah mengimplementasikan Babel out-of-the-box, jadi tidak perlu menginstall Babel pun kita sudah bisa ngoding di React Native pakai ES6.
Text editor apa yang biasa digunakan ?
Penggunaan text editor untuk melakukan implementasi syntax javascript, ada beberapa text editor yang banyak digunakan yaitu :
- Sublime
- Atom
- Vim
- Notepad++
Get Exponent
Untuk memudahkan developer melakukan env setup saat implementasi react native, ada tools yang memudahkan kita yaitu Get Exponent sangat mudah digunakan, dengan tampilan yang menggunakan GUI sehingga memudahkan developer pemula tidak perlu lagi menggunakan command prompt pada windows dan terminal pada linux untuk menjalankan program untuk debugging. Untuk lebih jelasnya dapat dilihat pada situs resminya.
State Management
Redux biasanya digunakan saat developer membangun sebuah aplikasi react native medium atau large sehingga memudahkan mereka untuk melakukan state management.
Redux Arsitektur :
store
Aplikasi yang akan dibuat menggunakan single Redux store untuk menahan semua data dan state. Kita dapat melihat state dengan memanggil store.getState(). Store pada state tidak pernah dimodifikasi secara langsung namun dengan cara memanggil store.dispatch(action) untuk dispatch action ke store.
action
action harus jelas sebuah objek mengandung sebuah type field, misalnya {type: ’INCREMENT’}. Kita juga dapat mendefinisikan type yang kita inginkan. Kita juga dapat memasukan field lain pada sebuah action object. Kita sering melewatkan sebuah data pada sebuah payload field, misalnya {type: ‘SET_VALUE’, payload: 42}.
reducer
Kita dapat mendefinisikan sebuah function untuk mengatasi action, dan update store. Dengan memilih bagaimana untuk update sebuah state tergantung pada type dari action reducer menerima function. Redux akan melewatkan function state pada sebuah store, dan action akan mengirimnya, dengan menunggu update state object untuk mengembalikan: (state, action) => newstate. Kita memanggil function sebuah reducer function.
Untuk contoh implementasinya bisa dilihat di React Native Express.
2. MobX
Mobx sebuah library yang membuat state management simple dan scalable dengan menerapkan functional reactive programming. Filosofi dari MobXsangat sederhana yaitu :
Anything that can be derived from the application state, should be derived. Automatically.
yang termasuk UI, data serialization dan server communication.
Xamarin vs Native Script
Xamarin memungkinkan developer untuk membuat single apps multiple platfrom. Xamarin menggunakan basic programming C# dan mengimplemetasikan metode shared codebase, para developer bisa menggunakan Xamarin untuk menggembangkan berbagai aplikasi native iOS, Android, dan juga Windows dengan native user interfaces dan berbagi code pada multiple platform. Secara sederhana, dengan Xamarin memungkinkan para developer membuat aplikasi iOS dan Android dengan C#.
Native Script adalah sebuah framework untuk membangun native iOS dan Android apps menggunakan javascript dan CSS. Native script merender UI dengan native platfrom rendering engine, tidak menggunakan webview, menghasilkan performa sepereti aplikasi native pada umumnya. Memungkinkan developer hanya menggunakan single codebase javasript untuk iOS dan Android.
Untuk lebih jelas perbedaan secara detail Xamarin dan Native Script bisa dilihat disni.
Keuntungan yang tidak adil dari JS
JavasSriptCore framework memiliki kemampuan untuk mengevaluasi JavaScript program dari Swift, Objective-C, dan C-based apps. Kita juga dapat menggunakan JavaScriptCore untuk memasukan objek secara kustom ke dalam JavaScript environment.
Bagian buruk dari JavaSript adalah update yang terlalu cepat, sulit untuk debugging dan harus finding 3rd party libraries.
Dengan menggunakan firebase memberikan solusi bagi para developer untuk memepermudah pekerjaan mereka saat mengembangkan aplikasi, tidak perlu lagi memikirkan backend developer tinggal menggunakan fitur yang sudah disediakan oleh firebase.
Beberapa fitur yang dimiliki oleh Firebase adalah sebagai berikut :
1. Firebase Analytics.
2. Firebase Cloud Messaging dan Notifications.
3. Firebase Authentication.
4. Firebase Remote Config.
5. Firebase Real Time Database.
6. Firebase Crash Reporting.
Jadi untuk membuat aplikasi native cross platfrom kita dapat menggunakan : React Native + Redux + Firebase + CodePush
Slide presentasi bisa diunduh disini.
Facebook Developer Circle Malang memiliki event dan program yang rencananya akan dilaksanakan pada tahun ini dan dipantau langsung dari facebook pusat. Andi juga menyampaikan terkait latar belakang, tujuan dan manfaat yang akan dilakukan oleh Facebook Developer Circle Malang.
Untuk Slide presentasi dari mas Andi dapat diunduh disini.
