Xu hướng lập trình web hiện đại - UI library có còn là xu thế?

Lịch sử phát triển web đã trải qua nhiều giai đoạn khác nhau, từ những trang web tĩnh đơn giản đầu tiên cho đến các ứng dụng web đa phương tiện và cấp cao như ngày nay.

 

Nếu bạn là một lập trình viên Frontend thì chắc chắn bạn đã từng sử dụng UI library cho quá trình phát triển trang web. Điều này cũng cho thấy tầm quan trọng của các UI library trong lập trình web hiện đại. Nhưng thế giới luôn luôn phát triển không ngừng, và trong ngành lập trình cũng vậy, việc sử dụng các UI library gần như là điều thiết yếu nhưng cũng dần lộ ra các nhược điểm của chính nó. Liệu rằng lập trình web hiện đại và xu thế trong tương lai có thay đổi hay không?

 

Thiết kế web với thư viện UI

Trước khi bàn sau hơn về xu thế trong tương lai, hãy cùng nhìn lại những ưu điểm mà UI Library mang lại:

 

Ưu điểm

• Tái sử dụng (Reusability): tính năng đầu tiên và quan trọng nhất chính là tái sử dụng, các UI library cung cấp một bộ các thành phần giao diện đã được thiết kế trước, giúp nhà phát triển tái sử dụng chúng trong nhiều phần của ứng dụng và giảm thiểu việc viết mã lặp lại.
• Tăng Tốc Quá Trình Phát Triển (Development Speed): Bằng cách sử dụng các thành phần đã có sẵn từ UI library, nhà phát triển có thể nhanh chóng xây dựng và triển khai giao diện người dùng mà không cần phải bắt đầu từ đầu, giảm thiểu thời gian và công sức cần thiết cho quá trình phát triển.
• Tính Nhất Quán (Consistency): Việc sử dụng các thành phần giao diện đã được thiết kế trước từ UI library giúp đảm bảo tính nhất quán giữa các phần của ứng dụng, từ giao diện người dùng đến trải nghiệm người dùng, giúp tăng cường trải nghiệm người dùng cuối.
• Cộng Đồng Hỗ Trợ (Community Support): Các UI library phổ biến thường có một cộng đồng lớn và tích cực, cung cấp hỗ trợ từ cộng đồng, tài liệu, ví dụ, và các tài nguyên học tập khác, giúp nhà phát triển giải quyết vấn đề và tìm kiếm sự hỗ trợ khi cần thiết.

 

Rõ ràng, chúng ta có thể nhận thấy những ưu điểm vượt trội mà việc sử dụng UI library mang lại, điều này cũng được kiểm chứng khi đa số các dự án hiện nay điều sử dụng ít nhất 1 UI library nào đó. Vậy liệu rằng việc sử dụng UI Library có bất kỳ nhược điểm nào không?

 

Câu trả lời là có, bất kỳ thư viện nào cũng điều có những nhược điểm của riêng nó, dưới đây là một số nhược điểm của việc sử dụng thư viện UI vào dự án:

 

Nhược điểm

• Khả năng custom: Mặc dù các thư viện đã được hỗ trợ rất nhiều tính năng, nhưng khi apply vào dự án, bạn luôn phải custom chúng cho đúng với design system mà dự án bạn đang làm việc. Tuy nhiên, các thư viện UI thường có cấu trúc phức tạp và cách triển khai được ẩn sau các lớp CSS hoặc mã JavaScript, điều này có thể làm cho việc tùy chỉnh trở nên khó khăn hơn.
• Kích thước lớn: Một số thư viện UI cung cấp nhiều tính năng và thành phần không cần thiết cho dự án cụ thể, làm tăng kích thước của ứng dụng mà không cần thiết. Điều này có thể làm tăng thời gian tải trang và tăng kích thước của ứng dụng, ảnh hưởng đến hiệu suất và trải nghiệm người dùng.
• Phụ thuộc vào bên thứ ba: Sử dụng các thư viện UI có thể làm cho ứng dụng phụ thuộc vào bên thứ ba, nếu có sự cố với thư viện hoặc thư viện ngừng được duy trì, có thể gây ra vấn đề cho ứng dụng của bạn.
• Học và sử dụng mới: Một số thư viện UI có độ phức tạp cao, đặc biệt đối với những người mới vào lập trình web, có thể làm tăng độ khó trong việc học và sử dụng chúng.

 

Trên đây là những nhược điểm mà bất kỳ ai đã từng sử dụng thư viện UI đều dễ dàng nhận thấy. Thư viện UI thật sự có lợi, nhưng không phải với tất cả các dự án. Với các dự án cần làm nhanh và không có quá nhiều design system đặc biệt thì việc sử dụng thư viện UI là một các tiếp cận hiệu quả. Nhưng nếu bạn đang làm cho 1 product, 1 dự án mất đến vài năm để hoàn thành, 1 dự án mà có các design system đặc biệt mà chỉ bạn mới có, thì sử dụng các UI lib thật sự cũng là một thách thức không nhỏ.

Vậy trong trường hợp này, có các nào để giải quyết vấn đề này không? Có cần thiết phải xây dựng các component ngay từ đầu? Điều này có phải là phát minh lại bánh xe hay không?

 

Headless UI

Thật may, trong lập trình web hiện đại, chúng ta hoàn toàn có thể dễ dàng xây dựng lại component theo design system của riêng bạn. Điều này không phải là phát minh lại bánh xe, mà là một phần không thể thiếu trong quá trình phát triển ứng dụng web có tính chất đặc thù cao và đòi hỏi tính cá nhân hóa cao. Yeah, đến đây chúng ta có một khái niệm mới mang tên Headless UI. Vậy Headless UI là gì? Và nó giải quyết bài toán của chúng ta ra làm sao?

 

Headless UI là một phương pháp tiếp cận trong phát triển giao diện người dùng (UI) cho ứng dụng web, trong đó các thành phần giao diện được tách biệt hoàn toàn với logic phía sau. Trong kiến trúc headless UI, các thành phần giao diện người dùng được xây dựng và quản lý mà không cần sự gián đoạn từ một framework hoặc thư viện giao diện cụ thể.

Cụ thể, headless UI thường bao gồm các thành phần UI không có giao diện người dùng kèm theo (chỉ có phần logic) và các thành phần UI có thể hiển thị giao diện người dùng, nhưng không giới hạn bởi bất kỳ hệ thống quy tắc hay cấu trúc nào. Các thành phần này thường được xây dựng bằng ngôn ngữ và công nghệ web thông dụng như HTML, CSS và JavaScript.

Với kiến trúc headless UI, các thành phần giao diện người dùng có thể được sử dụng một cách linh hoạt và tái sử dụng trong nhiều ứng dụng và trên nhiều nền tảng khác nhau. Điều này giúp đơn giản hóa việc phát triển và duy trì giao diện người dùng, đồng thời cung cấp tính linh hoạt và tính tùy chỉnh cao cho các nhà phát triển.

 

Tóm lại, bạn có thể hình dung một cách đơn giản, headless UI là kiến trúc đi theo hướng sử dụng các component đã có sẵn logic phía sau, nhưng không có bất kỳ styles/css nào. Việc còn lại của bạn là css cho nó đúng với design system của dự án. Nghe có vẻ ổn đáp đúng không :D.

 

Dưới đây sẽ là một số công nghệ để đơn giản hóa quá trình xây dựng các component cho design system của riêng bạn.

 

• React: React là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng. Với React, bạn có thể dễ dàng tạo ra các thành phần headless UI bằng cách tạo các thành phần không có giao diện người dùng kèm theo, chỉ có phần logic. React cung cấp một cách tiếp cận linh hoạt cho việc xây dựng các thành phần UI độc lập với framework hoặc thư viện giao diện cụ thể.
• Tailwind CSS: Tailwind CSS là một framework CSS linh hoạt cho phép bạn tạo ra các lớp CSS tái sử dụng cho các thành phần giao diện người dùng. Với Tailwind CSS, bạn có thể dễ dàng tạo ra các thành phần headless UI mà không cần sử dụng các lớp CSS đặc biệt từ một framework giao diện cụ thể.
• Storybook: Storybook là một công cụ phát triển UI cho các thành phần giao diện người dùng. Với Storybook, bạn có thể tạo ra các hồ sơ cho các thành phần headless UI của mình và kiểm tra chúng trong môi trường cách ly, giúp đảm bảo tính nhất quán và chất lượng của các thành phần này.

Không cần bất kỳ một package nào nữa

Bạn không nghe nhầm đâu. Mặc dù Headless UI là xu thế đang phát triển trong vài năm trở lại đây. Việc xây dựng các components ngay từ đầu đã được áp dụng rất nhiều trong các dự án. Nhưng rõ ràng nó vẫn có những nhược điểm

 

• Khó khăn trong việc tạo giao diện: Một trong những thách thức của headless UI là việc tạo ra giao diện người dùng cho các thành phần headless. Bởi vì các thành phần này không có giao diện mặc định, việc tạo giao diện từ đầu có thể đòi hỏi nhiều công sức và thời gian hơn so với việc sử dụng các thành phần có sẵn từ các thư viện UI.
• Tăng độ phức tạp: Trong một số trường hợp, việc sử dụng headless UI có thể làm tăng độ phức tạp của mã nguồn, đặc biệt là nếu không quản lý và tổ chức các thành phần một cách cẩn thận. Điều này có thể làm giảm hiệu suất phát triển và khả năng bảo trì của ứng dụng.
• Yêu cầu kiến thức kỹ thuật cao: Để sử dụng headless UI hiệu quả, nhà phát triển cần có kiến thức vững về HTML, CSS và JavaScript, cũng như hiểu biết sâu về các công nghệ và công cụ liên quan. Điều này có thể là một rào cản đối với những người mới vào lĩnh vực phát triển web.
• Khả năng quản lý và bảo trì: Khi sử dụng headless UI, việc quản lý và duy trì các thành phần có thể trở nên phức tạp, đặc biệt là trong các dự án lớn hoặc có nhiều người tham gia. Việc tổ chức code và tài nguyên một cách cẩn thận là rất quan trọng để đảm bảo tính nhất quán và dễ bảo trì.
• Hiệu suất: Trong một số trường hợp, việc sử dụng headless UI có thể ảnh hưởng đến hiệu suất của ứng dụng, đặc biệt là nếu không tối ưu hóa mã nguồn hoặc quản lý tài nguyên một cách hiệu quả. Điều này có thể gây ra vấn đề về tốc độ tải trang và trải nghiệm người dùng.

 

Vậy nếu có một ý tưởng mới cho phép chúng ta vẫn có những component được xây dựng sẵn, nhưng vẫn đảm bảo khả năng custom cho các design system đặc thù, không còn phụ thuộc vào bên thứ ba,.v.v. Ý tưởng này mình bắt gặp trên trang https://ui.shadcn.com/.

Nó không phải là thư viện component, tức là bạn sẽ không phải install thông qua npm nữa. Thay vào đó, nó là một tập hợp các component có thể tái sử dụng và được copy & paste vô project của riêng bạn.

 

Tất cả những gì bạn cần là chọn 1 component, chạy câu lệnh, và component đó sẽ được tạo ra bên trong chính dự án của bạn, việc còn lại là custom nó mà thôi. Đương nhiên ý tưởng này còn khá mới lạ và bản thân mình cũng chưa kiểm chứng tính thực tiễn của nó nên không thể đánh giá quá nhiều về các ưu và nhược điểm. Nhưng cũng là một ý tưởng rất đột phá và biết đâu lại là trend trong tương lai.

 

Kết luận

 

Có thể UI library vẫn luôn luôn tồn tại trong thế giới lập trình, nhưng thế giới lập trình là biến thiên, sự phát triển không ngừng sẽ tạo ra những thứ mà ở thời điểm hiện tại chưa thể đạt đến được. Có thể một ngày nào đó, chúng ta không còn dùng thư viện nữa, mà thay vào đó là sử dụng 100% bằng AI thì sao. Đâu ai biết trước được điều gì ...