Tại sao Shopify đang chuyển cấu trúc theme trở lại mã có thể đọc được—và điều đó mở ra những khả năng gì cho nhà phát triển, người bán hàng và các tác nhân AI.
Chính xác là 12 năm trước vào ngày hôm nay, tôi bắt đầu xây dựng cửa hàng Shopify đầu tiên của mình.
Tôi không thực sự là một nhà phát triển. Tôi là một nhà thiết kế am hiểu công nghệ, biết HTML, CSS và đủ jQuery để gây nguy hiểm. Điều tôi biết là tôi muốn một mặt tiền cửa hàng hoàn toàn tùy chỉnh theo thương hiệu mà tôi đang xây dựng—nhưng tôi không muốn quản lý toàn bộ một hệ thống thương mại điện tử chỉ để đạt được điều đó.
Sau đó, tôi tìm thấy Shopify.
Tôi tải Timber, mở template bộ sưu tập của nó, và mọi thứ đã sáng tỏ:
1{% for product in collection.products %}2 {% include 'product-grid-item' %}3{% endfor %}
Toàn bộ template chỉ dài 100 dòng mã. Tôi có thể hiểu cách nó hoạt động chỉ bằng cách đọc mã. Tôi hầu như không cần tài liệu hướng dẫn ngoài cheat sheet của Mark Dunkley.
Đối với các nhà phát triển theme, đó là một kỷ nguyên vàng của sự dễ đọc. Đối với người bán hàng, các Cài đặt Chủ đề Toàn cầu rõ ràng là chưa đủ.
Sự đánh đổi mà chúng ta đã thực hiện
Cài đặt theme chỉ đưa chúng ta đi được một chặng đường nhất định. Năm 2016, Shopify giới thiệu Sections, và ba điều đã thay đổi cùng một lúc.
- Người bán hàng trở thành người kinh doanh. Những người không thể viết mã có thể định hình các trang và kể một câu chuyện sản phẩm phong phú hơn nhiều.
- Nhà phát triển trở thành nhà thiết kế thành phần. Các Section phải có tính mô-đun, linh hoạt và hoạt động theo bất kỳ thứ tự nào.
- Và theme trở thành sản phẩm. Các nhà phát triển phải suy nghĩ về giao diện mà họ đang tạo ra và đưa ra những đánh đổi có chủ ý giữa tính dễ sử dụng và tính linh hoạt.
Những lực lượng đó đã được tăng tốc với Dawn vào năm 2016, và sau đó một lần nữa với Horizon vào năm ngoái, cùng với sự ra đời của "blocks" như một đơn vị có thể kết hợp cốt lõi trong các theme.
Để biểu diễn các section và block trên mọi template, Shopify cần một định dạng tuần tự hóa. Các template đã chuyển sang JSON.
Sự đánh đổi đó đã mang lại cho người bán hàng nhiều quyền kiểm soát hơn, nhưng nó đi kèm với một cái giá về trải nghiệm nhà phát triển: bạn không còn có thể hiểu một trang bằng cách đọc một tệp. Bạn phải tham chiếu chéo JSON, Liquid, schemas, settings, section và block để tái cấu trúc cách trang hoạt động.
Khoảnh khắc các template trở thành JSON, chúng không còn là một bề mặt tuyệt vời cho nhà phát triển nữa. Chúng trở thành một đầu ra được tự động lưu—thứ mà chúng tôi thực sự cảnh báo các nhà phát triển không nên chỉnh sửa bằng tay.
Đó là một sự đánh đổi hợp lý cho kỷ nguyên "phần mềm mệnh lệnh"; nơi người bán hàng định hình một cửa hàng thông qua các nút bấm, núm vặn và cài đặt để chỉ định chính xác những gì cần thay đổi.
AI thay đổi phương trình.
Trải nghiệm nhà phát triển tuyệt vời là trải nghiệm tác nhân AI tuyệt vời
Khi chúng tôi cung cấp cho Sidekick khả năng chỉnh sửa theme, Trình chỉnh sửa Cửa hàng Trực tuyến đã bước vào kỷ nguyên "phần mềm khai báo" của nó. Ví dụ đơn giản, thay vì mở một bảng chọn màu và chọn \[#0000FF](https://x.com/search?q=%230000FF&src=hashtag_click)\, một người bán hàng có thể chỉ cần nói, "Làm cho cái này thành màu xanh."
Người bán hàng đã thực hiện 25 triệu chỉnh sửa theme bằng Sidekick trong năm nay và 1 trong 5 người bán hàng đang sử dụng AI để chỉnh sửa theme của họ.
Đồng thời, các nhà phát triển ngày càng sử dụng các tác nhân AI để viết mã. Điều đó có nghĩa là Shopify hiện có hai công việc có liên quan:
- Cung cấp hướng dẫn tốt hơn cho các tác nhân AI.
- Cung cấp cho chúng phản hồi tốt hơn.
Để có hướng dẫn, chúng tôi đang phát hành các kỹ năng Liquid được cải thiện. Theme cũng có thể mang hướng dẫn tác nhân thông qua thư mục \.agents\ và bao gồm các tệp như \AGENTS.md\ và \DESIGN.md\, để giúp các tác nhân viết mã hiểu cách bạn muốn mã được viết và cách giữ cho thiết kế của bạn đúng thương hiệu.
Để có phản hồi, chúng tôi đã mở rộng thẻ \{% doc %}\ thành các hợp đồng được gõ cho các đoạn mã và block. Các tham số có thể được ghi lại, gõ, xác thực bởi Theme Check và được ghép nối với các ví dụ về cách sử dụng nó.
1{% doc %}2 @param {string} [variant]3 @param {string} [tag]45 @example6 {% block 'text', tag: 'h1' %}7 Featured Collection8 {% endblock %}9{% enddoc %}
Khi bạn viết mã bằng tay, điều này cung cấp cho bạn phản hồi thời gian thực, intellisense và lỗi; và nó cũng cung cấp cho các tác nhân AI một cách để khám phá các tham số hợp lệ, tìm hiểu đầu ra tốt trông như thế nào và nhận được phản hồi có thể hành động khi chúng tưởng tượng ra một API không tồn tại.
Chúng tôi cũng đã thêm 20 quy tắc Theme Check mới bao gồm hợp đồng, cấu trúc, xác thực, độ phức tạp, lồng nhau và giới hạn kích thước tệp.
Điều tuyệt vời đối với các nhà phát triển như tôi, trong kỷ nguyên tác nhân AI, là nó thưởng cho những điều giống nhau mà chúng tôi luôn muốn: mã dễ đọc, hợp đồng rõ ràng và phản hồi nhanh.
Vì vậy, chúng tôi đã đặt một câu hỏi lớn hơn: kiến trúc theme lý tưởng sẽ trông như thế nào nếu nó coi những phẩm chất đó là những nguyên tắc cơ bản?
Chúng tôi đã xây dựng một theme cơ sở Shopify mới, tổng hợp tất cả các ý tưởng của chúng tôi lại với nhau.
(Tôi nên đề cập… đây là một kiến trúc mới để tối ưu hóa cho các tác nhân viết mã, nhưng nó không phải là một sự viết lại bắt buộc. Các theme hiện tại sẽ tiếp tục hoạt động mãi mãi; Liquid đã và sẽ luôn là một API vĩnh viễn.)
Cấu trúc trang lại là mã có thể đọc được
Điều đầu tiên bạn sẽ nhận thấy về theme mới là khi bạn mở thư mục \templates\ của nó; các template lại là các tệp Liquid.
Template bộ sưu tập của nó có độ dài tương đương với Timber và tổng thể theme có ít hơn 93% số dòng mã so với Horizon. Đây không phải là một theme có sẵn mọi thứ như Horizon, nó ở đó để giúp bạn dễ dàng xây dựng với tất cả các nguyên hàm thương mại trong Shopify và đặt nền tảng để đạt được hiệu suất tốt nhất có thể, nhưng để bạn xây dựng tất cả những thứ làm cho cửa hàng của mỗi người bán trở nên độc đáo.
Tại sao lại chuyển cấu trúc trang trở lại Liquid?
Vấn đề sâu xa hơn với cấu hình được tuần tự hóa không phải là JSON về bản chất là xấu. Đó là cấu hình có một vốn từ vựng bị hạn chế. Một nhà phát triển theme phải dự đoán các thành phần mà người bán hàng có thể muốn.
Hãy tưởng tượng một section chứa một nút. Một người bán hàng yêu cầu tác nhân AI thêm một nút thứ hai bên cạnh nó.
Trong kiến trúc dựa trên cài đặt, theme phải đã hiển thị một block nhóm có khả năng chứa cả hai nút, hoặc nhà phát triển phải dự đoán một cài đặt nút thứ hai.
Trong HTML, bạn thêm một nút khác và bọc cặp nút trong một thẻ \div\.
Mọi mô hình hàng đầu đều đã hiểu HTML. Nó có tính biểu cảm, cục bộ và tiết kiệm token. Và Shopify đã có ngôn ngữ cần thiết để kết hợp tính biểu cảm đó với thương mại trong hơn 20 năm: Liquid.
Blocks và HTML, cùng nhau
Kiến trúc mới giới thiệu một thẻ \{% block %}\ có thể kết hợp được sử dụng trực tiếp bên trong các template Liquid.
1<div class="mb-8">2 {% block 'text',3 tag: 'h1',4 block.settings.variant: 'type-heading-xl',5 class: 'mb-2'6 %}7 {{ collection.title | escape }}8 {% endblock %}9</div>
Các block chấp nhận các tham số được đặt tên. Chúng có thể chứa nội dung lồng nhau. Các tham số của chúng có thể được gõ thông qua \{% doc %}\. Chúng xác định ranh giới của những gì người bán hàng có thể tương tác, trong khi HTML thông thường xử lý mọi thứ khác.
Nếu bạn đã sử dụng một hệ thống thành phần như React, mô hình này sẽ có cảm giác quen thuộc: các tham số hoạt động giống như props và nội dung lồng nhau hoạt động giống như children. Nhưng nó vẫn là Liquid—đủ đơn giản để đọc từ trên xuống dưới trong một tệp.
Điều này làm cho việc kết hợp trở nên rõ ràng mà không yêu cầu mọi phần đánh dấu phải trở thành một section, block hoặc cài đặt khác.
Phản ứng chi tiết với partials
Các nhà phát triển theme đã kéo dài API kết xuất Section vượt xa những gì nó được thiết kế ban đầu để làm bởi vì nó là công cụ tốt nhất có sẵn cho phản ứng do máy chủ điều khiển.
Chúng tôi muốn một thứ gì đó chính xác hơn.
Lấy cảm hứng từ công việc mới nổi về cập nhật một phần khai báo, chúng tôi đang mang một nguyên thủy đơn giản gọi là partials vào Liquid.
Bọc một vùng có thể được kết xuất lại:
1{% partial 'cart-count' %}2 <span>3 {{ 'cart.count' | t: count: cart.item_count }}4 </span>5{% endpartial %}
Sau đó tìm nạp HTML mới và áp dụng nó ở nơi cần thiết:
1const html = await partials.fetch('cart-items', 'cart-count');2partials.apply(html);
Chỉ vậy thôi. Các bản cập nhật được kết xuất từ máy chủ chi tiết mà không cần kết xuất toàn bộ section hoặc giới thiệu một DOM ảo.
Thêm vào giỏ hàng có thể cập nhật các vùng giỏ hàng có liên quan chỉ trong vài dòng. Nguyên thủy đơn giản này sẽ cho phép chúng tôi loại bỏ hàng nghìn dòng mã phản ứng khỏi Horizon.
Sự kiện và Hành động tiêu chuẩn
Chúng tôi cũng đang làm cho các tương tác cửa hàng trực tuyến phổ biến trở nên đơn giản hơn và có khả năng tương tác cao hơn.
Các Hành động Tiêu chuẩn cung cấp một hợp đồng chung cho các hoạt động như cập nhật giỏ hàng. Các Sự kiện Tiêu chuẩn cho phép theme và ứng dụng phản ứng thông qua cùng một vốn từ vựng ổn định.
1const { cart } = await Shopify.actions.updateCart({2 lines: [{3 merchandiseId: variant.id,4 quantity: 1,5 }],6});
Điều này dễ dàng hơn cho các nhà phát triển để viết, dễ dàng hơn cho các ứng dụng để tích hợp và dễ dàng hơn cho các tác nhân AI để hiểu. Các Hành động Tiêu chuẩn hoạt động trên các cửa hàng Shopify ngày nay và hỗ trợ WebMCP cung cấp cho các tác nhân trình duyệt một đường dẫn ngữ nghĩa để duyệt và thêm sản phẩm trong khi mặt tiền cửa hàng phản hồi các tương tác đó.
Mục tiêu không phải là gắn một "chế độ AI" vào mặt tiền cửa hàng. Đó là làm cho các khả năng của mặt tiền cửa hàng trở nên rõ ràng và có thể kết hợp cho mọi người tham gia: theme, ứng dụng, nhà phát triển và tác nhân AI.
Làm cho Liquid an toàn hơn để phát triển
Cũng có một số khả năng ngôn ngữ rõ ràng mà chúng tôi muốn thêm vào Liquid: biểu thức boolean, toán tử trung tố với mức độ ưu tiên và mảng và đối tượng theo nghĩa đen.
Rào cản không phải là thiếu mong muốn. Trình phân tích cú pháp lịch sử của Liquid chấp nhận cú pháp mơ hồ không hợp lệ về mặt hình thức. Do đó, việc giới thiệu cú pháp mới có thể thay đổi cách hoạt động của các theme hiện tại.
Nhóm đã thực hiện một quá trình di chuyển lớn để chuyển các theme một cách an toàn sang một trình phân tích cú pháp nghiêm ngặt. Công việc đó cho chúng tôi không gian để phát triển Liquid mà không phá vỡ các mặt tiền cửa hàng đã phụ thuộc vào nó.
Nó mở khóa các biểu thức đơn giản hơn, quen thuộc hơn:
1{{ 1 + 1 }}2{{ false && false || true }}3{% assign products = ["shirt", "hat", "shoes"] %}
Nó cũng làm cho các lỗi dễ dự đoán hơn—đối với các nhà phát triển và các tác nhân AI.
Một điều nữa: Tailwind
Sắp có, chúng tôi sẽ mang hỗ trợ Tailwind đến các theme Liquid.
Các tác nhân AI rất giỏi về nó. Các nhà phát triển đã hiểu nó. Và nó cung cấp cho chúng tôi một ngôn ngữ tạo kiểu chung được xây dựng xung quanh các token thiết kế, mà không buộc người bán hàng phải kế thừa một hệ thống xây dựng phức tạp.
Vốn từ vựng chung đó rất quan trọng. Các tác nhân AI càng hiểu rõ cấu trúc, hợp đồng và ý định tạo kiểu, các nhà phát triển càng có thể tập trung vào các phần của mặt tiền cửa hàng thực sự tạo nên sự khác biệt cho một thương hiệu.
Trở về tương lai
Mười hai năm trước, Shopify đã có ý nghĩa với tôi bởi vì tôi có thể mở một theme, đọc mã và hiểu cửa hàng.
Theo thời gian, chúng tôi đã làm cho các theme trở nên linh hoạt hơn rất nhiều cho người bán hàng, nhưng mã trở nên khó nhìn thấu hơn.
Các tác nhân AI cho chúng tôi cơ hội để kết hợp lại hai điều đó: sự linh hoạt mà người bán hàng cần và khả năng dễ đọc mà các nhà phát triển xứng đáng có được.
Đó là hướng đi đằng sau kiến trúc mới này:
- Các template Liquid như cấu trúc trang có thể đọc được.
- Các block có thể kết hợp, được gõ cùng với HTML thông thường.
- Kỹ năng tác nhân AI và hướng dẫn cấp kho lưu trữ.
- Phản hồi phong phú hơn thông qua \
{% doc %}\và Theme Check. - Phản ứng chi tiết thông qua partials.
- Hợp đồng mặt tiền cửa hàng chung thông qua Sự kiện và Hành động Tiêu chuẩn.
- Một trình phân tích cú pháp nghiêm ngặt cho phép Liquid phát triển một cách an toàn.
- Tailwind như một ngôn ngữ tạo kiểu chung.
Bản xem trước nhà phát triển và tài liệu hiện đã có sẵn:
https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview
Hãy dùng thử và gửi phản hồi của bạn cho tôi. Tôi rất mong được xem những gì bạn xây dựng!
