Tại Hội nghị Nhà phát triển Chrome 2014, đã có rất nhiều chủ đề và thương hiệu đề cập đến API mới, nhưng không phải tất cả đều là về API mới và nổi bật.
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 tay vào khám phá các API mới, có thể bạn sẽ thực hiện 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 không ngừng của nhóm Nền tảng nhà phát triển Chrome để giải quyết những vấn đề này.
Tìm hiểu
Kiến thức cơ bản về web là một bộ tài liệu hướng dẫn từng trường hợp sử dụng về nhiều chủ đề. Mục tiêu cốt lõi là giúp các nhà phát triển từ khi có ít kiến thức hoặc chưa có kiến thức gì về việc triển khai các phương pháp hay nhất một cách nhanh nhất có thể.
Một trong những mục tiêu chính của 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 này sẽ giảm nhiều nhất có thể "bê liệt lựa chọn". Addy Osmani sẽ trình bày một cách hoàn hảo về vấn đề này tại Templatery Box.
Nếu bạn phát hiện bất kỳ vấn đề nào với trang web hoặc nội dung của trang web hoặc bạn muốn các Nguyên tắc cơ bản về web cho 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 dự án web mới, chúng tôi đã tạo Bộ công cụ dành cho người mới bắt đầu 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 tạo thành phần
- Tạo kiểu
Quy trình xây dựng
Đối với những người chưa quen với việc xây dựng quy trình, cách dễ nhất để hình dung quy trình xây dựng là xem quy trình đó như một chương trình chứa 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 chúng và cho ra các phiên bản mới ở một vị trí khác. Các nhiệm vụ 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 công việc có thể được tự động hoá.
Trong Bộ công cụ dành cho người mới bắt đầu web, chúng tôi có các quy trình sau:
Chúng tôi 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 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 giảm kích thước bằng imagemin và bạn có thể giảm đáng kể kích thước tệp 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 styleguides.
Tạo khối cho HTML nhiều thiết bị
Bộ HTML đầu tiên bạn viết cho một trang mới khá là tiêu chuẩn và có nhiều cơ hội là bạn sẽ có một số cách để nhanh chóng lưu giữ một tệp HTML gốc hoạt động tốt trên nhiều thiết bị và kích cỡ màn hình.
Trong Bộ công cụ dành cho người mới bắt đầu web, chúng tôi muốn hỗ trợ thêm mọi tính năng giúp 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 đã hỗ trợ tính năng thêm vào màn hình chính cũng như màn hình chờ cho Android, Windows Phone, iOS và Opera Coast.
Tạo kiểu
Phần cuối cùng của Bộ công cụ dành cho người mới bắt đầu web là Styleguide.
Điều này cung cấp cho mọi dự án mới một tập hợp tuyệt vời các kiểu và thành phần mặc định khuyến khích phát triển dựa trên kiểu. Bạn có thể thay đổi kiểu hiện có thành 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 ra mắt vào đầu năm sau, chúng tôi đang nỗ lực để đơn giản hoá cách thức phối hợp các định dạng (styleguide) với nhau cũng như chuyển sang giao diện thiết kế Material Design. Mattđã đưa rabản mô phỏng sớm về những gì có thể xảy ra tại Hội nghị Nhà phát triển Chrome và bạn có thể xem một 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 Công cụ cho nhà phát triển để 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 quan trọng xuất hiện trong Công cụ cho nhà phát triển và Matt đã xem xét các tính năng mới sau đây.
Chế độ thiết bị
Chế độ thiết bị là một mục 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 của mình hoạt động trên nhiều thiết bị di động, đồng thời xem các truy vấn phương tiệ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ẻ dòng thời gian và nhấn nút ghi, thì có thể bạn đã thấy một số sự kiện hiển thị 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 tại sao trình duyệt lại thực hiện hoặc trình duyệt đó đ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 thực hiện trong thời gian hiển thị đó.
Theo dõi vô hiệu hoá
Công cụ cho nhà phát triển hiện đã đưa ra lý do tại sao việc vẽ hoặc bố cục xuất hiện bất cứ khi nào có thể. Điều này hữu ích cho bất cứ 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ó sẵn trong dòng thời gian. Điều này giúp bạn dễ dàng xem cách các nhiệm vụ trùng lặp 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 chế độ này, bạn sẽ có thể khám phá những thành phần trong trang đã được nâng cấp lên lớp tổng hợp cũng như lý do những thành phần đó được quảng bá.
Học hỏi. 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ớ xem Kiến thức cơ bản về web, Bộ công cụ dành cho người mới bắt đầu web và các tính năng mới trong Công cụ của Chrome cho nhà phát triển.