20.03.20

Vue Storefront không chỉ là một sản phẩm mà là cả một hệ sinh thái

Hệ sinh thái Vue Storefront
5/5 - (1 bình chọn)

Cộng đồng sử dụng Vue Storefront càng mở rộng thì nền tảng này lại đặt thêm những mục tiêu cao hơn. Thực tế là hiện nay, Vue Storefront đang là giải pháp front-end được lựa chọn nhiều nhất cho các dự án PWA Magento. Không chỉ dừng lại ở đây mà Vue Storefront còn muốn trở thành giải pháp front-end tiêu chuẩn cho tất cả các dự án thương mại điện tử, điều đó có nghĩa là với bất kỳ dự án eCommerce nào và dù nền tảng back-end là gì thì phần frond-end được lựa chọn chính là sử dụng Vue Storefront.

Để làm được điều này thì một giải pháp đơn thuần thôi không đủ mà sẽ cần đến cả một hệ sinh thái các sản phẩm mã nguồn mở.

Về Vue Storefront

Ra mắt lần đầu vào năm 2017 tại sự kiện Meet Magento NYC với phiên bản Vue Storefront 0.1. Tại thời điểm đó, Vue Storefront là giải pháp đâu tiên trên thị trường tích hợp ổn định hầu hết các tính năng của Magento. Và sau 3 năm, có thể nói Vue Storefront vẫn giữ vững được vị trí này mặc dù đã có rất nhiều các giải pháp front-end khác được ra mắt.

Trong bản 1.12 và 1.13 dự tính sẽ ra mắt trong năm nay, Vue Storefront đã đầu tư rất nhiều vào hiệu suất và trải nghiệm lập trình. Đặc biệt là với 1.13, sẽ là một thử thách bởi phiên bản này sẽ bao gồm theme Capybara mới, theme mặc định thứ hai dành cho các website chạy trên Vue Storefront. Theme mới này được thiết kế dựa trên hệ thống thiết kế Storefront UI. Tính năng Developer’s Preview dành cho theme Capybara sẽ được cho ra mắt trong thời gian tới đây.

Dòng sản phẩm cốt lõi Vue Storefront sẽ vẫn ở đó trong một thời gian dài. Với nhu cầu sử dụng ngày càng nhiều trên thị trường, đội ngũ phát triển Vue Storefront đang không ngừng phát hành thêm nhiều phiên bản mới. Và phần quan trong nhất của quy trình chính là duy trì khả năng tương thích ngược. Ví dụ như với theme Caybara chẳng hạn, sẽ được phân phối dưới dạng tùy chọn gói/module và lập trình viên có thể sử dụng hoặc không sử dụng mà không yêu cầu phải nâng cấp.

Storefront Cloud

Gần như tròn một năm sau khi ra mắt Vue Storefront lần đầu, Storefront Cloud ra đời. Đây là một nền tảng lập trình có những giá trị (value proposition) khá mạnh mẽ: “Nó đơn giản là sẽ chạy mà không cần đến DevOps.” Khả năng mở rộng cao, kiến trúc dựa trên nền tảng Kubernetes, tích hợp sẵn CI và tự động triển khai mang lại cho các đội ngũ lập trình tất cả những gì họ cần để chạy một dự án PWA thành công. Mạnh mẽ và dễ sử dụng, Storefront Cloud đã thu hút được sự quan tâm của rất nhiều khách hàng. Hiện tại, Storefront Cloud đang tập trung cải thiện trải nghiệm lập trình bằng cách tích hợp Github, tính năng xem trước với các pull-request động và một số tính năng tập trung vào giao diện người dùng (UI) hay ho khác nữa.

Vue Storefront Next

Vue Storefront ngày càng trở nên phổ biến, số lượng dự án sử dụng ngày càng tăng, cũng như để đảm bảo của sản phẩm cốt lõi Vue Storefront là những yếu tố quyết định đằng sau quy trình Nghiên cứu và phát triển (R&D) được gọi là Vue Storefront Next.

Năm ngoái, đội ngũ phát triển Vue Storefront đứng trước bài toán về việc thay đổi kiến trúc và tối ưu hóa cho giải pháp này tuy nhiên điều đó sẽ đồng nghĩa với việc buộc khách hàng phải nâng cấp lên phiên bản mới và đứng trước rủi ro khách hàng rời bỏ thay vì trung thành với Vue Storefront.

Đó chính là lý do Next, một dòng riêng biệt không đường dẫn nâng cấp từ Vue Storefront, được phát triển. Tính năng chính của Vue Storefront Next là theme nền Storefront UI đã được Capybara theme của Vue Storefront hỗ trợ.

Quy trình Nghiên cứu và phát triển (R&D) ngay từ đầu đã được đội ngũ phát triển tích hợp sẵn Commerce Tools và Shopware platforms mà không gây rối cho các cài đặt gốc, chủ yếu là Magento.

Tác dụng của Vue Storefront Next là giúp việc tích hợp bên thứ ba trở nên dễ dàng hơn vì kiến trúc này cho phép sử dụng định dạng dữ liệu nền tảng thay vì các định dạng dữ liệu tương tự Magento mà Vue Storefront đang sử dụng. Điều đó có nghĩa là lập trình viên sẽ không cần sử dụng phần mềm trung gian (thường dùng để khắc phục các sự có API của Magento).

Nếu bạn đang bắt đầu một dự án PWA và trên nền tảng Magento 1 và Magento 2, bạn có duy nhất một lựa chọn thôi đó là Vue Storefront. Đừng chờ Next vì đội ngũ các nhà phát triển Vue Storefront hiện đang có bất kỳ kế hoạch thêm Magento vào Next. Đơn giản là đã có Vue Storefront rồi.

Còn nếu bạn đang định phát triển một dự án PWA trên nền tảng khác Magento như Salesforce, Commerce Tools và Shopware hay bất kỳ một nền tảng thứ ba nào thì nên chọn Next. Nó sẽ làm tối ưu hóa dự án của bạn.

Nếu bạn muốn theo dõi tiến trình của Next, bạn có thể truy cập shopware-pwa repository hoặc Next repository (dành cho các công cụ thương mại).

Shopware PWA

Đây thực sự là lần đầu tiên kiến ​​trúc Vue Storefront Next, được tích hợp và tối ưu hóa với Shopware. Phần thú vị là tích hợp CMS với Shopware Experiences. Đây là một trải nghiệm độc đáo được áp dụng cho ứng dụng kiến ​​trúc không có giao diện người bằng cách sử dụng quy trình rendering và các components PWA chuyên dụng.

Storefront UI

Là một hiệu ứng phụ của theme Capybara và rất được Vue Storefront chú trọng trong quá trình xây dựng Capybara. Lý do là bởi đội ngũ phát triển nền tảng này muốn tạo ra một hệ thống thiết kế dễ sử dụng, dễ tùy chỉnh mà lập trình viên có thể sử dụng có thể dùng với Vue Storefront hoặc không (trong các apps tùy chỉnh).
Được phát triển dựa trên Storybook, Storefront UI thực sự rất dễ tùy chỉnh, được mô đun hóa dưới dạng nguyên tử, phân tử, vv…

Cộng đồng lập trình quang Storefront UI phát triển khá nhanh và thậm chí còn phát triển thành các hệ sinh thái riêng thu hút còn nhiều hơn nữa các lập trình viên Vue.js.

Storefront UI hiện nay được Vue Storefront xem làm lớp UI được chuẩn hóa có thể áp dụng cho tất cả các luồng front-end khác.

Storefront API

Storefront API và Storefront UI là hai thành phần trong hệ sinh thái mà có thể sử dụng mà không cần có Vue Storefront. Trong khi đó SF API là một mô đun GraphQL và REST API tương thích 100% với Vue Storefront. Được bắt nguồn từ dự án `vue-storefront-api` và được Vue Storefront đầu tư nhằm cải thiện hỗ trợ GraphQL cũng như cải thiện hệ thống mô đun.

Storefront API là một nền tảng tuyệt vời để mô hình hóa dữ liệu. Một hệ thống GraphQL resolvers có thể mở rộng giúp người dùng các nguồn dữ liệu khác nhau (REST APIs, GraphQL APIs, Các hệ thống cơ sở dữ liệu giao dịch) vào một lược đồ GraphQL đơn, mạch lạc và triển khai phần backend cho một mô hình thiết kế ở phần frontend.

Lời kết

Có vẻ như Vue Storefront đang phát triển đồng thời nhiều thứ hay ho trong hệ sinh thái. Và mỗi sản phẩm đều có một đội phát triển riêng.

Dưới đây là những điểm chính trong hệ sinh thái:

  1. Vue Storefront là giải pháp PWA phổ biến nhất trên thị trường hiện nay. Ưu điểm nổi bật của nền tảng này là khi bắt đầu một dự án với Vue Storefront bạn không cần phải nâng cấp tech stack trong thời gian đầu. Vue Storefront vẫn đang được tiếp tục phát triển và duy trì thường xuyên bởi các nhà phát triển.
  2. Một số tính năng mới của Vue Storefront sắp ra mắt: Storefront UI Capybara Theme, tối ưu hóa hiệu suất và tất cả tương thích ngược.
  3. Nếu bạn tính sử dụng một nền tảng backend khác (ngoài Magento) cho một dự án PWA, nhất là Commerce tools, Shopware hoặc SFCC – hãy dùng Vue Storefront Next.
  4. Storefront API sẽ thay thế Vue Storefront API. Hãy thử dùng Storefront API, nó tương thích 100%. Lợi thế của Storefront API là bạn có thể mô hình hóa dữ liệu GraphQL và tích hợp các hệ thống khác nhau vào một thông qua một lược đồ duy nhất.
  5. Storefront Cloud là một nền tảng FaaS (Frontend as a Service), bao gồm các tác vụ và các cách cài đặt Vue Storefront tốt nhất. Nhanh, có khả năng mở rộng là những ưu điểm khiến cho Storefront Cloud dường như là lựa chọn tốt nhất để lưu trữ các website phát triển trên Vue Storefront.

Bài viết được tổng hợp và lược dịch dựa trên Vue Storefront blog: https://blog.vuestorefront.io/

 đối tác của Vue Storefront và là một trong những công ty đầu tiên ứng dụng Vue Storefront vào các dự án PWA trên thị trường, đội ngũ Sutunam mong muốn được kết nối nhiều hơn với những nhà lập trình đã từng làm hoặc quan tâm đến giải pháp này, hãy cùng tìm hiểu và gia nhập cộng đồng Vietnam Vue Storefront Community tại đây để trao đổi và cùng học hỏi thêm nhé!