Vercel và Shopify đang xây dựng lại Hydrogen

Hydro làm cho mặt tiền cửa hàng không có đầu dễ dàng vận chuyển nhưng không thể di chuyển được. Tại Vercel Ship 26 ở New York, chúng tôi đã thông báo rằng chúng tôi đang hợp tác với Shopify để xây dựng lại nó từ đầu, một cuộc đặt cược chung vào một trang web cởi mở hơn.

Phiên bản mới là mã nguồn mở và bất khả tri về thời gian chạy, nghĩa là nó có thể chạy ở bất cứ nơi nào có JavaScript. Bạn có thể xây dựng bằng Svelte, Nuxt, Next.js hoặc thậm chí mang theo khung tùy chỉnh của riêng bạn.

Chiến lược của chúng tôi bao gồm ba lớp: lõi, máy khách và máy chủ.

Cốt lõi

Core là JavaScript mà chúng tôi từng viết cho API Shopify và chưa bao giờ chia sẻ. Bây giờ nó sống ở một nơi.

Lấy định dạngMoney. Web mở đã giải quyết được hầu hết vấn đề này bằng Intl.NumberFormat.

Giá 1const = new Intl.NumberFormat("en-US", {2 style: "currency",3 loại tiền tệ: "USD",4}).format(19.99); // "$19,99"

Nhưng API Shopify không cung cấp cho bạn một con số. Nó phản hồi bằng một loại tùy chỉnh, MoneyV2 và số tiền là số thập phân có dấu được tuần tự hóa dưới dạng chuỗi.

1import { formatMoney, type MoneyV2 } từ "@shopify/hydrogen";2
3hàm xuất định dạngPrice(money: MoneyV2, locale = "en-US") {4 return formatMoney(money, { locale }).toString(); // $19,995}

Kết quả vẫn như cũ nhưng bạn không viết hoặc duy trì mã keo nữa. Khi API thay đổi, việc nâng cấp là chuyện nhỏ.

Tập trung phần cốt lõi và bạn sửa từng lỗi một lần, gửi các cải tiến cho mọi người và quay lại công việc xây dựng.

khách hàng

Việc hiển thị những gì cốt lõi trả về bao gồm các quyết định lặp đi lặp lại giống nhau. Trạng thái giỏ hàng là điều hiển nhiên.

1import { createContext, useContext, useState, useCallback } từ "Reac";2
3const CartContext = createContext(null);4
5hàm xuất CartProvider({ Children }) {6 const [cart, setCart] = useState(null);7
8 const addLine = useCallback(async (variantId,quant) => {9 // mã tùy chỉnh mà tất cả chúng ta đều tự viết10 }, []);11 const updateLine = useCallback(async (variantId,quant) => {12 // mã tùy chỉnh mà tất cả chúng ta đều tự viết13 }, []);14 const RemoveLine = useCallback(async (variantId,quant) => {15 // mã tùy chỉnh mà tất cả chúng ta đều tự viết16 }, []);17
18 // áp dụngGiảm giá, ghi chú, tiền tệ, trạng thái lỗi, đồng bộ hóa giữa các tab, tìm nạp lại tiêu điểm, v.v.19
20 trả về (21 <CartContext.Provider value={{ cart, đang chờ xử lý, addLine }}>22 {children}23 </CartContext.Provider>24 );25}26
27export const useCart = () => useContext(CartContext);

Mã tùy chỉnh để quản lý trạng thái giỏ hàng với React

Bất kỳ ai xây dựng ứng dụng thương mại đều đã viết phiên bản này. Mã khác nhau mỗi lần, tất cả đều theo đuổi những điều giống nhau.

Với Hydrogen, lớp máy khách hiện xử lý giỏ hàng. Quản lý nhà nước trở thành một hàng nhập khẩu.

1import { createCartComponents } từ "@shopify/hydrogen/react";2
3const { useCartForm } = createCartComponents();4
5 hàm AddToCartButton({variantId }) {6 const { formProps, register } = useCartForm();7
8 trả về (9 <form {...formProps()}>10 <input11 type="hidden"12 {...register("merchandiseId", { value:variantId })}13 />14 <button {...register("add")}>Thêm vào giỏ hàng</button>15 </form>16 );17}

Với Hydrogen, việc quản lý trạng thái giỏ hàng chỉ là một lần nhập

Tập trung điều này và bạn sẽ nhận được các phương pháp hay nhất miễn phí, vì vậy bạn có thể dành thời gian cho những phần thực sự là của bạn để xây dựng. Nó hiện đã có sẵn cho React trên nhánh Hydrogen Preview và sẽ có thêm nhiều framework sắp ra mắt.

Máy chủ

Các nhà phát triển cần quyền truy cập đầy đủ để xây dựng mặt tiền cửa hàng có thể mở rộng quy mô mà không làm giảm hiệu suất. Nội dung tĩnh sẽ phân phối ngay lập tức từ CDN trong khi dữ liệu động như luồng hàng tồn kho được đưa vào.

Cộng đồng nguồn mở đã giải quyết vấn đề này bằng các khung như Next.js, Nuxt và SvelteKit: khả năng toàn stack mà không cần khóa vào thời gian chạy độc quyền.

Giả sử mặt tiền cửa hàng của bạn lưu trữ các truy vấn sản phẩm bằng tính năng xác thực lại theo yêu cầu. Bạn viết truy vấn GraphQL. Hydrogen cung cấp cho bạn một loại máy khách an toàn. Next.js xử lý bộ nhớ đệm và bạn nhận được các khung đầy đủ cộng với API Shopify không có đầu mà không có mã keo nào.