Chả là dạo này cảm thấy bản thân chưa được tốt cho lắm. Code không ra gì cả, thế là ngoài thời gian refactor cái đống code (thật ra là đóng rác (sad)) do mình viết ra, thì về nhà có ngồi suy nghĩ xem thử có cách nào thay đổi mindset của mình không. Thì nhớ ra thằng ELM, thế là vác mông đi học ELM thôi. Hôm nay tranh thủ lúc người yêu đang đi học kế toán thì ngồi viết 1 cái blog về Elm - thật ra thì nghĩ rằng viết ra thì giúp mình hiểu nhiều hơn nên mới viết thôi….

1. Vậy ELM là gì

ELM là một functional programing language, compiles ra Javascript và chạy trên browser. Thế thì nó có phải là một framework nào đó của Javascript như React hay Vue … không? Thì câu trả lời là không, ELM là một ngôn ngữ lập trình, như mọi ngôn ngữ khác, nhưng nó compiles ra Javascript.

Vậy thì tạo ELM ra làm gì để rồi nó cũng compiles ra Javascript, sao không viết Javascript cho lẹ (LOL)? Vì Javascript là một ngôn ngữ dễ chạy, nhưng mà cũng dễ có lỗi trong khi chạy, hay gọi là runtime exceptions. Với ELM thì không có chuyện đấy, nghĩa là khi bạn build thành công thì trang web bạn sẽ không có lỗi gì nữa (đồng nghĩa với việc bạn sẽ cong mông lên mà fix bug để cho nó chạy được LOL). Ngoài ra ELM cũng rất nhanh nữa.

2. Vài điều cơ bản trong ELM

2.1 If Expressions

Trong ELM nếu gọi If thì cần phải gọi else, sẽ không đúng nếu như gọi 1 hàm If không có else

2.2 Records

Records là một khái niệm tương tự như Object của Javascript, Tuy nhiên có một vài điểm khác

- Không có 1 field nào là **null** hay **undefined** mọi field đều phải chứa giá trị.
- Không thể truy xuất vào một field mà không được định nghĩa. 

3. Build một ứng dụng đơn giản với ELM nào

Xây dựng một ứng dụng cho phép trả lời những câu hỏi Yes/No và trả về một hình gif

Model

Model là nơi chứa toàn bộ các biến của App (theo mình hiểu là vậy ) .

Tạo một Record tên là ResultofAwser gồm có 2 fields là answer và imageUrl

Tạo một Record ban đầu với hàm initAnswer

Main

Import những modules và khởi tạo hàm main

init sẽ là hàm khởi tạo khi chạy, sau đó sẽ gọi hàm initialModel phía trên để khởi tạo giá trị ban đầu cho Model .

view: giống như tên của nó, đó là phần viết giao diện cho app

Chúng ta tạo 1 div chứa 1 thẻ input, 1 button, và kết quả và hình ảnh trả về sau khi click vào button đấy. Trong button sẽ có sự kiện onClick, để dùng được onClick thì sẽ phải import thư viện Html.Events như ở trên đã khai báo.
Để sử dụng được hàm GetAnswer thì chúng ta cần phải khai báo hàm đấy trước, để kha báo chúng ta cần tạo 1 biến Msg là nơi lưu trữ những hàm tác động trực tiếp đến app.

kiểu của Msg là Union types.

Để định nghĩa những function được khai báo bên trong Msg thì chúng ta tạo 1 hàm update, Hàm update là nơi định nghĩa toàn bộ các function bên trong Msg.