JAMstack - Mì ăn liền nhưng không kém chất lượng
Sau hai ba ngày bôn ba chạy deadline cho kịp final của kì học này thì mình cũng dã quay lại rồi đây. Bài viết hôm này sẽ là về một tech stack hiện đang chiếm thị phần người sử dụng trong khuôn khổ thiết kế phần mềm đó là JAMstack
Sau hai ba ngày bôn ba chạy deadline cho kịp final của kì học này thì mình cũng dã quay lại rồi đây. Bài viết hôm này sẽ là về một tech stack hiện đang chiếm thị phần người sử dụng trong khuôn khổ thiết kế phần mềm đó là JAMstack. Về tech stack này thì mình cũng đã có nhắc đến vài lần trong các bài viết trước
Nhưng hôm nay mình sẽ chia sẻ rõ về JAMstack, cách triển khai và những trải nghiệm của mình trong quá trình làm việc.
LỊCH SỬ HÌNH THÀNH VÀ PHÁT TRIỂN
Những thông tin được liệt kê dưới đây được mình tham khảo và dịch từ trang WTF is JAMstack? nhé
Trước 2015
Ở nhứng giai đoạn trước 2015, khi mà khái niệm Static Site Generators (SSG) chưa phổ biến trong cộng động. Khi mà vào những thời gian này, hầu hết mọi người biết đến các trang web tĩnh hay static web page. Các trang web này không có sự thay đổi về mặt nội dung và hầu hết người dùng đều nhìn thấy chung những nội dung giống nhau. Trước đó thì các web tĩnh được viết chỉ bằng HTML, CSS và Javascript thuần.
Sau 2015
Mãi sau tới giai đoạn 2015 thì có một khái niệm công nghệ mới được ra đời là Static Site Generator (SSG) hay còn được hiểu là bộ khởi tạo trang web tĩnh. Vào thời điểm này thì SSG phổ biến nhất được biết đến là Jekyll.
Giai đoạn 2016
Đây là lúc mà các cộng đồng lập trình viên nhỏ lẻ tin rằng sức mạnh của trang web tĩnh không chỉ nằm ở các dữ liệu tĩnh nữa và từ đó khái niệm "JAMstack" được ra đời.
Giai đoạn 2017
2017 là năm cho sự lên ngôi của tốc độ - hiệu suất (performance), tính mở rộng (scalability) và trải nghiệm của nhà phát triển (developer experience). Những đặc tính và nhu cầu ấy đã tạo nên một cuộc cách mạng trong thiết kế ứng dụng web hiện đại. Nhân cơ hội đó, JAMstack cũng đã lấy được sự chú ý của đông đảo nhà phát triển và có cho mình một chỗ đứng trong thị trường. Thậm chí đây cũng là năm đánh dấu cho cuộc hội thảo về JAMstack lần đầu tiên được thông báo đến cộng đồng.
Từ 2018 đến nay
Sau khi đã có một vị trí nhất định trong cộng đồng thì từ những 3 năm đổ lại đây (từ 2018), vị trí của JAMstack càng ngày càng được củng cố hơn nhờ những bộ công nghệ bá đạo như Contentful, NextJS hay Gatsby. Đây cũng là năm diễn ra cuộc hội thảo đầu tiên.
JAMstack là gì?
Từ đầu bài viết đến giờ chắc có lẽ các bạn cũng biết được sơ lược về quá trình phát triển của JAMstack cho đến nay. Tuy nhiên, JAMstack là gì? vẫn là câu hỏi mình chưa trả lời từ nãy giờ đúng không. Vậy thì hãy cùng mình đào sâu hơn công nghệ này nào.
JAMstack là một tech stack được hình thành từ 3 yếu tố J.A.M. tương ứng với Javascript, Application Programming Interface (API) và Markup. Cụ thể hơn thì
- Javascript: ám chỉ đến các Frontend framework như React, Vue hoặc Svelte. Tuy nhiên khi có khái niệm SSG (Static Site Generator) thì mình nghĩ SSG sẽ phù hợp hơn.
- API: Chỉ đến các Content Delivery Network (CDN) và các plugin, bộ công cụ được công cấp bởi các dịch vụ thứ ba như Disqus, Facebook Plugin hay Google Analytics.
- Markup: Đây là một phần cốt yếu của JAMstack và mình nghĩ cũng là phần làm cho tech stack này trở nên đặc biệt hơn cả. Markup ám chỉ đến các trang web tĩnh được pre-rendering trước khi deploy lên trên hosting site. Điểu này mình sẽ giải thích rõ hơn ở phần bên dưới.
Vì sao JAMstack là "Mì ăn liền có chất lượng"?
Sỡ dĩ mình so sánh JAMstack với mì ăn liền là vì tốc độ để cho ra một sản phẩm hoàn chỉnh của JAMstack so sánh với các tech stack khác như MERN stack hay LAMP stack là vượt trội. Vì lợi thế là thiết kế serverless cùng với bộ api được cung cấp từ bên thứ ba nên hầu hết các chức năng khó nuốt như bình luận hay tìm kiếm cũng có được giải pháp trong 1 nốt nhạc.
Ngoài ra tốc độ của JAMstack không chỉ nằm trong khả năng cho ra sản phẩm mà còn là về tốc độ load nội dung trên trang web tĩnh. Bỡi lẽ hầu như các trang web khi được deploy đều được pre-rendering trước. Ngoài ra nếu có thể lập trình vô hiệu hóa cache (cache invalidation) thì performance của trang web JAMstack còn nhanh hơn cả.
Nếu chỉ là mì ăn liền thì có mì this mì that, mì Hảo Hảo, mì Omachi...nhưng với JAMstack thì đây thật sự là mì có chất lượng. Có rất nhiều bài viết nói về sức mạnh của công nghệ này nên mình sẽ không dài dòng thêm nữa, các bạn có thể tham khảo thêm bài viết dưới đây.
Trải nghiệm của mình với JAMstack
Hành trình của mình đến với JAMstack bắt đầu từ một trải nghiệm tồi tệ khi chọn sai tech stack. Khoảng cuối năm 2020 thì mình có cũng 1 anh trong câu lạc bộ ở đại học cùng làm một trang blog cho club. Tuy nhiên thay vì sử dụng các API có sẵn và các CMS để cho ra một ứng dụng nhanh chóng thì tụi mình lại chọn xây dựng từ đầu sử dụng MERN stack. Và kết cục là mãi cho đến bây giờ cái web đó đã trôi vào hư vô không bao giờ được đưa đến tay các thành viên câu lạc bộ.
Sỡ dĩ là vì mình muốn viết blog quá rồi mà làm mãi trang của club không xong nên mình tự bắt tay vào làm blog cá nhân. Chỉ sau 1 tháng từ trải nghiệm tồi tệ, mình bắt tay vào làm thử web bằng JAMstack sử dụng SSG là Gatsby, CMS là Wordpress, GraphQL và host trên Heroku. Và vì đây là lần đầu mình dùng JAMstack vào thực tiễn cùng với trải nghiệm Wordpress lần đầu tiên, mình đã không tính toán được chi phí lẫn hạn chế mà mình gặp phải.
Dẫn đến kết cục là...làm lại từ đầu. Nhưng mà những kiến thức mình học được từ trải nghiệm đầu tiên ấy là rất hữu ích và mình tự đánh giá Gatsby và Wordpress là bộ công cụ rất đáng thử khi học JAMstack.
Nghe làm lại từ đầu vậy có vẻ là hơi căng nhưng mà thức ra là chỉ cần 2-3 ngày là mình lại có được một trang web để viết blog với tốc độ chóng mặt từ NextJS, Ghost CMS và Netlify. Và đó cũng chính là sự hình thành của web Góc Của Chung.
Xây dựng một trang web JAMstack cho riêng bạn
Hiện nay JAMstack đã có cho mình một hệ sinh thái đa dạng trên nhiều môi trường. Cũng không còn quá là khó để tiếp cận với tech stack này nữa. Bên cạnh những điểm mạnh điểm yếu, JAMstack còn có cả một trang web riêng bao gồm các công nghệ và tài liệu dễ đọc dễ hiểu. Đó cũng là điểm cộng làm cho tech stack non trẻ này trở nên khác biệt.
Khi mới bắt đầu, mình sẽ bám sát vào những tài liệu có trong trang web của JAMstack. Lựa chọn ra cho mình những Content Managment System (CMS) hay Hệ thống quản lý nội dung và SSG phù hợp. Vốn dĩ mình chuyên về React nên mình cũng lựa chọn các SSG cùng họ như Next hay Gatsby. Các bạn có thể tham khảo những SSG được sử dụng phổ biến và thực hành ngay để xem mức độ phù hợp nhé.
Sau đó là lựa chọn CMS, mình cảm thấy Wordpress là một CMS cung cấp rất nhiều plugin và cũng rất vẫn mạnh khi được đánh giá là CMS đứng đầu. Tuy nhiên, theo mình thấy thì sẽ chi phí cần phải bỏ ra để làm một web JAMstack bằng Wordpress là quá nhiều (chưa tính đến tiền hosting hàng tháng). Vậy nên mình sẽ ưu tiên hơn về Ghost CMS khi mà chỉ cần một nút bấm là có ngay CMS để sử dụng với ghost-on-heroku.
Về phần hosting thì mình nghĩ Netlify sẽ là lựa chọn phù hợp nhất vì vốn dĩ Netlify được sinh ra là dành cho web tĩnh. Còn một lựa chọn khác cũng được ưa chuộng là Vercel. Nếu mà bạn sử dụng NextJS thì Vercel chắc là lựa chọn hoàn hảo từ chính nhà cung cấp của NextJS.
KẾT...
Tới đây thì bài viết cũng khá dài rồi nên mình sẽ kết thúc và quay lại chạy deadline như chạy giặc đây thôi. Chúc các anh em cũng sẽ có được một trang JAMstack xịn xò nhé.