Tôi sẽ chuyển giao diện người dùng jQuery hoặc React cũ của bạn sang React hoặc Next.js hiện đại, từng trang một

Một số sản phẩm hoạt động và kiếm tiền, nhưng giao diện người dùng của chúng trở nên khó thay đổi: jQuery trải rộng trên các mẫu, các thành phần lớp React từ nhiều năm trước hoặc một ứng dụng Next.js vẫn trên Pages Router. Việc viết lại hoàn toàn sẽ đóng băng sản phẩm trong nhiều tháng. Tôi làm điều ngược lại: mã cũ và mã mới chạy song song, và các trang di chuyển từng trang một, vì vậy không bao giờ có một ngày chuyển đổi lớn cho người dùng của bạn.

Tôi đã làm chính xác điều này trong một dự án trước đây theo NDA: một giao diện người dùng jQuery được chuyển sang React từng trang một trong khi sản phẩm vẫn hoạt động.

Gói khởi đầu cung cấp cho bạn kế hoạch: Tôi đọc giao diện người dùng cũ, lập bản đồ các trang và các phần dùng chung của nó, liệt kê các rủi ro và di chuyển một trang nhỏ làm mẫu hoạt động của phương pháp. Gói tiêu chuẩn di chuyển tối đa ba trang hoặc màn hình. Gói nâng cao di chuyển tối đa tám trang, xây dựng các thành phần dùng chung mà chúng cần và bao gồm chúng với các kiểu TypeScript cho dữ liệu của chúng và các kiểm thử cho các luồng chính.

Những gì còn lại: phần phụ trợ của bạn, URL của bạn và hành vi mà người dùng biết. Những gì thay đổi: cách mã được tổ chức, để tính năng tiếp theo được viết một lần, ở một nơi. Trong 14 ngày sau khi bàn giao, tôi sẽ sửa bất kỳ điều gì không hoạt động như chúng tôi đã thỏa thuận, miễn phí.

Thứ tự trang và kế hoạch được thỏa thuận trong cuộc trò chuyện đặt hàng, không cần gọi điện. Mỗi trang đã di chuyển được gửi riêng và bạn nhận được một ghi chú trạng thái bằng văn bản mỗi ngày làm việc.

Các bước để hoàn thành dự án của bạn
1. Lập bản đồ giao diện người dùng cũ - Tôi xem xét các mẫu, tập lệnh và thành phần, và liệt kê các trang, các phần dùng chung và bất kỳ điều gì rủi ro, như trạng thái toàn cục hoặc tập lệnh nội tuyến.
2. Thỏa thuận thứ tự - Bạn nhận được một kế hoạch bằng văn bản: trang nào đi trước, những gì di chuyển cùng với nó và cách mã cũ và mã mới chia sẻ sản phẩm trong khi cả hai cùng tồn tại.
3. Cầu nối - Mã React hoặc Next.js mới được thiết lập bên cạnh mã cũ, với định tuyến gửi mỗi trang đến bên nào sở hữu nó.
4. Di chuyển từng trang một - Mỗi trang được xây dựng lại, so sánh với phiên bản cũ và chuyển đổi riêng, để một vấn đề ảnh hưởng đến một trang, không phải toàn bộ sản phẩm.
5. Bàn giao - Các trang đã di chuyển, kế hoạch cập nhật cho những gì còn lại và một ghi chú ngắn về các mẫu cần tuân theo cho các trang tiếp theo.