• About
  • Advertise
  • Privacy & Policy
  • Contact
NQ NEWS
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
  • Đời sống thường thức
    • Tất cả
    • Bí ẩn - Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh - Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game - Trò chơi
    • Kỹ năng
    • Là gì?
    • Mẹo hay
    Ielts La Gi 640 1

    IELTS là gì? Những điều cần biết về IELTS

    Cài font chữ

    Kẻ ô ly vuông trong Word và in ô ly Word

    Vivo Y33s

    3 cách chụp ảnh đẹp trên Vivo Y33s với nhiều hiệu ứng, filter độc đáo

    cách xem tin nhắn đã thu hồi trên messenger trên điện thoại

    Cách xem tin nhắn đã thu hồi trên Messenger cho điện thoại Android

    Cách hẹn giờ gửi tin nhắn chúc mừng

    Cách hẹn giờ gửi tin nhắn chúc mừng trên điện thoại vào dịp đặc biệt

    cách nhập code Play Together

    Nhập Full Code Play Together MỚI NHẤT hôm nay nhận quà khủng 2022

    • Bí ẩn – Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh – Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game – Trò chơi
    • Kỹ năng
  • Nhịp sống công nghệ
    • Tất cả
    • Ảnh đẹp Khoa học
    • Anh tài công nghệ
    • Ảnh, đồ họa
    • Bình luận công nghệ
    • Chuyện công nghệ
    • Công nghệ
    • Công nghệ mới
    • Dịch vụ công trực tuyến
    • Dịch vụ nhà mạng
    Cuoc Thi Bao Mat 700 1

    Hai chuyên gia bảo mật Việt Nam giành giải thưởng 40.000 USD trong cuộc thi tấn công mạng Pwn2Own 2021

    He Tri Thuc Viet So Hoa 650 1

    Trải nghiệm sử dụng itrithuc.vn – dự án hệ tri thức Việt được số hóa đầu tiên

    Viettel Kiem Tra Thong Tin Thue Bao 700 1

    Kiểm tra thông tin thuê bao Viettel như thế nào?

    Hang Dien Thoai Lon Nhat 640 1

    Danh sách những hãng smartphone lớn nhất thế giới (cập nhật liên tục)

    Ai Gpt 3 Cua Elon Musk Vua Viet Ca Mot Bai Xa Luan Gay Chan Dong Tren Bao Anh 640 1

    AI viết bài xã luận gây chấn động trên báo Anh, tuyên bố sẽ không hủy diệt loài người

    V120 Viettel Dang Ky 640 1

    Cách đăng ký gói V120 Viettel

    Youtube Da Ra Doi Nhu The Nao Doi Net Ve De Che Youtube640 1

    YouTube đã ra đời như thế nào? Đôi nét về ‘đề chế’ YouTube

    Apple Ung Dung Nhan Dien Airtag Tren Android700 1

    Apple phát hành ứng dụng nhận diện AirTag trên Android

    He Dieu Hanh Se Khong Con Co The Su Dung Whatsapp640 1

    Đây là những hệ điều hành không thể tải WhatsApp trong thời gian tới

Không có kết quả
Xem tất cả kết quả
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
  • Đời sống thường thức
    • Tất cả
    • Bí ẩn - Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh - Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game - Trò chơi
    • Kỹ năng
    • Là gì?
    • Mẹo hay
    Ielts La Gi 640 1

    IELTS là gì? Những điều cần biết về IELTS

    Cài font chữ

    Kẻ ô ly vuông trong Word và in ô ly Word

    Vivo Y33s

    3 cách chụp ảnh đẹp trên Vivo Y33s với nhiều hiệu ứng, filter độc đáo

    cách xem tin nhắn đã thu hồi trên messenger trên điện thoại

    Cách xem tin nhắn đã thu hồi trên Messenger cho điện thoại Android

    Cách hẹn giờ gửi tin nhắn chúc mừng

    Cách hẹn giờ gửi tin nhắn chúc mừng trên điện thoại vào dịp đặc biệt

    cách nhập code Play Together

    Nhập Full Code Play Together MỚI NHẤT hôm nay nhận quà khủng 2022

    • Bí ẩn – Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh – Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game – Trò chơi
    • Kỹ năng
  • Nhịp sống công nghệ
    • Tất cả
    • Ảnh đẹp Khoa học
    • Anh tài công nghệ
    • Ảnh, đồ họa
    • Bình luận công nghệ
    • Chuyện công nghệ
    • Công nghệ
    • Công nghệ mới
    • Dịch vụ công trực tuyến
    • Dịch vụ nhà mạng
    Cuoc Thi Bao Mat 700 1

    Hai chuyên gia bảo mật Việt Nam giành giải thưởng 40.000 USD trong cuộc thi tấn công mạng Pwn2Own 2021

    He Tri Thuc Viet So Hoa 650 1

    Trải nghiệm sử dụng itrithuc.vn – dự án hệ tri thức Việt được số hóa đầu tiên

    Viettel Kiem Tra Thong Tin Thue Bao 700 1

    Kiểm tra thông tin thuê bao Viettel như thế nào?

    Hang Dien Thoai Lon Nhat 640 1

    Danh sách những hãng smartphone lớn nhất thế giới (cập nhật liên tục)

    Ai Gpt 3 Cua Elon Musk Vua Viet Ca Mot Bai Xa Luan Gay Chan Dong Tren Bao Anh 640 1

    AI viết bài xã luận gây chấn động trên báo Anh, tuyên bố sẽ không hủy diệt loài người

    V120 Viettel Dang Ky 640 1

    Cách đăng ký gói V120 Viettel

    Youtube Da Ra Doi Nhu The Nao Doi Net Ve De Che Youtube640 1

    YouTube đã ra đời như thế nào? Đôi nét về ‘đề chế’ YouTube

    Apple Ung Dung Nhan Dien Airtag Tren Android700 1

    Apple phát hành ứng dụng nhận diện AirTag trên Android

    He Dieu Hanh Se Khong Con Co The Su Dung Whatsapp640 1

    Đây là những hệ điều hành không thể tải WhatsApp trong thời gian tới

Không có kết quả
Xem tất cả kết quả
NQ NEWS
Không có kết quả
Xem tất cả kết quả
Trang chủ Kiến thức tổng hợp Development

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

@admiz bởi @admiz
21/04/2022
trong Development
0
Làm Quen Với Mithriljs – Phần 1 60902ec9a4f01.jpeg

Nội dung

  • 1 Mithril là gì?
  • 2 Tại sao lại sử dụng Mithril?
  • 3 1. Nhẹ
  • 4 2. Dễ tiếp thu
  • 5 3. Nhanh vừa phải
  • 6 4. Không chỉ dành cho SPAs

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ư:

m(‘h1.title’, {

title: ‘Hello’,

style: {

display: showTitle ? ‘block’ : ‘none’

)

Nếu showTitle != null thì // Attributes cũng được dùng để khai báo các lifecycle hooks và event handlers nhưng chúng ta sẽ đề cập đế chúng sau.

Chidlren để bạn khai báo nội dung của Vnode. Nó có thể là String, Number, Boolean hay một mảng các Vnode khác. Ví dụ:

//

Hello World

m(”, ‘Hello World’)

//

123

m(”, 123)

const h1 = m(‘h1’, ‘Hello’)

const h2 = m(‘h2’, ‘World’)

//

//

Hello

//

World

//

m(”, [h1, h2])

m(”, h1, h2 /* …vnodes */) //

Cài đặt Mithril

Để bắt đầu, bạn cần cài đặt Mithril. Cái này có hơi phức tạp chút, nên bạn hãy chú ý nghen. Tạo một tập tin index.html có nội dung như sau:

// Print “Hello World” to the page

m.render(document.body, m(‘h1’, ‘Hello World’))

>> Xem tiếp: Làm quen với MithrilJS – Phần 2

Post Views: 99

Có thể bạn quan tâm bài viết

5 Bước Cài đặt Lemp Stack Trên Ubuntu 16.04 60902eddebb15.png
Development

5 bước cài đặt LEMP stack trên Ubuntu 16.04

05/05/2021
Tăng Tốc độ Làm Việc Trên Ubuntu Qua Command đặc Biệt 60902eda2d54e.png
Development

Tăng tốc độ làm việc trên Ubuntu qua command đặc biệt

05/05/2021
Quản Lý Các User Trong Ubuntu Server (p1) 60902ed56b2cc.png
Development

Quản lý các User trong Ubuntu Server (P1)

05/05/2021
Tìm Hiểu Quy Trình Tc39 60902ecd58440.jpeg
Development

Tìm hiểu quy trình TC39

21/04/2022
Làm Quen Với Mithriljs – Phần 2 60902ec600017.jpeg
Development

Làm quen với MithrilJS – Phần 2

21/04/2022
Tổng Quan Về V8 Engine 60902ec2049e0.jpeg
Development

Tổng quan về V8 Engine

05/05/2021

Bài mới nhất

Thiết Kế Website Xuất Khẩu Lao động, đi Du Học Chuyên Nghiệp, Giá Rẻ 612d08e0cb2c2.jpeg

Thiết kế website xuất khẩu lao động, đi du học chuyên nghiệp, giá rẻ

03/02/2023
Thiết Kế Website Bán Mắt Kính Uy Tín Và Thời Thượng Nhất Hiện Nay 612d0a181fc93.jpeg

Thiết kế website bán mắt kính uy tín và thời thượng nhất hiện nay

03/02/2023
Yoast Seo Là Gì? Hướng Dẫn Cấu Hình Yoast Seo Trên Website Hiệu Quả 612d069c83e87.png

Yoast SEO là gì? Hướng dẫn cấu hình Yoast SEO trên website hiệu quả

02/02/2023
Woocommerce Là Gì? Hướng Dẫn Cài đặt Và Sử Dụng Woocommerce Hiệu Quả 612d06a3a6dc1.jpeg

Woocommerce là gì? Hướng dẫn cài đặt và sử dụng Woocommerce hiệu quả

02/02/2023
Tổng Hợp Các Lỗi Bảo Mật Website Thường Gặp Nhất Và Cách Khắc Phục 612d0678b7942.jpeg

Tổng hợp các lỗi bảo mật website thường gặp nhất và cách khắc phục

01/02/2023

Categories

  • Android
  • Ảnh đẹp Khoa học
  • Anh tài công nghệ
  • Ảnh, đồ họa
  • Bảo mật máy tính
  • Bảo mật, Antivirus
  • Bí ẩn – Chuyện lạ
  • Bình luận công nghệ
  • Câu chuyện Khoa học
  • Chăm sóc Nhà cửa
  • Chăm sóc Sức khỏe
  • Chụp ảnh – Quay phim
  • Chuyện công nghệ
  • Công nghệ
  • Công nghệ mới
  • Cưới hỏi
  • Deep Learning
  • Development
  • Dịch vụ công trực tuyến
  • Dịch vụ ngân hàng
  • Dịch vụ nhà mạng
  • DIY – Handmade
  • Đời sống thường thức
  • Game – Trò chơi
  • Giải pháp bảo mật
  • Giải trí
  • Giáng sinh – Noel
  • Giao tiếp, liên lạc, hẹn hò
  • Hệ thống
  • Hệ thống
  • Hỗ trợ học tập
  • Họp, học trực tuyến
  • Internet
  • iPhone
  • Khám phá khoa học
  • Khám phá thiên nhiên
  • Khoa học công nghệ
  • Khoa học Vũ trụ
  • Khoa học vui
  • Kiến thức bảo mật
  • Kiến thức căn bản
  • Kiến thức cơ bản
  • Kiến thức tổng hợp
  • Kinh nghiệm Du lịch
  • Kỹ năng
  • Là gì?
  • Làm đẹp
  • Lập trình
  • Linux
  • Linux OS
  • Lưu trữ đám mây
  • macOS
  • Mail Server
  • Mạng LAN – WAN
  • Máy ảo
  • Máy chủ
  • Máy công cụ
  • Máy hút mùi
  • Mẹo hay
  • Mẹo vặt
  • ms excel
  • ms-powerpoint
  • Nền tảng điện toán đám mây
  • Nhà thông minh
  • Phần cứng
  • Phần cứng
  • Phần Mềm
  • Phân phối
  • Quà tặng
  • Quản trị hệ thống
  • Quạt các loại
  • Quiz công nghệ
  • Raspberry Pi
  • Sửa lỗi máy tính
  • Tải game
  • Tấn công mạng
  • Tăng tốc máy tính
  • Tết 2022
  • Tết Trung thu
  • Thủ thuật
  • Thủ thuật SEO
  • Thủ thuật Wifi
  • Tiện ích hệ thống
  • Tin học văn phòng
  • Tin tức
  • Tivi
  • Trí tuệ nhân tạo (AI)
  • Tủ lạnh
  • Uncategorized
  • Ứng dụng
  • Ứng dụng văn phòng
  • Video Khoa học
  • Video, phim, nhạc
  • Website
  • Windows Server 2012

Tags

#app #chatbot #chatbot tự động #CRM #Email Marketing #Kiến thức cơ bản #Techblog #Thiết kế website Android apple cách chơi Pokémon Go Gmail Google Google Drive hacker HTML hàm python hàm python có sẵn hình nền máy tính học css học python học SQL ios iphone iphone 12 Microsoft minecraft mssql MS SQL Server Pokémon Go PUBG Mobile python Raspberry Pi Samsung smartphone SQL Server thiết bị số tivi tài liệu python windows windows 10 YouTube điện thoại di động điện thoại thông minh ứng dụng
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2022 Pha Le Solution

Không có kết quả
Xem tất cả kết quả
  • Home

© 2022 Pha Le Solution

Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?