Trong nhóm Chrome, chúng tôi quan tâm đến trải nghiệm người dùng và sự phát triển của hệ sinh thái web. Chúng tôi muốn người dùng có trải nghiệm tốt nhất có thể trên web, không chỉ với tài liệu tĩnh mà còn khi họ sử dụng các ứng dụng phong phú, có tính tương tác cao.
Các công cụ và khung nguồn mở đóng vai trò quan trọng trong việc giúp nhà phát triển xây dựng ứng dụng hiện đại cho web, đồng thời hỗ trợ trải nghiệm tốt cho nhà phát triển. Các khung và công cụ này hỗ trợ các công ty thuộc mọi quy mô, cũng như các cá nhân xây dựng ứng dụng web.
Chúng tôi tin rằng khung cũng có thể đóng vai trò quan trọng trong việc giúp nhà phát triển giải quyết các khía cạnh chất lượng quan trọng như hiệu suất, khả năng hỗ trợ tiếp cận, tính bảo mật, mức độ sẵn sàng của thiết bị di động. Thay vì yêu cầu mọi nhà phát triển và chủ sở hữu trang web trở thành chuyên gia về những lĩnh vực này và bắt kịp các phương pháp hay nhất liên tục thay đổi, khung có thể hỗ trợ những phương pháp này bằng các giải pháp tích hợp. Điều này tạo điều kiện và giúp các nhà phát triển tập trung vào việc xây dựng các tính năng sản phẩm.
Tóm lại, tầm nhìn của chúng tôi là việc chất lượng trải nghiệm người dùng cao sẽ trở thành tác dụng phụ khi xây dựng ứng dụng cho web.
Aurora: sự cộng tác giữa Chrome và các công cụ và khung web nguồn mở
Trong gần 2 năm, chúng tôi đã hợp tác với một số khung phổ biến nhất như Next.js, Nuxt và Angular, nhằm cải thiện hiệu suất web. Chúng tôi cũng đã tài trợ cho các công cụ và thư viện phổ biến như Vue, ESLint, webpack. Hôm nay, chúng tôi sẽ đặt tên cho nỗ lực này là Aurora.
Cực quang là hiện tượng ánh sáng tự nhiên lấp lánh trên bầu trời. Trong lúc cố gắng giúp trải nghiệm người dùng được xây dựng bằng khung trở nên lung linh và toả sáng hơn, chúng tôi cho rằng tên này là một lựa chọn phù hợp.
Trong những tháng tới, chúng tôi sẽ chia sẻ nhiều thông tin hơn về Aurora. Đây là sự cộng tác giữa một nhóm nhỏ kỹ sư Chrome (tên nội bộ là WebSDK) và các tác giả khung. Mục tiêu của chúng tôi là mang lại trải nghiệm người dùng tốt nhất có thể cho các ứng dụng phát hành chính thức, bất kể bạn đang hiển thị trên trình duyệt nào.
Chiến lược của chúng tôi là gì?
Tại Google, chúng tôi đã học được rất nhiều điều khi sử dụng khung và công cụ để xây dựng và duy trì các ứng dụng web có quy mô lớn như Google Tìm kiếm, Maps, Tìm kiếm hình ảnh, Google Photos, v.v. Chúng tôi đã khám phá ra cách khung đóng vai trò quan trọng đối với chất lượng ứng dụng dễ dự đoán thông qua việc cung cấp các giá trị mặc định mạnh và công cụ nhất định.
Khung có một ưu điểm riêng để ảnh hưởng đến cả DX và UX vì chúng trải rộng trên toàn bộ hệ thống: ứng dụng và máy chủ, môi trường phát triển và sản xuất, đồng thời tích hợp các công cụ như trình biên dịch, trình đóng gói, linter, v.v.
Khi các giải pháp được đưa vào khung, các nhóm nhà phát triển có thể sử dụng các giải pháp này và tập trung thời gian vào những điều quan trọng nhất đối với sản phẩm, đó là cung cấp các tính năng tuyệt vời cho người dùng.
Tuy chúng tôi nỗ lực cải thiện các công cụ hoạt động trong mọi lớp của ngăn xếp, nhưng các khung như Next.js, Nuxt và Angular CLI vẫn quản lý mọi bước trong vòng đời của ứng dụng. Vì lý do này, và trên thực tế, việc áp dụng React là lớn nhất trong hệ sinh thái khung giao diện người dùng cốt lõi, nên hầu hết hoạt động tối ưu hoá của chúng tôi đã bắt đầu bằng cách chứng minh trong Next.js trước khi mở rộng sang phần còn lại của hệ sinh thái.
Aurora hỗ trợ thành công trên quy mô lớn bằng cách đưa các giải pháp vào lớp phù hợp trong nhóm công nghệ phổ biến. Bằng cách thu hẹp khoảng cách giữa các trình duyệt và khung, API này cho phép chất lượng cao trở thành tác dụng phụ của việc xây dựng cho web, đồng thời hoạt động như một vòng lặp phản hồi để cải thiện nền tảng web.
Quy trình làm việc của chúng tôi là gì?
Các nguyên tắc của chúng tôi trong cách Aurora kết nối các trình duyệt và hệ sinh thái nhà phát triển là: khiêm tốn, tò mò, câu hỏi khoa học và chủ nghĩa thực dụng. Chúng tôi làm việc với các tác giả của khung về các điểm cải tiến, cộng tác với cộng đồng và tiến hành thẩm định trước khi thực hiện bất kỳ thay đổi nào.
Sau đây là tóm tắt các bước chúng tôi thực hiện cho bất kỳ tính năng mới nào mà chúng tôi phát triển:
- Xác định những vấn đề mà người dùng gặp phải trong một hệ thống phổ biến bằng ứng dụng đại diện.
- Các giải pháp nguyên mẫu giải quyết vấn đề này, tập trung vào "mặc định hiệu quả".
- Xác minh tính năng bằng một ngăn xếp khung khác để đảm bảo tính năng có thể thích ứng.
- Xác thực tính năng này bằng cách thử nghiệm trong một số ứng dụng chính thức, thường là bằng kiểm thử hiệu suất trong phòng thí nghiệm.
- Thúc đẩy thiết kế bằng quy trình RFC, giải quyết ý kiến phản hồi của cộng đồng.
- Đưa đối tượng vào một ngăn xếp phổ biến, thường xuất hiện phía sau một lá cờ.
- Bật tính năng này trong một ứng dụng chính thức đại diện để đánh giá chất lượng và tích hợp quy trình làm việc của nhà phát triển.
- Đo lường mức độ cải thiện hiệu suất bằng cách theo dõi các chỉ số trong các ứng dụng sản xuất đại diện đã sử dụng tính năng này hoặc đã nâng cấp.
- Bật tính năng này làm tính năng mặc định trong ngăn xếp, nhờ đó, tất cả những người dùng khi nâng cấp đều sẽ được hưởng lợi.
- Sau khi chứng minh được, hãy làm việc với các khung bổ sung để sử dụng tính năng đó.
- Xác định lỗ hổng trong nền tảng web bằng vòng hồi tiếp.
- Hãy chuyển sang các bài toán tiếp theo.
Các công cụ và trình bổ trợ cơ bản (webpack, Partner, ESLint, TypeScript, v.v.) được dùng chung trên nhiều khung. Điều này giúp tạo hiệu ứng gợn sóng, ngay cả khi đóng góp vào một ngăn xếp khung.
Ngoài ra, Quỹ khung Chrome hỗ trợ các công cụ và thư viện nguồn mở bằng vốn tài trợ. Mặc dù chúng tôi hy vọng có đủ sự trùng lặp trong các vấn đề và tầng giải pháp với những nỗ lực ở trên để dịch sang các khung và công cụ khác, chúng tôi biết mình có thể làm được nhiều hơn. Để đạt được mục tiêu đó, chúng tôi muốn góp phần đảm bảo các thư viện và khung giúp nhà phát triển gặt hái thành công. Đó là một lý do khiến chúng tôi sẽ tiếp tục đầu tư vào Quỹ khung Chrome. Đến nay, công cụ này đã hỗ trợ công việc cho Webpack 5, Nuxt cũng như hiệu suất và cải tiến cho ESLint.
Cho đến nay, tác phẩm của chúng ta đã giúp mở ra những gì?
Công việc của chúng tôi tập trung vào tối ưu hoá cơ bản cho các tài nguyên như hình ảnh, JS, CSS, phông chữ. Chúng tôi đã vận chuyển một số tính năng tối ưu hoá để cải thiện các chế độ mặc định của nhiều khung, bao gồm:
- Một thành phần Hình ảnh trong Next.js đóng gói các phương pháp hay nhất để tải hình ảnh, sau đó cộng tác với Nuxt. Việc sử dụng thành phần này đã giúp cải thiện đáng kể thời gian hiển thị và sự thay đổi bố cục (ví dụ: giảm 57% Thời gian hiển thị nội dung lớn nhất và giảm 100% Điểm số tổng hợp về mức thay đổi bố cục trên nextjs.org/give).
- Tự động chèn nội dung khai báo phông chữ CSS cho web tại thời điểm xây dựng. Tính năng này đã có mặt trong Angular (Google Fonts) và Next.js (Google Fonts và Adobe Fonts) dẫn đến những điểm cải tiến đáng chú ý đối với Thời gian hiển thị nội dung lớn nhất và Nội dung đầu tiên hiển thị (ví dụ).
- Cùng dòng CSS quan trọng bằng cách sử dụng Critters trong cả Angular và Next.js để giảm thời gian hiển thị. Cải thiện điểm hiệu suất của Lighthouse trong một ứng dụng Angular quy mô lớn, điển hình khi được kết hợp với tính năng cùng dòng CSS phông chữ.
- Hỗ trợ ESLint ngay lập tức trong Next.js bao gồm một trình bổ trợ tuỳ chỉnh và cấu hình có thể chia sẻ để giúp bạn dễ dàng phát hiện các vấn đề thường gặp liên quan đến khung tại thời điểm tạo bản dựng, mang lại hiệu suất tải dễ dự đoán hơn.
- Giới thiệu về lớp lại hiệu suất tích hợp sẵn trong Tạo ứng dụng React và Next.js để cho phép bạn dễ dàng hiểu rõ hơn về hiệu suất của trang thông qua các chỉ số quan trọng về trang web và các chỉ số tuỳ chỉnh khác.
- Phân đoạn chi tiết được đưa vào Next.js và Gatsby, giúp giảm kích thước gói từ 30 đến 70% trong khi vẫn cải thiện hiệu suất lưu vào bộ nhớ đệm. Đây đã trở thành tuỳ chọn mặc định trong Webpack 5.
- Một đoạn polyfill riêng biệt dành cho các trình duyệt cũ, cộng tác với nhóm Next.js để cải thiện kích thước gói trên các trình duyệt hiện đại.
Tất cả các tính năng này đều đã được bật tự động theo mặc định hoặc chỉ cần một lựa chọn sử dụng đơn giản. Điều này là rất cần thiết để đảm bảo rằng nhà phát triển có thể dễ dàng thu được lợi ích mà không khiến quy trình công việc trở nên phức tạp.
Google có kế hoạch gì cho năm 2021?
Trong thời gian còn lại của năm nay, chúng tôi sẽ tập trung vào việc giúp các ngăn xếp khung cải thiện trải nghiệm người dùng và hiệu suất của chúng đối với các chỉ số như Các chỉ số quan trọng về trang web. Công việc này sẽ bao gồm:
- Sự tuân thủ để thực thi các phương pháp hay nhất. Hãy xem bài đăng trên blog để tìm hiểu thêm.
- Tối ưu hoá hiệu suất tải ban đầu bằng cách xây dựng các dự án cộng tác của chúng tôi để tối ưu hoá Hình ảnh, Phông chữ và CSS quan trọng.
- Tải tập lệnh của bên thứ ba (3P) với tác động hiệu suất tối thiểu bằng cách xây dựng trên nền tảng công việc của chúng tôi trên thành phần Tập lệnh, đồng thời nghiên cứu chuyên sâu về cách tốt nhất để đặt hàng và trình tự bên thứ ba.
- Hiệu suất JavaScript trên quy mô lớn (ví dụ: hỗ trợ Các thành phần máy chủ phản ứng trong Next.js).
Nhóm chúng tôi sẽ đăng thông tin thường xuyên hơn trên RFC và tài liệu thiết kế về những ý tưởng này để mọi khung hoặc nhà phát triển muốn làm theo đều có thể làm theo.
Kết luận
Nhóm Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie và mong muốn tiếp tục cải thiện trải nghiệm người dùng theo mặc định và kết hợp một cách chặt chẽ với cộng đồng người dùng Nux. Theo thời gian, chúng tôi sẽ tăng cường mức độ tương tác để cung cấp thêm nhiều khung và công cụ hơn nữa. Hãy theo dõi không gian này để xem thêm các bài đăng trên blog, các cuộc trò chuyện và RFC của nhóm chúng tôi trong năm tới :)