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 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ể:
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.
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ạ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
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.
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 Stack vẫn có thể dùng:
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é.
Ý 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:
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.
Các công nghệ Khang sử dụng trong project này:
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:
Bài viết liên quan
[Case Study] Bán No-code MVP làm trong 100h giá $5000 - 11 min(s) read - published on January 15, 2021Chi tiết mình validate idea với nocode - 3 tuần 60 sales - $567 - 7 min(s) read - published on December 15, 2020Do things that don't scale - Lời khuyên tốt nhất để validate idea làm app - 2 min(s) read - published on November 22, 2020GPT-3 sẽ là phát minh quan trọng kể từ Blockchain - 4 min(s) read - published on September 15, 2020Finding product market fit is f**king hard - 2 min(s) read - published on September 13, 2020[Case Study]: Mình đã validate idea app hẹn hò #sapiosexual với chi phí $2 như thế nào? - 4 min(s) read - published on September 6, 2020#6 - NoCode MVP - Tổng kết - 5 min(s) read - published on August 22, 2020#5 - NoCode MVP - Buông bỏ để hạnh phúc - 2 min(s) read - published on July 28, 2020#4 - NoCode MVP - Ý tưởng. Một lần chơi lớn - 4 min(s) read - published on July 2, 2020#3 - NoCode MVP - Sức mạnh của Bubble.io - 5 min(s) read - published on June 29, 2020