Từ PHP đến Tiếp theo. js. Những gì Trivago đã học được Viết lại ứng dụng web của nó

Dịch vụ tìm kiếm khách sạn Trivago viết lại giao diện người dùng trong Typescript on the Next. js, thay thế cơ sở mã PHP bằng khung JavaScript cây nhà lá vườn, Melody. Từ tháng 4 năm 2020 đến cuối năm 2021, nhóm nền tảng đã tạo, thử nghiệm và triển khai ứng dụng mới giúp giảm tới 37% kích thước trang, đồng thời tăng phát hành mã hàng ngày

Kỹ thuật là tất cả về sự đánh đổi và Tom Bartel, Trưởng nhóm Trivago Nền tảng giao diện, đã thực hiện xuất sắc việc minh họa những đánh đổi dẫn đến việc viết lại nền tảng trong bài đăng trên blog gần đây của anh ấy. Đó là một công việc to lớn, đặc biệt là khi không có gì là "sai" hoặc bị hỏng với cơ sở mã.

Cái gì đã hoạt động? . Người dùng đang tận hưởng đầy đủ chức năng trên web và di động. Có một đội ngũ kỹ sư được đào tạo với nhiều người yêu thích nhiệm vụ công việc chức năng của họ

Cái gì “không hoạt động”? . Hệ sinh thái còn nhỏ, tài liệu bị hạn chế và kỹ thuật đi đến [i. e. Google và Stack Overflow] rất hạn chế hoặc không có sự trợ giúp nào cả. Có tối đa hai nhân viên bảo trì cốt lõi với ít nhất một nhân viên trực điện thoại mọi lúc. Đó là một thách thức khi tiếp nhận nhân viên mới và một số bày tỏ lo ngại rằng họ đang học và nuôi dưỡng các kỹ năng không thể chuyển nhượng

Nhân đôi trên Melody?

…Trang trống

Nó không phải là một dự án mới nhưng nó là một dự án mới. Vì nỗ lực, được gọi nội bộ là Dự án Viết lại Ứng dụng Web [WARP], là một bản viết lại hoàn chỉnh và không phải là một bản tái cấu trúc, nên tất cả các câu hỏi mới về dự án đều nảy sinh

• thư viện. cái nào hấp dẫn nhất đối với các tiện ích, cách tính ngày, v.v…?
• Tệp CSS. làm thế nào để tổ chức?
• trạng thái ứng dụng. làm thế nào điều này sẽ được duy trì?
• truyền sự kiện. điều này sẽ diễn ra như thế nào?
• trang HTML. cái này có được tạo trước tĩnh không?
• Kết cấu. cho URL và trang
• khởi tạo ứng dụng. Nó sẽ làm việc như thế nào?
• API thành phần. Thiết kế sẽ như thế nào?

Quyết định, Quyết định

Với rất nhiều quyết định và nhóm làm việc từ xa [cộng tác từ xa vẫn được coi là mới khi dự án này bắt đầu vào tháng 4 năm 2020], các kỹ sư của Trivago đã triển khai một cách tiếp cận cực kỳ có phương pháp, thực dụng để giải quyết các câu hỏi về kỹ thuật cảm ứng và cuối cùng là đưa ra quyết định

• văn bản quyết định. tài liệu này đã thu thập và sắp xếp các sự kiện và quan điểm có liên quan của kỹ sư
• cuộc họp quyết định. một nơi để thảo luận về các quan điểm cuối cùng dẫn đến quyết định
• Chủ quyết định. quản lý tài liệu, chuẩn bị cuộc họp quyết định và đảm bảo quyết định được hình thành

Một số quyết định dễ dàng được đưa ra trong khi những quyết định khác khó giành được, một số được đưa từ tài liệu sang thử nghiệm trong khi những quyết định khác được cấu trúc lại do việc triển khai không đáp ứng được kỳ vọng ban đầu

Trong quá trình triển khai một quyết định khác mà một số nhà phát triển cảm thấy quá phức tạp, các kỹ sư của Trivago đã quyết định tiếp tục với Next. js và phản ứng

Một lời khuyên tuyệt vời đến từ quy trình viết lại lỗi và dùng thử của Trivago là hãy kiên quyết với các quyết định nhưng hãy giữ một tâm trí cởi mở và điều chỉnh hướng đi khi cần thiết. Các quyết định được đưa ra với kiến ​​thức và ý định tốt nhất có thể mang lại những hiểu biết mới trong quá trình thực hiện

gần như ở đó

Sau khi phần viết lại có đầy đủ chức năng và hữu ích cho người dùng, nó sẽ được đưa vào thế giới thực và được thử nghiệm với các bảng điều khiển, kiểm tra và so sánh đóng vai trò là hướng dẫn cho các kỹ sư để xem những gì cần chú ý

• Tương tác người dùng. Điều này có khác nhau giữa các sản phẩm không?
• Doanh thu. Ứng dụng mới có chuyển tiếp đến các trang web đặt phòng với cùng tốc độ không?
• Loại tìm kiếm. Trivago tự động điều chỉnh các loại tìm kiếm để có kết quả tốt hơn. Ví dụ: nếu tìm kiếm quá hẹp, Trivago sẽ mở rộng các tham số và thêm kết quả. Một dấu hiệu trực tiếp cho thấy có điều gì đó không ổn là sự khác biệt trong danh sách. Điều này khiến cuộc điều tra tiếp theo

Phải mất vài tháng kỹ thuật nhưng cuối cùng, công tắc đã được bật và tất cả lưu lượng truy cập của người dùng đều chuyển sang ứng dụng mới

Phần thưởng đã được gặt hái

Lợi ích người dùng

Thời gian khởi động phụ thuộc rất nhiều vào kích thước mã do Trivago vận chuyển. Vì các kỹ sư phụ thuộc rất nhiều và trả lại cho các thư viện mã nguồn mở như Next. js, Preact và react-use, họ theo dõi chặt chẽ kích thước mã

Sản phẩm mới giảm trọng lượng trang từ 2. 1 MB đến 1. 7 MB [19%] cho các trang chủ đề và từ 4. 1 MB đến 2. 6 MB [37%] cho các trang kết quả. Chuyển ứng dụng đơn trang thành nhiều trang và sử dụng tính năng tách mã tự động bằng Next. js hóa ra lại rất có lợi

Kết quả là Trivago hiện chạy mượt mà hơn trên phần cứng yếu hơn. Android 6, chiếm khoảng 0. 5% trong số tất cả các máy khách Android là phần cứng yếu nhất sử dụng ứng dụng Trivago. Thử nghiệm của họ cho thấy ứng dụng hoạt động trơn tru trên Android 6

Lợi ích dành cho nhà phát triển

Đây là một sự ràng buộc vững chắc về lý do tại sao việc viết lại bắt đầu ngay từ đầu. Cơ sở mã sạch hơn với tài liệu chất lượng, có sẵn rộng rãi cả nội bộ và về hệ sinh thái toàn cầu có sẵn để tìm kiếm trên google và Stack Overflow. Các nhà phát triển mới có thời gian làm quen dễ dàng hơn và có nhiều cảm giác quen thuộc hơn và các kỹ năng có thể chuyển đổi để phát triển

Không có bằng chứng chắc chắn về sự phát triển nhanh hơn, các yêu cầu kéo được hợp nhất hàng tháng cao hơn trong cơ sở mã mới [xem biểu đồ ở trên] với cùng số lượng kỹ sư như đã làm việc trên cơ sở lạnh cũ hơn

Hiện có mười bản phát hành mỗi ngày so với hai bản trước. Với việc dọn dẹp nhiều hơn một chút, các hệ thống kế thừa bổ sung sẽ bị tắt, do đó cho phép có nhiều tài nguyên hơn cho ứng dụng mới

Nhìn chung, việc viết lại này phải trả giá đắt và có khá nhiều khó khăn, doanh thu bị thất thoát mặc dù nó kết hợp tốt với tình trạng du lịch chậm lại vào năm 2020. Đội ngũ kỹ sư đã phát triển vượt bậc về kỹ năng kỹ thuật cũng như kỹ năng mềm

Tôi có thể sử dụng PHP với JS tiếp theo không?

NextJS có tốt cho các ứng dụng web không?

JS tiếp theo trong phát triển web là gì?

Ứng dụng JS tiếp theo là gì?