Beberapa waktu lalu, ada tugas untuk memperbarui monolit front-end dari sistem beban tinggi yang bekerja 24/7 - untuk mentransfer dari kerangka Knockout yang sudah ketinggalan zaman ke React modern. Tantangan muncul ketika arsitektur lama tidak lagi sesuai dengan kebutuhan bisnis. Tim ditugaskan untuk mengimplementasikan fitur-fitur baru, tetapi dalam arsitektur yang ada, ternyata hampir tidak mungkin untuk melakukannya. Kami ingin berbagi pengalaman kami tentang cara membuat proyek semacam itu lebih mudah.
Bagian utama dari produk kami adalah skenario bisnis tunggal, modul individual yang saling berhubungan erat. Anda tidak bisa begitu saja mengambilnya dan menulis ulang dengan rapi - ini adalah proyek terpisah dengan anggarannya sendiri. Dan selama pengembangan, Anda harus mempertahankan dua versi paralel, salah satunya, apalagi, tidak akan berfungsi - tidak ada bagian dari aplikasi yang memiliki nilai dalam dirinya sendiri, tanpa komunikasi dengan bagian lain. Oleh karena itu, kami mulai menulis ulang modul demi modul, jendela demi jendela.
Salah satu persyaratan utama proyek ini adalah bahwa transisi tidak akan diperhatikan oleh pengguna. Oleh karena itu, semua perubahan disembunyikan di dalam - pengembang kami membangun pertukaran data antara kerangka lama dan baru, membersihkan banyak kesalahan yang muncul dalam pengujian karena arsitektur yang tidak standar.
Selanjutnya, kami akan memberi tahu Anda lebih banyak tentang tugas utama yang perlu kami selesaikan selama migrasi, dan bagaimana kami mengatasinya.
Cara berteman antara dua generasi kerangka
React adalah salah satu alat pengembangan front-end paling populer di dunia. Ini berinteraksi dengan sempurna dengan alat lain yang mungkin diperlukan di setiap proyek tertentu, memungkinkan Anda membuat aplikasi web yang dapat diskalakan dengan tingkat kerumitan apa pun.
Knockout dan React menangani data secara fundamental secara berbeda. Tugasnya adalah memastikan bahwa semua modul, apa pun yang ditulis, memahami pada waktunya apa yang terjadi dengan data, bagaimana perubahannya.
Knockout- React-, . Knockout, React. , :
Knockout React.
React, Knockout, React.
, Knockout React, React Knockout.
HTML- . React- Knockout, , view- Knockout, React- JavaScript .
React «», , - , , .. , .
, API MutationObserver. React- , React.
React Knockout-. . - , , . . , « ».
, ( – Knockout). React- , , . – React, . – Knockout. , -, , .
UI-
UI-. Storybook. - , UI-. Storybook . , -, , -, .
, . , , , . , , .
Storybook , , . Faker. , , . , .
, Storybook . UAT-, . Storybook, , , .
, , . :
, , .
, Storybook.