Tính tuân thủ trong hệ sinh thái khung JavaScript
Trong bài đăng trên blog giới thiệu, chúng tôi đã trình bày về những điều chúng tôi học được khi xây dựng và sử dụng các khung cũng như công cụ để phát triển và duy trì các ứng dụng web có quy mô lớn như Google Tìm kiếm, Maps, Photos, v.v. Bằng cách bảo vệ nhà phát triển khỏi việc viết mã có thể ảnh hưởng tiêu cực đến trải nghiệm người dùng, chúng tôi đã chứng minh rằng khung có thể đóng vai trò quan trọng trong việc thay đổi kết quả về hiệu suất và chất lượng ứng dụng.
Trong nội bộ Google, chúng tôi đã sử dụng thuật ngữ "Tính tuân thủ" để mô tả phương pháp này. Bài viết này trình bày cách chúng tôi dự định cấp phép nguồn mở cho khái niệm này cho hệ sinh thái khung JavaScript.
Tính tuân thủ là gì?
Tại Google, Tính tuân thủ là một sự phát triển. Các đội ngũ dựa vào một nhóm nhỏ các nhà bảo trì giàu kinh nghiệm, đã đánh giá sâu rộng các đoạn mã, gắn cờ những vấn đề ảnh hưởng đến chất lượng và khả năng bảo trì của ứng dụng, ngoài các vấn đề về độ chính xác. Để mở rộng quy mô này cho các nhóm nhà phát triển ứng dụng ngày càng phát triển, hệ thống về Tính tuân thủ đã được phát triển nhằm hệ thống hoá các phương pháp hay nhất theo cách tự động và thực thi. Điều này giúp đảm bảo tiêu chuẩn cao một cách nhất quán về chất lượng ứng dụng và khả năng duy trì cơ sở mã bất kể số lượng người đóng góp mã.
Tính tuân thủ là một hệ thống đảm bảo rằng các nhà phát triển luôn duy trì được lộ trình có đủ ánh sáng, đồng thời tạo dựng lòng tin và đảm bảo kết quả có thể dự đoán được. Điều này giúp các nhóm làm việc hiệu quả và trở nên quan trọng để mở rộng quy mô – khi các nhóm phát triển và nhiều tính năng được phát triển cùng lúc. AI của Google cho phép 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, giải phóng các vấn đề và bối cảnh luôn thay đổi trong nhiều khía cạnh như hiệu suất, khả năng tiếp cận, bảo mật, v.v. Bất cứ ai cũng có thể chọn không tuân thủ bất cứ lúc nào. Bên cạnh đó, nhóm còn có thể tuỳ chỉnh trong phạm vi mà các nhóm có thể lựa chọn thực thi bất kỳ quyết định nào mà họ quyết định cam kết.
Tính tuân thủ được dựa trên các giá trị mặc định hiệu quả và cung cấp các quy tắc có thể thực thi có thể thực thi tại thời điểm tạo. Điều này được chia thành 3 nguyên tắc sau.
1. Mặc định mạnh
Một khía cạnh cơ bản của việc tuân thủ là đảm bảo các công cụ mà nhà phát triển sử dụng có sẵn các chế độ mặc định rõ ràng. Điều này nghĩa là các giải pháp không chỉ được đưa vào khung, mà còn cả mẫu thiết kế khung giúp bạn dễ dàng thực hiện đúng và khó theo dõi chống mẫu. Khung này hỗ trợ các nhà phát triển có thiết kế ứng dụng và cấu trúc mã.
Để đạt được hiệu suất tải, bạn phải tối ưu hoá mọi tài nguyên (phông chữ, CSS, JavaScript, hình ảnh, v.v.). Đây là một thách thức phức tạp liên quan đến việc cắt bớt byte, giảm các chuyến đi trọn vòng và tách biệt những nội dung cần thiết trong lần hiển thị đầu tiên, mức độ sẵn sàng về hình ảnh và hoạt động tương tác của người dùng. Ví dụ: trích xuất CSS quan trọng và đặt mức độ ưu tiên cho các hình ảnh quan trọng.
2. Quy tắc hữu ích
Ngay cả khi đã có sẵn các phương pháp tối ưu hoá cơ bản, nhà phát triển vẫn phải đưa ra lựa chọn. Có nhiều khả năng tối ưu hoá khi xét đến mức độ cần thiết của dữ liệu đầu vào của nhà phát triển:
- Các giá trị mặc định không yêu cầu nhà phát triển nhập thông tin, chẳng hạn như dùng cùng dòng CSS quan trọng.
- Yêu cầu nhà phát triển chọn tham gia. Ví dụ: sử dụng thành phần hình ảnh do khung cung cấp để thay đổi kích thước và điều chỉnh tỷ lệ hình ảnh.
- Yêu cầu nhà phát triển chọn tham gia và tuỳ chỉnh. Ví dụ: gắn thẻ các hình ảnh quan trọng cần tải sớm.
- Không phải là một tính năng cụ thể mà là những tính năng vẫn cần nhà phát triển quyết định. Ví dụ: tránh phông chữ hoặc tập lệnh đồng bộ làm chậm trễ quá trình kết xuất sớm.
Các hoạt động tối ưu hoá đòi hỏi bất kỳ quyết định nào của nhà phát triển có thể gây rủi ro cho hiệu suất của ứng dụng. Khi các tính năng được bổ sung và nhóm của bạn mở rộng quy mô, thì ngay cả những nhà phát triển dày dạn kinh nghiệm nhất cũng không thể bắt kịp các phương pháp hay nhất liên tục thay đổi, cũng như không thể tận dụng thời gian của họ một cách hiệu quả nhất. Để đảm bảo tuân thủ, các quy tắc hữu ích phù hợp cũng quan trọng như các giá trị mặc định hiệu quả để đảm bảo ứng dụng tiếp tục đáp ứng một tiêu chuẩn nhất định ngay cả khi nhà phát triển tiếp tục thực hiện các thay đổi.
3. Thời gian ghi nhận quyền tác giả
Bạn cần sớm phát hiện và loại bỏ các vấn đề về hiệu suất trong vòng đời phát triển. Thời gian soạn thảo, trước khi cam kết mã, là thời điểm lý tưởng để phát hiện và giải quyết vấn đề. Càng phát hiện vấn đề trong vòng đời phát triển thì vấn đề càng khó giải quyết và tốn kém hơn. Mặc dù điều này áp dụng cho các vấn đề về độ chính xác, nhưng cũng đúng cho các vấn đề về hiệu suất, vì nhiều vấn đề trong số này sẽ không được giải quyết trước đây sau khi đã cam kết về cơ sở mã.
Hiện nay, hầu hết ý kiến phản hồi về hiệu suất đều nằm ngoài phạm vi thông qua tài liệu, kiểm tra một lần hoặc phản hồi quá muộn thông qua hồi quy chỉ số sau khi triển khai sang phiên bản chính thức. Chúng tôi muốn đưa vấn đề này vào thời gian biên tập.
Mức độ tuân thủ các khung
Để duy trì trải nghiệm người dùng cao đối với hiệu suất tải, bạn cần trả lời các câu hỏi sau:
- Yếu tố nào tạo nên quá trình tải tối ưu và những vấn đề thường gặp nào có thể ảnh hưởng tiêu cực đến quá trình tải?
- Giải pháp nào có thể được kết hợp mà không cần nhà phát triển cung cấp thông tin?
- Làm cách nào để đảm bảo nhà phát triển sử dụng và khai thác tối ưu các giải pháp này?
- Nhà phát triển có thể đưa ra những lựa chọn nào khác có thể ảnh hưởng đến hiệu suất tải?
- Mẫu mã nào có thể cho chúng ta biết về các lựa chọn này (số 3 và số 4 ở trên) sớm tại thời điểm đó?
- Chúng tôi có thể lập công thức nào để đánh giá các mẫu mã này? Làm cách nào để các trạng thái này hiển thị cho nhà phát triển tại thời điểm biên soạn trong khi vẫn tích hợp liền mạch vào quy trình làm việc của họ?
Để đưa mô hình Tuân thủ tại Google sang các khung nguồn mở, nhóm chúng tôi đã thử nghiệm rất nhiều trong Next.js và chúng tôi rất vui được chia sẻ tầm nhìn cũng như kế hoạch được tinh chỉnh của mình. Chúng tôi nhận ra rằng bộ quy tắc tốt nhất có thể đánh giá các mẫu mã sẽ cần phải kết hợp giữa phân tích mã tĩnh và kiểm tra động. Những quy tắc này có thể trải rộng trên nhiều nền tảng, bao gồm:
- ESLint
- TypeScript
- Các bước kiểm tra động trong máy chủ phát triển của người dùng (sau khi tạo DOM)
- Gói mô-đun (webpack)
- Công cụ CSS (vẫn khám phá)
Bằng cách tận dụng việc cung cấp các quy tắc thông qua các công cụ khác nhau, chúng tôi có thể đảm bảo các quy tắc này nhất quán nhưng cũng bao gồm mọi vấn đề về trải nghiệm người dùng ảnh hưởng trực tiếp đến hiệu suất tải. Ngoài ra, nhà phát triển cũng có thể thấy các quy tắc này vào nhiều thời điểm:
- Trong quá trình phát triển cục bộ trên máy chủ phát triển, trình duyệt và IDE của người dùng sẽ hiển thị cảnh báo, nhắc nhà phát triển thực hiện các thay đổi nhỏ về mã.
- Trong thời gian xây dựng, các vấn đề chưa được giải quyết sẽ xuất hiện lại trong thiết bị đầu cuối của người dùng
Tóm lại, các nhóm sẽ chọn những kết quả mà họ quan tâm, chẳng hạn như Các chỉ số quan trọng về trang web hoặc hiệu suất tải, đồng thời thiết lập các bộ quy tắc phù hợp để tất cả những người đóng góp mã tuân theo.
Mặc dù cách này thực sự hiệu quả với các dự án mới, nhưng không dễ dàng để nâng cấp các cơ sở mã lớn để tuân thủ toàn bộ quy tắc. Tại Google, chúng tôi có một hệ thống toàn diện để chọn không sử dụng ở nhiều cấp độ khác nhau, chẳng hạn như các dòng mã nguồn riêng lẻ, toàn bộ thư mục, cơ sở mã cũ hoặc các phần của ứng dụng hiện không đang trong quá trình phát triển. Chúng tôi đang tích cực tìm hiểu các chiến lược hiệu quả để áp dụng cho các nhóm sử dụng khung nguồn mở.
Mức độ tuân thủ trong Next.js
ESLint được các nhà phát triển JavaScript sử dụng rộng rãi. Hơn 50% ứng dụng Next.js sử dụng ESLint trong một số phần của quy trình xây dựng. Next.js v11 đã giới thiệu tính năng hỗ trợ ESLint có sẵn 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 hơn trong việc phát hiện các vấn đề thường gặp về khung trong quá trình phát triển và trong thời gian xây dựng. Điều này có thể giúp nhà phát triển khắc phục các vấn đề quan trọng trong thời gian biên soạn. Ví dụ như khi một thành phần nhất định được sử dụng hoặc không được sử dụng theo cách có thể gây hại cho hiệu suất, chẳng hạn như trong trường hợp Không có đường liên kết HTML cho trang). Hoặc nếu một phông chữ, biểu định kiểu hoặc tập lệnh nhất định có thể ảnh hưởng tiêu cực đến việc tải tài nguyên trên một trang. Ví dụ: Không có tập lệnh đồng bộ.
Ngoài ESLint, tính năng kiểm tra kiểu tích hợp trong cả quá trình phát triển và sản xuất đã được hỗ trợ trong Next.js kể từ phiên bản 9 với sự hỗ trợ của TypeScript. Nhiều thành phần do khung cung cấp (Hình ảnh, Tập lệnh, Đường liên kết) đã được xây dựng dưới dạng phần mở rộng của các phần tử HTML (<img>, <script>, <a>) nhằm cung cấp cho các nhà phát triển một phương pháp hiệu quả để thêm nội dung vào trang web. Tính năng kiểm tra kiểu hỗ trợ việc sử dụng các tính năng này một cách thích hợp bằng cách đảm bảo rằng các thuộc tính và tuỳ chọn đã chỉ định nằm trong phạm vi chấp nhận được của các giá trị và kiểu được hỗ trợ. Hãy xem chiều rộng và chiều cao bắt buộc của hình ảnh để biết ví dụ.
Lỗi bề mặt bằng thông báo ngắn và lớp phủ
Như đã đề cập trước đó, Quy tắc tuân thủ có thể xuất hiện ở nhiều khu vực. Thông báo ngắn và lớp phủ hiện đang được khám phá như một cách để hiển thị lỗi trực tiếp trên trình duyệt trong môi trường phát triển cục bộ của người dùng.
Nhiều công cụ kiểm tra và kiểm tra lỗi mà nhà phát triển dựa vào (thẻ Lighthouse, vấn đề về Công cụ của Chrome cho nhà phát triển) mang tính thụ động và cần một số hình thức tương tác của người dùng để truy xuất thông tin. Nhà phát triển có nhiều khả năng sẽ hành động hơn khi lỗi xuất hiện trực tiếp trong công cụ hiện tại của họ và khi họ đưa ra hành động cụ thể và cụ thể cần thực hiện để khắc phục vấn đề.
Sự tuân thủ trong các khuôn khổ khác
Trước tiên, chúng tôi đang khám phá tính tuân thủ trong Next.js với mục tiêu mở rộng sang các khung khác (Nuxt, Angular, v.v.). ESLint và TypeScript đã được sử dụng trong nhiều khung theo nhiều cách khác nhau, nhưng khái niệm về hệ thống thời gian chạy gắn kết ở cấp trình duyệt đang được tích cực khám phá.
Kết luận
Tính tuân thủ sẽ tập hợp các phương pháp hay nhất thành các tập hợp quy tắc mà nhà phát triển có thể vận dụng được dưới dạng các mẫu mã đơn giản. Đội ngũ Aurora đã tập trung vào hiệu suất tải, nhưng các phương pháp hay nhất khác, chẳng hạn như khả năng hỗ trợ tiếp cận và bảo mật cũng có thể áp dụng.
Việc tuân thủ các quy tắc tuân thủ sẽ dẫn đến kết quả có thể dự đoán được, và việc đạt được tiêu chuẩn cao cho trải nghiệm người dùng có thể trở thành tác dụng phụ của việc xây dựng nhóm công nghệ. Việc tuân thủ giúp các nhóm làm việc hiệu quả và đảm bảo tiêu chuẩn chất lượng cao cho ứng dụng, ngay cả khi các nhóm và cơ sở mã phát triển theo thời gian.