Get best of the week

Bereaksi Asli: Tonggak Baru dalam Pengembangan Mobile Shopify

Atau mengapa Shopify beralih ke React Native.

Setelah bertahun-tahun pengembangan ponsel asli, kami memutuskan untuk bergerak dengan penuh semangat menuju pengembangan aplikasi mobile di React Native. Di bawah ini akan jelas bahwa keputusan ini tidak mudah bagi kami.

Pada akhir setiap kuartal, kami melihat gambaran yang sama: sebagian besar pelanggan kami melakukan pembelian melalui perangkat seluler (pada kuartal ketiga tahun lalu bagian mereka adalah 71%). Black Friday dan Cyber ​​Monday adalah waktu terpanas bagi penjual kami, dan aktivitas pelanggan akhir-akhir ini berada di luar grafik. Tahun ini, selama periode diskon, mitra Shopify mencatat peningkatan 3 persen dalam pesanan dari perangkat seluler, dan rata-rata bagian dari pembelian tersebut adalah sebesar 69% dari total jumlah transaksi .

Jadi mengapa kami memutuskan untuk beralih ke Bereaksi Asli? Dan mengapa sekarang? Apa yang akan terjadi pada pengembangan ponsel asli kami sekarang? Anda tidak akan dapat menjawab pertanyaan-pertanyaan ini dengan cepat dan singkat. Mari kita mulai dengan latar belakang.

Pengembangan Ponsel Shopify - 2019


Kami telah mengembangkan praktik khusus di Shopify - untuk mengandalkan teknologi yang relatif muda yang berada pada tahap awal pengembangan, atau hanya mendapatkan popularitas. Ini membantu kita tumbuh lebih cepat.

Biasanya, kami fokus pada beberapa teknologi dan terutama mengandalkan mereka dalam pengembangan. Ini memberikan beberapa poin pertumbuhan:

  • kami membentuk keahlian unik pada serangkaian kecil teknologi (dan sering memberikan kontribusi signifikan atau bahkan besar bagi pengembangannya);
  • setiap solusi teknologi memiliki hambatan, kehalusan, dan kami menyelidiki secara mendalam;
  • , , ;.
  • .

Pada saat yang sama, teknologi baru terus muncul yang memberi kami peluang untuk secara bertahap meningkatkan efisiensi insinyur atau produktivitas produk kami. Kami banyak bereksperimen untuk membuka kemungkinan baru dan menerjemahkan peningkatan kuantitatif menjadi yang kualitatif, tetapi, pada akhirnya, kami tidak memasukkan semua pencapaian kami ke dalam proses teknis utama.

Saat kami memperkenalkan teknologi, bahasa, atau kerangka kerja baru, kami mencoba menghitung kemungkinan berhasil atau gagal. Alih-alih menghindari risiko, kami mempelajari, meneliti, dan mengevaluasi berbagai risiko secara terperinci, berdasarkan karakteristik individu dari proyek kami. Seperti yang sering terjadi, peluang tersembunyi dapat ditemukan di zona risiko. Dan kami terutama berpikir tentang cara menetralisir aspek negatif risiko:

  • , ?
  • , , ?
  • , () ?

Ruby on Rails berada pada tahap awal pengembangan dan belum terbentuk sebagai kerangka kerja penuh, ketika pada tahun 2004 Toby (CEO kami) menjadi peserta utama dalam proyek sumber terbuka. Selama bertahun-tahun, Ruby on Rails telah dianggap sebagai solusi yang sembrono dan tidak efisien . Tetapi pemilihan dan studi teknologi ini pada tahap awal pengembangan sebagai hasilnya memberi Shopify keunggulan kompetitif, meskipun itu adalah pilihan yang tidak populer. Menggunakan Ruby on Rails, tim dapat dengan cepat membuat produk dan menarik sumber daya. Bagaimanapun, itu adalah teknologi modern, dengan tingkat abstraksi yang lebih tinggi daripada bahasa dan kerangka kerja pemrograman tradisional yang ada pada saat itu. Demikian pula, Paul Graham pernah memberi tahutentang bagaimana ia memutuskan untuk menggunakan Lisp untuk membuat Viaweb. 6 dari 10 perusahaan paling mahal Y Combinator saat ini menggunakan Ruby on Rails (walaupun, sekali lagi, kerangka kerjanya masih belum begitu populer). Di sisi lain, tidak satu pun dari 10 perusahaan termahal Y Combinator menggunakan Java, yang dianggap sebagai solusi perusahaan yang terbukti dan cukup andal.

Demikian pula, 2 tahun yang lalu Shopify memutuskan untuk beralih ke Google Cloud.. Sekali lagi, ini adalah usaha yang agak berisiko untuk layanan e-commerce terbesar kedua di Amerika Serikat (pada 2019) - untuk melakukan migrasi cloud di luar pusat data mereka sendiri demi produk yang cukup baru, Google Kubernetes Engine. Kami melihat bahwa kurva nilai tambah mendorong kami untuk fokus pada apa yang benar-benar kami kuasai (ini membantu bisnis), memungkinkan orang lain (dalam hal ini Google Cloud) untuk mengambil kerja keras merawat peralatan dalam produksi kondisi, dengan memastikan kapasitas, keamanan, dengan memperbarui sistem operasi, dll.

Bereaksi Asli - apa itu?


Pada 2015, Facebook mengumumkan dan merilis kerangka kerja open source React Native . Sebelumnya, sudah digunakan secara internal untuk pengembangan aplikasi mobile-nya. React Native adalah kerangka kerja untuk pengembangan lintas platform dari aplikasi seluler yang ditampilkan secara native menggunakan perpustakaan React js . Dengan demikian, memungkinkan untuk menggunakan js-library teratas untuk membuat antarmuka pengguna aplikasi seluler asli.

Dalam Shopify, ide ini (dulu, dalam arti tertentu, sekarang juga) skeptis, tetapi banyak yang menganggapnya menjanjikan. Jadi acara Shopify Hackdays berikutnyasepenuhnya didedikasikan untuk Bereaksi Asli. Meskipun tim kemudian menghargai manfaat kerangka kerja tersebut, kami memutuskan bahwa pada tahun 2015 kami tidak dapat mengimplementasikan aplikasi React Native, yang dapat kami banggakan nanti. Ini terutama karena masalah kinerja dan kurangnya dukungan penuh untuk OS Android. Tetapi kami jelas menyadari bahwa kami menyukai paradigma Pemrograman Reaktif dan GraphQL . Selain itu, setelah bertemu dengan React Native, kami mengembangkan dan membuat penyaji untuk iOS. Pada 2015, kami menerapkan teknologi ini pada tumpukan kami, tetapi tidak menggunakan React Native untuk pengembangan ponsel massal. Eksperimen pertama kami ditulis secara rinci di sini .

Hingga hari ini, Shopify telah memiliki pengembangan ponsel asli sebagai standar. Kami menciptakan dua tim, perangkat seluler dan yayasan , yang berfokus pada iOS dan Android, dan juga membantu kami mempercepat proses pengembangan. Terlepas dari kenyataan bahwa mereka menunjukkan hasil yang baik, tampaknya bagi kami bahwa pengembangan akan menjadi lebih efektif jika kita:

  • Kami menggunakan kekuatan JavaScript dan teknologi web lainnya dalam pengembangan seluler;
  • memperkenalkan paradigma pemrograman reaktif dalam pengembangan aplikasi klien;
  • kami akan menggabungkan pengembangan untuk iOS dan Android di React Native menjadi satu tumpukan teknologi.

Bagaimana cara Bereaksi Asli bekerja?


React Native memungkinkan Anda membuat aplikasi mobile yang ditampilkan secara lintas platform menggunakan JavaScript. React Native mirip dengan React: kami juga secara deklaratif membuat antarmuka pengguna di JS dengan pohon elemen UI, atau dengan DOM virtual (VDOM), dalam hal ReactJS. Jika ReactJS menampilkan elemen antarmuka dalam peramban, maka React Native mengubah objek VDOM menjadi elemen visual platform khusus asli untuk ditampilkan pada perangkat seluler menggunakan pengikat: komponen asli dibungkus dalam React. Kami hanya tertarik pada platform Android dan iOS, tetapi ada penggemar yang tertarik mengembangkan React Native untuk Windows, macOS dan Apple tvOS.


ReactJS berinteraksi dengan browser, dan React Native berinteraksi dengan API seluler.

Kapan kita tidak menggunakan React Native?


Ada situasi di mana tim Shopify tidak menggunakan React Native untuk mengembangkan aplikasi seluler. Khususnya, jika kita diharuskan untuk:

  • meluncurkan aplikasi pada perangkat keras lama (CPU <1,5 GHz);
  • pengolahan canggih;
  • kinerja sangat tinggi;
  • banyak utas berjalan di latar belakang.

Harap dicatat: perpustakaan tingkat rendah, termasuk berbagai SDK open source, tetap sepenuhnya asli. Kita dapat membuat modul asli kita sendiri jika kita ingin lebih dekat dengan perangkat keras.

Mengapa kita beralih ke Bereaksi Asli sekarang?


Kami memiliki 3 alasan utama:

  1. Setelah mengakuisisi pasar Tictail (layanan ini dikembangkan di React Native, sesuai dengan prinsip mobile pertama) pada tahun 2018, kami melihat jenis pengembangan apa yang React Native terima dan pada 2019 kami berinvestasi di tiga proyek lagi.
  2. Shopify secara aktif menggunakan React dalam pengembangan web, sekarang saatnya menerapkan pengetahuan kami dalam pengembangan aplikasi seluler.
  3. Kami perhatikan bahwa kurva kinerja merangkak naik (misalnya, apa yang bisa dilakukan sebelumnya, dan sekarang apa yang Google Documents dapat lakukan dibandingkan dengan desktop Microsoft Office) dan membuat taruhan pada React Native dalam jangka panjang - sama seperti dulu kami percaya pada Ruby pada Rails, Kubernetes, dan Rich Media.

Pengembangan ponsel di Shopify pada tahun 2019


Di Shopify, penjual dan pembeli dapat berinteraksi dalam beberapa cara: melalui aplikasi web dan seluler. Sepanjang tahun lalu, tiga tim kami bereksperimen dengan React Native, dan sebagai hasilnya, mereka mengembangkan tiga aplikasi seluler: Tiba, Point of Sale, dan Kompas.

Setelah percobaan kami, kami membuat kesimpulan berikut:

  • ketika menyalin aplikasi Tiba untuk Bereaksi Asli, tim menemukan bahwa produktivitas telah dua kali lipat dibandingkan dengan pengembangan asli, bahkan jika Anda menulis hanya untuk satu platform;
  • menguji versi Android dari aplikasi Point of Sale dengan daya rendah, kami menemukan bahwa aplikasi berjalan pada frekuensi CPU yang lebih rendah: 1.5GHz (ditulis dalam React Native) dibandingkan 2GHz (pengembangan asli);
  • Kami memperkirakan bahwa proporsi kode platform-independen akan ~ 80%; dan kami terkejut ketika ternyata ternyata jauh lebih tinggi: 95% untuk Tiba dan 99% untuk Kompas.

Tetapi patut membuat reservasi: meskipun kami memutuskan untuk menulis aplikasi baru di React Native, ini tidak berarti bahwa kami akan menulis ulang semua aplikasi lama kami.

Tiba


Pada akhir 2018, kami memutuskan untuk menulis ulang salah satu aplikasi klien kami yang paling populer untuk React Native, Tiba . Ini adalah aplikasi iOS berkinerja tinggi dan berperingkat tinggi dengan jutaan unduhan. Kami memilih Tiba karena kami tidak memiliki versi Android-nya. Jadi kami pergi menemui pengguna perangkat Android. Sekarang versi iOS dan Android ditulis dalam React Native dengan pangsa 95% dari total kode lintas-platform.

Dalam proses penulisan ulang, kami telah mencapai hasil sebagai berikut:

  • saat menjalankan versi lintas platform untuk iOS, lebih sedikit crash yang terjadi daripada di versi asli;
  • kami meluncurkan versi untuk OS Android;
  • Baik pengembang seluler maupun non-seluler dapat mengerjakan proyek ini.

Selain itu, tim dapat mencoba metode yang sangat baik untuk mengeksekusi permintaan tarik "work-in-progress" dengan cepat. Cukup pindai kode QR dari komentar Github menggunakan ponsel Anda, dan bundel JS aplikasi Anda diperbarui. Dengan demikian, setiap kali Anda dapat langsung memperbarui aplikasi dan menggunakan versi yang sekarang. Stasiun layanan kami baru-baru ini menggambarkan proses ini di Twitter .

Titik penjualan


Pada awal 2019, kami melakukan percobaan 6 minggu pada aplikasi Point of Sale (POS) produk andalan kami untuk melihat apakah itu adalah kandidat yang baik untuk menulis ulang di React Native. Kami banyak mempelajari pertanyaan ini, karena pengecer kami berharap kami dapat mengurangi separuh waktu respons aplikasi kami: proses layanan pelanggan menggunakan aplikasi kami harus diperbaiki dalam memori berotot penjual, dan mereka tidak boleh terganggu oleh ini.

Untuk memenuhi persyaratan pengecer kami dan memahami pengembangan React Native untuk perangkat POS pada saat yang sama, kami memutuskan untuk membuat aplikasi seluler asli baru untuk iOS, dan menulis versi untuk Android OS di React Native.

Kami telah mengalokasikan dua tim terpisah untuk tugas-tugas ini, dan inilah alasannya:

  1. Kami sudah memiliki tim dengan keahlian yang kuat di iOS, termasuk pengembang aplikasi POS asli.
  2. Selain kinerja aplikasi langsung, kami ingin dapat menguji kecepatan pengembangan kami di React Native, membandingkan semua ini dengan standar emas kami, yaitu, dengan pengembangan iOS asli.
  3. Untuk memenuhi persyaratan kinerja tinggi dari penjual, kami memutuskan untuk membuat semua pembaruan Facebook memperbarui arsitektur untuk React Native (namun, ternyata ini tidak penting untuk kinerja). Dengan mengidentifikasi tim terpisah untuk mengerjakan dua proyek, kami mengurangi risiko yang terkait dengan mengganggu rencana rilis.

Kami mengumumkan POS yang ditulis ulang di Unite 2019 . Kedua versi, iOS dan Android di React Native, akan tersedia pada tahun 2020.

Kompas


Spotify memiliki tim Mulai yang membantu pelanggan memulai bisnis mereka sendiri. Sebelum perusahaan membuat keputusan mendasar untuk mengembangkan aplikasi seluler di React Native, tim ini mempelajari Flutter dan React Native secara terperinci . Pilihannya jatuh pada React Native, dan sekarang mereka memiliki versi beta iOS - dan aplikasi Android Kompas. Selain itu, ~ 99% dari kode yang mereka miliki bersama.

Rilis pertama akan dirilis dalam waktu tiga bulan.

Pengembangan ponsel di Shopify 2020 ++


Kami telah menyiapkan banyak hal menarik untuk tahun 2020.
Akankah kita menulis ulang aplikasi seluler asli kita? Tidak. Meskipun keputusan ini dibuat oleh masing-masing tim secara mandiri.
Apakah kami akan merekrut pengembang asli? Ya banyak !
Kami ingin menjadi anggota terkemuka komunitas Bereaksi Asli, membuat komponen platform khusus dan terus memahami seluk-beluk setiap platform. Dan ini membutuhkan keahlian yang kuat. Kedengarannya bagus, bukan?

Kolaborasi dan Sumber Terbuka


Kami percaya bahwa pengembangan perangkat lunak adalah permainan tim. Kami terlibat dalam pengembangan web terbuka, sumber terbuka, dan standar terbuka lainnya.

Kami berkontribusi pada pembiayaan proyek Software Mansion dan Krzysztof Magera (salah satu pendiri React Native untuk Android) yang terkait dengan React Native.
Kami berkolaborasi dengan William Candillon (memimpin Can It Be Done in React Native di saluran YouTube) pada peningkatan arsitektur dan kinerja.

Kami berencana untuk bekerja sama dengan tim Bereaksi Asli dari Facebook tentang otomatisasi, membuat perpustakaan pihak ketiga, dan mengawasi beberapa modul dalam proyek Lean Core.

Bersama dengan Discord, kami secara aktif bekerja untuk dengan cepat menyiapkan versi open source dari FastList untuk React Native library (memungkinkan Anda untuk membuat hanya item-item daftar yang ada di area yang terlihat) dan mengoptimalkannya untuk OS Android.

Tooling dan Yayasan Kami Perintah untuk Bereaksi Asli


Saat Anda mengandalkan teknologi dan mempelajari teknologi itu, Anda ingin mendapatkan efek maksimal darinya. Untuk menetapkan tujuan dengan cepat dan mencapai tujuan ini, kami telah menciptakan dua jenis tim yang membantu karyawan Shopify lainnya menjadi produktif. Jenis pertama adalah tim tooling, yang membantu dengan konfigurasi, integrasi, dan penyebaran. Tipe kedua adalah tim yayasan, yang menangani SDK, penggunaan kembali kode, dan sumber terbuka. Pada tahun 2020, kedua tim mulai berkembang menuju React Native.

Aplikasi Shopify Ping kami yang populer, yang memungkinkan Anda untuk mengobrol dengan ratusan ribu pelanggan, saat ini hanya tersedia dalam versi iOS. Pada tahun 2020, kami akan mengerjakan versi untuk OS Android menggunakan React Native di cabang kami di San Francisco, tempat kami merekrut karyawan.

Pada tahun 2019, Twitter merilis aplikasi desktop dan web seluler menggunakan teknologi yang disebut React Native Web. Namanya mungkin sedikit membingungkan, tetapi perbedaan utamanya adalah bahwa teknologi ini memungkinkan Anda untuk menggunakan tumpukan Asli yang Sama untuk mengembangkan aplikasi web. Akibatnya, Facebook segera mengejar Nicholas Gallagher , pengembang utama proyek tersebut. Pada tahun 2020, kami di Shopify juga akan melakukan beberapa percobaan dengan React Native Web .

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles