BlogAbout Me

JAMStack - Hãy quên server đi, tất cả những gì chúng ta cần là Javscript + API

Published in Web Development
February 09, 2021
8 min read
February 09, 2021
8 min read

JAMStack là gì?

JAMstack là khái niệm mô tả cách xây dựng website dựa trên 3 thành phần Javascript, APIs, Markup.

  • Javascript: Đóng vai trò chính trong việc xây dựng hệ thống. Là phần frontend có nhiệm vụ kết nối APIs và hiển thị content (Markdown) cho người dùng

  • APIs: là các third-party, SaaS được tích hợp vào hệ thống

  • Markup: cách thức để trình bày nội dung, phổ biến nhất là Markdown. Markdown sử dụng các cú pháp đơn giản, dễ hiểu, dễ đọc, dễ tiếp cận hơn HTML. Markdown được ưu ái vì nó dễ dàng chuyển đổi sang HTML, headless CMS sử dụng markdown trong content editor. Điều này tách biệt cấu trúc nội dung trình bày (Headless cms đảm nhận) và thể hiện style của nội dung (Frontend sẽ đảm nhận phần này).

JAMstack nổi nên như một cách thức mới để xây dựng các trang cms. Lợi ích lớn nhất mà nó mang lại bởi việc loại bỏ tầng backend, cũng như dữ liệu các trang web được sinh ra trong quá trình build —> giúp cho trang web có tốc độ load cực nhanh và chi phí cho hosting rẻ (thậm chí là free đối với nhiều nền tảng hiện có). Chính vì những ưu điểm đó mà JAMstack là cách thức được cộng đồng phát triển website quan tâm nhiều trong thời gian gần đây.

Đọc thêm:

  • https://blog.bit.ai/what-is-markdown/

- https://umbraco.com/about-us/umbraco-dictionary/jamstack/

Ưu và hược điểm của JAMStack

Traditional vs JAMStack web development
Traditional vs JAMStack web development

Ưu điểm:

  • Blazing fast: tốc độ truy cập nhanh vì trang web được tạo sẵn trong quá trình build và được cache bởi CDN. Người dùng không cần phải chờ server truy vấn database cũng như render content.

  • The website is more secure: Việc loại bỏ tầng server đồng nghĩa với việc website trở nên bảo mật hơn, không lo sợ bị tấn công vào hệ thống backend hay can thiệp vào DB.

  • Scaling is easy and cheap

JAMstack hướng tới tối đa hóa các dịch vụ micro services thay cho tầng backend. Do đó việc mở rộng hệ thống trở nên dễ dàng hơn thống qua việc tích hợp các dịch vụ và tăng như cầu khi cần thiết đơn giản hơn. Không cần tới đội ngũ backend hùng hậu để xây dựng và vận hành hệ thống phức tạp và đáp ứng mở rộng. Tối ưu hóa chi phí và nhanh chóng triển khai hệ thống tới người dùng trong thời gian ngắn.

  • Greate developer experience

Với JAMstack việc phát triển tập trung chính ở tầng frontend. Do đó developer dễ dàng triển khai hệ thống dựa vào những kỹ năng, kinh nghiệm hiện có để xây dựng hệ thống. Lựa chọn phổ biến mà hầu hết cộng đồng sử dụng là dựa trên Javascript và các static site generator framework như Nextjs, Nuxtjs, Gatsby… Bạn có thể xem danh sách các site generators framework tại đây

Javascript là ngôn ngữ được rất đông lập trình viên lựa chọn và là ngôn ngữ phổ biến nhất, nên việc tìm kiếm lập trình viên xây dựng hệ thống theo kiến trúc JAMstack sẽ dễ dàng hơn.

Những điểm hạn chế

  • Not content editor friendly: Content editor sử dụng markup language, điều này có thể không thân thiện với một số người dùng nhất định.

  • Update via coding:

Quá trình triển khai phụ thuộc vào việc sinh dữ liệu trước khi deploy đòi hỏi những thay đổi sẽ cần được thực hiện ở tầng coding, building. Những thay đổi về giao diện, layout, hay thay đổi content đều cần được build và deploy lại.

  • Dynamic features requires more heavy lifting

Một điều hạn chế bạn có thể thấy với static site generator là việc phụ thuộc vào quá trình xử lý sinh content trước khi deploy. Quá trình này đòi hỏi tất cả các trang cần được sinh ra trong quá trình build. Nếu như hệ thống có rất nhiều trang thì việc thay đổi nội dung liên tục đối với các trang sẽ khiến cho việc deploy diễn ra chậm hơn và tốn nhiều tài nguyên hơn. Một cách tiếp cận tốt hơn để tối ưu quá trình này là cung cấp các cách thức để load động dữ liệu khi tải trang. Điều này sẽ tốn nhiều nguồn lực để đảm bảo nội dung trang web vừa dyanmic vừa thân thiện với các công cụ tìm kiếm trong việc đánh chỉ mục trang web của bạn.

  • Heavy depend on third party systems:

Việc phụ thuộc vào micro services để thay thế cho tầng backend đồng nghĩa performance của hệ thống sẽ phụ thuộc vào các third party đó. Nếu third party đó gặp sự cố thì hệ thống của bạn cũng sẽ bị ảnh hưởng. Với sự trỗi dậy của nền công nghiệp APIs thì mình nghĩ cộng đồng sẽ được hưởng lợi nhiều hơn bởi việc tận dụng các dịch vụ sẵn có.

Phát triển hệ thống dựa trên JAMStack như thế nào?

JAMstack đem đến sự đơn giản trong việc phát triển và deploy hệ thống bởi việc loại bỏ tầng backend giúp cho quá trình phát triển trở đến đơn giản hơn.

Một ví dụ phát triển website dựa trên các thành phần:

  • Source code git: team phát triển sẽ lưu trữ source code thông qua Github

  • Continuous Delivery (CI) : Netlify đóng vài trò thực hiện build, deploy hệ thống tự động khi source code thay đổi. Netlify thậm chí cung cấp CDN để host site của bạn. Thông qua Netlify team phát triển có thể dễ dàng cấu hình domain, và deploy hệ thống nhanh chóng. Và việc cung cấp gói free cho phép bạn xây dựng website dễ dàng hơn bao giờ hết.

  • Third party: Headless CMS đóng vài trò quản lý nội dung cho cho trang blog, lading page.

The future of e-commerce is Headless

Headless e-commerce example
Headless e-commerce example

Việc triển khai web site dựa trên static site generator framework mang tới lợi ít to lớn vì chi phí hosting khá rẻ thậm chí là free với nhiều dịch vụ. Bạn có thể dễ dàng tạo ra trang blog, lading page, documentation page một cách miễn phí.

Static Site Generator framework

Static Site Generator là một phần không thể thiếu khi xây dựng website dựa trên kiến trúc JAMstack.

Sự nổi nên của những mô hình phát triển dựa trên reactjs, vuejs cùng với các framework static site generator như Gatsby, Nextjs, Hugo, Nuxtjs… (https://bejamas.io/blog/static-site-generators/) đang thu hút được sự quan tâm của đông đảo cộng đồng developer đặc biệt là những frontend developer. Static site generator đã và đang giúp cho cộng đồng frontend developer có công cụ mạnh mẽ để xây dựng website mà không cần phải có kiến thức về backend.

Bởi những ưu điểm đó mà có nhiều đội phát triển đã lựa chọn nó để xây dựng website như: reactjs, tiktok, nextflix jobs

Xem thêm các trang web được xây dựng dựa trên:

Lời kết

JAMstack đã đơn giản hóa quá trình phát triển website, tận dụng sự đa năng của Javascript và hệ sinh thái APIs (Micro services) tạo ra các website nhanh, rẻ hơn, bảo mật hơn. Cùng với cộng đồng developer ngày càng ủng hộ những phương thức phát triển dựa trên nền tảng phổ biến như reactjs, vuejs, graphQL, HeadlessCMS tôi tin nó sẽ là xu hướng được thúc đẩy bởi nhiều những tổ chức, tập đoàn công nghệ và sẽ dần dần thay thế các phương thức truyền thống (LAMP stack, MEAN stack)

Liên kết tham khảo


Previous
DRY - đừng lặp lại những việc mà nhẽ ra có thể tự động được.

Hien Do

Software Engineer

Topics

Book
Web Development
System Design

Related Posts

Web Performance Optimization - Tối ưu tốc độ web ra sao và những kinh nghiệm thực tế
February 10, 2021
6 min
© 2021, All Rights Reserved.