Xây dựng MVP nhanh gọn bằng JAM stack - Ứng dụng Mangnon.school cùng Khang Trần

Giới thiệu

Mình có gặp bạn Khang Trần. Khang đã build một MVP Mangnon - điểm danh cho bé bằng 01 nút bấm. Đây là phần mềm giúp childcare giúp thầy giáo, cô giáo nhanh chóng thông báo tình hình cho bố mẹ.

Trong bài này, Khang có chia sẻ về JAM stack, cũng như cách Khang xây dựng MVP từ khâu ý tưởng để hoàn thành MVP chỉ trong 1 tuần.

JAM Stack là gì?

JAM stack *không phải là một tool, hay công nghệ cụ thể * như LAMP Stack, MEAN stack, MERN Stack vvv. JAM stack không phải là một hệ điều hành, ngôn ngữ lập trình, backend dùng gì, client dùng gì, database dùng gì. JAM stack là một cách mới để xây dựng websites nhanh gọn, ít tốn chi phí khi scale.

JAM Stack là viết tắt cho Javascript, API và Markup, cụ thể:

Javascript (J): Front end framework, chạy hoàn toàn bên phía client, có thể dùng bất cứ framework phổ biến nào như VueJS, ReactJS, AngularJS
API (A): Các HTTP API bạn tự tạo hoặc API bên thứ 3
Markup (M): Websites gồm các HTML tĩnh. Những file HTML này được tạo từ nguồn 1 markup, có thể là từ những file Markdown. Sau đó dùng các Static Site Generator đề tự động chuyển markup file sang HTML. Quá trình chuyển từ markup files sang HTML này xảy ra trước lúc deploy. Các Static Site Generator phổ biến để làm việc này: Gatsby, Hugo, Jekyll

Dynamic site vs static site

Mình sẽ ví dụ cơ bản sự khác nhau giữa dynamic và static site. Lúc trước mình dùng Wordpress (dynamic) cho blog, sau đó mình chuyển sang static site.

Khi đó ví dụ bạn vào niviki.com/contact

Với dynamic site, browser sẽ call đến hosting Hawkhost, nơi mình cài Wordpress. Sau đó Wordpress sẽ connect với database để lấy các nội dung mình lưu ở trang contact này. Sau đó nó mới generate ra các file html,css,js rồi gửi về client là browser của mình.

Với static site, mình viết sẵn trang contact bằng markdown (contact.md), sau đó dùng một static site generator là Hugo, deploy lên 1 static host là Netlify. Hugo có nhiệm vụ là generate sẵn file contact.html từ file markup markdown. Và các file html được gửi đến CDN.

(CDN là công nghệ giúp copy website bạn thành nhiều bản khác nhau (node) trên khắp thế giới, tuỳ vào vị trí địa lý của bạn thì CDN sẽ chọn node gần bạn nhất để giảm độ trễ)

Khi user vào route niviki.com/contact thì đã có sẵn file html này rồi.

Dưới đây là hình so sánh workflow giữa cách phát triển truyền thống và JAM stack.

jamstack-vs-traditional

Điểm mạnh của JAM Stack

Tốc độ & scale

HTML, assets của site được pre-built và đưa lên CDN nên tốc độ của site cực nhanh. Giả sử app của bạn có viral thì cũng không phải lo sập server.

Bảo mật

Bạn sẽ không lo phải bảo mật database, server nữa vì đa số sẽ dùng các static website hosting provider uy tín như Netlify, Google Firebase, Github Pages, vv

Tiết kiệm chi phí

Các static hosting đa số đều free như Netlify, Github pages, Firebase, vv. Bạn chỉ cần trả tiền khi lương truy cập đã quá lớn hoặc cần thêm các tính năng addons mà hosting static cung cấp.

Workflow cho developer tốt hơn

Bạn phát triển app ở máy local, dùng git và push source code lên static hosting, mọi thứ còn lại đều là tự động.

Chưa kể nhiều tính năng hỗ trợ như branch deploy (deploy theo nhánh như staging, dev, vv), pre-rendering, tối assets

JAM chỉ dùng cho static ?

JAM Stack vẫn có thể dùng:

Form
Comment
Search

Bạn có thể xây dựng cả trang thương mại điện tử với JAM stack vẫn được luôn. Netlify có publish quyển sách Modern Web Development on the JAMstack có case study: Migration sang JAM stack của trang Smashing magazine. Bạn có thể tìm đọc thêm nhé.

Ứng dụng Mangnon.school

Ý tưởng

Ý tưởng xuất phát từ vụ "học sinh bị bỏ quên trên xe trường Gateway". Đó là trigger làm Khang nảy sinh ý tưởng này.

Sau khi khảo sát vài người anh trong công ty, Khang quyết định bắt tay ngay làm app.

App vẫn đang trong thời gian nâng cấp và phát triền. Mọi người có thể dùng thử tại link này nhé https://childcare.mangnon.school/#/

Danh sách tính năng:

Tạo lớp học
Quản lý lớp học
Báo với phụ huynh qua SMS, Email

Công nghệ

Ngoài JAM stack, Khang cũng áp dụng công nghệ Progressive web app vào project này. Người dùng chỉ cần vào Mangnon.school bằng trình duyệt trên điện thoại, sau đó thêm ứng dụng vào màn hình chính. Lần sau user truy cập thì trải nghiệm như là một mobile app.

Progressive web app Măng non

Các công nghệ Khang sử dụng trong project này:

Quasar cho frontend
Firebase cloud functions để lưu data của user
Twilio để gửi SMS, email đến phụ huynh
Netlify để deploy

Kết

Trong bài này, mình đã giới thiệu về JAM stack cũng như ứng dụng Mangnon.school với sự chia sẻ của bạn Khang Trần. Về JAM stack, bạn có thể xem thêm tại Jamstack.org

Về ứng dụng Mangnon, bạn nào có hứng thú về idea, tech stack thì có thể comment bên dưới hoặc liên hệ trực tiếp Khang qua facebook cá nhân nhé.

Source:

https://snipcart.com/blog/jamstack