Làm quen với MithrilJS - Phần 1

Mithril là gì?

Mithril là một JavaScript framework gọn nhẹ nhưng rất mạnh mẽ, được dùng để xây dựng các ứng dụng web một trang (Single Page Applications – SPA). Mithril được viết hoàn toàn bằng ES5, hỗ trợ xây dựng giao diện với Virtual DOM, cung cấp một hệ thống Routing và một số tiện ích khác như XHR, Etream…Tất cả gói gọn trong một tập tin JS nhỏ hơn 8KB gzip. Giao diện viết bằng Mithril có thể hoạt động trên tất cả trình duyệt từ IE9 mà không cần bất cứ Polyfill nào.

Mithril là tên một kim loại quý thường xuất hiện trong các game nhập vai (RPG). Từ này do tác giả J. R. R. Tolkien nghĩ ra và nó xuất hiện lần đầu tiên trong tác phẩm Chúa tể những chiếc nhẫn 😀

Tại sao lại sử dụng Mithril?

1. Nhẹ

Như đã nói ở trên, dung lượng của Mithril chỉ có 8KB gzip cho tất cả các tính năng. So sánh với React 16 (34.8KB gzip), Vue.js (20KB gzip), Angular, hay Ember thì Mithril gọn nhẹ hơn hẳn. Dung lượng nhẹ giúp giảm thời gian Download, đặc biệt là trên thiết bị di động với kết nối bèo bọt, đồng thời ít code hơn giảm thời gian Parse và Execute bên phía trình duyệt.

Tuy nhiên Mithril chưa hẳn là UI Framework nhẹ nhất, ít ra còn có Preact (3KB) hay RE:DOM (2KB).

2. Dễ tiếp thu

Bản thân Mithril được viết hoàn toàn bằng ES5, do đó bạn gần như không cần phải sử dụng bất cứ Transpiler nào như Babel hay TypeScript để sử dụng Mithril. Chỉ cần thêm đoạn sau vào tập tin HTML là mọi thứ đã sẵn sàng.

Mithril cũng không giới thiệu bất cứ khái niệm nào mới. Mọi thứ đều là JavaScript, không JSX, không Directive, không Custom Attribute, thành ra nếu bạn đã biết JavaScript thì bạn chỉ tốn khoảng vài tiếng đến 1 ngày là có thể nắm bắt Mithril.

3. Nhanh vừa phải

Theo Benchmark trên Website của Mithril thì hiệu suất của Mithril vượt trội so với Vue, React hay Angular nhưng so sánh với Preact, Inferno hay RE:DOM thì Mithril vẫn thuộc kèo dưới. Trên thực tế, Mithril nhanh vừa phải để được sử dụng bởi các công ty như Vimeo, Nike hay Memrise trong Game Guild Wars 2 hay các ứng dụng mã nguồn mở như Lichess hay Flarum.

Tác giả @lhorie có đôi lời thảo luận ở đây về chuyện so sánh các Framework, nếu có thời gian bạn nên đọc. Nhìn chung, tất cả Framework đều nhanh và đủ mạnh để xây dựng các ứng dụng phức tạp. Việc quyết định sử dụng Framework nào tùy thuộc vào trình độ, kinh nghiệm và khả năng thích ứng tiếp thu Framework mới trong team của bạn mà thôi. Mọi thứ có sẵn (Batteries Included) và dễ dàng tích hợp với thư viện thứ ba.

Tính năng ban đầu của Mithril là hỗ trợ xây dựng giao diện người dùng với Virtual DOM. Bên cạnh đó Mithril cũng có sẵn cơ chế Routing với hash (/#!/foo), QueryString (/?/foo) hay Pathnaname (/foo). Và để gửi AJAX Request lên Server, Mithril kèm theo một thư viện XHR nhỏ gọn. Ba thành phần này là vừa đủ để xây dựng một SPA. Nhưng nếu bạn muốn sử dụng các thư viện bên ngoài (và chắc chắn bạn sẽ cần) thì việc tích hợp chúng cũng rất dễ dàng, vì “Everything is just plain JavaScript.”

Bạn có thể đưa Redux hay MobX vào để quản lý State gắn Anime.js để hỗ trợ các Animation phức tạp hay tích hợp d3.js vào để vẽ đồ thị. Mithril cho phép (và không giới hạn) việc tiếp cận trực tiếp vào DOM Node (cùng khái niệm với ref trong React).

Cá nhân mình nghĩ, hướng tiếp cận này mang đến nhiều tự do cho lập trình viên, vì bạn có thể thoải mái chọn và tích hợp thư viện mà mình cần. So sánh với React, mỗi khi muốn dùng thư viện ngoài mình luôn nghĩ “chắc phải có một Wrapper của React cho cái này, hoặc phải viết sao cho nó giống React.” Điều này dẫn tới:

1. Giới hạn suy nghĩ của lập trình viên

2. Tăng thêm dung lượng cho ứng dụng

3. Tốn thời gian tìm hiểu Wrapper

4. Chưa chắc Wrapper đã hoạt động như mình mong muốn.

Bên cạnh “The three pillars of a SPA” đã nói ở trên, Mithril còn có một thư viện Stream nho nhỏ tương thích với chuẩn của Fantasy Land. Bạn có thể dùng thư viện này để viết ứng dụng theo kiểu Reactive (nghĩ như RxJS nhưng nhẹ hơn). Cuối cùng, Mithril còn có thêm một thư viện test “cây nhà lá vườn” gọi là Ospec.

4. Không chỉ dành cho SPAs

Cái này không hẳn là ưu điểm của riêng Mithril vì đa số các Framework khác cũng làm được. Với Mithril bạn có thể gắn ứng dụng vào một DOM Node đã có sẵn, dạng như:

render(Widget, document.getElementById(‘js-widget’))

Điều này hữu ích với các Website có thiết kế “truyền thống” với một phần hay toàn bộ view được trả về từ phía Backend Server. Một ví dụ là khi dòng đời đưa đẩy bạn phải bảo trì một Website PHP 5.2 viết từ hồi tận thế 2012. Bằng cách này bạn có thể quá độ từ “truyền thống” sang thiết kế “nửa nạc nửa mỡ” với một phần của Website là ứng dụng JavaScript tương tác với API ở phía Server.

Giới thiệu cho dài mà không khoe code cũng bằng thừa. Thay vì TodoMVC, mình sẽ viết một ứng dụng bán hàng đơn giản. Tính năng bao gồm: hiển thị danh sách hàng, thêm hàng vào giỏ (cart), và xem giỏ hàng.

– Virtual node (vnode)

Trước tiên, cần nói về Vnode. Với Mithril thì Vnode là một JavaScript Object được dùng để thể hiện các DOM Elements trong một trang. Thư viện Virtual DOM của Mithril sẽ nhận vào Vnode và tạo thay đổi tương ứng trên trang. Bạn dùng hàm m() để tạo ra Vnode và hàm này có chữ ký như sau:

/**

* selector (String|Object) REQUIRED

* attributes (Object)

* children (Vnode[]|String|Number|Boolean)

m(selector, attributes, children)

Bạn dùng Selector để khai báo tên thẻ HTML và Class, ID hay các thuộc tính khác cho nó. Xem ví dụ sau:

m(‘h1’)

m(‘h1.foo.bar’)

m(‘h1.title#heading’)

m(‘h1.title#heading[title=”Hello”][data-lang=”en”]’)

m(”)

Để khai báo các thuộc tính một cách linh động hơn, bạn có thể dùng Attributes – là một JavaScript object. Ví dụ như: