Tại sự kiện DrupalSouth Wellington 2026, Adam Bramley đã giới thiệu một dự án khiến cộng đồng Drupal đặc biệt chú ý: Pinto — một cách tiếp cận mới nhằm đơn giản hóa và hiện đại hóa hệ thống theming của Drupal.

Sau nhiều năm làm việc với:

• Twig templates,
• preprocess hooks,
• render arrays,
• YAML configuration,
• và hàng loạt logic phân tán,

nhiều Drupal developer đều từng gặp một vấn đề quen thuộc:

“Chỉ sửa một component nhỏ nhưng phải mất hàng giờ để lần ngược logic rendering.”

Pinto xuất hiện như một lời giải cho bài toán đó.

---

Vấn đề của Drupal Theming hiện tại

Drupal là một CMS cực kỳ mạnh về khả năng mở rộng. Tuy nhiên, hệ thống theming truyền thống của Drupal lại thường gây ra nhiều khó khăn trong các dự án lớn.

Một component đơn giản đôi khi phải trải qua:

Entity
→ View Builder
→ Formatter
→ Render Array
→ Preprocess Hook
→ Twig Template
→ Attach Library
→ HTML

Sau vài năm phát triển:

• logic bị phân tán,
• preprocess khó trace,
• template override chồng chéo,
• YAML khó maintain,
• front-end và back-end phụ thuộc lẫn nhau quá nhiều.

Điều này khiến DX (Developer Experience) giảm đáng kể, đặc biệt ở các enterprise project có design system lớn.

---

Pinto là gì?

Pinto là một mô hình theming/component system cho Drupal với triết lý:

“Everything in one place.”

Thay vì:

• rải logic qua Twig,
• preprocess,
• YAML,
• render arrays,

Pinto gom mọi thứ vào một PHP component class duy nhất.

Ví dụ:

final class Card extends Component
{
    public function __construct(
        public string $title,
        public string $body,
        public ?string $image = null,
    ) {}
}

Chỉ với một class:

• properties được typed rõ ràng,
• validation dễ kiểm soát,
• IDE autocomplete hoạt động tốt,
• code dễ đọc hơn nhiều so với preprocess truyền thống.

---

Điều khiến Pinto khác biệt

1. PHP-first thay vì YAML-first

Một trong những điểm gây tranh cãi lớn trong Drupal theming hiện đại là việc phụ thuộc nhiều vào YAML configuration.

Với SDC (Single Directory Components), chúng ta thường cần:

• component.yml
• component.twig
• schema
• library definitions

Trong khi đó, Pinto tận dụng chính sức mạnh của PHP:

• strict typing,
• assertions,
• object-oriented architecture,
• IDE tooling.

Điều này đặc biệt hấp dẫn với các team engineering lớn vốn quen với kiến trúc strongly typed.

---

2. Giảm mạnh Boilerplate Code

Thông thường khi tạo một reusable component trong Drupal, developer phải xử lý:

• render arrays,
• cache metadata,
• attach libraries,
• preprocess variables,
• template mapping.

Pinto tự động hóa phần lớn những việc này.

Developer chỉ cần tập trung vào:

• dữ liệu đầu vào,
• component contract,
• rendering logic.

Điều này giúp codebase:

• sạch hơn,
• dễ maintain hơn,
• ít duplicated logic hơn.

---

3. Storybook trở thành “Source of Truth”

Đây có lẽ là phần thú vị nhất của Pinto.

Trong nhiều dự án enterprise hiện đại, design system thường được xây dựng độc lập bằng:

• Storybook,
• React,
• Vue,
• hoặc Twig components.

Pinto cho phép Drupal tiêu thụ trực tiếp các component này thay vì tự dựng lại giao diện lần thứ hai.

Workflow trở nên rõ ràng hơn:

Design Team
→ Storybook Components
→ Pinto Components
→ Drupal consumes components

Kết quả:

• Front-end team có thể làm việc độc lập.
• Drupal không còn phải “sở hữu” toàn bộ UI layer.
• Design system trở thành nguồn sự thật duy nhất (single source of truth).

Đây là mô hình đang được rất nhiều enterprise platform theo đuổi.

---

Factory Pattern – Kiến trúc cực kỳ thông minh

Một điểm rất đáng chú ý trong Pinto là cách sử dụng Factory Method để chuyển đổi dữ liệu Drupal sang component.

Ví dụ:

Paragraph Entity
→ Factory
→ Pinto Component
→ Render

Điều này mang lại khả năng tái sử dụng cực cao.

Cùng một component:

• có thể render từ Paragraph,
• Block,
• custom entity,
• API response,
• hoặc external data source.

Thay vì coupling chặt với Drupal entity structure, Pinto tạo ra một abstraction layer sạch hơn rất nhiều.

---

Pinto vs Single Directory Components (SDC)

SDC hiện là hướng đi chính thức của Drupal core.

Tuy nhiên, Pinto lại tiếp cận vấn đề theo hướng khác.

Traditional Drupal	SDC	Pinto
Twig + preprocess	YAML + Twig	PHP-first
Logic phân tán	Component-based	Unified component
Weak typing	Schema validation	Strict typing
Khó trace	Tốt hơn	Rất dễ debug
Boilerplate nhiều	Giảm bớt	Tối giản mạnh

Điều thú vị là:

Pinto không chống lại SDC.

Ngược lại, Pinto vẫn có thể hoạt động cùng SDC nếu team muốn tận dụng ecosystem của Drupal core.

---

Performance và Cacheability có bị ảnh hưởng?

Đây là câu hỏi mà mọi senior Drupal developer sẽ đặt ra.

May mắn là:

• Pinto vẫn chạy trong render pipeline của Drupal,
• vẫn hỗ trợ cache metadata,
• vẫn tương thích BigPipe,
• không phá render cache architecture.

Nói cách khác:

Pinto không cố “React hóa Drupal”.

Nó chỉ làm cho layer theming trở nên hiện đại và dễ maintain hơn.

---

Pinto KHÔNG phải giải pháp cho mọi thứ

Dù rất ấn tượng, Pinto không phải “silver bullet”.

Pinto không thay thế Layout Builder

Layout Builder vẫn phù hợp để:

• dựng page layout,
• quản lý section,
• drag-drop page composition.

Pinto phù hợp hơn cho:

• atoms,
• molecules,
• organisms,
• reusable UI components.

Mô hình hợp lý nhất là:

Layout Builder
→ cấu trúc trang

Pinto
→ render component bên trong

---

Pinto hiện chưa hỗ trợ Form API

Đây là một giới hạn quan trọng.

Pinto hiện tập trung vào:

• content rendering,
• component architecture,
• design system integration.

Drupal Form API vẫn là một thế giới riêng với:

• states,
• validation,
• AJAX callbacks,
• form rebuilding.

---

Trade-offs cần cân nhắc

Pinto rất mạnh, nhưng không phải team nào cũng phù hợp.

Pinto phù hợp nếu:

• Team có strong PHP engineering culture.
• Dự án có design system lớn.
• Front-end và back-end tách biệt.
• Storybook đang được sử dụng.
• Enterprise architecture cần consistency cao.

Pinto có thể không phù hợp nếu:

• Website nhỏ/simple.
• Team chủ yếu là site builder.
• Developer quen Twig hơn PHP.
• Không có reusable design system.
• Editor cần override markup linh hoạt.

---

Một rủi ro cần lưu ý: Ecosystem

SDC là chuẩn chính thức của Drupal core.

Trong khi đó, Pinto hiện vẫn là một ecosystem solution.

Điều này dẫn đến một vài câu hỏi:

• Community adoption sẽ lớn đến đâu?
• Long-term maintenance ra sao?
• Ecosystem có phát triển đủ mạnh không?
• Pinto có trở thành de-facto standard hay không?

Với các enterprise project dài hạn, đây là yếu tố cần được cân nhắc kỹ.

---

Góc nhìn cá nhân

Pinto không đơn thuần là một module theming mới.

Nó phản ánh một xu hướng lớn hơn:

đưa Drupal tiến gần hơn tới component-driven architecture hiện đại.

Trong nhiều năm, Drupal mạnh về:

• data modeling,
• content architecture,
• editorial workflow.

Nhưng DX ở front-end thường bị đánh giá là phức tạp.

Pinto đang cố gắng thay đổi điều đó bằng cách:

• đơn giản hóa rendering layer,
• tận dụng sức mạnh của PHP,
• và kết nối Drupal với workflow front-end hiện đại.

Nếu SDC là bước tiến hóa đầu tiên của Drupal theming,
thì Pinto có thể là bước tiếp theo dành cho các team engineering nghiêm túc về design systems và maintainability.

---

Kết luận

Pinto chưa chắc sẽ thay thế hoàn toàn cách làm theme truyền thống trong Drupal.

Nhưng nó đang mở ra một hướng tiếp cận rất đáng chú ý:

• typed components,
• unified rendering logic,
• Storybook integration,
• component-first architecture,
• better developer experience.

Với những dự án Drupal hiện đại có quy mô lớn, Pinto là một công nghệ rất đáng để theo dõi trong những năm tới.

#Drupal #Drupal11 #Pinto #Storybook #PHP #WebDevelopment #DesignSystem #FrontendArchitecture #DeveloperExperience #ComponentDrivenDevelopment #SDC #ModernDrupal

Nguồn: https://pinto.docs.contrib.social/