Headless CMS vs Traditional CMS

Tuy lập trình web cũng nhiều năm, nhưng tôi không có nhiều cơ hội làm việc với CMS (Content Management System). Trong suy nghĩ của tôi thì CMS nó là cái gì đó giống như WordPress mà tôi đã từng có cơ hội dùng qua. Thế nhưng thật bất ngờ và cũng thật tình cờ, gần đây tôi lần đầu tiên được nghe đến keyword “headless CMS”. Và đó cũng là lúc tôi nhận ra mình quá thiếu hiểu biết về thế giới CMS này.

WordPress hay rất nhiều CMS truyền thống khác, đã tồn tại hàng chục năm. Cách thức nó hoạt động, và cách mà các lập trình viên làm việc với chúng đã trở nên quen thuộc với nhiều người. Thế nhưng, với sự phát triển của công nghệ, ngày nay CMS cũng đã có những thay đổi đáng kể. Những CMS hiện đại hơn, thiết kế theo kiểu headless rất khác với cách mà các CMS truyền thống sử dụng. Sự khác biệt đến ngay từ tư tưởng thiết kế, điều này có thể khiến nhiều người gặp khó khăn (giống như tôi) khi tiếp xúc lần đầu.

Trong bài viết này tôi sẽ trình bày một số hiểu biết của mình về CMS cũng như cách thức mỗi loại CMS hoạt động. Trước hết, headless CMS hay hiểu đơn giản hơn là CMS dựa trên API vẫn là CMS, tức là nhiệm vụ của chúng không khác gì các CMS truyền thống, chúng vẫn cung cấp các công cụ, giao diện khác nhau cho người sử dụng (kể cả người không biết lập trình) có thể làm việc và tạo ra các nội dung như các bài viết, blog, v.v… Thế nhưng cách thức hoạt động của chúng hoàn toàn khác nhau, và do đó, với các lập trình viên, cách tiếp cận cũng như làm việc với CMS hoàn toàn trái ngược nhau.

Những hiểu biết cần thiết

CMS truyền thống là gì?

Trong một CMS truyền thống, mọi thứ được đóng gói với nhau, và về mặt kỹ thuật, mọi tầng ví dụ frontend (design, layout), backend (source code) và tầng lưu trữ (database) đều liên kết với nhau rất chặt chẽ. Lấy ví dụ với WordPress, khi download và sử dụng, bạn sẽ nhận được mọi thứ như sau trong 1 gói sản phẩm:

• Một theme (bao gồm HTML, CSS, JavaScript) được chuẩn bị sẵn. Có rất nhiều file dạng frontend này để thể hiện trang web.
• Một database định nghĩa sẵn (Với WordPress là MySQL). Lưu ý rằng, các lập trình viên có thể thay đổi schema của database nhưng đồng thời cũng phải thay đổi code để trang web có thể hoạt động được.
• Mã nguồn (PHP) lập trình sẵn toàn bộ các chức năng của trang web. Với người dùng bình thường, thì phần này có nhiệm vụ lấy dữ liệu từ database và chuyển nó cho theme để hiển thị.

Nếu một người truy cập trang web sử dụng WordPress ở trên, quá trình xử lý có thể mô tả như dưới đây:

• Dữ liệu thô về các bài viết được lấy ra từ database bởi code PHP.
• Sau đó dữ liệu này được truyền sang cho theme.
• Theme (bao gồm HTML, CSS, JavaScript) có nhiệm vụ chuyển dữ liệu thô thành HTML và hiển thị cho người dùng.

Để quản lý các nội dung của trang web (ví dụ các bài blog), các CMS truyền thống thường có 1 dashboard cho phép quản trị viên có thể dễ dang thêm bớt nội dung cũng như chỉnh sửa việc hiển thị trang web cho người dùng. Dưới đây là dashboard của WordPress:

Chỉ bằng một vài thao tác đơn giản, một người thậm chí không cần biết về lập trình cũng có thể dễ dàng tạo nội dung cũng như chỉnh sửa giao diện của trang web. Khi một bài post được lưu, nó sẽ được lưu trữ vào database để sử dụng về sau. Toàn bộ quá trình có thể mô tả trong hình vẽ dưới đây:

Như đã nói ở trên, mô hình CMS truyền thống này đã tồn tại rất lâu. WordPress, một đại diện tiêu biểu cho CMS truyền thống đã được phát triển đâu đó vào năm 2003, đến nay đã được 18 năm. Tuy nhiên, thế giới công nghệ luôn phát triển không ngừng, và nhu cầu của người dùng cũng thay đổi theo. Do đó, trong nhiều trường hợp, CMS truyền thống không thể đáp ứng được các yêu cầu về hiệu suất, sự mềm dẻo. Đó là lý do headless CMS ra đời.

Headless CMS là gì?

Headless CMS tập trung vào việc tạo, biên tập và lưu trữ nội dung của trang web. Headless CMS phá vỡ mối liên kết chặt chẽ giữa backend và frontend. Nó chỉ lưu chữ nội dung, cung cấp một dashboard cho phép tạo và biên tập nội dung và cuối cùng là cung cấp API cho phép lập trình viên sử dụng để phát triển frontend của riêng mình. Headless CMS không cung cấp một giao diện dựng sẵn.

Khi bạn tạo nội dung bằng headless CMS, bạn tạo ra dữ liệu thô (text, hình ảnh, v.v…) chứ không tạo ra giao diện cho những nội dung đó. Headless CMS sử dụng API để đưa những dữ liệu đó ra phía frontend, và do đó, nó có thể được hiển thị ở bất cứ đâu: trang web, mobile app, thậm chí là trên các thiết bị đeo thông minh, bất cứ thứ gì có kết nối Internet là có thể sử dụng được. Tuy nhiên lưu ý rằng, các lập trình viên sẽ phải tự dựng frontend để có thể làm được việc đó.

Việc tiếp cận như thế này khác hoàn toàn với cách làm truyền thống của WordPress, nơi mà backend và frontend liên kết chặt chẽ với nhau (coupling). Dưới đây là mô tả quy trình hoạt động của một headless CMS.

Các headless CMS vẫn cung cấp một dashboard tương tự WordPress để quản trị viên có thể tạo vào biên tập nội dung. Ngoài ra nó còn cung cấp API để cho phép người dùng lấy dữ liệu để hiển thị. Thậm chí nhiều headless CMS còn sử dụng GraphQL để cho phép lập trình viên frontend có thể dễ dàng hiển thị nội dung theo ý mình hơn. Bằng cách này, nội dung từ CMS có thể được sử dụng để làm mọi thứ: blog, landing page, SEO, trang tin tức, v.v…

Ngoài ra, về mặt kỹ thuật, bằng cách tiếp cận mới của headless CMS, mã nguồn cần sử dụng và maintain cũng giảm đi (hoặc ít nhất được chia ra thành backend và frontend riêng). Một số headless CMS ví dụ Crafter CMS còn bá đạo hơn khi phân tách hoàn toàn dashboard và content API, tức là các thành phần của nó hoàn toàn độc lập với nhau và có thể dễ dàng nâng cấp cũng như customize (tư tưởng thiết kế có phần giống microservice).

Một headless CMS cho phép bạn hoàn toàn kiểm soát việc hiển thị nội dung. Do đó nó không bị phụ thuộc vào một công nghệ có sẵn nào. Lập trình viên có thể dễ dàng chọn lựa và sử dụng công nghệ nào phù hợp nhất, thành thạo nhất. Ngoài ra, vì sự phụ thuộc lẫn nhau thấp, headless CMS có thể dễ dàng nâng cấp các thành phần trong tương lai.

So sánh CMS truyền thống và headless

Mỗi loại CMS có những ưu và nhược điểm riêng, và sẽ phù hợp với từng bài toán cụ thể. Sẽ thật phiến diện nếu nói rằng headless CMS là công nghệ mới và nó sẽ thay thế CMS truyền thống trong tương lai.

CMS truyền thống

Ưu điểm

• Ưu điểm lớn nhất của CMS truyền thống là nó đã quá quen thuộc với cả người dùng và lập trình viên. Nên để bắt đầu với nó là một điều khá dễ dàng
• Mọi thứ được đóng gói vào 1 hệ thống, rất dễ dàng để quản trị trang web bao gồm cả nội dung và giao diện
• Một người ít hiểu biết về kỹ thuật, không biết về lập trình cũng có thể sử dụng được

Nhược điểm

• Gò bó, không mềm dẻo khi mọi thứ đều được đóng gói sẵn mà bạn chỉ có thể customize một phần của nó mà thôi
• Chỉ có thể tạo ra website (mặc dù cùng nội dung có thể được hiển thị ở các thiết bị khác nhưng sẽ khó khăn)
• Thường hiệu suất không cao do khả năng scale kém (vì các thành phần dính liền vào nhau)
• Yêu cầu lập trình viên phải có hiểu biết về CMS đang làm việc, đổi sang CMS khác gần như phải học lại từ đầu.
• Lượng code lớn, rất tốn chi phí để maintain

Các trường hợp nên dùng CMS truyền thống

• Bạn muốn xây dựng một website mới và không nhu cầu tìm hiểu sâu về công nghệ đằng sau
• Bạn đã có hiểu về về một CMS nhất định (ví dụ WordPress và ngôn ngữ PHP)
• Bạn có thể thuê gia công một công ty chuyên làm CMS truyền thống (tôi biết một số công ty chuyên nhận làm WordPress hoặc Drupal) với một chi phí hợp lý
• Bạn chỉ có 1 trang web chạy độc lập và không có nhu cầu liên kết với các hệ thống khác. Lưu ý rằng các CMS truyền thống mặc dù khó liên kết với hệ thống ngoài do thiếu API nhưng nó lại có thể dễ dàng cài đặt thêm plugin để làm việc đó (tuy nhiên hiệu suất không so được với headless CMS)

Headless CMS

Ưu điểm

• Nội dung có thể được hiển thị ở bất kỳ đâu
• Lập trình viên không cần quan tâm đến backend và chỉ cần tập trung vào frontend
• Có thể tự do sử dụng ngôn ngữ, thư viện hay framework nào để lập trình
• Dễ dàng tạo và biên tập nội dung và không cần lo lắng về các thành phần khác (ví dụ frontend) do mọi thứ được xây dựng không phụ thuộc vào nhau

Nhược điểm

• Không thể preview nội dung (mặc dù có nhiều CMS vẫn cho làm việc này nhưng sẽ cần phải thao tác rất nhiều)
• Sẽ khó khăn khi bắt đầu, và sẽ tốn công sức cho các thao tác tích hợp, cấu hình CMS và lập trình frontend

Các trường hợp nên dùng headless CMS

• Trang web cần sử dụng các framework JavaScript mới như React, Angular or VueJs
• Bạn có nhu cầu hiển thị nội dung trên nhiều loại thiết bị khác nhau như website, mobile app, IoT, v.v…
• Bạn có sẵn một website hoặc ứng dụng sử dụng những công nghệ hiện đại (Node.js, Django, React, Vue) và muốn thêm tính năng blog và một số tính năng CMS khác
• Bạn muốn lập trình viên tập trung vào kỹ thuật và mọi người đang làm việc thay vì mất thời gian vào việc tích hợp công nghệ đó với một công nghệ khác (sử dụng bởi CMS)
• Bạn muốn trang web của bạn dễ dàng maintain và scale
• Bạn muốn kiểm soát ở mức tối đa việc nội dung sẽ được hiển thị như thế nào

Không có cầu trả lời chính xác headless CMS hay CMS truyền thống là tốt hơn. Nó phụ thuộc vào từng bài toán cụ thể, và cần được xem xét kỹ lưỡng từng khía cạnh. Ngoài ra, có một phương áp thứ 3, đó là không sử dụng CMS và sẽ lập trình toàn bộ trang web của bạn từ đầu. Tuy nhiên, nội dung này hơi ngoài lề và không liên quan đến bài viết này nên xin phép không bàn sâu thêm ở đây.

Kết luận

Trong thế giới IT, không có một công cụ nào có thể giải quyết mọi vấn đề, và cũng không có công cụ nào tốt nhất cho một vấn đề nào đó. Chỉ có công cụ này tốt hơn công cụ kia ở từng khía cạnh nhất định. Hy vọng bài viết này sẽ cho các bạn những hiểu biết cơ bản về CMS và bạn sẽ có lựa chọn cho mình khi gặp bài toán tương tự.