◊u i∫m cıa mô hình MVC:
• HªthËng ˜Òc phân chia thành t¯ng ph¶n và mÈi ph¶n £m nhiªm mÎt ch˘c n´ng nên dπ dàng phát tri∫n, Áng thÌi nhi∑u ng˜Ìi có th∫làm chung mÎt d¸ án vÓi nhi∑u m£ng khác nhau trong d¸án.
• T§o mô hình chu©n cho d¸ án giúp ng˜Ìi cho chuyên môn ngoài d¸ án ti∏p c™n vÓi d¸ án dπdàng hÏn.
• Trong quá trình ki∫m th˚hªthËng thì viªc ki∫m th˚t¯ng ph¶n là Îc l™p vÓi nhau nên dπ dàng phát hiªn và chønh s˚a lÈi.
• Mô hình tri∫n khai Ïn gi£n, dπhi∫u, rành m§ch và dπdàng tri∫n khai vÓi các d¸án v¯a. Nh˜Òc i∫m cıa mô hình MVC:
• Mô hình g∞p nhi∑u khó kh´n khi tri∫n khai vÓi các d¸án lÓn do quy trình x˚l˛nghiªp vˆ có tính ph˘c t§p cao và l˜Òng d˙liªu lÓn.
• Mô hình ˜Òc chia thành các thành ph¶n riêng biªt nên tËc Îx˚l˛ch™m hÏn do ó không thích hÒp tri∫n khai cho các d¸án nh‰.
3.2 Ÿng dˆng a trang và ˘ng dˆng Ïn trang3.2.1 Ÿng dˆng a trang (Multiple-page application) 3.2.1 Ÿng dˆng a trang (Multiple-page application)
Ÿng dˆng a trang ho§t Îng theo cách "truy∑n thËng". MÈi thao tác nh˜hi∫n th‡d˙liªu, thay Íi d˙liªu hay g˚i d˙liªu lên server thì ∑u c™p nh™t l§i toàn bÎtrang b¨ng d˙liªu mÓi trên trình duyªt web. Nh˙ng˘ng dˆng này th˜Ìng có kích th˜Óc lÓn và viªc ph£i c™p nh™p l§i trang s≥gây £nh h˜ng tÓi tr£i nghiªm ng˜Ìi dùng. Tuy nhiên, nhÌvào AJAX, chúng ta ã gi£m thi∫u mËi lo v∑ ÎlÓn, Îph˘c t§p trong viªc truy∑n d˙ liªu gi˙a server và trình duyªt. VÓi cách gi£i quy∏t này, chúng ta chøc¶n c™p nh™p l§i mÎt ph¶n ˘ng dˆng liên quan mà không c¶n c™p nh™p l§i hoàn toàn mÎt trang. Tuy v™y, các˘ng dˆng càng ph˘c t§p thì viªc s˚dˆng AJAX càng ph˘c t§p hÏn.
1. ◊u i∫m
• Ng˜Ìi dùng dπdàng thao tác, s˚ dˆng Ëi vÓi nh˙ng˘ng dˆng có menu, i∑u h˜Óng ít, thu™n tiªn.
• Thích hÒp và thu™n tiªn cho viªc qu£n lí SEO. Các ˘ng dˆng a trang dπdàng phân cßp, s≠p x∏p các t¯khóa cho t¯ng trang, t¯ng mˆc ích, t¯ng s£n ph©m.
2. Nh˜Òc i∫m
• Viªc phát tri∫n ˘ng dˆng khá ph˘c t§p. Nhà phát tri∫n c¶n phát tri∫n Áng bÎ c£ back-end và front-end.
• C¶n ph£i k∏t hÒp ch∞t ch≥gi˙a back-end và front-end trong quá trình phát tri∫n˘ng dˆng.
3.2.2 Ÿng dˆng Ïn trang (Single-page application)
Ÿng dˆng Ïn trang là˘ng dˆng làm viªc trong mÎt trình duyªt mà không yêu c¶u ph£i c™p nh™p l§i khi s˚dˆng.Ÿng dˆng Ïn trang khá phÍbi∏n, có th∫k∫tÓi nh˙ng˘ng dˆng mà chúng ta s˚dˆng h¨ng ngày nh˜: Google Map, Facebook, Gmail, Github, ....
Ÿng dˆng Ïn trang cung cßp UX(User Experience), ng˜Ìi dùng chø c¶n t£i nÎi dung cıa trang trong l¶n ¶u tiên b¨ng viªc s˚ dˆng Javascript.
1. ◊u i∫m
• Quá trình phát tri∫n˘ng dˆng Ïn gi£n hÏn, có trình t¸ ˜Òc s≠p x∏p hÒp l˛. Nhà phát tri∫n không c¶n vi∏t code ∫t§o nhi∑u trang t¯phía server. Viªc b≠t ¶u hÂc cÙng Ïn gi£n hÏn khi chø c¶n quan tâm ∏n t™p tin liên quan ∏n mÎt trang duy nhßt.
• SPA nhanh hÏn do các tài nguyên nh˜(HTML, CSS, Javascript, ...) ã ˜Òc t£i t¯l¶n ¶u, chøcó d˙ liªu ˜Òc thay Íi gi˙a server và trình duyªt.
• SPA dπdàng ki∫m tra, ki∫m lÈi hÏn do ph¶n lÓn các trình duyªt (Chrome,FireFox,...) hÈtrÒtËt trong viªc quan sát, debug, ki∫m lÈi ngay trên trình duyªt.
• SPA có kh£ n´ng làm viªc vÓi bÎ nhÓ cˆc bÎ, cache tËt. Nên hiªu qu£ hÏn ˘ng dˆng a trang khi làm viªc offline, do các tài nguyên chøc¶n t£i xuËng mÎt l¶n.
2. Nh˜Òc i∫m
• Trong l¶n ¶u tiên t£i trang, viªc t£i xuËng s≥ lâu hÏn do t£i xuËng tßt c£ các tài nguyên.
• Th˜Ìng ít b£o m™t hÏn khi so sánh˘ng dˆng a trang do XSS (Cross Site Scripting), cho phép k¥tßn công có th∫chèn mã phá ho§i vào˘ng dˆng web tÓi ng˜Ìi dùng khác.
• JavaScript c¶n ˜Òc cho phép ch§yphía ng˜Ìi dùng.
• Rò røbÎ nhÓ trong Javascript làm hªthËng làm viªc ch™m hÏn.
3.2.3 K∏t lu™n
Do khËi l˜Òng công viªc, cÙng nh˜ tính n´ng mà hª thËng lu™n v´n cung cßp cho ng˜Ìi dùng. Viªc s˚dˆng SPA,˘ng dˆng Ïn trang t‰ ra hiªu qu£hÏn.
• SPA ang ˜Òc s˚ dˆng rßt nhi∑u, do ó có nhi∑u framework hÈtrÒ, cÎng Áng phát tri∫n.
• HªthËng ˜Òc phát tri∫n hÈ trÒcho công tác qu£n lí cıa tr˜Ìng §i hÂc, do ó không c¶n chú trÂng vào qu£n l˛SEO.
• Viªc chia nh‰ hªthËng ra thành nhi∑u ph¶n nh‰, qu£n l˛, hiªn th¸c SPA Ïn gi£n hÏn MPA.
• HªthËng c¶n l˜u tr˙, chia s≥nhi∑u d˙ liªu gi˙a các tính n´ng, tác vˆ. Do ó vÓi SPA, có th∫t™n dˆng bÎnhÓcˆc bÎ(local storage) ∫hÈtrÒviªc t˜Ïng tác vÓi ng˜Ìi dùng. T¯mÎt sË ∞c i∫m k∫trên, nhóm quy∏t ‡nh l¸a chÂn mô hình˘ng dˆng Ïn trang k∏t hÒp vÓi Model - View - Controller ∫phát tri∫n hªthËng.
3.3 Các n∑n t£ng cho Javascript
Khi tìm hi∫u, nghiên c˘u ∫xây d¸ng˘ng dˆng, có rßt nhi∑u n∑n t£ng, công nghªth¸c hiªn trên Javascrip hÈtrÒcho viªc th¸c hiªn giao diªn ng˜Ìi dùng (front-end). Các n∑n t£ng giúp nâng cao hiªu n´ng, hiªu sußt công viªc, hÈtrÒ qu£n lí mã nguÁn tËt nh˜ ReactJs, AngularJs, VueJs. Sau ây, nhóm s≥giÓi thiªu, phân tích˜u và nh˜Òc i∫m cıa mÎt sËcông nghªnày, t¯ ó ˜a ra l¸a chÂn.
3.3.1 VueJs