Trang web chính thức của Node: Sự kết hợp hoàn hảo giữa thiết kế, công nghệ và cộng đồng

Đương đương~vô luận là kinh ngạc hay là ngoài ý muốn, tin tưởng mọi người đều đã chú ý tới trang web chính thức của Node đã vụng trộm trở nên đẹp trai! Node gần đây đã rất năng động, không chỉ thiết kế lại trang web chính thức mới mà còn giới thiệu một linh vật được thiết kế mới. Hôm nay, chúng ta hãy xem blog Deep Learning chính thức của Node và xem lại hành trình thiết kế lại trang web chính thức với nhóm Node.

Kích thước và giới hạn Trang web chính thức của Node đã tồn tại hơn 14 năm. Thiết kế của trang chủ tải xuống và tài liệu ra mắt vào cuối năm 2011, khi phiên bản Node là 0.6.

Kể từ đó, trang web chính thức của Node đã phát triển theo nhu cầu của dự án và hiện bao gồm hơn 1.600 trang nội dung. Vào thời kỳ đỉnh cao, trang web này cung cấp các phiên bản quốc tế bằng khoảng 20 ngôn ngữ. Tên miền của Node (nodejs.org) xử lý 3 tỷ yêu cầu mỗi tháng và truyền 2GB dữ liệu.

Cố gắng sai Nỗ lực thiết kế lại trang web chính thức đầu tiên của Node bắt đầu vào năm 2019. Công việc bắt đầu với một tên miền mới (nodejs.dev) và một kho lưu trữ mới. Nhìn lại, dự án đã thất bại ngay từ đầu. Nói tóm lại, codebase này không phải là nơi cư trú vĩnh viễn của cộng đồng hoặc những người đóng góp và không thiết lập quy trình làm việc cho những người đóng góp. Mọi người đều bận rộn và sẵn sàng đóng góp thời gian, nhưng họ không muốn học một bộ công cụ thứ hai. Chương trình thiếu sự lãnh đạo bền vững.

Lái xe trong khi sửa chữa máy bay Vào năm 2022, nhóm nghiên cứu sẽ quay trở lại kho lưu trữ hiện có của họ để xem xét lại cách họ có thể xây dựng lại trang web. Các phiên bản cũ hơn của kho lưu trữ mã Node có dấu hiệu lão hóa theo nhiều cách. Thiết kế của trang web Node cũ đã lỗi thời, cấu trúc bên trong khó mở rộng và rất ít tài liệu.

Nhóm Node đã suy nghĩ cẩn thận về ngăn xếp kỹ thuật. Giai đoạn đầu tiên của thiết kế lại sử dụng Nextra, một trình tạo trang web tĩnh Next tuyệt vời. Nhưng khi các trang web phát triển, chúng tôi thấy mình thường xuyên "phá vỡ" các quy ước của Nextra, dựa vào mô hình Next cơ bản và các công cụ mạnh mẽ của Nextra trừu tượng.

Tiếp theo là quá trình tiến hóa của chọn lọc tự nhiên, được biết đến với tính linh hoạt và chức năng mạnh mẽ của nó. Ví dụ: trang web chính thức của Node mới vẫn được xây dựng tĩnh để cải thiện tốc độ và tính độc lập lưu trữ cơ bản cho người dùng cuối, nhưng tận dụng sự tái tạo tĩnh gia tăng của Next để có được nội dung động như phát hành phiên bản.

Đây là một cột mốc quan trọng - chứng minh rằng chúng ta có thể bay và sửa chữa máy bay cùng một lúc.

Thiết kế lại Quỹ OpenJS đã hào phóng hỗ trợ nhóm Node làm việc với các nhà thiết kế để thiết kế lại. Các nhà thiết kế đã mang đến thiết kế hiện đại cho các trang web Node mới, bao gồm quy trình trải nghiệm người dùng, chế độ tối/sáng, bố cục trang, cân nhắc cổng xem di động và phân chia thành phần.

Bước tiếp theo là triển khai thiết kế dưới dạng mã, tập trung vào việc xây dựng tuần tự các yếu tố thiết kế cơ bản và hệ thống phân cấp thành phần có cấu trúc. Chúng tôi đã xây dựng các biến thể của các thành phần từ ngày đầu tiên và xem xét quốc tế hóa ngay từ đầu. Chúng tôi đã chọn sử dụng Tailwind CSS, nhưng tập trung vào việc đánh dấu thiết kế và áp dụng CSS.

Orama Search làm cho tất cả nội dung của trang web của bạn trong tầm tay. Họ lập chỉ mục nội dung tĩnh của chúng tôi và cung cấp nội dung API, tài liệu học tập, bài đăng trên blog và các kết quả khác với tốc độ nhanh như chớp. Thật khó để tưởng tượng làm thế nào những người đam mê Node có thể dễ dàng truy cập tài liệu mà không có khả năng tìm kiếm mạnh mẽ này.

Các phiên bản cũ của trang web chính thức của Node đã được quốc tế hóa bằng gần 20 ngôn ngữ. Tuy nhiên, một loạt các sự kiện đáng tiếc đã khiến chúng tôi phải thiết lập lại tất cả các bản dịch. Chúng tôi sử dụng Sentry để cung cấp các công cụ báo cáo lỗi, giám sát và chẩn đoán, giúp xác định các vấn đề và cung cấp trải nghiệm tốt hơn cho người dùng.

Hỗ trợ của Vercel và Cloudflare đảm bảo trang web nhanh chóng và đáng tin cậy. Chúng tôi cũng đã đầu tư vào CI/CD Pipeline thông qua GitHub Actions để cung cấp phản hồi thời gian thực cho những người đóng góp. Điều này bao gồm kiểm tra hồi quy trực quan bằng cách sử dụng kết quả từ Chromatic và Lighthouse để đảm bảo chất lượng trang web được duy trì ở mức cao.

Lễ hội Open Source Day và Hack Beer Festival Các nỗ lực thiết kế lại trùng hợp với Ngày nguồn mở vào tháng 9 năm 2023 và Hack Oktoberfest vào tháng tới. Chúng tôi chuẩn bị cho những sự kiện này bằng cách xem "câu hỏi đầu tiên tốt" như một nhiệm vụ phát triển độc lập. Đối với lễ kỷ niệm Ngày nguồn mở, chúng tôi cũng cung cấp hướng dẫn tại chỗ để những người tham dự có thể PR vào cuối ngày.

Chỉ riêng trong lễ kỷ niệm Ngày nguồn mở, 28 tác giả đã gửi 40 yêu cầu pull. Hacker Oktoberfest nhận thêm 26 PR

Kế hoạch tương lai Việc thiết kế lại này đã đặt nền móng cho một kỷ nguyên mới cho trang web chính thức của Node. Nhưng công việc vẫn chưa hoàn thành:

Thiết kế lại trang web và mở rộng nó vào tài liệu API. Tài liệu API nằm trong một kho lưu trữ mã riêng biệt, nhưng chúng tôi dự định chuyển các phong cách được phát triển ở đây sang API. Khám phá kho lưu trữ đơn (phát triển nhiều kho) cho các trang web và tài liệu API. Điều này sẽ cải thiện các khớp nối quan trọng và giảm chi phí quản lý hai cơ sở mã độc lập. Điều chỉnh lại nỗ lực quốc tế hóa. Bản dịch trước đó không thể tiếp tục. Giải pháp Markov/MDX hạng nặng của chúng tôi đặt ra một thách thức độc đáo mà chúng tôi đang làm việc với Crowdin để giải quyết. Cải tiến liên tục quy trình CI/CD.

Bạn nghĩ gì về trải nghiệm và trải nghiệm của Node?

Để trải nghiệm Node.js nhanh chóng, hãy trải nghiệm nó với một cú nhấp chuột trên Servbay.