Gần đây một số sinh viên thường hỏi tôi nên chọn hướng nào khi lập trình ứng dụng Web Spring Boot:
- Kiểu Server Side Rendering : sử dụng Thymeleaf (một view template engine)
- Kiểu Client Side Rendering : sử dụng Angular, React, Vue gọi vào REST API của Spring Boot?
Xu hướng làm app web mới thì kết hợp Spring boot với Thymeleaf hay là Spring boot với Angular (hoặc ReactJs)?
Cách nào tốt hơn?
Ưu/nhược điểm của mỗi cách
Với 1 câu nữa là phát biểu sau có đúng ko: Angular/ReActJs/VueJS “chỉ” hiệu quả khi viết app dạng SPA(Single Page Application) còn các app web thông thường thì dùng Jquery là đủ?
Server Side Rendering khác gì với Client Side Rendering?
| Đặc điểm | Server Side Rendering | Client Side Rendering |
|---|---|---|
| Cơ chế | HTML sinh ra ở web server | HTML sinh ra ở trình duyệt |
| Ngôn ngữ lập trình | View Template Engine Syntax và ngôn ngữ lập trình web server | JavaScript kết hợp với cú pháp riêng từng framework |
| Trải nghiệm người dùng | Thường phải reload lại trang để làm mới thông tin | Giao diện cập nhật từng phần, cập nhật liên tục và tự nhiên hơn |
| SEO | Thân thiện hơn với Search Engine | Gây nhiều khó khăn cho Search Engine |
| Ứng dụng | Hiển thị nội dung tĩnh, 80% read, 20% write | Nhiều người cũng tham gia cập nhật, nội dung liên tục thay đổi |
| Mô hình | Phù hợp và dễ triển khai với Monolithics | Phù hợp với mô hình microservice, API Gateway |
| Triển khai | Đóng gói thành 1 cục | Front end và Back end có thể triển khai độc lập |
Ưu và nhược điểm của Server Side Rendering
Ưu điểm
- Dễ học, dễ debug, dễ đóng gói
- Phù hợp ứng dụng web cổ điển, phần lớn thời gian người dùng đọc thông tin được truy vấn từ CSDL
- Lần đầu tải khá nhanh
- Có thể áp dụng cơ chế caching cả trang nội dung nếu nội dung ít khi thay đổi
Nhược điểm
- Khó khăn trong việc lập trình cập nhật trạng thái từng phần trong cả một trang web
- Cách reload lại trang không còn phù hợp với trải nghiệm người dùng hiện nay
Ưu và nhược điểm của Client Side Rendering
Ưu điểm
- Rất phù hợp để tạo ứng dụng web chủ động cập nhật làm mới từng phần giao diện: ứng dụng chat, biểu đồ động, ứng dụng mạng xã hội nhiều người cùng tạo thông tin
- Giảm thiểu số lần reload lại cả trang web
- Tách biệt rõ ràng công việc của lập trình web front end và lập trình back end tạo REST API. Kiểm thử từng bộ phận sẽ rành mạch hơn
- Cập nhật phiên bản mới front end không ảnh hưởng hoạt động của back end
- Nếu back end chỉ nâng cấp logic không thay đổi API thì nâng cấp back end không ảnh hưởng đến front end
- REST API của back end có thể phục vụ cho cả ứng dụng di động
Nhược điểm
- Với những ứng dụng nhỏ, sẽ tốn thêm lập trình viên front end
- Để học và làm chủ Angular, React, Vue khó hơn làm chủ cú pháp HTML, CSS, View Template Syntax
- Cấu hình DevOps sẽ phức tạp hơn, nhưng việc CI/CD sẽ liên tục hơn so với Server Side Rendering
- Lần đầu load sẽ khá chậm vì phải tải về thư viện
Hỏi đáp
Hỏi: Nếu tôi chọn Client Side Rendering thì tôi có nên dùng chính Spring Boot để host ứng dụng Angular, React, Vue?
Trả lời: về nguyên tắc bạn có thể làm được, nhưng bạn không nên làm như vậy, vì chúng ta đang cố gắng tách bạch front end và back end. Làm sao để front end cập nhật không ảnh hưởng đến back end.
Nên sử dụng Nginx làm web server để hosting ứng dụng front end.Hỏi: Tôi muốn học lập trình Web Front End thì nên bắt đầu như thế nào?
Đáp: Bạn có thể tham khảo khoá học Web Front End 5 tháng tại Techmaster
Bình luận