Sebaliknya, ini adalah cerita lain tentang bagaimana saya beralih ke kerangka baru)
Materi tidak menyiratkan kebenaran tertinggi. Di sini dijelaskan hanya solusi yang saya pilih untuk diri saya sendiri, dan bagi saya, yang memiliki latar belakang besar dalam pengembangan React & React Native, paling mudah bagi saya untuk menerapkannya pada proyek nyata.
Konteks
Untuk memulainya, saya akan menjelaskan, boleh dikatakan, konteksnya. Pesanan telah muncul - untuk menulis aplikasi seluler lintas platform kecil (sekitar 15 layar). Secara alami, karena kebiasaan, saya mulai melakukannya di React Native. Dalam dua minggu, aplikasi diterapkan sekitar 80%.
Pada akhir pekan saya membaca artikel lain dari Surf dengan hasil survei di Habré . Dan pikiran itu muncul, mengapa tidak mencoba? Apakah saya dapat mengulangi apa yang telah ditulis pada kerangka baru untuk saya? Diputuskan untuk menghabiskan akhir pekan mencoba ini. Akibatnya, selama seminggu ke depan, tidak hanya 80% yang sebelumnya, tetapi juga 20% sisanya yang ditulis ulang. waktu pengembangan telah berkurang lebih dari setengah!
pro
Pertama-tama, keuntungannya adalah kecepatan tata letak. Layar memukau SANGAT cepat. Gradien linier, svg, gif - semuanya di luar kotak. Komponen tumpang tindih ( posisi: absolut ) - tidak ada masalah sama sekali. Apa pun yang menyebabkan nyeri di React Native dilakukan dengan mengklik jari Anda. Animasi biasanya berupa dongeng! Layar yang sama dengan komponen animasi yang konstan menghabiskan waktu beberapa kali lebih sedikit dengan Flutter.
Minus
Ada dua kelemahan nyata. Yang pertama adalah dokumentasi. Sangat sedikit dalam bahasa Rusia. Bahasa Inggris resmi tidak terstruktur dengan baik, ya, ini memberikan banyak contoh kode yang berguna, tetapi sulit untuk memahami sesuatu yang masuk akal dari arsitektur umum aplikasi.
Kerugian kedua adalah paketnya. Masih ada kekacauan total di sana. Memilih paket yang sangat bagus untuk yang Anda inginkan bukanlah tugas yang sepele. Di suatu tempat satu fitur tidak berfungsi, di tempat lain. Banyak waktu dihabiskan untuk seleksi. Sebagai pilihan - tambahkan sesuatu sendiri, tapi ini saat saya terbiasa)
Pengalaman: kait
Kenalan saya dengan React berawal dari hari-hari ketika kelas normal baru saja muncul di dalamnya. Sekarang saya tidak bisa membayangkan dia tanpa pengait dan sudah melupakan kelas. Untuk flutter, ada pustaka flutter_hooks luar biasa yang memungkinkan Anda membawa pengait yang sudah dikenal ke dalam proyek Anda. Bagi saya, itu sepenuhnya menggantikan StatefulWidget . Ada banyak kait, Anda dapat menulisnya sendiri, tetapi paling sering useEffect , useState , dan useMemoized digunakan dalam kode saya . Untuk animasi, gunakanAnimationController .
Mungkin ini bukan solusi terbaik (saya siap membaca tentang kontra di komentar), tetapi ini memungkinkan Anda untuk menggunakan latar belakang dari React dalam kerangka baru untuk diri Anda sendiri. Saya bahkan tidak melihat alasan untuk memberikan contoh dengan kode - semua pengembang React tahu ini sebagai ayah kami!
Pengalaman: manajemen negara
Pada suatu waktu, saya harus bekerja dengan redux , dan dengan mobx , dan bahkan, dengan eksotik, seperti storeon . Sepertinya itu (redux / mobx) juga di bawah Flutter, tapi, terus terang, saya tidak menguasainya). Menurut saya, semuanya terlalu rumit di sana dibandingkan dengan yang ada di React. Anda dapat, tentu saja, menghabiskan lebih banyak waktu dan mencari tahu, tetapi mengapa, ketika saya menemukan solusi yang lebih baik: riverpod .
Perpustakaan dari Remi Rousselet , penulis flutter_hooks - tentu saja keduanya bekerja dengan baik). Faktanya, ini adalah Penyedia yang dimodifikasi . Cukup tambahkan ke runApp Anda ( ProviderScope (...))membungkus semuanya dan mendapatkan cakupan global di seluruh aplikasi, dapat diakses dari widget apa pun. Cukup menulis useProvider ( providerName ) dalam metode build HookWidget dan kami memiliki data yang tersedia dari penyedia yang ditentukan.
Ada banyak opsi penyedia di pustaka, tetapi yang paling dasar adalah ChangeNotifyProvider dan StateNotifyProvider . Semua logika bisnis dapat dengan aman dihapus dari widget dan ditransfer ke penyedia ini. Selain itu, keduanya digabungkan dengan sempurna satu sama lain dan tidak akan sulit untuk mendapatkan akses ke metode dan data satu sama lain dari satu metode.
Polanya sangat mirip dengan bebek reduxpendekatan yang, bagi saya pribadi, telah menjadi yang paling dekat di dunia React. Hanya "bebek" yang lebih kecil. Hal utama yang perlu diingat di sini adalah lebih baik memiliki banyak penyedia kecil yang akan digunakan di widget yang berbeda daripada yang besar untuk mereka, karena widget yang sebenarnya telah diubah akan digambar ulang.
Kekecewaan: web
Setelah kesuksesan yang luar biasa (untuk saya sendiri) dengan pengembangan aplikasi seluler, saya, seperti tumpukan penuh yang menghargai diri sendiri, memutuskan untuk menyentuh Flutter untuk web. Sekali lagi, menulis ulang salah satu aplikasi korporat yang benar-benar berfungsi.
Tentu saja, web flutter masih dalam versi beta, dan semua yang dijelaskan di bawah ini berlaku khusus untuk versi beta. Saya sangat berharap dengan rilis ini banyak hal yang akan berubah menjadi lebih baik. Namun demikian, Flutter mengecewakan saya di sini.
Hal pertama yang perlu Anda ketahui Flutter Web bukanlah tentang situs web, tetapi tentang aplikasi! Itu. itu perlu untuk menulis dengan cara yang sama seperti untuk seluler. Semua widget sama. Anda tidak dapat menggunakan JS pihak ketiga dalam kode Anda. Akses hanya melalui dart: js . Mengakses html juga melalui dart: html... Ini memotong hampir semua yang telah dilakukan di dunia web sekaligus. Jika Anda menginginkan animasi keren yang telah diterapkan di css + js di suatu tempat, Anda tidak dapat melakukannya , tulis analoginya di flutter atau gunakan dart: js, yang tidak selalu mudah. Tidak mungkin menggunakan pustaka JS / css yang sudah jadi dengan mudah.
Kekurangan kedua adalah paket lagi! Meskipun di pub.dev sebagian besar ditandai sebagai mendukung web, android, dan ios, pada kenyataannya, salah satu biasanya berfungsi. Itu. Anda tidak akan dapat membuat kode lintas platform sepenuhnya.
Paket untuk web biasanya merupakan pembungkus dari rekan js mereka. Tetapi hampir selalu mereka tidak mengikuti versi paket yang mereka bungkus.
Contoh:
Tugasnya adalah membuat otorisasi melalui MS dan menerima data pengguna.
Di JS lama yang bagus, semuanya sederhana: ambil msal danmicrosoft/ microsoft-graph-client - dan nikmati hasilnya. Temukan msal_flutter di
Flutter , hubungkan ... dan ternyata paket web tidak mendukungnya. Oke, kami menemukan msal_js - ini adalah pembungkus dari msal biasa, jadi Anda perlu memasukkannya ke index.html melalui tag skrip lama yang baik. Tapi jika msal sudah diupdate ke 1.4.2 maka paket ini mendukung maksimal 1.3.0! Baiklah, kami mendapat token menjadi dua dengan sedih, bagaimana dengan data pengguna? Ada paket microsoft_graph - tidak ada dokumentasi untuk itu. Untuk menemukan metode yang diperlukan, Anda perlu masuk ke kode paket dan melihat-lihat di sana. Dan untuk mengetahui pada akhirnya bahwa hanya ada beberapa yang diterapkan di sana untuk bekerja dengan tugas! Temukan msgraph lain
- sehingga umumnya satu-satunya metode yang mendukung!
Untungnya, protokolnya sendiri tidak terlalu rumit di sana dan Anda dapat dengan cepat menulis sesuatu sendiri saat Anda perlu bekerja dan tidak menulis perpustakaan)
Lingkungan Hidup
Kerugian ketiga dan terbesar adalah ketidakmungkinan pengaturan lingkungan. Flutter web berjalan baik di browser atau sebagai server web. Anda masih dapat mengatur port yang akan berputar melalui parameter baris perintah (yang juga sangat tidak nyaman, di mana konfigurasinya?!) Tetapi bagaimana saya bisa menjalankannya sebagai https dengan sertifikat yang ditandatangani sendiri? Sehingga pada saat yang sama beban panas akan bekerja dan debug dan chip lain yang biasanya bekerja? Halo! Guys, 2k20 berakhir, dan Anda masih memiliki http? Betulkah?!
Kesimpulan
Jelas, Flutter, sebagai kerangka kerja untuk pengembangan seluler lintas platform, mencabik-cabik React Native di semua lini. Saya puas, pelanggan juga senang - apa lagi yang Anda butuhkan?
Namun sebagai alat untuk menulis aplikasi web, masih lembab dan terlalu melelahkan. Bersiaplah ketika Anda menghubungkan paket js pihak ketiga dalam beberapa detik, di sini Anda akan menulis pembungkusnya selama beberapa hari, atau bahkan analog Anda sendiri di Flutter.
PS
Saya akan mengulanginya lagi bagi yang lupa dari awal artikel. Solusi terapan dan kesimpulan yang saya jelaskan adalah kesimpulan dari seseorang dengan latar belakang 1 minggu di Flutter dan latar belakang 3 tahun di React. Jadi jangan menganggapnya sebagai kebenaran tertinggi. Saya siap berdiskusi dalam komentar dengan guru tentang kesalahan saya.