Pertama, izinkan saya mengingatkan Anda bahwa React Native (RN) adalah teknologi lintas platform untuk membangun aplikasi seluler. Banyak orang berpikir bahwa keunggulan utamanya adalah penggunaan basis kode tunggal untuk dua aplikasi, tetapi saya tidak menganggap ini sebagai yang paling berharga di RN. Nilai intinya adalah menggunakan React dengan semua manfaatnya, termasuk komunitas pengembangan web yang lebih luas. Sangat masuk akal bagi pengembang React untuk mulai membangun aplikasi seluler dengan React Native setelah memiliki pengalaman yang solid dengan React. Namun dunia seluler sangat berbeda dengan web. Hari ini saya ingin berbagi hal yang perlu diingat saat Anda terjun ke dunia pengembangan seluler.
1. Kekompakan layar
CSS mengasumsikan bahwa Anda bekerja dengan piksel sebagai unit fisik 1/96 inci. Ini berguna jika Anda membuat situs web hanya untuk komputer desktop, tetapi saat bekerja di situs untuk perangkat seluler, Anda perlu mempertimbangkan kepadatan layar yang berbeda. Itulah mengapa Anda membutuhkan margin yang berbeda, bantalan untuk perangkat yang berbeda, dan aset yang berbeda (seperti gambar) untuk perangkat tersebut. Ada artikel bagus yang menjelaskan pendekatan seluler. Atau, Anda dapat merujuk langsung ke sumber daya Pengembang Android .
2. Navigasi
Browser web biasanya memiliki halaman saat ini, tombol kembali untuk menyimpan riwayat, dan jangkar lainnya. Dalam versi seluler situs, kami memiliki layar, dan navigasi di antara mereka, bertindak dalam pola yang jelas: navigasi melalui tab, sepanjang tumpukan, dan mundur. Anda tidak dapat menggunakan React-router untuk melakukan ini, tetapi Anda dapat menggunakan pustaka navigasi React untuk navigasi responsif .
Navigasi tab animasi di React-Native
3. Gaya
Di dunia seluler, CSS tidak akan berfungsi, dan tidak ada solusi yang berfungsi dengannya. Anda tidak dapat menggunakan CSS-in-JS, LESS, atau apa pun. Sebagai gantinya, Anda dapat menggunakan objek JSON untuk menentukan gaya komponen.
catatan:
- selalu gunakan StyleSheet.create ({}) jadi React-Native bisa meng-cache gaya;
- Flexbox masih ada, hanya saja namanya berbeda.
Contoh gaya React-Native
4. Jaringan
Jika Anda membuat situs web atau aplikasi desktop dengan React (katakanlah Electron), maka Anda dapat mengandalkan koneksi internet yang baik dan cukup stabil. Tetapi sekarang kita berbicara tentang perangkat seluler, dan di sini Internet bisa sangat lambat, tidak stabil, atau bahkan tidak ada. Oleh karena itu, perlu untuk mengembangkan aplikasi dengan kekhasan berikut: permintaan koneksi, bekerja secara offline (caching, misalnya). Koneksi juga bisa putus selama operasi, jadi Anda harus bersiap untuk ini.
5. Tanda tangan
Tidak seperti situs web, yang dapat dengan mudah disebarkan ke penyimpanan yang kompatibel dengan S3, aplikasi seluler harus ditandatangani secara digital agar telepon dapat memverifikasi bahwa pengembang dipercaya. Proses ini bisa sangat melelahkan, terutama untuk iOS, di mana Anda perlu membeli program untuk pengembang, membuat id aplikasi, profil, membuat dan mengekspor sertifikat penandatanganan ... Di platform Android, terlihat lebih mudah: Anda dapat menghasilkan semua data yang diperlukan menggunakan satu baris perintah atau menggunakan Android Studio dan segera distribusikan aplikasinya.
6. Penyebaran
Sekali lagi: Anda tidak bisa hanya mengunggah konten ke S3 atau mesin virtual. Anda harus melalui Google Play dan App Store atau mendistribusikan aplikasi Anda di luar toko resmi, misalnya, jika aplikasi itu perusahaan, hanya ditujukan untuk karyawan dari satu organisasi. App Store, bagaimanapun, tidak akan mengizinkan penerbitan aplikasi langsung ke App Store, Anda harus menggunakan beberapa jenis solusi MDM atau hanya mendistribusikannya melalui MS App Center, Firebase Distribution, dll.
Selain itu, banyak aturan di toko yang harus diikuti. Ini termasuk ikon, grafik, pedoman antarmuka pengguna , izin, keamanan, dan lainnya.
7. Alat
Anda juga dapat menggunakan VSCode atau WebStore atau bahkan Vim untuk pengeditan kode dan Chrome sebagai debugger, atau Anda dapat menggunakan Xcode dan Android Studio untuk mendapatkan lebih banyak manfaat seperti log, alat pemantauan, pengeditan file, dan banyak lagi. Anda juga akan menyukai Flipper, Reactotron, dan alat lain yang akan mempercepat pekerjaan Anda dengan React-Native.
React-Native di WebStorm IDE
8. Emulator, simulator dan perangkat
Untuk pengembangan web, beberapa browser sudah cukup. Untuk pengembangan seluler, Anda perlu menjalankan kode pada perangkat seluler: Anda dapat menggunakan ponsel, tetapi kemungkinan besar Anda tidak memiliki perangkat dengan Android dan iOS di ujung jari Anda.
Kabar baik: Anda dapat menggunakan emulator Android (yang dapat diunduh dan dijalankan dari Android Studio) atau simulator iOS yang dibuat dari Xcode jika Anda menggunakan Mac (tidak, Anda tidak dapat memiliki simulator iOS di perangkat keras lain, setidaknya secara legal. ). Benar-benar pengalaman baru, tapi menyenangkan.
9. Hubungan dengan kode asli
Kode js Anda akan tetap bersama Anda, tetapi juga akan berinteraksi dengan kode asli (Kotlin, Swift). Aplikasi harus ditautkan dengan benar, jika tidak maka akan crash atau malfungsi. Kabar baiknya adalah ketika bekerja dengan React-Native sejak versi 0.60, penautan terjadi secara otomatis untuk sebagian besar perpustakaan eksternal.
Arsitektur aplikasi React-Native
10. Penggunaan kembali kode
Berita bagus, akhirnya! Jika Anda membuat aplikasi web dan aplikasi seluler, Anda dapat menggunakan kembali beberapa kode. Anda pasti dapat menggunakan kembali seluruh domain dan kode jaringan, karena tidak ada kekhususan untuk Internet atau perangkat seluler. Kemungkinan besar Anda juga dapat menggunakan kembali logika bisnis, tetapi kemungkinannya kecil.
Dalam artikel mendatang, saya berharap dapat melihat lebih dekat masing-masing poin ini.