xây dựng framework joo lập trình ứng dụng ria xây dựng thành phần quản lý luồng diễn tiến ứng dụng

TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆPMục tiêu của người viết luận văn là xây dựng JOO - framework nhằm chuẩn hóa lại mô hình lập trình các ứng dụng web, quản lý và tối ưu hóa hiệu năng xử lý

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

──────── * ───────

ĐỒ ÁN

TỐT NGHIỆP ĐẠI HỌC

NGÀNH CÔNG NGHỆ THÔNG TIN

Xây dựng framework JOO lập trình ứng dụng RIA: Xây dựng thành phần quản lý luồng diễn

PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

1 Thông tin về sinh viên

Họ và tên sinh viên: Bùi Anh Dũng

Điện thoại liên lạc: 0127 506 5837 Email: griever.se51@gmail.com

Lớp: Công nghệ phần mềm Hệ đào tạo: Đại học chính quy

Đồ án tốt nghiệp được thực hiện tại: Bộ môn Công nghệ phần mềm, Viện CNTT & Truyền Thông – Đại học Bách Khoa Hà Nội

Thời gian làm ĐATN: Từ ngày 15 / 01 / 2011 đến 25 / 05 /2011

2 Mục đích nội dung của ĐATN

Xây dựng framework JOO để đơn giản hóa và chuẩn hóa việc lập trình các ứng dụng RIA bằng HTML/Javascript

3 Các nhiệm vụ cụ thể của ĐATN

• Xây dưng phiên bản 1.0 của framework

• Ứng dụng framework để xây dựng hệ thống cụ thể (BKProfile)

4 Lời cam đoan của sinh viên:

Tôi – Bùi Anh Dũng - cam kết ĐATN là công trình nghiên cứu của bản thân tôi dưới sự hướng dẫn của PGS.TS Huỳnh Quyết Thắng

Các kết quả nêu trong ĐATN là trung thực, không phải là sao chép toàn văn của bất kỳ công trình nào khác

Hà Nội, ngày 12 tháng 4 năm 2011

Tác giả ĐATN

Bùi Anh Dũng

5 Xác nhận của giáo viên hướng dẫn về mức độ hoàn thành của ĐATN và cho phép bảo vệ:

Hà Nội, ngày tháng năm

Giáo viên hướng dẫn

PGS.TS Huỳnh Quyết Thắng

TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP

Mục tiêu của người viết luận văn là xây dựng JOO - framework nhằm chuẩn hóa lại

mô hình lập trình các ứng dụng web, quản lý và tối ưu hóa hiệu năng xử lý dữ liệu ở máy chủ, truyền dữ liệu phân tán qua mạng…

JOO ra đời giải quyết những trở ngại còn tồn tại trong quá trình xây dựng các ứng dụng này: có khả năng tương đương với những ứng dụng thông thường trên máy tính cá nhân, tương thích với nhiều loại nền tảng và phần cứng, hiệu năng truyền tải dữ liệu qua mạng, hiệu năng xử lý dữ liệu ở máy chủ, khả năng phân tán

Người viết luận văn đã nghiên cứu trên các mô hình lập trình web truyền thống và một số framework tiêu biểu, sau đó thiết kế các giải pháp nhằm kế thừa những ưu điểm, khắc phục nhược điểm của những mô hình này

Kiến trúc hệ thống của JOO là kết quả của quá trình nghiên cứu và tích hợp các giải pháp thu được – đáp ứng hầu hết các thuộc tính về mặt chất lượng của ứng dụng web JOO đồng thời chuẩn hóa mô hình lập trình và mô hình xử lý dữ liệu ở các ứng dụng loại này

JOO đã được triển khai thực tế trên hệ thống BKProfile, hệ thống kết nối chia sẻ tri thức Với những lí do trên, JOO có khả năng tạo ra một hướng tiếp cận hiệu quả cho việc lập trình ứng dụng web, đáp ứng được những hệ thống phân tán cỡ lớn, đồng thời giải quyết những trở ngại trong lĩnh vực này

ABSTRACT OF THESIS

The goal of this thesis is to develop JOO Framework for normalizing web application programming model, managing and optimizing server performance, data transfer on the Internet, etc

JOO deals with the many difficulties and problems which are still existed when building high performance rich web applications: the application must provide the same functionalities, same interactivity with these of normal desktop applications, must be compatible with as many platforms and hardware as possible, must provide a high performance in data transfer, server processing, scalability, etc

The author has researched some major and featured platforms and frameworks, as well as the traditional programming model, designed a solution which made use of some advantages of those platforms and remedy their disadvantages

The architecture of JOO Framework is the result of a long progress of researching, implementing and testing; it satisfies most quality criteria in web programming framework, also normalizes the programming model to help developers to build web applications more quickly and efficiently

JOO has been deployed and tested in some real systems, such as: BKProfile, IDEE, Joob Location-based Social Network To conclude, JOO has potential to promote a new approach of programming web applications

LỜI CẢM ƠN

Đầu tiên, em xin gửi lời cảm ơn chân thành sâu sắc đến các thầy cô giáo trong trường đại học Bách Khoa Hà Nội nói chung và các thầy cô giáo trong Viện Công nghệ thông tin và truyền thông nói riêng, nhất là các thầy cô giáo trong bộ môn Công nghệ phần mềm, đã tận tình giảng dạy, cho em niềm đam mê với ngành học, đồng thời truyền đạt cho em nhiều kiến thức, kinh nghiệm quý báu trong suốt 5 năm vừa qua

Đặc biệt, em xin gửi lời cảm ơn đến thầy Huỳnh Quyết Thắng và thầy Lê

Quốc, những người đã hướng dẫn và chỉ bảo em trong suốt giai đoạn thực tập

chuyên ngành và toàn bộ quá trình làm đồ án tốt nghiệp Làm việc với thầy, em không chỉ nhận được những kiến thức chuyên ngành cần có, mà ở thầy em còn nhận được nhiệt huyết tìm hiểu, sự đam mê công việc, tình cảm của một người anh, và nhất là những định hướng, động viên Nhờ đó em đã hình thành cho mình một định hướng tương lai đầy đủ, vững chắc Một lần nữa, xin cảm ơn thầy!

Không thể thiếu được là lời cảm ơn em muốn gửi tới thầy Lê Quốc – bộ môn

Công nghệ phần mềm, Viện Công nghệ thông tin và truyền thông, ĐH Bách Khoa

Hà Nội, và công ty Cazoodle Việt Nam, cùng với tất cả các thành viên trong nhóm BKProfile Team Thời gian làm việc cùng nhóm BKProfile tại công ty Cazoodle dưới sự hướng dẫn, động viên và góp ý của thầy Lê Quốc cùng với sự cổ vũ và nhiệt huyết làm việc đầy đam mê, sáng tạo của các thành viên trong đội ngũ phát triển BKProfile, em đã học hỏi được rất nhiều từ tinh thần và cách làm việc của các bạn Không có thầy và các bạn, có lẽ đồ án này của em không bao giờ hoàn thành tốt được

Cuối cùng, em xin gửi lời cảm ơn chân thành nhất tới tất cả bạn bè, đồng nghiệp, và người thân… Những người đã bên em, động viên, đóng góp ý kiến và giúp đỡ em trong suốt khoảng thời gian vừa qua

Hà Nội, tháng 5 năm 2011Chân thành cảm ơn!

MỤC LỤC

PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP 2

TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP 3

ABSTRACT OF THESIS 4

LỜI CẢM ƠN 5

MỤC LỤC 6

DANH MỤC CÁC BẢNG 7

DANH MỤC CÁC TỪ VIẾT TẮT 8

DANH MỤC CÁC HÌNH MINH HỌA 9

PHẦN MỞ ĐẦU 10

CHƯƠNG 1 – ĐẶT VẤN ĐỀ VÀ GIẢI PHÁP 11

CHƯƠNG 2 – JOO FRAMEWORK 20

2.4.Kết chương 43

CHƯƠNG 3 - ỨNG DỤNG JOO XÂY DỰNG HỆ THỐNG BKPROFILE 44

CHƯƠNG 4 - KẾT LUẬN VÀ ĐÁNH GIÁ 48

4.1.Kết quả đạt được 48

4.2.Những khó khăn và thuận lợi 48

4.3.Phương hướng phát triển 49

TÀI LIỆU THAM KHẢO 50

DANH MỤC CÁC BẢNG

Bảng 1 – So sánh tốc độ tải trang trung bình của ứng dụng web khi xây dựng bằng Zend Framework & khi xây dựng bằng Joo framework 47

DANH MỤC CÁC TỪ VIẾT TẮT

1 RIA Rich Internet Application, chỉ các ứng dụng chạy trên nền

web nhưng mang đầy đủ đặc tính của một ứng dụng desktop Được nhắc đến ở chương 1

2 AJAX Asynchronous Javascript and XML Thuật ngữ được ra đời

năm 2005 dùng để chỉ một tập hợp các công nghệ hỗ trợ việc phát triển ứng dụng web theo cơ chế bất đồng bộ

3 JSON Javascript Object Notation Là định dạng để ký hiệu các đối

tượng của ngôn ngữ Javascript, nhưng rất hay được dùng trong việc trao đổi dữ liệu, đặc biệt là trong mô hình AJAX

4 SPA Single Page Application hay ứng dụng web một trang, chỉ

những ứng dụng web chỉ chạy trên một trang HTML duy nhất, sử dụng AJAX để truyền tải dữ liệu

5 MVC Model – View – Controller Là một kiến trúc, đồng thời cũng

là một mẫu thiết kế trong lập trình hướng đối tượng MVC hay được sử dụng trong các hệ thống web

6 GWT Google Web Toolkit Một framework được phát triển bởi

Google, cho phép xây dựng ứng dụng một trang bằng Java

7 JSP JavaServer Pages Là một nền tảng được phát triển bởi Sun,

được xây dựng trên ngôn ngữ Java, được sử dụng để phát triển các trang web động

7 HTML Hypertext Markup Language Một loại ngôn ngữ đánh dấu sử

dụng các thẻ quy ước để hiển thị nội dung

8 HTTP Hypertext Transfer Protocol Giao thức truyền tải các dữ liệu

siêu văn bản Là giao thức cơ bản của truyền tải dữ liệu trên Internet

9 DOM Document Object Model Là một quy chuẩn độc lập nền tảng

dành cho các nhà phát triển ứng dụng được dùng để biểu diễn và tương tác với các ngôn ngữ HTML, XHTML, XML

10 CSS Cascading Style Sheets, là một ngôn ngữ để biểu diễn mặt

hiển thị của các ngôn ngữ đánh dấu

11 URL Uniform Resource Locator: Là một định dạng được sử dụng

để xác định một tài nguyên trên Internet, chỉ ra vị trí cũng như phương thức để truy cập tài nguyên đó

12 UI User Interface: Giao diện người dùng Chỉ các thành phần

hiển thị và cung cấp tương tác giữa người dùng và hệ thống

13 API Application Programming Interface Là một giao diện cung

cấp cho các nhà phát triển ứng dụng để thao tác với một hệ thống nào đó mà không cần phải quan tâm cách thức hoạt động bên trong hệ thống đó

DANH MỤC CÁC HÌNH MINH HỌA

Hình 1 – Ví dụ về văn bản web đơn giản 12

Hình 2 – Mô hình lập trình web động 13

Hình 3 – Ajax ứng dụng trong mô hình web truyền thống 14

Hình 4 – Mô hình xử lý dữ liệu của Spiar 21

Hình 5 – Mô hình xử lý dữ liệu của GWT 22

Hình 6 – Kiến trúc Joo framework 23

Hình 7 - Biểu đồ luồng diễn tiến của chương trình 25

Hình 8 - Các lớp đồ họa chính trong JOO 26

Hình 9 – Biểu đồ trạng thái Porlet trong Joo framework 28

Hình 10 – Biểu đồ tuần tự mô tả tương tác của portlet 29

với các thành phần giao diện trong Joo 29

Hình 11 – Biểu đồ trạng thái plugin trong Joo framework 30

Hình 12 – Biểu đồ thành phần mô tả tương tác giữa Porlet, Plugin và Template trong Joo framework 33

Hình 13 – Biểu đồ thành phần của thành phần quản lý chương trình Application 35

Hình 14 – Biểu đồ lớp của thành phần Bootstrap 36

Hình 15 – Biểu đồ lớp thành phần Resource Manager 37

Hình 16 – Biểu đồ lớp thành phần Request Handler 38

Hình 17 – Biểu đồ lớp thành phần Porlet & Plugin Manager 39

Hình 18 – Biểu đồ tuần tự mô tả hoạt động của framework 40

Hình 19 – Mối liên hệ giữa tiêu chí chất lượng với các đặc tính của mô hình lập trình ứng dụng web 43

Hình 20 – Kiến trúc thành phần hệ thống BKProfile 45

Hình 21 – Giao diện hệ thống BKProfile (www.bkprofile.com) 46

PHẦN MỞ ĐẦU

Tóm tắt các nhiệm vụ đề ra trong ĐATN

• Tìm hiểu mô hình lập trình ứng dụng web và các framework lập trình

• Xây dưng phiên bản 1.0 của JOO framework

• Ứng dụng framework để xây dựng hệ thống cụ thể (BKProfile)

Môi trường thực hiện đồ án:

• Bộ môn công nghệ phần mềm, Viện CNTT & TT – Đại học Bách Khoa Hà Nội

Bố cục đồ án

• Phần mở đầu : giới thiệu tóm tắt nhiệm vụ đề tài, xác định mục tiêu và phạm

vi thực hiện

• Phần nội dung : có kết cấu bốn chương, nội dung chính như sau:

Chương 1 Đặt vấn đề và giải pháp Giới thiệu về mô hình xây dựng web

truyền thống, giới thiệu về ứng dụng RIA và các công nghệ hiện tại Đề xuất mục tiêu của một framework xây dựng ứng dụng web hiệu quả và nhiệm vụ của đồ án tốt nghiệp

Chương 2 Joo framework Giới thiệu và đánh giá ưu nhược điểm của kiến

trúc một số framework xây dựng ứng dụng web Từ đó đề xuất mô hình xây dựng ứng dụng web Joo framework, bao gồm kiến trúc tổng quan của Joo framework và kiến trúc chi tiết thành phần quản lý luồng diễn tiến của ứng dụng trong Joo framework

Chương 3 Ứng dụng Joo xây dựng hệ thống BKProfile Sau khi phân tích

mô hình của Joo framework, để làm rõ tính hiệu quả của Joo, chương này trình bày việc xây dựng BKProfile trên Joo, bao gồm: giới thiệu sơ lược hệ thống BKProfile, vai trò của Joo framework trong việc xây dựng BKProfile Đánh giá Joo framework qua thực tiễn

Chương 4 Kết luận và đánh giá Đánh giá kết quả đạt được trong quá trình

làm đồ án Các nhận định toàn bộ công việc đồ án và đề ra phương hướng phát triển tiếp theo

CHƯƠNG 1 – ĐẶT VẤN ĐỀ VÀ GIẢI PHÁP

1.1 Mô tả bài toán

1.1.1 Giới thiệu cách xây dựng web truyền thống

Khái niệm Web (WWW-World Wide Web) được ra đời từ thập kỉ 80, là cách thức con người có thể đọc và viết thông qua máy tính kết nối với Internet [1] Để hiện thực hóa cách thức đó cần một công cụ là các website; mỗi website là một tập hợp các trang web chứa các hình ảnh, video hoặc các loại dữ liệu điện tử khác Mỗi trang web là một văn bản thường được viết dưới dạng “plain text” đi kèm với các câu lệnh của ngôn ngữ đánh dấu văn bản (HTML) nhằm định nghĩa cách hiển thị.Những định nghĩa trên (được đông đảo cộng đồng sử dụng Internet chấp nhận và xuất hiện trên trang wikipedia) giúp ta hình dung được cách xây dựng một website truyền thống: là việc tạo ra những văn bản đi kèm các dòng mã lệnh định nghĩa cách hiển thị văn bản đó

Một ví dụ của một văn bản web có thể được hình dung như sau:

Nội dung chương 1:

• Giới thiệu về mô hình xây dựng web truyền thống

• Giới thiệu về ứng dụng RIA và các công nghệ hiện tại

• Mục tiêu của một framework xây dựng ứng dụng web hiệu quả

• Nhiệm vụ của đồ án tốt nghiệp

Hình 1 – Ví dụ về văn bản web đơn giản

Hình trên mô tả cách xây dựng một văn bản web với các thẻ HTML mô tả cách thức hiển thị và kết quả khi hiển thị trang web trên trình duyệt Các trang web được xây dựng như trên được gọi là các trang web tĩnh

Tuy nhiên hạn chế của phương pháp này là việc nội dung của các văn bản web là cố định và mỗi khi muốn thay đổi cần phải soạn lại văn bản Nếu như người chủ trang web muốn cung cấp thông tin thay đổi theo thời gian (ví dụ: trang báo), người dùng hoặc theo tương tác người dùng … thì các trang web tĩnh không còn đáp ứng được nhu cầu này nữa, chính vì vậy các trang web động ra đời Các trang web động là các trang web mà nội dung trang web được sinh ra dựa vào vào tương tác người dùng hoặc các điều kiện được người tạo ra trang web lập trình trước bằng ngôn ngữ server script Có rất nhiều loại server script và cách lập trình web động như tựu chung có thể hình dung như sau:

Hình 3 – Ajax ứng dụng trong mô hình web truyền thống

Sự ra đời của Ajax mở đầu cho một kỉ nguyên mới với việc các trang web không còn là tập hợp các văn bản như trước đây nữa mà thực sự đã trở thành các ứng dụng web với tính năng và sức mạnh không thua kém gì so với các ứng dụng trên máy tính để bàn truyền thống Các trang web như vậy được gọi là RIA – Rich Internet Application

1.1.2 Giới thiệu về ứng dụng RIA và các công nghệ hiện tại

1.1.2.1 Giới thiệu về RIA

Cụm từ ứng dụng Internet (Rich Internet Application ~ RIA) nhằm chỉ những ứng dụng web có đặc điểm và tính năng của các ứng dụng desktop truyền thống RIA thường bao gồm một ứng dụng phía máy khách và một tầng ứng dụng nằm phía máy chủ độc lập, cung cấp dữ liệu cho ứng dụng máy khách RIA thường mang 2 đặc điểm chính là chạy trên trình duyệt, không yêu cầu cài đặt và chạy trong một môi trường bảo mật được gọi là sandbox nhằm hạn chế tương tác giữa ứng dụng RIA và máy khách

Cụm từ RIA được đưa ra vào tháng 3 năm 2002 bởi hãng Macromedia (đã sát nhập vào Adobe), mặc dù khái niệm về RIA đã tồn tại trước đó khá lâu dưới những cái tên như:

- Remote Scripting (Microsoft - 1998)

- X Internet Forrester Research – tháng 10 năm 2000

- Rich (web) clients

- Rich web application

Các ứng dụng web truyền thống xoay quanh cấu trúc client-server với một client đảm trách rất ít nhiệm vụ Dưới mô hình truyền thống này, tất cả các xử lý được máy chủ đảm trách và phía máy khách chỉ hiển thị các dữ liệu tĩnh (HTML là một

ví dụ) Điều tệ hại nhất của mô hình này là tất cả các tương tác với ứng dụng buộc phải thông qua máy chủ ,yêu cầu dữ liệu phải được gửi tới máy chủ, máy chủ đáp trả và các trang web được nạp lại (reload) bên phía máy khách Điều này gây lãng phí đường truyền rất lớn vì có rất nhiều thông tin được gửi từ máy chủ về phía máy khách nhiều lần (các banner quảng cáo là một ví dụ) Việc sử dụng mô hình mà máy khách đảm nhận nhiều nhiệm vụ hơn, RIA có thể tránh được rất nhiều sự trùng lặp

dữ liệu

Các công nghệ Internet phát triển liên tục và từ từ qua thời gian nhằm đáp ứng các yêu cầu mới, vậy nên khó nói cho đủ các đặc điểm của ứng dụng RIA Nhưng tất cả các ứng dụng RIA đều có chung một đặc tính: chúng chứa một lớp xử lý nằm giữa người dùng và máy chủ được gọi là client engine Client engine đóng vai trò là một máy ảo để chạy các ứng dụng RIA, các client engine này thường tồn tại dưới dạng các phần mở rộng của trình duyệt Client engine đảm nhận việc xử lý giao diện và kết nối máy chủ

Những gì làm được trong một ứng dụng RIA có thể bị giới hạn bởi khả năng của

hệ thống mà người dùng có Nhưng nói chung các client engine được lập trình để chạy các chức năng của ứng dụng mà người thiết kế nó tin tưởng rằng sẽ nâng cao hơn một vài khía cạnh nào đó của giao diện người dùng, khả năng tương tác, … so với ứng dụng web bình thường Hơn thế nữa, khi thêm vào client engine các ứng

dụng phía máy khách sẽ có khả năng hoạt động bình thường trong khi các xử lý phía máy chủ vẫn diễn ra đồng thời và gửi kết quả về cho máy khách hiển thị.

Các công nghệ tạo nên RIA có rất nhiều nhưng số lượng nổi bật thì cũng chỉ đếm trên đầu ngón tay Để tạo nên một nền phát triển các ứng dụng RIA hoàn chỉnh cần rất nhiều công sức và giải quyết rất nhiều vấn đề phức tạp, từ tương thích trình duyệt đến kết nối máy chủ với máy khách

1.1.2.2 Các công nghệ RIA

Số lượng các công nghệ tạo nên các ứng dụng RIA có rất nhiều, nhưng có thể liệt kê ra một vài công nghệ chính sau:

Java applet (Sun Microsystem)

Java applet ra đời từ năm 1995 và có thể được coi là nền tảng đầu tiên để tạo nên các ứng dụng RIA Java applet có nhiều ưu điểm như chạy khá nhanh so với các ứng dụng tương tự viết bằng C hay C++, đa nền, … nhưng cùng thời gian Java applet cũng bộc lộ các điểm yêu thuộc về bản chất như: buộc phải chạy cùng máy

ảo Java làm chậm thời gian khởi tạo ứng dụng, vấn đề tương thích trình duyệt, …

và hiện nay Java applet còn không nhiều thị phần trong thị trường RIA Tuy nhiên với các ứng dụng web lớn sử dụng JSP thì Java applet vẫn là một sự lựa chọn ưa thích

Adobe Flash (Adobe)

Nhắc đến Flash người ta thường nói đến các hoạt cảnh động nhiều hơn là một nền tảng ứng dụng Nhưng với việc Macromedia sát nhâp với Adobe và sau đó

là sự ra đời của Flex (một nền tảng dựa trực tiếp trên Flash, thiết kế chuyên biệt cho RIA vào năm 2004) thì Flash đã trở thành một nền tảng tốt hơn giành cho RIA Việc lập trình RIA trên flex đã đơn giản hơn rất nhiều với việc sử dụng ngôn ngữ MXML để định nghĩa giao diện và sự kiện

Silverlight (Microsoft)

Silverlight ra đời tháng 4 năm 2007, được phát triển trên việc tăng cường sự kết nối giữa ứng dụng RIA và trình duyệt Phiên bản Silverlight 1.0 là một bộ thư viện Javascript nên đảm bảo tính đa nền, nhưng từ phiên bản 2.0 bắt buộc phải

có .NET cài sẵn trên máy khách, điều này làm cho đối tượng sử dụng được Silverlight giảm đi rất nhiều

Javafx (Sun Microsystem)

Javafx ra đời từ năm 2007 nhưng chỉ thực sự nổi lên trong năm 2009 Javafx

được coi là sự kế tục của Java Applet nhưng mang rất nhiều ưu điểm của Java Applet và còn hỗ trợ media mạnh mẽ, hỗ trợ 3D …

AJAX

AJAX (asynchronous JavaScript and XML) là một công nghệ kết hợp giữa Javascript và Xml nhằm tạo nên các ứng dụng RIA Bản thân AJAX không mới, nhưng phải đến năm 2005 thì nó mới giành được sự quan tâm của các lập trình viên trên toàn cầu Các bộ thư viện hỗ trợ AJAX (viết bằng javascript) như JSON, Dojo Toolkit, jQuery, Prototype, … đã phát triển rất đa dạng và lớn mạnh bởi cộng đồng

mã nguồn mở và Google

Google Web Toolkit

Trong 6 công nghệ RIA được nêu ở trên, các công nghệ từ 1 -> 4 đều chạy dựa trên một máy ảo là một plug-in nhúng vào trình duyệt nên việc so sánh giữa các công nghệ đó với JOO không quá tương đương, chính vì vậy trong phần 2 của đồ án khi đi sâu vào phân tích các công nghệ RIA đã có, người viết luận văn chỉ tập trung vào công nghệ 5 và 6

1.1.3 Mục tiêu của một framework xây dựng ứng dụng web hiệu quả

Với các phân tích đưa ra ở mục trên, người viết luận văn đề xuất một framework xây dựng web hiệu quả phải thỏa mãn 6 tiêu chí sau (dựa theo [2]):

- Khả năng tương tác người dùng

- Độ trễ trong cảm nhận người dùng: khoảng thời gian kể từ lúc người dùng

tiến hành 1 thao tác đến thời điểm đầu tiên họ nhận được phản hồi của hệ

- Tương tác bất đồng bộ với server: Mọi cơ chế gửi nhận đều dựa trên AJAX

- Dữ liệu truyền gửi giữa client và server nhỏ: Không bao gồm các thành phần hiển thị

- Sing page application: Mỗi khi thay đổi trang chỉ tải thêm các thành phần mới mà không cần tải lại toàn bộ trang Đặc tính này tận dụng triệt để cơ chế

cache của trình duyệt: Dữ liệu được tải về một lần và cache tại trình duyệt máy khách, do đó những lần tiếp theo vào trang web, máy khách hầu như không phải tải lại dữ liệu trang web lần nữa.

- Việc sinh ra và quản lý các thành phần hiển thị đều ở phía client, giảm bớt công việc cho server

- Phân tách trang thành các portlet và plugin, dễ quản lý và cấu hình Mỗi portlet là một thành phần độc lập, liên kết lỏng lẻo với các thành phần khác

- Scalable: Việc trao đổi dữ liệu giữa client và server được thông qua Ajax Interface, đảm bảo tính độc lập giữa client và server Khi đó một client có thể được phục vụ bởi nhiều server mà không ảnh hưởng đến kết quả

- Sử dụng bộ UI widget để xây dựng các thành phần giao diện, giảm bớt thời gian xây dựng ứng dụng; đồng thời đảm bảo tính linh hoạt khi tạo giao diện, hướng tới các ứng dụng có giao diện sáng tạo tương tự như các ứng dụng sử dụng Adobe Flash

1.2 Nhiệm vụ của đề tài

1.2.1 Nhiệm vụ cụ thể trong phạm vi đề tài

• Nghiên cứu và đánh giá về các mô hình xây dựng ứng dụng web, cách xây dựng framework, Javascript, HTML5, CSS3, RIA (Rich Internet Application)

• Thiết kế framework hỗ trợ xây dựng RIA bằng HTML/Javascript

• Xây dựng ứng dụng sử dụng framework nhằm minh họa cho sức mạnh của framework Ứng dụng xây dựng minh họa: BKProfile

1.3 Kết chương

Tóm lại trong chương một, người viết luận văn đã giới thiệu sơ qua về mô hình xây dựng web truyền thống, bài toán xây dựng các ứng dụng RIA và các công nghệ hiện tại Từ đó có thể thấy mô hình lập trình web truyền thống khi áp dụng vào bài toán xây dựng ứng dụng RIA còn nhiều vấn đề tồn tại như hiệu năng hệ thống, quản lý lưu lượng truyền tải dữ liệu giữa máy chủ - máy khách Trong phần

1.2, người viết luận văn đã đề xuất mục tiêu của một framework xây dựng ứng dụng web hiệu quả và trình bày cụ thể về mục tiêu, nhiệm vụ của đồ án tốt nghiệp

Ở chương 2 sẽ đi sâu vào trình bày cụ thể hơn những phân tích, đánh giá trên những framework lập trình ứng dụng RIA hiện tại, từ đó đưa ra ý tưởng và phân tích về kiến trúc tổng quan của Joo framework và phần nội dung chính của đồ án: kiến trúc chi tiết của thành phần quản lý luồng diễn tiến của ứng dụng trong Joo framework

CHƯƠNG 2 – JOO FRAMEWORK

2.1 Kiến trúc của các framework xây dựng ứng dụng web truyền thống và phân tích đánh giá

Trước khi phân tích ưu nhược điểm của các framework trước, chúng ta sẽ xem xét lại mô hình lập trình web truyền thống, hay còn gọi là mô trình lập trình web nhiều trang (multi-page website)[2]

Một website thông thường được cấu tạo từ nhiều trang, mỗi trang phục vụ cho một mục đích khác nhau (ví dụ: một website bán hàng trực tuyến thường có các trang để tìm kiếm hàng hóa, trang để đặt mua qua mạng và trang để thanh toán) Mô hình này hoạt động theo cơ chế thay đổi trạng thái giữa các trang Người dùng từ trang này sẽ truyền đến trang khác bằng các đường link Mỗi khi truyền trạng thái, phía máy chủ sẽ xử lý lại toàn bộ trang web Mô hình này tuy có ưu điểm là việc lập trình đơn giản tuy nhiên lại có nhiều nhược điểm về hiệu năng của hệ thống:

• Mỗi khi chuyển trang, phía máy chủ và máy khách đều phải xử lý lại toàn bộ trang web: Phía máy chủ phải xử lý lại trang web và gửi lại máy khách nội dung, phía máy khách thì phải tải lại HTML và xử lý lại javascript Trong khi đó, thông thường các trang web đều có những thành phần không thay đổi qua các trang,

• Dữ liệu truyền giữa máy chủ và máy khách rất lớn (bao gồm cả dữ liệu HTML, javascript CSS và các thành phần liên quan) Việc lập trình các trang web “động” không tận dụng được cơ chế cache của browser

• Khả năng tương tác người dùng không cao, do người dùng phải đợi một thời gian lâu khi chuyển trang

Cơ chế tải nội dung trang web không đồng bộ (async loading of content) lần đầu tiên được ứng dụng thực tế trong bộ Java Applet của Java năm 1995 Kể từ đó

đã có nhiều công nghệ mới được phát triển dựa trên cơ chế bất đồng bộ, như IFrame được giới thiệu trong IE năm 1996, XMLHTTP năm 1999 và về sau là XMLHttpRequest Thuật ngữ Ajax ra đời năm 2006 đánh dấu một bước nhảy vọt trong công nghệ lập trình web[4][3], tuy rằng Ajax không phải một thứ mới mẻ tại thời điểm đó

Nội dung chương 2:

• Giới thiệu và đánh giá ưu nhược điểm của kiến trúc một số framework xây dựng ứng dụng web truyền thống

• Đề xuất mô hình xây dựng ứng dụng web Joo Framework

o Kiến trúc tổng quan

o Kiến trúc chi tiết thành phần quản lý luồng diễn tiến của ứng dụng

Tận dụng mô hình truyền tải bất đồng bộ, một hướng tiếp cận mới được ra đời năm 2005, khởi xướng bởi Steve Yen là Single-page application (SPA)[1] Theo hướng tiếp cận này, toàn bộ nội dung của trang web được tải về trong một lần duy nhất, bao gồm HTML, Javascript, CSS Khi cần thay đổi nội dung, phía máy khách chỉ cần tải thêm những nội dung mà thay đổi Một mô hình thực tế của hướng tiếp cận này là Spiar, được Fielding giới thiệu năm 2000[2].

Hình 4 – Mô hình xử lý dữ liệu của Spiar

Trong mô hình này, cả server và client đều lưu trữ thành phần tương tác người dùng, nhưng server chỉ lưu trữ dữ liệu và các hoạt động của thành phần này, còn client chỉ lưu trữ phần hiển thị của chúng (HTML) Mỗi khi có một sự kiện được phát sinh ở client, client thông báo cho server, server dựa vào sự kiện, cùng với trạng thái hiện thời của các thành phần tương tác người dùng để quyết định trạng thái tiếp theo Sau đó server thông báo lại cho client sự thay đổi Điểm đặc biệt của mô hình này là ở bộ Mã hóa/Giải mã Thay đổi (Delta Encoder/Decoder) Nhờ có bộ này, dữ liệu truyền gửi giữa client và server chỉ là sự thay đổi giữa 2 trạng thái kế tiếp chứ không phải toàn bộ trang web Mô hình này rất giống với các

mô hình truy cập từ xa[7]

Client browser

Server applicationService Provider

Encoder

Tuy có những ưu điểm như trên, nhưng mô hình này vẫn còn nhược điểm: Server phải xử lý khá nhiều công việc, bao gồm cả việc quản lý trạng thái của các thành phần tương tác người dùng trên client Mặc dù nó thích hợp cho việc xây dựng các ứng dụng truy cập từ xa, khi mà số lượng người dùng nhỏ, nhưng lại không thích hợp với các ứng dụng có số lượng người dùng lớn (như một trang web thông thường)

Để khắc phục nhược điểm đó, Google đã đưa ra một mô hình khác dựa trên

mô hình Spiar trong framework GWT [1][2] của mình

Hình 5 – Mô hình xử lý dữ liệu của GWT

Theo mô hình này, việc quản lý hoạt động của các thành phần tương tác được chuyển về phía client, làm giảm bớt công việc của server

GWT có một điểm mạnh khác là nó phân tách được thời gian biên dịch (bằng Java) và thời gian chạy (bằng Javascript) Việc phát triển bằng GWT dễ dàng hơn vì cấu trúc của một chương trình được phân tách thành các thành phần sử dụng lại được Đây cũng là một điểm nổi bật mà người viết luận văn đã áp dụng trong JOO Framework

Tuy nhiên GWT được xây dựng trên nền tảng Java, việc lập trình và biên dịch đều bằng Java, đôi lúc không tận dụng được thế mạnh của Javascript và mặt

Client browser

Server applicationService Provider

Encoder

khác, nó lại không hỗ trợ khá nhiều bộ thư viện hay dùng của Java Ngoài ra, mặc

dù cũng là một Ajax framework, nhưng GWT tập trung vào việc xây dựng các ứng dụng trên client cho Java Servlet Quá trình phát triển ứng dụng cũng hơi phức tạp

do yêu cầu phải có server bằng Java

Từ việc nghiên cứu những ưu nhược điểm của các mô hình và framework hiện tại, JOO Framework đã tận dụng được một số ưu điểm của các framework kể trên, như cơ chế Ajax[10], thiết kế trang web dạng SPA[7], tổ chức cấu trúc chương trình thành các thành phần độc lập, liên kết lỏng lẻo với nhau và dễ dàng cấu hình Phần sau sẽ phân tích rõ hơn kiến trúc của framework cũng như cấu trúc của một ứng dụng được xây dựng trên nền framework

2.2 Đề xuất một framework hiệu quả - JOO Framework

JOO Framework là một framework hỗ trợ xây dựng các ứng dụng web một trang trên máy khách (chạy trên các trình duyệt hỗ trợ Javascript) Tư tưởng cơ bản của JOO là tải toàn bộ mã nguồn phía client về trong một lần đầu tiên và được cache lại tại ngay trình duyệt Những lần sau đó, và cả lúc chuyển trang, chỉ có những dữ liệu hay phần thay đổi mới được cập nhật bằng cách gửi yêu cầu lên máy chủ Toàn bộ việc trao đổi giữa client và server đều là AJAX

2.2.1 Kiến trúc tổng quan

Hình 6 – Kiến trúc Joo framework

Kiến trúc hệ thống bao gồm 4 thành phần chính:

* Porlet & Plugins: tiếp nhận các yêu cầu từ người dùng dưới dạng các sự kiện

(event), sau đó gửi các Ajax request lên máy chủ và nhận về dữ liệu dưới dạng JSON Các plugin & porlet sẽ xử lý dữ liệu dạng JSON gửi cho tầng Application, thông qua UI hiển thị dữ liệu Điểm khác biệt giữa portlet và plugin là: portlet là các thành phần hiển thị và xử lý dữ liệu độc lập và được gọi khi trang web được tải, còn plugin chỉ được gọi với những sự kiện nhất định

* Event Manager: bộ quản lý sự kiện: sử dụng mẫu thiết kế Observer, giúp các

portlet, plugin có thể tương tác với nhau thông qua sự kiện, làm cho cấu trúc

JOO framework architecture

UIPortlets, Plugins & Template

Application ManagerEvent

chương trình trở nên lỏng lẻo và các portlet, plugin có thể hoạt động độc lập với nhau Các sự kiện có thể được sinh ra do tương tác của người dùng hoặc do chính portlet/plugin sinh ra

* Application: bao gồm 4 thành phần chính:

• Bộ khởi tạo (Bootstrap)

• Bộ quản lý tài nguyên (Resource Manager)

• Bộ xử lý yêu cầu (Request Handler)

• Bộ quản lý porlet & plugin (Porlet&Plugin Manager)

Ở tầng này xử lý các template và layout, thực thi các cấu hình cho porlet và plugin Thông qua lớp Bootstrap tiếp nhận các yêu cầu, lớp xử lý yêu cầu gửi các yêu cầu này đến plugin & porlet tương ứng Các lớp Plugin Manager, Porlet Container kiểm tra và nạp (load) các plugin, porlet tương ứng

* UI: bao gồm các lớp và các thành phần (widget) hỗ trợ xây dựng giao diện giao

tiếp với người dùng UI trực tiếp nhận các yêu cầu của người dùng và thông qua bộ quản lý sự kiện (Event Manager) gửi sự kiện đến tầng ứng dụng (Application) và tầng Porlets & Plugins để xử lý.Hoạt động của chương trình có thể được thể hiện qua biểu đồ diễn tiến như sau:

Hình 7 - Biểu đồ luồng diễn tiến của chương trình

Một phần rất được chú trọng trong JOO là thiết kế các lớp hiển thị để có thể giúp lập trình viên tạo được các chương trình có giao diện đẹp và thuận tiện như các chương trình viết bằng Adobe Flash Cây kế thừa của các lớp hiển thị và các lớp sự kiện chính của JOO được trình bày khái quát như sau: