Ililipat ko ang iyong jQuery o legacy React front end sa modernong React o Next.js, pahina-pahina

Gumagana at kumikita ang ilang produkto, ngunit naging mahirap baguhin ang kanilang front end: jQuery na kumalat sa mga template, React class components mula sa mga taon na ang nakalipas, o isang Next.js app na nasa Pages Router pa rin. Ang isang buong rewrite ay nagpapahinto sa produkto sa loob ng ilang buwan. Ginagawa ko ang ibang bagay: ang luma at bagong code ay tumatakbo nang magkatabi, at ang mga pahina ay lumilipat nang paisa-isa, kaya walang malaking araw ng paglipat para sa iyong mga user.

Ginawa ko mismo ito sa isang nakaraang proyekto sa ilalim ng NDA: isang jQuery front end ang inilipat sa React pahina-pahina habang ang produkto ay nanatiling live.

Binibigyan ka ng Starter ng plano: binabasa ko ang lumang front end, iminapa ang mga pahina nito at mga shared piece, inililista ang mga panganib, at inililipat ang isang maliit na pahina bilang isang gumaganang sample ng diskarte. Ang Standard ay naglilipat ng hanggang tatlong pahina o screen. Ang Advanced ay naglilipat ng hanggang walo, bumubuo ng mga shared components na kailangan nila, at sinasakop ang mga ito ng TypeScript types para sa kanilang data at tests para sa mga pangunahing daloy.

Ano ang nananatili: ang iyong backend, ang iyong mga URL at ang pag-uugali na alam ng mga user. Ano ang nagbabago: kung paano nakaayos ang code, kaya ang susunod na feature ay isusulat nang isang beses, sa isang lugar. Sa loob ng 14 araw pagkatapos ng paghahatid, aayusin ko ang anumang hindi gumagana ayon sa napagkasunduan, nang walang bayad.

Ang pagkakasunud-sunod ng pahina at ang plano ay napagkasunduan sa order chat, nang walang tawag. Ang bawat inilipat na pahina ay ipinapadala nang mag-isa, at makakakuha ka ng nakasulat na tala ng status bawat araw ng trabaho.

Mga Hakbang sa Pagkumpleto ng Iyong Proyekto
1. I-mapa ang lumang front end - Dadaan ako sa mga template, script at component, at ililista ang mga pahina, ang mga shared part at anumang mapanganib, tulad ng global state o inline scripts.
2. Pagkasunduan ang order - Makakakuha ka ng nakasulat na plano: kung aling pahina ang mauuna, kung ano ang lilipat kasama nito, at kung paano ibabahagi ng luma at bagong code ang produkto habang pareho silang umiiral.
3. Bridge - Ang bagong React o Next.js code ay naka-set up sa tabi ng lumang code, na may routing na nagpapadala sa bawat pahina sa kung sinuman ang nagmamay-ari nito.
4. Ilipat ang mga pahina nang paisa-isa - Ang bawat pahina ay muling itinatayo, inihahambing sa lumang bersyon at inililipat nang mag-isa, kaya ang isang problema ay nakakaapekto sa isang pahina, hindi sa produkto.
5. Handover - Ang mga inilipat na pahina, ang na-update na plano para sa kung ano ang natitira, at isang maikling tala sa mga pattern na susundin para sa mga susunod na pahina.