Hôm nay, chúng tôi muốn chia sẻ thêm về hành trình của Chrome và Astro thông qua API Chuyển đổi khung hiển thị. Điều này bao gồm cách cộng đồng Astro đón nhận và thử nghiệm sớm với API, nêu bật những khả năng cho cộng đồng rộng lớn hơn. Chúng tôi cũng rất vui mừng được chia sẻ thêm về tính năng hỗ trợ mới, tích hợp sẵn cho hiệu ứng Chuyển đổi khung hiển thị trong Astro 3.0!
Thông tin khái quát
Chuyển đổi liền mạch giữa các trạng thái khác nhau của một trang, còn gọi là chuyển đổi trạng thái,luôn là một khía cạnh phức tạp trong việc xây dựng trải nghiệm liền mạch, dạng ảnh động trên web. Mặc dù đã có các công cụ như hiệu ứng chuyển đổi CSS, ảnh động CSS và API Ảnh động trên web, việc tạo chuyển đổi trạng thái vẫn là một nhiệm vụ khó khăn. Một trong những khó khăn là xử lý sự tương tác giữa các thành phần đi, điều này có thể làm cho quá trình chuyển đổi phức tạp hơn.
Ngoài ra, khó duy trì vị trí đọc và tiêu điểm đối với các thiết bị hỗ trợ. Ngoài ra, việc xử lý sự khác biệt về vị trí cuộn khiến việc chuyển đổi trạng thái trở thành một quá trình rườm rà. Tất cả các yếu tố này góp phần vào sự phức tạp của việc triển khai chuyển đổi suôn sẻ giữa các thành phần khác nhau trên trang web
View Transitions API (API Chuyển đổi khung hiển thị) ra đời để trở thành giải pháp của trình duyệt đối với những thách thức này. API mới này cung cấp cách dễ dàng hơn để thay đổi DOM trong một bước trong khi tạo ra hiệu ứng chuyển đổi động giữa hai trạng thái.
Việc ra mắt API Chuyển đổi khung hiển thị trong Chrome 111 đánh dấu sự khởi đầu của tầm nhìn rộng lớn hơn về việc hỗ trợ chuyển đổi cho tất cả các trang web, không chỉ các ứng dụng web dựa trên JavaScript. Các tính năng nâng cao trong tương lai cũng đang được triển khai. Sau này, Chrome có thể khám phá các tính năng bổ sung thú vị như hiệu ứng chuyển đổi giữa các tài liệu, ảnh động do trình tổng hợp điều khiển, hiệu ứng chuyển đổi theo phạm vi và các nhóm chuyển đổi lồng nhau.
Xem bản minh hoạ: Trực tiếp, Nguồn
Các bản khám phá ban đầu với hiệu ứng chuyển đổi khung hiển thị
Hành trình của Chrome với View Transitions API không đơn độc. Ý kiến phản hồi và sự cộng tác của các nhà phát triển, tác giả khung và Nhóm công tác CSS đều đóng vai trò quan trọng trong việc định hình tính năng này trong vài năm.
Trong giai đoạn đầu, việc thử nghiệm dành cho nhà phát triển đóng vai trò quan trọng. Các phiên bản đầu tiên của API không hỗ trợ ảnh động CSS và hiệu ứng chuyển đổi bị giới hạn ở một số giá trị đặt trước hạn chế. Ý kiến phản hồi ban đầu đã làm rõ rằng các nhà phát triển muốn các hiệu ứng chuyển đổi hoàn toàn có thể tuỳ chỉnh và biểu đạt. Sự cộng tác liên tục này đảm bảo API được thiết kế với sự cân bằng giữa các chế độ mặc định phù hợp, khả năng mở rộng và khả năng tuỳ chỉnh.
Astro là một trong những khung đã sớm khai thác hiệu ứng Chuyển đổi khung hiển thị. Phần còn lại của bài viết này là từ góc nhìn của nhóm Astro. Bài viết này chia sẻ kinh nghiệm của họ trong việc tìm kiếm, áp dụng và đưa Chế độ xem chuyển đổi vào trung tâm của trải nghiệm phát triển web.
Tại sao Astro đặt cược vào việc chuyển đổi chế độ xem
Astro đã tìm kiếm một tính năng tương tự như hiệu ứng Chuyển đổi khung hiển thị trong một thời gian dài. Astro là một khung web JavaScript giúp máy chủ kết xuất các thành phần giao diện người dùng của bạn thành HTML nhẹ để đạt hiệu suất tải trang nhanh hơn. Astro có chủ ý di chuyển nhiều công việc ra khỏi thiết bị khách nhất có thể. Các trang web Astro sử dụng tính năng điều hướng trang gốc trên trình duyệt, trong đó các khung web khác có thể xâm nhập điều hướng của trình duyệt bằng tính năng định tuyến phía máy khách JavaScript.
Sự đánh đổi này đã tạo ra một thách thức cho nhóm Astro: Làm cách nào Astro có thể tạo ảnh động cho quá trình chuyển đổi trang và đảm bảo tính bền vững của giao diện người dùng giống như ứng dụng trên các trang mà không cần sử dụng tính năng định tuyến phía máy khách?
Chuyển đổi chế độ xem chính là giải pháp. Với tính năng Chuyển đổi khung hiển thị, Astro có thể cung cấp các tính năng định tuyến tương tự như các khung web SPA nặng bằng JavaScript, nhưng không có chi phí hiệu suất và độ phức tạp khi định tuyến phía máy khách. Các khung khác tiếp cận Hiệu ứng chuyển đổi khung hiển thị dưới dạng một chi tiết triển khai không bắt buộc, nhưng đối với Astro thì nó lớn hơn nhiều.
Câu hỏi tiếp theo mà nhóm Astro phải trả lời là "như thế nào?" Họ đã xem xét các dự án như Turbo, Swup và Livewire để tìm cảm hứng và thậm chí là thử nghiệm một vài phương pháp tương tự trong Astro.
Một trong những nỗ lực đầu tiên liên quan đến "chuyển đổi thông minh" toàn trang sẽ tự động so sánh mọi trang HTML mới với HTML hiện tại và sau đó cố gắng thay thế mọi phần tử cùng một lúc bằng JavaScript. Việc này rất thông minh nhưng vẫn dễ xảy ra lỗi.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Rất may là cộng đồng Astro đã cho thấy rằng View Transitions API vốn đã rất mạnh mẽ mà không khiến sản phẩm này phức tạp quá. Sau khi xem một số bản minh hoạ ban đầu, nhóm Astro đã được bán ý tưởng về một API Astro đơn giản có thể khớp với các API trình duyệt nhất có thể. Thay vì xem hiệu ứng chuyển đổi khung hiển thị dưới dạng một chi tiết triển khai ẩn bị ẩn trong Astro, nhà phát triển có thể thấy chúng trực tiếp. Căn chỉnh trực tiếp Astro với nền tảng web và giảm độ phức tạp tổng thể trên giao diện người dùng.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
Công việc trở nên đơn giản: đưa View Transitions API mới vào Astro và cung cấp các tính năng dự phòng tự động để mang đến nhiều trang web và trình duyệt nhất có thể. Hỗ trợ dự phòng là cần thiết vì hầu hết các trình duyệt (bên ngoài Chrome) chưa gửi hỗ trợ đầy đủ cho Chuyển đổi khung hiển thị gốc.
Ra mắt dịch vụ hỗ trợ chính thức trong Astro
Astro phát hành tính năng hỗ trợ thử nghiệm tính năng Chuyển đổi khung hiển thị trong Astro 2.9. Phản hồi tích cực ngay lập tức. Các nhà phát triển bắt đầu chia sẻ các bản minh hoạ đáng kinh ngạc về rất nhiều trường hợp sử dụng và trong một số trường hợp, thậm chí còn chuyển tất cả các ứng dụng sang giai đoạn phát hành chính thức.
Xem bản minh hoạ: Trực tiếp, Nguồn
Astro 3.0, hoàn tất việc hỗ trợ và bỏ gắn cờ View Transitions API (API Chuyển đổi khung hiển thị) mới cho mọi người. Các API mới này hiện đã sẵn sàng để bạn áp dụng theo cách thử nghiệm hoặc tất cả cùng một lần.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Một lợi ích ngoài dự kiến khi kết hợp Astro với các API nền tảng là bạn có thể thử nghiệm việc xây dựng các tính năng mới ngoài API Chuyển đổi khung hiển thị gốc. Ví dụ: lệnh Astro transition:persist mới cho phép mọi phần tử tự tồn tại trong một thành phần điều hướng toàn trang. Điều này hỗ trợ các phần tử tồn tại lâu dài như trình phát âm thanh và video liên tục, thứ mà trước đây chỉ có trong các SPA JavaScript nặng.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Xem bản minh hoạ: Trực tiếp, Nguồn
Astro cũng hỗ trợ miễn phí để giúp nhà phát triển sử dụng các hiệu ứng chuyển đổi khung hiển thị sao cho hiệu quả hơn. Ví dụ: nhóm đã thêm tính năng hỗ trợ cho ảnh động và ảnh động tuỳ chỉnh tiến/lùi cho HTML động. Cả hai tính năng này đều khó thực hiện được với riêng API cấp thấp hơn, nhưng trong Astro, chúng thực sự dễ dàng thực hiện.
Các tính năng này hiện chỉ có trong Astro, nhưng nhóm Astro hy vọng sẽ cung cấp trải nghiệm của họ trở lại cho các tác giả thông số kỹ thuật và nhóm làm việc để cải tiến trình duyệt tiềm năng trong tương lai. Ví dụ: bằng cách theo dõi chặt chẽ đề xuất để giúp bạn dễ dàng chia sẻ ảnh động trong CSS.
Tiếp theo là gì?
Tương lai của Hiệu ứng chuyển đổi thành phần hiển thị trên web là rất khả quan. Astro, Nuxt và HTMX đều đã hỗ trợ ở một mức độ nào đó và nhiều công ty khác cũng đã bày tỏ sự quan tâm.
Nhóm Chrome rất vui mừng về khả năng hỗ trợ Chuyển đổi thành phần hiển thị gốc của Astro. Đây là một bước tiến quan trọng trong quá trình phát triển web, giúp người dùng có trải nghiệm linh hoạt và linh hoạt hơn. Các nhà phát triển nên tìm hiểu kỹ hơn về Chuyển đổi khung hiển thị trong Astro 3.0. Cho dù bạn tạo trang đích mới hay nâng cấp các trang web hiện có, những cải tiến này đều có thể thay đổi cuộc chơi. Chuyển đổi chế độ xem giúp lấp đầy khoảng trống giữa những gì có thể thực hiện được với SPA và MPA. Chrome rất mong được lắng nghe ý kiến của bạn về việc có còn thiếu sót nào trong việc hỗ trợ SPA và/hoặc MPA hay không. Vui lòng nhận xét trên kho lưu trữ GitHub về View Transitions WICG để thảo luận thêm về vấn đề này.
Chúng tôi đã được truyền cảm hứng từ các bản minh hoạ và ứng dụng sáng tạo mà chúng tôi thấy và chúng tôi rất háo hức muốn xem thêm. Công việc của bạn với tính năng Chuyển đổi thành phần hiển thị đang định hình tương lai của web. Hãy dùng thử tính năng chuyển đổi chế độ xem trong Astro, chia sẻ công việc của bạn và hãy cùng nhau tiếp tục hành trình này.