Tại Chrome Dev Summit 2014, có rất nhiều chủ đề và API hoàn toàn mới được đề cập, nhưng không phải tất cả đều là những chủ đề mới mẻ và hấp dẫn.
Nếu là một Nhà phát triển web mới hoặc thậm chí là một nhà phát triển giàu kinh nghiệm sắp bắt đầu khám phá các API mới, thì rất có thể bạn sẽ làm theo 3 bước sau: tìm hiểu, xây dựng và lặp lại.
Matt Gaunt trình bày những nỗ lực đang diễn ra của nhóm Nền tảng nhà phát triển Chrome để giải quyết những vấn đề này.
Học
Kiến thức cơ bản về web là một bộ tài liệu dựa trên trường hợp sử dụng, bao gồm nhiều chủ đề. Mục tiêu cốt lõi là giúp các nhà phát triển có ít hoặc không có kiến thức triển khai các phương pháp hay nhất nhanh nhất có thể.
Một trong những mục tiêu chính của khoá học Kiến thức cơ bản về web là đảm bảo rằng nếu bạn mới làm quen với một chủ đề, hướng dẫn sẽ giúp bạn giảm thiểu tình trạng "bị tê liệt do quá nhiều lựa chọn". Addy Osmani đã trình bày vấn đề này một cách hoàn hảo trên Pastry Box.
Nếu bạn phát hiện thấy vấn đề nào đó với trang web hoặc nội dung của trang web, hoặc bạn muốn Kiến thức cơ bản về web đề cập đến một chủ đề cụ thể, vui lòng cho chúng tôi biết bằng cách gửi ý kiến phản hồi trên GitHub.
Tạo
Để giúp bạn bắt đầu một dự án web mới, chúng tôi đã tạo Bộ công cụ khởi động web. Ứng dụng này có mọi thứ bạn cần:
- Quy trình xây dựng vững chắc
- HTML nguyên mẫu
- Hướng dẫn về kiểu
Quy trình xây dựng
Đối với những người mới làm quen với quy trình xây dựng, cách dễ nhất để nghĩ về quy trình xây dựng là xem đó là một chương trình lấy một tập hợp các tệp và thực hiện một số tác vụ nhất định trên các tệp đó, đồng thời xuất ra các phiên bản mới ở một vị trí khác. Các tác vụ này tối ưu hoá tệp để cải thiện thời gian tải, kiểm tra lỗi có thể xảy ra hoặc xử lý các tác vụ có thể tự động hoá.
Trong Web Starter Kit, chúng ta có các quy trình sau:
Chúng ta rút gọn và nối CSS và JavaScript để trình duyệt có thể tìm nạp tệp nhanh chóng, JavaScript cũng được chạy thông qua JSHint để kiểm tra các phương pháp hay nhất về JavaScript và các lỗi lập trình phổ biến. Hình ảnh được rút gọn bằng imagemin và bạn có thể giảm kích thước tệp rất nhiều bằng cách sử dụng tính năng này. Chúng tôi cũng có một quy trình để tạo CSS hướng dẫn kiểu.
Mã nguyên mẫu cho HTML nhiều thiết bị
Tập hợp HTML đầu tiên mà bạn viết cho một trang mới khá chuẩn và có thể bạn sẽ có một số cách để nhanh chóng lấy một tệp HTML gốc hoạt động tốt trên nhiều thiết bị và kích thước màn hình.
Trong Bộ khởi động web, chúng tôi muốn thêm tính năng hỗ trợ cho mọi tính năng làm mờ ranh giới giữa nền tảng và trang web của bạn. Vì vậy, chúng tôi đã thêm tính năng hỗ trợ thêm vào màn hình chính và màn hình chờ cho Android, Windows Phone, iOS và Opera Coast.
Hướng dẫn về kiểu
Phần cuối cùng của Bộ khởi động web là Hướng dẫn sử dụng.
Điều này giúp mọi dự án mới có một bộ kiểu và thành phần mặc định tuyệt vời, khuyến khích việc phát triển dựa trên kiểu. Bạn có thể thay đổi các kiểu hiện có cho các phần tử và thêm kiểu của riêng mình.
Trong phiên bản tiếp theo của WSK, dự kiến phát hành vào đầu năm tới, chúng tôi đang nỗ lực để đơn giản hoá cách hướng dẫn kiểu kết hợp với nhau và chuyển sang giao diện material design. Mattđã giới thiệu mộtbản mô phỏng ban đầu về giao diện này tại Chrome Dev Summit và bạn có thể xem ví dụ bên dưới.
Làm lại
Sau khi bắt đầu áp dụng kiến thức mới vào thực tế, bạn nên sử dụng DevTools để gỡ lỗi, cải thiện và duy trì công việc của mình.
Có một số tính năng mới rất lớn sẽ ra mắt trong DevTools và Matt sẽ xem xét các tính năng mới sau.
Chế độ thiết bị
Chế độ thiết bị là một phần mới trong Công cụ cho nhà phát triển, cho phép bạn nhanh chóng xem cách trang web hoạt động trên nhiều thiết bị di động, đồng thời xem các truy vấn nội dung nghe nhìn trong CSS.
Một trong những tính năng tuyệt vời của Chế độ thiết bị là khả năng điều tiết tốc độ mạng, cho phép bạn mô phỏng trải nghiệm của người dùng trên kết nối GPRS, EDGE, 3G, DSL hoặc Wifi.
Trình phân tích tài nguyên vẽ
Nếu từng mở thẻ tiến trình và nhấn nút ghi, bạn có thể đã thấy một số sự kiện vẽ xảy ra trong thác nước. Thông thường, đây sẽ là một hộp đen mà bạn không thể biết lý do trình duyệt đã làm hoặc đang làm gì.
Trình phân tích tài nguyên vẽ không cung cấp cho bạn thêm thông tin về những gì trình duyệt đang làm trong quá trình vẽ đó.
Theo dõi trạng thái vô hiệu
Giờ đây, DevTools sẽ đưa ra lý do tại sao một lượt vẽ hoặc bố cục xảy ra bất cứ khi nào có thể. Điều này sẽ hữu ích cho bất kỳ ai tìm hiểu về tiến trình, hành vi của trình duyệt và cho phép bạn tối ưu hoá mã để ngăn chặn các vấn đề về hiệu suất.
Chế độ xem biểu đồ hình ngọn lửa
Đây là một cách rất khác để xem thông tin có trong tiến trình. Nhờ đó, bạn có thể dễ dàng xem các tác vụ chồng chéo như thế nào và hành vi của trình duyệt đã xảy ra do các tác vụ khác.
Trình xem khung
Khi ở chế độ xem Biểu đồ hình ngọn lửa, bạn có thể chọn một khung cụ thể và trong khung này, bạn sẽ có thể khám phá những phần tử nào trong trang đã được quảng bá lên lớp tổng hợp cũng như lý do chúng được quảng bá.
Tìm hiểu. Xây dựng. Làm lại
Đây là một số nỗ lực của nhóm Chrome nhằm giúp nhà phát triển bắt kịp tốc độ phát triển web. Vì vậy, hãy nhớ tham khảo Kiến thức cơ bản về web, Bộ công cụ khởi động web và các tính năng mới trong Công cụ dành cho nhà phát triển Chrome.