Nghiên cứu lập trình phản ứng với ngôn ngữ ELM

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

NGUYỄN NHƯ MINH

NGHIÊN CỨU LẬP TRÌNH PHẢN ỨNG VỚI NGÔN
NGỮ ELM

LUẬN VĂN THẠC SĨ CÔNG NGHỆ THÔNG TIN

Hà Nội - 2015
1


ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

NGUYỄN NHƯ MINH

NGHIÊN CỨU LẬP TRÌNH PHẢN ỨNG VỚI NGÔN
NGỮ ELM

Ngành: Công nghệ thông tin
Chuyên ngành: Kỹ thuật phần mềm
Mã số: 60480103

LUẬN VĂN THẠC SĨ CÔNG NGHỆ THÔNG TIN

NGƯỜI HƯỚNG DẪN KHOA HỌC: PGS. TS. TRƯƠNG ANH HOÀNG

Hà Nội - 2015

2


LỜI CẢM ƠN
Trƣớc tiên tôi xin chân thành cảm ơn PGS.TS. Trƣơng Anh Hoàng đã tận
tình hƣớng dẫn, giúp đỡ tôi trong suốt quá trình thực hiện luận văn tốt nghiệp.
Tôi xin chân thành cảm ơn các thầy cô giáo khoa Công nghệ Thông tin,
trƣờng Đại học Công nghệ, Đại học Quốc gia Hà Nội, những ngƣời đã tận tình
truyền đạt các kiến thức, quan tâm, động viên trong suốt thời gian tôi học tập và
nghiên cứu tại Trƣờng.
Nhân đây cho phép tôi gửi lời cảm ơn tới nhóm các bạn học cùng lớp
K20CNPM, lớp chuyên ngành công nghệ phần mềm đã thƣờng xuyên quan tâm,
giúp đỡ, chia sẻ kinh nghiệm, cung cấp các tài liệu hữu ích trong suốt thời gian học
tập tại trƣờng.
Hà Nội, tháng 12 năm 2015
Tác giả luận văn

Nguyễn Như Minh

3


LỜI CAM ĐOAN
Tôi xin cam đoan bản luận văn “Nghiên cứu lập trình phản ứng với ngôn ngữ
Elm” là công trình nghiên cứu của tôi dƣới sự hƣớng dẫn khoa học của PGS.TS.
Trƣơng Anh Hoàng, tham khảo các nguồn tài liệu đã chỉ rõ trong trích dẫn và danh
mục tài liệu tham khảo. Các nội dung công bố và kết quả trình bày trong luận văn
này là trung thực và chƣa từng đƣợc ai công bố trong bất cứ công trình nào.

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

Tác giả luận văn

Nguyễn Như Minh

4


MỤC LỤC
LỜI CẢM ƠN ............................................................................................................ 3
LỜI CAM ĐOAN....................................................................................................... 4
MỤC LỤC .................................................................................................................. 5
DANH SÁCH HÌNH VẼ ........................................................................................... 7
MỞ ĐẦU .................................................................................................................... 8
Lý do chọn đề tài ................................................................................................... 8
Mục đích nghiên cứu............................................................................................. 9
Đối tƣợng và phạm vi nghiên cứu......................................................................... 9
Kết cấu của luận văn ........................................................................................... 10
CHƢƠNG 1-GIỚI THIỆU VỀ LẬP TRÌNH PHẢN ỨNGError! Bookmark not
defined.
1.1 Giới thiệu lập trình phản ứng ........................ Error! Bookmark not defined.
1.2 Lập trình phản ứng là luồng dữ liệu.............. Error! Bookmark not defined.
1.3 Đặc điểm của lập trình phản ứng .................. Error! Bookmark not defined.
1.4 Lập trình hàm phản ứng ................................ Error! Bookmark not defined.
1.4.1 Classical FRP ....................................... Error! Bookmark not defined.
1.4.2 Real-time FRP & Event-Driven FRP .. Error! Bookmark not defined.
1.4.3 Arrowized FRP .................................... Error! Bookmark not defined.
CHƢƠNG 2 – LẬP TRÌNH PHẢN ỨNG VỚI NGÔN NGỮ ELM................Error!
Bookmark not defined.
2.1 Khái quát về ngôn ngữ lập trình hàm............ Error! Bookmark not defined.
2.1.1 Định nghĩa ........................................... Error! Bookmark not defined.

2.1.2 Tính khai báo của ngôn ngữ hàm ........ Error! Bookmark not defined.
5


2.1.3 Một số khái niệm cơ bản trong ngôn ngữ hàmError! Bookmark not
defined.
2.2 Cơ bản về ngôn ngữ Elm .............................. Error! Bookmark not defined.
2.2.1 Các cú pháp cơ bản .............................. Error! Bookmark not defined.
2.2.2 Ví dụ về giao diện đồ họa trong Elm.. Error! Bookmark not defined.
2.2.3 Các tín hiệu tƣơng tác trong Elm......... Error! Bookmark not defined.
2.3 Các ƣu điểm của ngôn ngữ Elm .................... Error! Bookmark not defined.
2.4 Các thao tác với tín hiệu trong Elm .............. Error! Bookmark not defined.
2.5 Lập trình tƣơng tác ........................................ Error! Bookmark not defined.
2.6 Gỡ lỗi trong Elm ........................................... Error! Bookmark not defined.
2.7 Kiến trúc Elm trong lập trình trò chơi........... Error! Bookmark not defined.
CHƢƠNG 3 – XÂY DỰNG ỨNG DỤNG TRÒ CHƠI HOCKEY .................Error!
Bookmark not defined.
3.1 Mô tả trò chơi ................................................ Error! Bookmark not defined.
3.2 Phân tích trò chơi .......................................... Error! Bookmark not defined.
3.3 Xây dựng code chƣơng trình với ngôn ngữ ElmError!

Bookmark

not

defined.
3.3.1 Xây dựng giao diện.............................. Error! Bookmark not defined.
3.3.2 Xây dựng mô hình dữ liệu ................... Error! Bookmark not defined.
3.3.3 Xây dựng tín hiệu đầu vào................... Error! Bookmark not defined.
3.3.4 Cập nhật dữ liệu chƣơng trình ............. Error! Bookmark not defined.

3.3.5 Thực thi và chạy chƣơng trình............. Error! Bookmark not defined.
3.4 Nhận xét, đánh giá và thảo luận .................... Error! Bookmark not defined.
3.4.1 Ƣu điểm của lập trình phản ứng .......... Error! Bookmark not defined.

6


3.4.2 Một số khó khăn của lập trình phản ứngError!

Bookmark

not

defined.
3.4.3 Ƣu điểm của ngôn ngữ Elm................. Error! Bookmark not defined.
3.4.4 Nhƣợc điểm của ngôn ngữ Elm ........... Error! Bookmark not defined.
KẾT LUẬN .............................................................. Error! Bookmark not defined.
TÀI LIỆU THAM KHẢO ........................................................................................ 11
DANH SÁCH HÌNH VẼ
Hình 1.1: Sự truyển đổi giá trị liên tục của dòng theo tín hiệu chuột.....Error!
Bookmark not defined.
Hình 1.2: Sơ đồ các đặc điểm của lập trình phản ứngError! Bookmark not
defined.
Hình 2.1: Hiển thị văn bản trong Elm............ Error! Bookmark not defined.
Hình 2.2: Các Forms đồ họa đƣợc tạo ........... Error! Bookmark not defined.
Hình 2.3: Tạo và kết hợp các hình dạng thành một thành phần .............Error!
Bookmark not defined.
Hình 2.4: Bảng các tín hiệu đầu vào trong ElmError!

Bookmark

not

defined.
Hình 2.5: Theo dõi sự chuyển động của trỏ chuột [5]Error! Bookmark not
defined.
Hình 2.6: Di chuyển đối tƣợng là hình tròn bằng các phím mũi tên ......Error!
Bookmark not defined.
Hình 2.7: Mô tả quá trình hoạt động của tín hiệuError!

Bookmark

not

defined.
Hình 2.8: Elm’s Time Traveling Debugger ... Error! Bookmark not defined.
Hình 3.1: Ca sử ngƣời chơi ............................ Error! Bookmark not defined.
Hình 3.2: Ca sử dụng sân bóng ...................... Error! Bookmark not defined.
7


Hình 3.3: Mô hình các kiểu dữ liệu trong trò chơiError!

Bookmark

not

defined.
Hình 3.4: Giao diện chính của trò chơi .......... Error! Bookmark not defined.
Hình 3.5: Văn bản hƣớng dẫn trò chơi .......... Error! Bookmark not defined.

Hình 3.6: Giao diện trò chơi khi kết thúc ...... Error! Bookmark not defined.
Hình 3.7: Giao diện Degbug chƣơng trình .... Error! Bookmark not defined.

8


MỞ ĐẦU
Lý do chọn đề tài
Ngày nay Internet kết nối hàng tỷ ngƣời trên khắp thế giới và ứng dụng phổ
biến nhƣ các mạng xã hội, công cụ tìm kiếm, các dịch vụ blog cá nhân… đƣợc sử
dụng bởi hàng triệu hoặc thậm chí hàng tỷ ngƣời sử dụng trên máy tính. Điều này
thể hiện một sự thay đổi cả về phạm vi và quy mô của những gì chúng ta mong đợi
về máy tính có thể làm cho con ngƣời. Với lợi ích của các ứng dụng web hiện đại
và các ứng dụng trên di động đều có tính tƣơng tác cao với vô số các sự kiện liên
quan đến tƣơng tác của ngƣời dùng. Các ứng dụng ngày càng phát triển và phong
phú cho phép tƣơng tác cao với ngƣời sử dụng ở thời gian thực. Để làm đƣợc điều
đó chúng ta cần phải nghiên cứu và thiết kế những ứng dụng phổ biến để thực hiện
những kỹ thuật này.
Điều đầu tiên là khi chúng ta cung cấp cho một máy tính một nhiệm vụ
chúng ta muốn nó phản ứng lại nhanh nhất có thể. Nói một cách khác các máy tính
phải phản ứng với ngƣời sử dụng của nó và đáp ứng đƣợc các yêu cầu một cách
chính xác. Ví dụ khi chúng ta gửi một email thông qua Gmail bạn muốn xác nhận
rằng nó đã đƣợc gửi đi hoặc khi ta xóa một email thì nó sẽ biến mất khỏi danh sách
hiển thị, tất cả những thao tác ngƣời sử dụng đều đƣợc hiển thị bởi các trình duyệt
web. Hoặc khi chúng ta chơi một trò chơi thì các tƣơng tác của chúng ta với các
nhân vật trong trò chơi phải đƣợc phản ứng theo ý của chúng ta trong một thời gian
nhất định để có thể đạt mục đích. Để có thể làm đƣợc những điều này thì lập trình
phản ứng là một câu trả lời.
Lập trình phản ứng là sự kết hợp của hệ thống đồng thời và hệ thống hƣớng
sự kiện và cho phép xử lý luồng dữ liệu không đồng bộ nhƣng vẫn duy trì phong

cách của những ngôn ngữ lập trình thông thƣờng.
Lập trình phản ứng làm tăng mức độ trừu tƣợng mã giúp ngƣời lập trình tập
trung vào các sự kiện có liên quan tới nhau giải quyết những logic phức tạp. Mã
9


trong lập trình phản ứng thƣờng ngắn gọn, rõ dàng và dễ duy trì hơn. Tƣ duy trong
lập trình phản ứng thƣờng thiên về việc truyển đổi từ các dữ liệu đầu vào tƣơng tác
với dữ liệu trong chƣơng trình để hiện thị dữ liệu đầu ra.
Ở trên thế giới hiện nay lập trình phản ứng là một xu hƣớng mới nổi đƣợc
dựa trên luồng chảy dữ liệu (dataflow) và giá trị của chúng sẽ đƣợc thay đổi một
cách tự động nếu nhƣ có sự tác động từ môi trƣờng bên ngoài vào. Với sự phổ biến
của hƣớng sự kiện, khả năng mở rộng và các kiến trúc tƣơng tác trên cả máy chủ và
máy trạm các khái niệm về "reactiveness" đang ngày càng đƣợc chú ý. Nó ứng
dụng rất cao để viết các ứng dụng web hoặc các hệ thống liên quan tới cơ sở dữ liệu
lớn và cũng là phƣơng pháp tạo ra nhiều hệ thống đồng thời có tính hiệu quả cao.
Mục đích nghiên cứu
Mục đích nghiên cứu trong luận văn nhằm tìm hiểu các đặc điểm của lập
trình phản ứng, cụ thể ở đây là nghiên cứu về lập trình phản ứng trong ngôn ngữ
Elm, một ngôn ngữ khá mới trên thế giới và đang trong quá trình phát triển. Từ đó
nắm vững đƣợc các đặc điểm của lập trình phản ứng cũng nhƣ cách vận dụng
chúng trong ngôn ngữ Elm để tạo ra các ứng dụng mang tích tƣơng tác với ngƣời
sử dụng có tính hiệu quả cao. Mục đích thứ 2 là hiểu rõ đƣợc các cú pháp cũng nhƣ
phƣơng thức hoạt động động của ngôn ngữ Elm từ đó áp dụng vào để xây dựng lên
một chƣơng trình cụ thể.
Đối tượng và phạm vi nghiên cứu
Đầu tiên ta sẽ nghiên cứu các đặc điểm và phƣơng thức hoạt động của lập
trình phản ứng xem chúng có điểm tƣơng đồng gì với luồng dữ liệu. Tiếp theo tôi
tập chung nghiên cứu sâu về ngôn ngữ Elm để làm nổi bật đƣợc các đặc điểm của
lập trình phản ứng. Ngôn ngữ Elm là một ngôn ngữ mới đƣợc phát triển nó hoạt

động dựa trên các thao tác với các giá trị đầu vào cái đƣợc gọi là tín hiệu (Signal).
Tín hiệu là các giá trị dòng chảy thay đổi theo thời gian và nó đƣợc thiết lập và xử
10


lý để thay đổi các giá trị luồng dữ liệu trong chƣơng trình. Các thƣ viện trong Elm
cũng khá là đơn giản và đầy đủ cho phép tối ƣu hóa mã lập trình và tạo giao diện
tƣơng tác ngƣời dùng một cách dễ dàng. Elm là hoàn toàn hƣớng sự kiện và việc
tính toán lại giá trị chỉ trừ khi một sự kiện xảy ra và nó hỗ trợ việc xử lý các luồng
dữ liệu không đồng bộ. Cuối cùng tôi sẽ xây đựng một trò chơi bằng ngôn ngữ Elm
để thể hiện rõ đƣợc đặc điểm của lập trình phản ứng trong đó.
Kết cấu của luận văn
Luận văn của tôi trình bày ngoài phần mở đầu, mục lục, danh mục tài liệu
tham khảo, kết quả đạt đƣợc thì nội dung của luận văn gồm 3 chƣơng. Chƣơng 1 sẽ
nghiên cứu về lập trình phản ứng, nội dung trong chƣơng sẽ nêu ra những đặc điểm
về lập trình phản ứng, đặc điểm về luồng dữ liệu và xem chúng có những đặc điểm
gì tƣơng đồng hay không. Chƣơng 2 tôi sẽ nghiên cứu đôi nét về lập trình hàm từ
đó đi sâu về các cú pháp cơ bản của ngôn ngữ lập trình hàm Elm và cách tạo các
giao diện đồ họa và tìm hiểu các tín hiệu đầu vào tƣơng tác với chƣơng trình. Sau
đó tôi sẽ đi sâu vào cơ chế vận hành của ngôn ngữ Elm với các tín hiệu để thấy rõ
đƣợc điểm mạnh của của lập trình hàm phản ứng. Cũng trong chƣơng này ta nghiên
cứu về trình gỡ lỗi và lập trình tƣơng tác trong Elm. Chƣơng 3 sẽ áp dụng ngôn ngữ
Elm vào để xây dựng một trò chơi nhỏ thể hiện rõ các đặc điểm của lập trình hàm
phản ứng. Qua ứng dụng trò chơi cũng nhƣ các nghiên cứu thì luận văn tôi sẽ đƣa
ra một số nhận xét, đánh giá, thảo luận về ƣu nhƣợc điểm của lập trình phản ứng
trong chƣơng này. Nhờ những đánh giá này mà các nhà nghiên cứu và ngƣời lập
trình có thể tiếp tục phát triển ngôn ngữ Elm dùng nó làm công cụ để tạo ra các ứng
dụng mang tính tƣơng tác cao với ngƣời sử dụng.

11

TÀI LIỆU THAM KHẢO
Tiếng Việt
1. TS. Phan Huy Khánh (2004), Lập trình hàm, Nhà xuất bản khoa học và kỹ
thuật, Hà Nội.
Tiếng Anh
2. Matt Carkci (2014), Dataflow & Reactive Programming Systems.
3. R. J. Wieringa (2003) , Design Methods for Reactive Systems_ Yourdon,
Statemate and the UML , Morgan Kaufmann Publishers, An imprint of
Elsevier Science, 340 Pine Street, Sixth Floor , San Francisco.
4. Edward Amsden, “A Survey of Functional Reactive Programming”,
Rochester Institute of Technology,
5. Evan Czaplicki & Stephen Chong, “Asynchronous Functional Reactive
Programming for GUIs”, Havard University, United States.
6. Evan Czaplicki (30 March 2012), “Elm: Concurrent FRP for Functional
GUIs”.
7. Harel,D., & Pnueli, A.(1985), “On the Development of Reactive Systems”,
Springer Berlin Heidelberg. Chicago.
8. Gerard Berry (1989), “Real Time Programming: Special Purpose or General
Purpose Languages” (pp.11-17) IFIP Congress.
9. Conal Elliott & Paul Hudak (1997), Functional reactive animation, In
Proceedings of the second ACM SIGPLAN international conference on
Functional programming, ICFP ’97, pages 263–273, New York, NY, USA,
1997. ACM
Website
10. />11. />12. />12


13. />14. />15. The Reactive Manifesto, Phublished on september 16 2014 (v2.0)

/>16. Martin Odersky, Principles of Reactive Programming
/>17. />18. />
13