BerandaComputers and TechnologyReact Native Adalah Masa Depan Seluler di Shopify

React Native Adalah Masa Depan Seluler di Shopify

Setelah bertahun-tahun mengembangkan seluler asli, kami memutuskan untuk terus mengembangkan semua aplikasi seluler baru kami menggunakan React Native. Seperti yang akan saya jelaskan, keputusan itu tidak datang dengan mudah. ​​

Setiap kuartal, mayoritas pembeli membeli melalui perangkat seluler (dengan 71% pembeli kami membeli melalui perangkat seluler pada Kuartal 3 tahun lalu). Black Friday dan Cyber ​​Monday (bersama-sama, BFCM) adalah waktu tersibuk dalam setahun bagi pedagang kami, dan aktivitas membeli selama hari-hari itu adalah penentu arahnya. Selama BFCM tahun ini, pedagang Shopify melihat lagi peningkatan 3% dalam pembelian di seluler, rata-rata 69% dari penjualan .

Jadi mengapa beralih ke React Native? Dan kenapa sekarang? Bagaimana hal ini cocok dengan pengembangan seluler asli kami? Itu adalah jawaban rumit yang paling baik disajikan dengan sedikit latar belakang.

Kami memiliki budaya teknik di Shopify dalam membuat taruhan teknologi awal spesifik yang membantu kami bergerak cepat.

Secara keseluruhan, kami lebih suka memiliki sedikit teknologi sebagai dasar untuk teknik. Ini memberi kita banyak poin leverage:

  • kami membangun keahlian khusus yang sangat dalam sekumpulan kecil teknologi mendalam (kami sering menjadi kontributor inti)
  • setiap pilihan teknologi memiliki keunikan, tetapi kami mempelajarinya dengan saksama
  • orang-orang di luar tim awal berkontribusi, mentransfer, dan memelihara kode yang ditulis oleh orang lain
  • orang baru bergabung lebih cepat.

Pada saat yang sama, selalu ada teknologi baru yang muncul yang memberi kita kesempatan untuk melakukan perubahan langkah dalam produktivitas atau kemampuan. Kami banyak bereksperimen untuk mendapatkan peluang membuka peningkatan yang merupakan urutan peningkatan yang sangat besar — ​​tetapi pada akhirnya, kami mengadopsi beberapa di antaranya untuk rekayasa inti kami.

Ketika kami mengadopsi bahasa atau kerangka kerja awal ini, kami membuat taruhan yang dihitung. Dan alih-alih menghindar dari risiko, kami meneliti, mengeksplorasi, dan mengevaluasi risiko tersebut dengan cermat berdasarkan rangkaian kondisi unik kami. Seperti yang sering terjadi di area berisiko, peluang yang belum dijelajahi disembunyikan. Kami malah berpikir tentang bagaimana kami dapat mengurangi risiko itu:

  • bagaimana jika sebuah teknologi berhenti didukung oleh tim inti?
  • bagaimana jika kami mengalami bug yang tidak dapat kami perbaiki?
  • bagaimana jika produk tersebut berlawanan dengan kepentingan kita?

Ruby on Rails adalah kerangka kerja yang baru lahir dan tidak jelas ketika Tobi (CEO kami) pertama kali terlibat sebagai kontributor inti pada tahun 2004. Selama bertahun-tahun, Ruby on Rails dipandang sebagai non-serius, non-performant pilihan bahasa. Tetapi taruhan awal itu memberi Shopify momentum untuk mengungguli kompetisi meskipun itu bukan pilihan teknologi yang populer. Dengan menggunakan Ruby on Rails, tim dapat membangun lebih cepat dan menarik kumpulan bakat yang berbeda dengan menggunakan sesuatu yang lebih modern dan dengan tingkat abstraksi yang lebih tinggi daripada bahasa pemrograman dan kerangka kerja tradisional. Paul Graham berbicara tentang keputusannya untuk menggunakan Lisp dalam membangun Viaweb untuk efek serupa dan 6 dari 10 perusahaan Y Combinator paling berharga saat ini semuanya menggunakan Ruby on Rails (meskipun, sebagian besar masih tetap tidak populer) . Sebaliknya, tidak satupun dari 10 perusahaan Y Combinator paling berharga yang menggunakan Java; sebagian besar dianggap sebagai bahasa perusahaan yang diuji pertempuran.

Demikian pula dua tahun lalu, Shopify memutuskan untuk beralih ke Google Cloud . Sekali lagi, proposisi menakutkan untuk situs eCommerce Ritel AS terbesar ke-3 pada tahun 2019 — untuk melakukan migrasi cloud dari pusat data kami sendiri, tetapi juga pilih pesaing cloud awal. Kami melihat busur teknologi penciptaan nilai menggerakkan kami untuk berfokus pada keahlian kami — memungkinkan kewirausahaan dan membiarkan orang lain (dalam hal ini Google Cloud) fokus pada pengangkatan berat yang tidak berdiferensiasi untuk memelihara perangkat keras fisik, daya, keamanan, pembaruan sistem operasi, dll.

Apa itu React Native?

Pada 2015, Facebook mengumumkan dan bersumber terbuka React Native ; itu sudah digunakan secara internal untuk rekayasa seluler mereka. React Native adalah kerangka kerja untuk membangun aplikasi seluler asli menggunakan React . Ini berarti Anda dapat menggunakan pustaka JavaScript (React) terbaik di kelasnya untuk membangun antarmuka pengguna seluler asli Anda.

Di Shopify, idenya memiliki keraguan pada saat itu (dan masih melakukannya), tetapi banyak yang melihat janjinya. Pada hari kerja berikutnya seluruh perusahaan menghabiskan waktu di React Native. Meskipun tim awal melihat banyak manfaat, mereka memutuskan bahwa kami tidak dapat mengirimkan aplikasi yang akan membuat kami bangga menggunakan React Native pada tahun 2015. Sebagian besar, ini berkaitan dengan kinerja dan tidak adanya dukungan Android kelas satu. . Apa yang kami pelajari adalah bahwa kami menyukai model Pemrograman Reaktif dan GraphQL . Selain itu, kami membuat dan open source rendere fungsional r untuk iOS setelah bekerja dengan React Native. Kami mengadopsi teknologi ini pada tahun 2015 untuk tumpukan seluler asli kami, tetapi tidak untuk React Native untuk pengembangan seluler secara massal. Globe and Mail mendokumentasikan aspirasi kami dalam sebuah cerita komprehensif tentang versi pertama dari aplikasi seluler kami.

Hingga saat ini, standar untuk semua pengembangan seluler di Shopify adalah pengembangan seluler asli. Kami membangun alat seluler dan yayasan tim yang berfokus pada iOS dan Android membantu mempercepat upaya pengembangan kami. Meskipun tim-tim ini dan aplikasi yang dihasilkan semuanya berhasil, ada kecurigaan bahwa kami dapat menjadi lebih efektif sebagai tim jika kami dapat:

  • menghadirkan kekuatan JavaScript dan web ke seluler
  • mengadopsi model pemrograman reaktif di semua aplikasi sisi klien
  • menggabungkan pengembangan iOS dan Android kami ke dalam satu tumpukan.

Bagaimana React Native Bekerja

React Native menyediakan cara untuk membangun aplikasi seluler lintas platform asli menggunakan JavaScript. React Native mirip dengan React karena memungkinkan pengembang untuk membuat antarmuka pengguna deklaratif di JavaScript, yang secara internal membuat pohon hierarki elemen UI atau dalam terminologi React, DOM virtual. Sedangkan output dari ReactJS menargetkan browser, React Native menerjemahkan DOM virtual menjadi tampilan asli seluler menggunakan platform native binding yang berinteraksi dengan logika aplikasi dalam JavaScript. Untuk tujuan kami, platform targetnya adalah Android dan iOS, tetapi upaya berbasis komunitas telah membawa React Native ke platform lain seperti Windows, macOS, dan Apple tvOS.

ReactJS targets a browser, whereas React Native can can target mobile APIs.

ReactJS menargetkan browser, sedangkan React Native dapat menargetkan API seluler.

Kapan Kami Tidak Akan Secara Default Menggunakan React Native?

Ada situasi di mana React Native tidak akan menjadi opsi default untuk membuat aplikasi seluler di Shopify. Misalnya, jika kita memiliki persyaratan:

  • menerapkan pada perangkat keras yang lebih lama (CPU
  • pemrosesan ekstensif
  • kinerja sangat tinggi
  • banyak utas latar belakang.

Pengingat: Pustaka tingkat rendah termasuk banyak SDK bersumber terbuka akan tetap asli murni. Dan kami selalu dapat membuat modul asli kami sendiri ketika kami harus dekat dengan logam.

Mengapa Pindah ke React Native Now?

Ada 3 alasan utama sekarang saat yang tepat untuk mengambil sikap ini:

  1. kami belajar dari akuisisi kami dari Tictail (perusahaan seluler pertama yang berfokus 100% pada React Native) pada tahun 2018 sejauh mana React Native telah datang dan melakukan 3 investasi produk mendalam pada tahun 2019
  2. Shopify menggunakan React secara ekstensif di web dan pengetahuan itu sekarang dapat ditransfer ke seluler
  3. kami melihat kurva kinerja menekuk ke atas (pikirkan apa yang sekarang mungkin dilakukan di Google Docs vs. Microsoft Office desktop) dan kami dapat berinvestasi jangka panjang di React Native seperti yang kami lakukan di Ruby, Rails, Kubernetes dan Multimedia.

Kami memiliki banyak permukaan seluler di Shopify bagi pembeli dan pedagang untuk berinteraksi, baik melalui web maupun dengan aplikasi seluler kami. Kami menghabiskan waktu selama setahun terakhir bereksperimen dengan React Native dengan tiga tim terpisah melalui tiga aplikasi: Tiba, Titik Penjualan, dan Kompas.

Dari eksperimen kami, kami mengetahui bahwa:

  • dalam menulis ulang aplikasi Tiba di React Native, tim merasa bahwa mereka dua kali lebih produktif daripada menggunakan pengembangan asli — bahkan hanya pada satu platform seluler
  • menguji aplikasi Point of Sale kami pada konfigurasi daya rendah perangkat keras Android memungkinkan kami menetapkan ambang CPU yang lebih rendah dari yang dibayangkan sebelumnya (1,5GHz vs. 2GHz)
  • kami memperkirakan ~ 80% berbagi kode antara iOS dan Android, dan terkejut dengan tingkat yang sangat tinggi dalam praktiknya — 95% (Tiba) dan 99% (Kompas)

Selain itu, meskipun kami membuat keputusan untuk membangun semua aplikasi baru menggunakan React Native, itu tidak berarti kami akan secara otomatis mulai menulis ulang aplikasi lama di React Native.

Tiba

Pada akhir 2018, kami memutuskan untuk menulis ulang salah satu aplikasi konsumen kami yang paling populer, Tiba di React Native. Tiba dengan mudah, ini adalah aplikasi berperingkat tinggi dan berkinerja tinggi yang memiliki jutaan unduhan di iOS. Itu adalah kandidat yang bagus karena kami tidak memiliki versi Android. Upaya kami akan membantu kami menjangkau semua pengguna Android yang berteriak-teriak untuk Tiba. Sekarang React Native pada iOS dan Android berbagi 95% kode yang sama. Kami akan mendalami Tiba di entri blog mendatang.

Sejauh ini penulisan ulang ini menghasilkan:

  • lebih sedikit kerusakan di iOS daripada aplikasi iOS asli kami
  • versi Android diluncurkan
  • tim yang terdiri dari pengembang seluler + non-seluler.

Tim juga menemukan cara keren ini untuk langsung menguji permintaan pull yang sedang dalam proses. Anda cukup memindai kode QR dari komentar GitHub otomatis di ponsel Anda dan paket JavaScript diperbarui di aplikasi Anda dan Anda sekarang menjalankan kode terbaru dari pull request tersebut. JML, CTO kami, membagikan prosesnya di Twitter baru-baru ini .

Titik penjualan

Di awal tahun 2019, kami melakukan eksperimen 6 minggu di andalan kami Aplikasi Point of Sale (POS) untuk melihat apakah itu akan menjadi kandidat yang baik untuk penulisan ulang di React Native. Kami belajar banyak, termasuk bahwa pedagang eceran kami mengharapkan hampir 2x responsivitas di POS kami karena memori otot menggunakan aplikasi kami sambil juga berbicara dengan pelanggan.

Untuk memberikan pelayanan terbaik bagi pedagang eceran kami dan mempelajari tentang React Native dalam pengaturan ritel fisik, kami memutuskan untuk membuat POS baru secara native untuk iOS dan menggunakan React Native untuk Android.

Kami melanjutkan dengan 2 tim karena alasan berikut:

  1. kami sudah memiliki tim ditingkatkan dengan keahlian iOS, termasuk banyak orang yang membuat aplikasi POS asli
  2. kami ingin dapat membandingkan kecepatan teknik React Native kami serta kinerja aplikasi dengan standar emas yang merupakan iOS asli
  3. untuk memenuhi persyaratan kinerja tinggi dari pedagang kami, kami merasa bahwa kami membutuhkan semua Pembaruan arsitektur ulang Facebook ke React Native sebelum peluncuran (ternyata, itu tidak penting bagi kami kasus penggunaan kinerja). Memiliki dua tim di dua platform, mengurangi risiko kemampuan kami untuk meluncurkan.

Kami mengumumkan penulisan ulang POS secara lengkap di Bersatu 2019 . Cari aplikasi iOS asli dan React Native Android untuk diluncurkan pada tahun 2020!

Kompas

Tim Start di Shopify bertugas membantu orang-orang yang baru mengenal kewirausahaan. Sebelum keputusan luas perusahaan untuk menulis semua aplikasi seluler di React Native muncul, tim tersebut menyelami Native secara mendalam, Flutter dan React Native sebagai pilihan teknologi yang memungkinkan. Mereka memilih React Native dan sekarang memiliki iOS dan Aplikasi Android (dalam versi beta) tersedia di App Store.

Versi pertama Kompas (baik iOS dan Android) diluncurkan dalam waktu 3 bulan dengan ~ 99% kode dibagi antara iOS dan Android.

Kami memiliki banyak penyimpanan untuk tahun 2020.

Akankah kami menulis ulang aplikasi asli kami? Tidak. Itu adalah keputusan yang dibuat setiap tim aplikasi secara independen

Apakah kami akan terus mempekerjakan teknisi asli? Ya, BANYAK !

Kami ingin berkontribusi pada React Native inti, membangun komponen khusus platform, dan terus memahami kehalusan setiap platform. Ini membutuhkan keahlian asli yang mendalam. Apakah ini terdengar seperti Anda?

Kami percaya bahwa membangun perangkat lunak adalah olahraga tim. Kami memiliki komitmen terhadap web terbuka, sumber terbuka, dan standar terbuka.

Kami mensponsori Software Mansion dan Krzysztof Magiera (salah satu pendiri React Native untuk Android) dalam upaya open source mereka di sekitar React Native.

Kami sedang bekerja dengan William Candillon (pembawa acara Can It Be Done in React Native ) untuk tinjauan arsitektur dan kinerja.

Kami akan bermitra erat dengan tim React Native di Facebook dalam otomatisasi, perpustakaan pihak ketiga, dan pengelolaan beberapa modul melalui Lean Core .

Kami sedang bekerja dengan Discord untuk mempercepat open sourcing dari FastList for React Native (pustaka yang hanya menampilkan item daftar yang di viewport) dan mengoptimalkan untuk Android.

Saat Anda bertaruh dan mendalami teknologi, Anda ingin mendapatkan leverage maksimum dari pilihan itu. Agar kami dapat membangun dengan cepat dan mendapatkan hasil maksimal, kami memiliki dua jenis tim yang membantu seluruh Shopify membangun dengan cepat. Yang pertama adalah perkakas tim yang membantu penyiapan teknik, integrasi, dan penerapan. Yang kedua adalah yayasan tim yang berfokus pada SDK, penggunaan ulang kode, dan sumber terbuka. Kami sudah mulai memutar kedua tim ini pada tahun 2020 untuk fokus pada React Native.

Populer kami Aplikasi Ping Shopify yang telah memungkinkan ratusan ribu percakapan pelanggan saat ini hanya di iOS. Pada tahun 2020, kami akan membangun versi Android menggunakan React Native dari kantor San Francisco kami dan kami sedang merekrut .

Pada tahun 2019, Twitter merilis aplikasi web seluler dan desktop mereka menggunakan sesuatu yang disebut React Native Web . Meskipun ini mungkin tampak membingungkan, ini memungkinkan Anda untuk menggunakan tumpukan React Native yang sama untuk aplikasi web Anda juga. Facebook segera dipekerjakan Nicolas Gallagher sebagai hasilnya, insinyur utama dalam proyek tersebut. Di Shopify, kami akan melakukan beberapa eksperimen React Native Web pada tahun 2020.

Shopify adalah selalu mempekerjakan orang yang tajam di semua disiplin ilmu. Mengingat tumpukan khusus kami (Ruby on Rails / React / React Native), kami selalu berinvestasi pada orang-orang meskipun mereka tidak memiliki rangkaian pengalaman khusus ini yang masuk ke Shopify. Dalam rekayasa seluler (btw, Saya suka video ini tentang pendapat teknik ) kami akan terus menulis kode asli seluler dan mempekerjakan insinyur asli (iOS dan Android ).

Selain itu, kami mencari Pengembang Seluler Utama untuk bekerja dengan saya secara langsung di seluruh portofolio seluler di Shopify. Orang ini memiliki rekam jejak keunggulan, dapat memecahkan tantangan teknis yang sangat kompleks, dan dapat membantu Shopify menjadi pemimpin industri dan teknologi di React Native. Jika ini terdengar seperti Anda, pesan saya langsung farhanATshopify.com!

Farhan Thawar adalah VP Teknik untuk Saluran dan Seluler di Shopify
Indonesia: @ fnthawar

Read More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments