Thiết kế client-side theo kiến trúc OOP và MVVM với HtmlJs (phần I)
HtmlJs
2
MVVM
3
oop
15
White

Nhan Nguyen viết ngày 03/06/2016

Hôm nay mình sẽ giới thiệu kiến trúc thiết kế web theo OOP, kiến trúc này mình đang dùng trong dự án ở trong công ty. Với kiến trúc này, bạn có thể dễ dàng sử dụng lại các component, chỉ cần viết control 1 lần và sử dụng trong tất cả dự án. Cách thiết kế này sẽ làm giảm công sức code client xuống mức thấp nhất và hoàn toàn tập trung vào code business. Thiết kế giao diện chỉ cần kéo thả thôi. Đây là 1 thiết kế rất phức tạp nhưng cũng rất đáng giá. Dữ liệu truyền qua network hoàn toàn là JSON và luôn ở khoảng 0,5KB - 10KB, lớn nhất là 13KB với thao tác chuyển qua trang HTML nặng, thời gian request-response là 10ms-400ms. Dữ liệu truyền qua network luôn ở mức tối thiểu vì mình chỉ truyền những gì thay đổi, render lại những gì đã bị đổi.

Tư tưởng thiết kế

  1. Dùng mô hình MVVM, code business không hề đụng đến View. Xem các control ở client chỉ để hiển thị dữ liệu, tức là làm tốt phần View trong mô hình MVVM; hoàn toàn không xử lý business logic, cùng lắm là xử lý view-logic thôi. Nên phân biệt 2 cái này rõ ràng để khỏi phải lăn tăn về việc đặt code ở đâu. Tất cả code business & events đều được xử lý ở server, kể cả validation, navigation, .... Trong 1 app lớn thì ngay cả validation cũng phức tạp không kém code business nên đặt luôn ở server cho khỏe, client chỉ việc hiển thị validation message ra thôi.
  2. Tất cả các control đều có 2 phần dữ liệu quan trọng: datasourceselected. Datasource là phần để data để render dữ liệu ra màn hình, chỉ gởi từ server xuống client chứ không có chiều ngược lại. "selected" là phần dữ liệu người dùng thao tác và nên được gởi về phía server để xử lý, cái này cũng có thể có chiều ngược lại, tức là từ server gởi xuống "selected". Khi phần "selected" thay đổi thì sẽ cho vào 1 collector để gởi lên server khi cần thiết, tức là khi có event ở server-side. Sau khi gởi lên server thì sẽ clear dữ liệu ở collector đi. Một số trường hợp đặc biệt thì không có datasource ví dụ như textbox, numeric text box, date time picker, textarea. Tư tưởng này là quan trọng bậc nhất để giảm thiểu tối đa những cái lằng nhằng không đáng có của giao diện.
  3. Server chỉ render code HTML 1 lần, những lần sau giao tiếp với client đều là JSON, để làm được điều đó thì sẽ có code Javascript trung gian được sinh ra từ server để giữ liên lạc (gọi là binding code)

Mô hình này có thể được biểu diễn bằng sơ đồ sau:
alt text

Đây là một ví dụ kinh điển của single page, mình có một số control để nhập liệu thông tin nhân viên, và nút submit để đưa dữ liệu lên server, server sẽ nhận các dữ liệu đó, xử lý một số thứ như là lưu database, validate, thêm 1 record vào bảng danh sách nhân viên. Tất cả các bước đều phải được xử lý bằng JSON trừ bước đầu tiên là để render nguyên trang HTML ban đầu. Ở đây code business sẽ chỉ xử lý công việc liên quan đến dữ liệu, phần View sẽ lo mọi thứ về hiển thị.

Trong phần sau mình sẽ trình bày thiết kế 1 vài class cụ thể ở front end và back end, cách chúng tương tác với nhau.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nhan Nguyen

5 bài viết.
26 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
38 25
Giới thiệu về framework HtmlJs Chào các bạn, sau 2 năm nghiên cứu, mình đã viết 1 framework JavaScript. Hôm nay mình xin chia sẻ mong đem lại lợi ...
Nhan Nguyen viết gần 2 năm trước
38 25
White
7 10
Cái nào nhanh hơn vậy các bạn? Đi phỏng vấn thấy một câu hỏi vui vui là hai API này cái nào query nhanh hơn. Mình nói là document.getElementById, ...
Nhan Nguyen viết 12 tháng trước
7 10
White
4 0
Build your own rendering engine We’re not going to reinvent the wheel. We’re going to do simple things that help you have deep understanding of ho...
Nhan Nguyen viết 1 năm trước
4 0
Bài viết liên quan
White
0 0
Introduction to threeways binding with HtmlJs What is HtmlJs? It is a library/framework that implements MVVM pattern aka twoways binding in Java...
Nhan Nguyen viết hơn 1 năm trước
0 0
White
4 0
Build your own rendering engine We’re not going to reinvent the wheel. We’re going to do simple things that help you have deep understanding of ho...
Nhan Nguyen viết 1 năm trước
4 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
26 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!