Framework JavaScript GUI l&agrave; một framework đ&atilde; g&oacute;p phần v&agrave;o c&aacute;ch mạng h&oacute;a phương ph&aacute;p triển khai ứng dụng d&agrave;nh cho m&aacute;y t&iacute;nh để b&agrave;n. Tr&ecirc;n thực tế, nhiều ứng dụng được sử dụng ng&agrave;y nay, cho d&ugrave; li&ecirc;n quan đến lập tr&igrave;nh, mạng x&atilde; hội, truyền th&ocirc;ng&hellip; đều được x&acirc;y dựng bằng framework Electron framework.
Electron cho ph&eacute;p c&aacute;c lập tr&igrave;nh vi&ecirc;n c&oacute; kinh nghiệm ph&aacute;t triển web tạo những ứng dụng m&aacute;y t&iacute;nh để b&agrave;n độc lập tr&ecirc;n nhiều nền tảng&hellip; m&agrave; kh&ocirc;ng cần phải học bất kỳ ng&ocirc;n ngữ lập tr&igrave;nh mới n&agrave;o! Bạn c&oacute; thể sử dụng đồng thời JavaScript, CSS v&agrave; HTML, điều n&agrave;y tất nhi&ecirc;n l&agrave; kh&aacute; tuyệt vời!
T&oacute;m tắt ngắn gọn về Electron:
Electron l&agrave; một framework x&acirc;y dựng ứng dụng m&aacute;y t&iacute;nh để b&agrave;n sử dụng JavaScript, HTML v&agrave; CSS. Bằng c&aacute;ch nh&uacute;ng Chromium v&agrave; Node.js v&agrave;o tệp nhị ph&acirc;n, Electron cho ph&eacute;p duy tr&igrave; một cơ sở m&atilde; JavaScript v&agrave; tạo ứng dụng đa nền tảng hoạt động tr&ecirc;n Windows, macOS v&agrave; Linux m&agrave; kh&ocirc;ng cần c&oacute; kinh nghiệm ph&aacute;t triển native.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/c71bf5dd-e793-4bab-9643-564ecdf80eb8" alt="et1" />
Tổng quan Electron
Một trong những nhược điểm lớn nhất của Electron, như được đề cập tr&ecirc;n Stack Overflow v&agrave; c&aacute;c diễn đ&agrave;n kh&aacute;c&hellip; l&agrave; tệp nhị ph&acirc;n đầu ra thường kh&aacute; lớn! Nhiều đến nỗi, ngay cả một cơ sở m&atilde; cỡ trung b&igrave;nh cũng c&oacute; thể tạo ra tệp nhị ph&acirc;n cuối c&ugrave;ng khoảng 60MB.
Bạn tự hỏi liệu c&oacute; giải ph&aacute;p n&agrave;o cho vấn đề n&agrave;y kh&ocirc;ng? V&agrave; h&oacute;a ra Rust c&oacute; cung cấp một t&ugrave;y chọn tốt hơn!
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/c0625c6b-b464-4639-8647-bf28afa281a5" alt="et2" />
Tauri!
Tauri l&agrave; bộ c&ocirc;ng cụ gi&uacute;p lập tr&igrave;nh vi&ecirc;n tạo ứng dụng cho c&aacute;c nền tảng m&aacute;y t&iacute;nh để b&agrave;n phổ biến - sử dụng hầu hết c&aacute;c khung frontend hiện nay. L&otilde;i được x&acirc;y dựng bằng Rust v&agrave; CLI th&uacute;c đẩy Node.js l&agrave;m cho Tauri trở th&agrave;nh một c&aacute;ch tiếp cận đa ng&ocirc;n ngữ tuyệt vời để tạo v&agrave; duy tr&igrave; ứng dụng.
Một số người c&oacute; thể gặp kh&oacute; khăn trong việc học code Rust, đặc biệt nếu chưa quen với ng&ocirc;n ngữ nhập tĩnh. Bạn c&oacute; thể bắt đầu viết một số tập lệnh Python nhỏ hơn để xem c&oacute; thể thực hiện loại cải tiến hiệu suất n&agrave;o.&nbsp;
Thực ra, nếu nghi&ecirc;n cứu t&agrave;i liệu do Tauri cung cấp th&igrave; bạn sẽ thấy c&ocirc;ng cụ d&ograve;ng lệnh tạo ra tất cả c&aacute;c tệp Rust cần thiết để thiết lập v&agrave; chạy với c&aacute;c framework frontend quen thuộc. Kh&ocirc;ng chỉ vậy, khi bạn bắt đầu th&ecirc;m c&aacute;c t&iacute;nh năng ri&ecirc;ng v&agrave;o backend cho UI để sử dụng, Tauri khiến mọi thứ hoạt động c&ugrave;ng nhau kh&aacute; liền mạch!
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/63bb872f-9aeb-46ef-b705-defc0b5614df" alt="et3" />
Bắt đầu nhanh ch&oacute;ng v&agrave; đơn giản
Bạn c&oacute; thể thử tạo một ứng dụng bảng điều khiển d&agrave;nh cho m&aacute;y t&iacute;nh để b&agrave;n mới cho dự &aacute;n cộng đồng với Tauri.
Như đ&atilde; đề cập ở tr&ecirc;n, bước thiết lập kh&aacute; đơn giản:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Đảm bảo hệ thống đ&atilde; c&agrave;i đặt Rust</li>
<li style="font-weight: 400;" aria-level="1">Tr&ecirc;n Windows hoặc Linux, đảm bảo c&agrave;i đặt c&aacute;c phụ thuộc c&oacute; li&ecirc;n quan</li>
<li style="font-weight: 400;" aria-level="1">Chạy một lệnh đơn giản để thiết lập dự &aacute;n</li>
</ul>
Sau đ&oacute;, c&aacute;c bước cần l&agrave;m c&ograve;n lại l&agrave; tập hợp tất cả c&aacute;c tệp nguồn frontend lại với nhau, trong đ&oacute; c&oacute; thể tham khảo t&agrave;i liệu Tauri khi cần gợi &yacute; về Giao tiếp giữa tiến qu&aacute; tr&igrave;nh giữa UI v&agrave; backend.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/3a016bd6-fa6f-4724-9cc3-920f19dbd9ce" alt="et4" />
Điểm cộng của Tauri l&agrave; bạn kh&ocirc;ng phải mất c&ocirc;ng tạo tệp <code>preload.js</code> ri&ecirc;ng biệt chỉ để giao tiếp giữa c&aacute;c quy tr&igrave;nh một c&aacute;ch hợp l&yacute;.
Bạn chỉ cần ch&uacute; th&iacute;ch ph&ugrave; hợp trong <code>main.rs</code> ph&iacute;a tr&ecirc;n h&agrave;m cần gọi từ UI v&agrave; nhập một lệnh đơn giản trong tệp React <code>jsx</code>:
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/4eb24942-9aa7-4781-8087-8ef99b5bfad9" alt="et5" />
Cuối c&ugrave;ng, một ưu điểm kh&aacute;c của Tauri l&agrave; backend sử dụng Rust. Điều n&agrave;y cho ph&eacute;p x&acirc;y dựng sản phẩm cuối c&ugrave;ng th&agrave;nh một tệp nhị ph&acirc;n chạy ri&ecirc;ng với k&iacute;ch thước chỉ bằng một phần nhỏ so với ứng dụng ph&aacute;t triển bằng Electron.
Sau khi ho&agrave;n th&agrave;nh c&aacute;c phần cuối c&ugrave;ng của dự &aacute;n, tất cả những g&igrave; cần l&agrave;m l&agrave; chạy tập lệnh build v&agrave; đợi <code>cargo</code> thực hiện c&ocirc;ng việc. K&iacute;ch thước của tệp nhị ph&acirc;n kết quả cuối c&ugrave;ng cho trang tổng quan l&agrave; <code>~13,6MB</code>. Nếu với Electron, k&iacute;ch thước c&oacute; thể l&agrave; <code>58,2MB</code> v&agrave; đ&oacute; thậm ch&iacute; chưa phải l&agrave; tệp c&agrave;i đặt cuối c&ugrave;ng tr&ecirc;n đĩa (d&agrave;nh cho macOS). Dưới đ&acirc;y l&agrave; bảng so s&aacute;nh; cả hai đều sử dụng React l&agrave;m front-end:
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/ab47fbde-beb9-4eb8-b857-3ccb7b315eb8" alt="et6" />
Bảng so s&aacute;nh&nbsp;
Tauri chắc chắn c&oacute; tiềm năng tiếp tục ph&aacute;t triển đến mức vượt mặt Electron v&agrave; trở th&agrave;nh framework GUI &ldquo;front-end&rdquo; thống trị. Mặc d&ugrave; c&oacute; một điều cần c&acirc;n nhắc l&agrave; Tauri được x&acirc;y dựng tr&ecirc;n Rust nhưng một ch&uacute;t thời gian bỏ ra để t&igrave;m hiểu Rust l&agrave; ho&agrave;n to&agrave;n xứng đ&aacute;ng!&nbsp;
Nếu bạn muốn bắt đầu h&agrave;nh tr&igrave;nh ph&aacute;t triển GUI frontend, h&atilde;y sử dụng Tauri v&agrave; đừng coi Electron như một giải ph&aacute;p tức th&igrave;&hellip; bạn sẽ ngạc nhi&ecirc;n khi thấy hiệu quả của n&oacute;!
To&agrave;n bộ cơ sở m&atilde; đ&atilde; được đăng tr&ecirc;n dự &aacute;n cộng đồng Gitlab. H&atilde;y tham khảo nếu bạn đang muốn t&igrave;m kiếm &yacute; tưởng cho dự &aacute;n c&aacute; nh&acirc;n!
Hy vọng bạn th&iacute;ch b&agrave;i viết n&agrave;y. H&atilde;y tiếp tục theo d&otilde;i v&agrave; ủng hộ c&aacute;c b&agrave;i viết tiếp theo của <a href="https://tek4.vn/">Tek4.vn</a> nh&eacute;!

dev1_account1

Đã đến lúc tạm biệt Electron và chuyển sang dùng Tauri

Cùng tác giả

dev1_account1

Có liên quan