- Shopify menyatakan React Native (RN) sebagai masa depan pengembangan mobile 5 tahun lalu, dan sejak itu berhasil memigrasikan semua aplikasinya ke RN
- Alasan utama mengadopsi React Native
- Tulis sekali untuk mendukung dua platform: untuk menghilangkan inefisiensi mengembangkan fitur yang sama dua kali di iOS dan Android
- Meningkatkan mobilitas talenta: memungkinkan developer berpindah dengan leluasa antara iOS, Android, dan Web
- Memberikan lebih banyak nilai: mengurangi waktu yang dibutuhkan untuk menyamakan fitur dan menyampaikan lebih banyak nilai kepada pengguna
- Hasil sukses dari transisi tersebut
- Produktivitas meningkat drastis karena tidak perlu lagi mengembangkan fitur yang sama dua kali
- Engineer kini menangani web dan mobile sekaligus, sehingga dapat menyelesaikan lebih banyak pekerjaan dengan jumlah personel yang sama dan menciptakan peluang pertumbuhan baru
- Menjaga kesetaraan fitur antara iOS dan Android tidak lagi menjadi masalah, sehingga dapat memberikan lebih banyak nilai
- Waktu muat layar aplikasi cepat, di bawah 500ms, dan lebih dari 99,9% sesi tetap stabil
- Tetap memanfaatkan kode native untuk alat yang paling sesuai dengan pekerjaan, sehingga mendapatkan keunggulan dari kedua dunia
Pembelajaran utama
Aplikasi React Native itu cepat
- Shopify sangat mementingkan performa, dan CEO Tobi Lutke menekankan bahwa "tidak semua software yang cepat itu hebat, tetapi semua software yang hebat itu cepat"
- Sebelum beralih ke React Native (RN), pertanyaan terbesar adalah apakah RN dapat memenuhi target performa
- Karena itu, sebelum memutuskan transisi, mereka melakukan prototyping ekstensif untuk memverifikasi hasilnya
- Mereka meninjau pekerjaan yang sedang dilakukan Meta untuk menghilangkan bottleneck performa, dan mengidentifikasi area seperti list yang bisa mereka kontribusikan
- Dengan keyakinan bahwa RN akan segera menjadi lebih cepat, mereka memutuskan untuk mengadopsinya secara penuh
- Lima tahun kemudian, aplikasi RN berjalan cepat, dan di aplikasi Shopify berhasil mencapai waktu muat layar di bawah 500ms (P75)
- Target performa serupa juga berhasil dicapai di semua aplikasi lainnya
- Menerapkan pattern dan teknik yang baik sangat penting untuk menghilangkan bottleneck performa
- Native tidak selalu dijamin lebih cepat, dan RN juga tidak selalu lambat
- Dalam beberapa tahun terakhir RN berkembang pesat dan memantapkan diri sebagai platform untuk membangun aplikasi kelas dunia
- Seiring framework RN makin matang, diharapkan membangun aplikasi yang cepat akan menjadi semakin mudah
- Dengan meningkatnya keahlian tim, ruang untuk membangun aplikasi yang lebih baik juga akan makin besar
Keunggulan hot reloading
- Hot reloading di React Native (RN) adalah fitur yang membawa perubahan besar pada lingkungan pengembangan, karena perubahan langsung diterapkan
- Salah satu masalah terbesar dalam pengembangan native adalah, tergantung ukuran codebase, bahkan perubahan kecil pun dapat memerlukan beberapa menit untuk dikompilasi dan dijalankan di emulator atau perangkat nyata
- Hal ini membuang waktu dan mengganggu alur kerja developer
- Hot reloading di RN sepenuhnya mengatasi masalah ini dan sangat meningkatkan produktivitas serta pengalaman pengembangan
Mobilitas talenta berkat Typescript
- Dengan penggunaan Typescript yang semakin luas, perpindahan developer antara React web dan React Native (RN) menjadi lebih mulus
- Developer web: melalui RN, mereka jauh lebih mudah mulai mengerjakan mobile dibanding langsung masuk ke pengembangan native iOS dan Android
- Developer mobile: melalui RN, mereka juga bisa dengan mudah ikut mengerjakan web
- Keuntungan mobilitas talenta
- Memberikan lebih banyak peluang pertumbuhan bagi engineer dan meningkatkan fleksibilitas penempatan personel
- Memperkuat kemampuan untuk menyelesaikan lebih banyak pekerjaan dengan tenaga developer yang sama
- Menghasilkan efisiensi dan produktivitas lebih besar melalui berbagi kode antara web dan mobile
- Developer yang dapat bekerja di berbagai platform memungkinkan rilis yang lebih cepat, serta dapat bertukar ide lintas teknologi dan menerapkannya dengan cara baru
- Ini membentuk budaya yang memandang teknologi sebagai alat, memperluas wawasan tim, dan mendorong pemilihan alat yang paling sesuai untuk pekerjaan
Developer native itu esensial
- Engineer mobile yang terspesialisasi di iOS dan Android sangat penting untuk membangun aplikasi mobile yang hebat
- Pengalaman yang terakumulasi dari membangun berbagai produk mobile, serta pemahaman mendalam tentang usability dan convention, tidak tergantikan
- Pekerjaan seperti mengakses platform layer, menulis binding, menguasai build dan deployment, serta mengelola update versi React Native memerlukan keahlian native
- Developer native juga penting untuk mengoptimalkan performa aplikasi di berbagai model perangkat dan memberikan pengalaman yang konsisten bagi semua pengguna
- Mereka esensial untuk merespons fitur baru, API, dan perubahan tooling di iOS dan Android, serta mengelola update versi React Native
- Pengembangan kurikulum pelatihan React Native untuk developer mobile native:
- Disusun dalam format belajar mandiri agar mereka dapat menulis kode tingkat produksi
- Didukung tambahan melalui sesi Q&A, pair programming, dan code review dengan developer yang mahir React Native
- Penempatan tambahan developer web (ahli JavaScript, TypeScript, React) ke tim mobile:
- Menjaga keseimbangan keahlian kuat antara native dan React Native
- Seiring waktu, tingkat keterampilan seluruh tim meningkat
- Komposisi tim yang memadukan developer native dan web dengan baik adalah kunci untuk membangun aplikasi mobile hebat dengan React Native
Kode native itu esensial
- Sebaiknya tidak mengejar penggunaan 100% React Native: RN adalah alat efisien karena fitur cukup dikembangkan sekali, tetapi bukan teknologi yang cocok untuk semua situasi
- Situasi yang memerlukan kode native
- Pengembangan fitur mutakhir: fitur yang memanfaatkan hardware seperti pemindaian 2D/3D dan menjalankan model AI on-device
- Fitur dengan keterbatasan memori: widget layar utama dan layar kunci, aplikasi dan complication Apple Watch, App Intents, Siri Shortcuts, dan sebagainya
- Pekerjaan background yang berjalan lama:
- Contoh: aplikasi Point of Sale Shopify dapat memproses transaksi bahkan saat offline dengan mengunduh dan menyinkronkan data dalam jumlah besar di background
- Dengan memanfaatkan kode native, pekerjaan background di-offload sepenuhnya agar tidak memengaruhi performa aplikasi
- RN cocok untuk mengembangkan sebagian besar fitur satu kali saja, tetapi pada area yang memang paling optimal di native, idealnya tetap menggunakan kode native
- Interoperabilitas kuat dengan native yang disediakan RN secara default membuat kombinasi kedua teknologi ini menjadi mudah
- Penting untuk melihatnya bukan sebagai RN atau native, melainkan RN dan native
- Komposisi tim yang memiliki keahlian native sangat penting untuk mewujudkan perpaduan ini secara efektif
Sulitnya debugging
- Debugging di React Native (RN) memiliki sisi yang kurang stabil, dan memerlukan pekerjaan tambahan agar bisa dikonfigurasi dengan benar di VSCode
- iOS dan Android secara bawaan menyediakan fitur debugging yang kuat dan stabil
- Meta baru-baru ini menulis ulang sepenuhnya debugger stack RN dan sedang melakukan perbaikan; debugger baru menunjukkan hasil yang menjanjikan
- Shopify sedang bekerja sama dengan Meta untuk meningkatkan lingkungan debugging RN ke level kelas dunia
Update React Native tidak mulus
- Memperbarui aplikasi ke versi baru React Native (RN) membutuhkan banyak pekerjaan, dan sering kali menuntut restrukturisasi codebase
- Untuk mengatasinya, Shopify membentuk kelompok kecil developer yang berkeliling untuk secara khusus menangani pekerjaan update, sehingga tim lainnya dapat fokus pada pengembangan fitur
- Seiring framework RN makin matang, proses update diperkirakan akan menjadi semakin mudah
- Ketika New Architecture diadopsi lebih luas, kompleksitas pekerjaan terkait update diperkirakan akan berkurang
Meningkatnya ketergantungan pada library pihak ketiga
- Framework React Native (RN) tidak sekomprehensif native, sehingga mendorong penggunaan lebih banyak library pihak ketiga
- Karena ekosistemnya makin matang dalam beberapa tahun terakhir, kini lebih mudah menemukan library yang terawat baik untuk hampir semua fitur yang dibutuhkan
- Namun, update library pihak ketiga tetap perlu dipelihara terus-menerus, dan permukaan serangan supply chain pun meningkat
- Shopify mengadopsi pembaruan dependensi otomatis dengan memanfaatkan Dependabot
- Melalui pemindaian kode otomatis, mereka mendeteksi dan mencegah kode berbahaya
- Diharapkan framework RN akan berkembang dengan arah yang lebih jelas dan menyediakan lebih banyak fitur secara bawaan
Manfaat besar dari memanfaatkan fondasi bersama
- Saat pertama kali mengadopsi React Native (RN), pengalaman membangun aplikasi mobile dengan RN masih minim, dan mereka juga belum bisa memanfaatkan fondasi bersama yang telah dibangun di pengembangan native
- Pada awalnya, tiap tim memecahkan masalahnya sendiri sambil membangun aplikasi, dan pendekatan ini efektif untuk memulai dengan cepat serta memigrasikan aplikasi
- Namun, karena tiap tim menyelesaikan masalah yang sama berulang kali, terjadi duplikasi kerja yang tidak efisien
- Mereka menginvestasikan waktu dan upaya untuk membangun keahlian RN, dan secara sadar memilih trade-off yang memprioritaskan kecepatan sambil mengorbankan konsistensi
- Sejak 2023, ketika semua aplikasi makin matang, mereka mulai memperkuat konsistensi
- Komponen umum (misalnya Identity, pemantauan real-time, pengukuran performa, dan sebagainya) diekstrak menjadi library bersama untuk digunakan di semua aplikasi
- Ini membantu tim memanfaatkan solusi yang sudah ada tanpa perlu memecahkan ulang masalah yang telah diselesaikan
- Pada 2025, berbagi kode akan diperluas lebih jauh sehingga
- pengetahuan dan keahlian dapat tersebar antar tim
- semua aplikasi secara otomatis mendapat manfaat dari perbaikan pada komponen bersama
- sumber daya engineering dapat dihemat agar fokus pada penyampaian nilai kepada pengguna
Masa depan React Native
- Masa depan React Native (RN) cerah, dan Meta sebagai pengelola proyek ini terus memberikan peningkatan secara berkala
- Di tiap rilis, masukan developer sangat memengaruhi roadmap, dan diharapkan membuat aplikasi cepat akan menjadi semakin mudah
- Shopify berencana terus mendukung perkembangan RN sambil mengadopsi New Architecture
- Sejumlah perusahaan besar seperti Microsoft, Amazon, Tesla, SpaceX, dan Coinbase menggunakan RN, dan library serta framework pihak ketiga berkualitas tinggi terus dirilis
- Shopify juga berkontribusi pada web terbuka, open source, dan standar terbuka melalui hal-hal berikut
- kontribusi kode untuk RN
- berperan sebagai co-release captain untuk rilis RN
- mensponsori proyek open source berdampak besar seperti React Native Skia dan Reanimated
- merilis proyek open source seperti Flashlist, Restyle, dan Tophat
- Selain itu, pada 2025 mereka juga menghidupkan kembali React Native Working Group
- Tujuannya adalah mengumpulkan para pemimpin utama dari organisasi pendukung RN untuk mengidentifikasi tantangan utama ekosistem, menetapkan prioritas investasi, meningkatkan kolaborasi, dan mengurangi duplikasi kerja
- Perusahaan yang pernah berpartisipasi sebelumnya: Meta, Twitter, Coinbase, Microsoft, dan lainnya
- Jika ingin berpartisipasi, silakan hubungi
- RN telah berkembang pesat selama 5 tahun terakhir, dan banyak keterbatasan yang dulu membuat orang ragu mengadopsinya kini sudah hilang
- Jika sudah lama tidak mencoba RN, sekarang adalah waktu yang tepat untuk mencobanya lagi
9 komentar
Kami juga mengadopsi RN pada periode yang mirip dengan alasan yang serupa, dan sejauh ini menggunakannya dengan baik.
Agak sulit bagi saya untuk sepenuhnya setuju soal isu performa, tetapi itu mungkin masalah yang harus diselesaikan di level
react-dom.Menurut saya, keunggulan terbesarnya adalah bisa mengerjakan banyak hal dengan tim yang kecil.
Saya penasaran fitur native apa saja yang tidak bisa dicakup oleh Native API milik RN.
Ini adalah pembagian pengalaman yang mengesankan. Saat ini saya mengembangkan aplikasi Android untuk pekerjaan dengan menggunakan Kotlin, dan kadang saya berpikir: apakah benar harus selalu ke native...? (Dalam kasus saya, ada hal-hal yang harus bekerja sangat erat dengan platform, jadi mau tidak mau saya memilih native.) Jika memungkinkan, sepertinya juga bagus untuk memilih arah yang didukung lintas platform seperti React Native atau Flutter.
Shopify keren banget @.@
"100% React Native seharusnya menjadi anti-goal. Ini sangat bagus untuk membangun fitur hanya sekali, tetapi bukan teknologi yang tepat untuk semuanya."
"Daripada berpikir native atau React Native, berpikirlah native dan React Native."
Dalam engineering tidak ada yang namanya 100% (hati-hati dengan judul pancingan seperti "pokoknya A selalu lebih baik").
Masing-masing punya kelebihan dan kekurangan, dan ada alat yang cocok untuk tiap situasi.
Ini juga artikel yang sangat bagus karena kita bisa melihat filosofi pembentukan tim di Shopify.
Meski begitu, saya tetap ingin memuji Flutter.
Semua aplikasi dialihkan ke RN... keren banget ya banget
@shopify/flash-list sangat mantap. Terima kasih. shopify
Shopify juga memainkan peran kunci dalam ekosistem Ruby on Rails,
dan tampaknya menunjukkan langkah yang luar biasa di ekosistem RN juga. Perusahaan yang keren.