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ó
Trivago, một công ty cung cấp dịch vụ tìm kiếm khách sạn, đã cập nhật giao diện người dùng của mình bằng cách viết nó trong Typescript on the Next. js, thay thế cơ sở mã PHP trên khung JavaScript tùy chỉnh, Melody. Nhóm nền tảng đã phát triển, thử nghiệm và triển khai ứng dụng mới từ tháng 4 năm 2020 đến cuối năm 2021, giúp giảm kích thước trang tới 37% trong khi tăng phát hành mã hàng ngày Show
Đó là một công việc to lớn, đặc biệt là khi cơ sở mã vốn không có gì "sai" hoặc bị hỏng, và Tom Bartel, Trưởng nhóm Trivago Nền tảng giao diện, đã thực hiện một công việc tuyệt vời khi làm sáng tỏ những đánh đổi dẫn đến việc viết lại nền tảng trong bài đăng blog gần đây nhất của anh ấy Cái gì đã hoạt động? . Có một đội ngũ kỹ sư lành nghề, và nhiều người trong số họ hài lòng với trách nhiệm công việc thực tế của họ Điều "không hoạt động" là hệ sinh thái nhỏ, tài liệu ít ỏi và các phương pháp hay nhất về kỹ thuật (tức là. Google và Stack Overflow) cung cấp rất ít hoặc không hỗ trợ. Rất khó để 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 giao. Có nhiều nhất hai nhân viên bảo trì cốt lõi, với ít nhất một nhân viên luôn túc trực Nhân đôi trên Melody? …Trang trốngNỗ lực này, được biết đến với tên 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, vì vậy tất cả các câu hỏi về dự án mới đều xuất hiện mặc dù đó không phải là một dự án hoàn toàn mới
Quyết định, Quyết địnhKhi dự án bắt đầu vào tháng 4 năm 2020, có rất nhiều quyết định phải đưa ra và nhóm phải làm việc từ xa (cộng tác từ xa vẫn còn mới vào thời điểm đó), vì vậy các kỹ sư của Trivago đã áp dụng một chiến lược rất có phương pháp và thiết thực để giải quyết vấn đề
Một số quyết định rất đơn giản để đưa ra, trong khi những quyết định khác đòi hỏi rất nhiều nỗ lực. Một số đi thẳng từ tài liệu đến thử nghiệm, trong khi một số khác phải làm lại vì việc triển khai không đạt được mục tiêu ban đầu Các kỹ sư của Trivago đã chọn tiếp tục với Tiếp theo. js và React trong khi triển khai một lựa chọn khác mà một số nhà phát triển thấy là quá phức tạp Đưa ra quyết định với kiến thức và ý định tốt nhất có thể dẫn đến những hiểu biết mới trong quá trình triển khai, vì vậy, điều quan trọng là phải luôn cởi mở và điều chỉnh hướng đi khi cần thiết. Lời khuyên tuyệt vời này đến từ quá trình viết lại bản dùng thử và lỗi của Trivago gần như ở đóViệc viết lại đã được thử nghiệm trong thế giới thực khi nó có đầy đủ chức năng và hữu ích cho người dùng. Bảng điều khiển, kiểm tra và so sánh được dùng làm hướng dẫn cho các kỹ sư để xác định những gì cần chú ý
Sau nhiều tháng nghiên cứu kỹ thuật, công tắc cuối cùng đã được bật và tất cả lưu lượng truy cập của người dùng đã được chuyển đến ứng dụng mới Phần thưởng đã được gặt háiLợi ích người dùngCác kỹ sư của Trivago phụ thuộc rất nhiều và đóng góp vào các thư viện mã nguồn mở như Next, vì vậy thời gian khởi động bị ảnh hưởng nhiều bởi số lượng mã được gửi đi. Họ sử dụng js, preact, và react và giám sát chặt chẽ kích thước mã Trọng lượng trang đã được giảm bởi sản phẩm mới từ 2. 1 MB đến 1. 7 MB (19%) cho các trang chủ đề và 4. 1 MB đến 2 MB cho các trang khácTạo ứng dụng một trang thành nhiều trang và sử dụng tính năng chia mã tự động của Next đã giảm kích thước xuống còn 6 MB (37%) cho các trang kết quả. Js tỏ ra rất hữu ích Trivago hiện hoạt động tốt hơn trên phần cứng yếu hơn nhờ Android 6, chiếm khoảng 0. Thử nghiệm của Trivago cho thấy ứng dụng hoạt động trơn tru trên các máy khách Android 6, chiếm 5% tổng số người dùng Android Lợi ích dành cho nhà phát triểnCơ sở mã sạch hơn với tài liệu tuyệt vời, có thể truy cập 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—đây là sự ràng buộc chặt chẽ với động lực ban đầu để viết lại. Giới thiệu đơn giản hơn đối với các nhà phát triển mới và có nhiều cơ hội hơn để xây dựng các kỹ năng quen thuộc và có thể chuyển đổi Mặc dù số lượng kỹ sư làm việc trên cơ sở mã mới bằng với số lượng kỹ sư đang làm việc trên cơ sở lạnh cũ, nhưng số lượng yêu cầu kéo được hợp nhất hàng tháng trong cơ sở mã mới cao hơn (xem biểu đồ ở trên) 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, giúp cung cấp nhiều tài nguyên hơn cho ứng dụng mới. Hiện có mười bản phát hành mỗi ngày trái ngược với hai bản trước Nhìn chung, việc viết lại lớn này phải trả giá đắt và gặp nhiều khó khăn; . Đội ngũ kỹ sư cải thiện đáng kể cả về kỹ thuật và kỹ năng mềm 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ốngNó 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
Quyết định, Quyết địnhVớ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
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ú ý
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áiLợi ích người dùngThờ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?Sử dụng cấu hình được mô tả trong README, bạn có thể sử dụng kho lưu trữ PHP làm chương trình phụ trợ và tìm nạp dữ liệu từ đó cho ứng dụng NextJS của mình .
NextJS có tốt cho các ứng dụng web không?JS tiếp theo là một ý tưởng tuyệt vời cho nhiều loại trang web và ứng dụng , nhưng có một số trường hợp nó thực sự tỏa sáng và tận dụng hết các tính năng của nó. Nói chung, Next JS là một sự lựa chọn hoàn hảo khi SSR trở nên quan trọng hơn SSG.
JS tiếp theo trong phát triển web là gì?js là khung phát triển web nguồn mở do Vercel tạo cho phép các ứng dụng web dựa trên React có kết xuất phía máy chủ và tạo các trang web tĩnh .
Ứng dụng JS tiếp theo là gì?Tiếp theo. js là khung React cung cấp cho bạn các khối xây dựng để tạo ứng dụng web . Theo khuôn khổ, chúng tôi có nghĩa là Tiếp theo. js xử lý công cụ và cấu hình cần thiết cho React, đồng thời cung cấp cấu trúc, tính năng và tối ưu hóa bổ sung cho ứng dụng của bạn.
|