JavaScript vẫn giữ được vị thế là một trong những ngôn ngữ lập trình được sử dụng rộng rãi nhất. Vì lý do này mà ngôn ngữ lập trình này cũng có nhiều thư viện và framework. React là một trong những thư viện JavaScript phổ biến nhất.
React cũng đi kèm với nhiều framework và thư viện được thiết kế để thực hiện nhiều chức năng khác nhau. Khung web cung cấp một cách có cấu trúc để phát triển một ứng dụng web. Thay vì tạo mọi thứ từ đầu, các framework cung cấp mã có thể tái sử dụng mà các nhà phát triển có thể sử dụng trong ứng dụng của họ.
Remix là một trong những framework web React mới nhất đã trở nên phổ biến trong thời gian gần đây. Trong bài viết này, chúng tôi sẽ định nghĩa Remix framework là gì, các tính năng của nó, cách định cấu hình, các trường hợp sử dụng Remix và những hạn chế của nó.
Khung Remix là gì?
Remix là một nền tảng phát triển trang web tất cả trong một được xây dựng dựa trên React. Bạn có thể sử dụng Remix để tạo phần phụ trợ và giao diện người dùng cho ứng dụng của mình. Remix cho phép bạn tập trung vào giao diện người dùng và giúp cung cấp dịch vụ linh hoạt và nhanh chóng.
Khung này có thể được mô tả thành bốn thứ: trình biên dịch, khung trình duyệt, khung máy chủ và trình xử lý HTTP.
Remix ban đầu là dịch vụ trả phí nhưng đã trở thành nguồn mở vào cuối năm 2021. Vậy là nó đã được Shopify mua lại vào năm 2022.
Các chức năng khung phối lại
- Ngăn xếp Remix: Tính năng Remix CLI này cho phép bạn tạo nhanh các ứng dụng Remix. Một số ngăn xếp này được tích hợp sẵn. Bạn cũng có thể tự tạo một ứng dụng từ đầu. Ngăn xếp tích hợp chính thức có các tính năng như quy trình triển khai tự động, cơ sở dữ liệu, kiểm tra, xác thực và linting. Một số ngăn xếp bao gồm Blues Stack, Indie Stack và Dirty Stack phổ biến.
- Kết xuất phía máy chủ (SSR): Khung này cho phép hiển thị các thành phần React phía máy chủ. Việc hiển thị ban đầu trong Remix được thực hiện trên máy chủ bằng cách gửi tài liệu HTML được hiển thị đầy đủ tới máy khách. Kết xuất phía máy chủ có một số ưu điểm, chẳng hạn như cải thiện khả năng truy cập, cho phép các công cụ tìm kiếm lập chỉ mục nội dung của bạn và tăng tốc độ.
- Định tuyến với các tuyến lồng nhau: Remix sử dụng React Router 6. Trong khung này, tất cả những gì bạn phải làm là thả các tệp vào thư mục tuyến đường và mô-đun tuyến đường Remix sẽ chuyển đổi chúng thành các đường dẫn có thể điều hướng được. Tuyến đường lồng nhau là tuyến đường được chứa trong một tuyến đường khác.
- Hỗ trợ TypeScript và JavaScript: Bạn có thể sử dụng Remix cho dù bạn sử dụng JavaScript hay TypeScript. Ưu điểm của việc sử dụng TypeScript là nó cho phép bạn khai báo các biến và giúp bạn phát hiện lỗi sớm.
- Tải dữ liệu và bộ nhớ đệm tích hợp: Khung này cho phép các nhà phát triển xác định các trình tải tìm nạp dữ liệu từ nhiều nguồn khác nhau. Remix hỗ trợ truy xuất dữ liệu cả phía máy khách và phía máy chủ. Cơ chế bộ đệm được cung cấp bởi nền tảng này giúp giảm việc truy xuất dữ liệu không cần thiết và tối ưu hóa các yêu cầu tiếp theo.
- Tách mã và tìm nạp trước: Bạn có thể chia mã trong Remix thành các bit nhỏ, có thể tải được theo yêu cầu. Cách tiếp cận này làm giảm kích thước gói ban đầu và khả năng tìm nạp trước tải dữ liệu và mã ở chế độ nền.
Lợi ích của Khung Remix
- Full Stack: Hầu hết mọi người sử dụng các ngôn ngữ hoặc framework khác nhau để xây dựng các ứng dụng phía máy khách và phía máy chủ. Ví dụ: bạn có thể sử dụng React làm giao diện người dùng và sử dụng khung Node.js như ExpressJS làm phụ trợ. Trong các trường hợp khác, bạn có thể sử dụng khung Python như Django trong phần phụ trợ của mình. Remix là một nền tảng full-stack, nghĩa là front-end và back-end sẽ nằm trong cùng một ứng dụng.
- Xử lý dữ liệu xuất sắc: Remix dựa trên các quy ước và chức năng của trình duyệt gốc. Luồng dữ liệu duy nhất giúp bạn dễ dàng truyền dữ liệu giữa mặt trước và mặt sau của ứng dụng.
- Xử lý trạng thái dễ dàng: Việc quản lý trạng thái trong ứng dụng React có thể là một điều khó khăn và hầu hết các nhà phát triển đều sử dụng thư viện của bên thứ ba như Redux. Sử dụng các bản phối lại của trình tải để quản lý trạng thái phía máy chủ. Bạn có thể sử dụng thuộc tính “useLoaderData” từ bất kỳ thành phần nào trong tuyến hiện tại.
- Ranh giới lỗi: Nếu có lỗi trong tuyến hoặc thành phần lồng nhau trong Remix, lỗi sẽ chỉ giới hạn ở thành phần đó. Lỗi như vậy sẽ không làm hỏng toàn bộ ứng dụng như trong các framework khác. Mặc dù bạn có thể triển khai tính năng ranh giới lỗi trong một số khung React như Next.js, tính năng này được tích hợp trong Remix.
Điều kiện tiên quyết để thiết lập phối lại
Nếu bạn muốn thiết lập Remix, đây là một số thứ bạn cần;
- Phiên bản Node.js từ 14.17.0 hoặc mới hơn
- Trình quản lý gói như npm (7 hoặc mới hơn)
- Trình chỉnh sửa mã
- Hiểu cách hoạt động của ứng dụng React
Cách thiết lập “Xin chào thế giới!” trên bản phối lại
Chúng tôi sẽ tạo một dự án đơn giản và gọi nó là “Ứng dụng Remix”. Bạn có thể theo dõi;
- Đi đến vị trí bạn muốn tạo ứng dụng, mở terminal và chạy lệnh này;
npx [email protected] remix-app
Thiết bị đầu cuối sẽ yêu cầu bạn trả lời một số câu hỏi và định cấu hình ứng dụng. Chúng ta có thể bám sát những điều cơ bản và chọn TypeScript làm ngôn ngữ của mình.
- Đi tới ứng dụng đã tạo (Ứng dụng Remix) và mở nó trong trình chỉnh sửa mã yêu thích của bạn. Cấu trúc thư mục sẽ như sau;
- Xây dựng ứng dụng của bạn bằng lệnh này;
npm run build
- Khởi động máy chủ phát triển bằng lệnh này;
npm start
Bây giờ bạn có thể mở một cửa sổ trong trình duyệt của mình bằng liên kết http://localhost:3000 sẽ xuất hiện trong trình duyệt của bạn;
- Sửa đổi nội dung của tệp app/root.tsx như sau;
import { LiveReload } from "@remix-run/react";
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1"
/>
<title>Remix Demo</title>
</head>
<body>
Hello world
<LiveReload />
</body>
</html>
);
}Trang được hiển thị sẽ trông như thế này;
Khung Remix được sử dụng ở đâu
Giống như Next.js và React, Remix có thể được sử dụng để xây dựng nhiều loại ứng dụng khác nhau. Dưới đây là một số trường hợp sử dụng tốt nhất;
- Ứng dụng một trang: Tất cả mã trong Remix được tải một lần. Cách tiếp cận do máy chủ kết xuất cho phép tải ban đầu nhanh chóng trong khi máy khách xử lý liền mạch các yêu cầu tiếp theo.
- Trang web thân thiện với SEO: Remix sử dụng tính năng kết xuất trước để tạo các trang HTML tĩnh. Điều này giúp các trang web có thể được lập chỉ mục, ngay cả khi bạn đang xử lý nội dung động.
- Trang web động: Remix sử dụng kết xuất phía máy chủ trong các ứng dụng của nó. SSR tải các trang trên máy chủ trước khi gửi trang HTML đến máy khách. Điều này làm cho Remix trở nên phù hợp hoàn hảo với các trang web có nội dung được tạo động.
Cách hoạt động của khung Remix ở phía máy chủ và phía máy khách
Kết xuất phía máy chủ
Remix hiển thị mã của bạn ở dạng HTML đơn giản ở phía máy chủ. Cách tiếp cận này làm giảm số lượng mã JavaScript, do đó tăng tốc độ tải. Về cơ bản, Remix sử dụng các tính năng “hành động” và “tải” gốc. Máy chủ sẽ thực hiện mọi hành động phía máy chủ mà bạn cung cấp, hiển thị mã React dưới dạng thuần túy và HTML, sau đó gửi mã đó đến trình duyệt của khách hàng.
Kết xuất phía máy khách
Remix, giống như Next.js, cung cấp tính năng “tìm nạp trước” mang đến cho người dùng trải nghiệm điều hướng mượt mà.
Trong Next.js, thành phần này cho phép trang web của chúng tôi tải trước trang mà nó chuyển hướng đến và không phải đợi trang tải xuống. Tuy nhiên, cách tiếp cận này chỉ hoạt động tốt đối với các trang web tĩnh.
Remix sử dụng một tính năng hỗ trợ tải xuống và các trang web khác. Bằng cách này, Remix cho phép bạn tải các trang một cách nhanh chóng, nội dung của trang này thay đổi tùy thuộc vào dữ liệu người dùng nhập.
Hạn chế phối lại
- Cộng đồng nhỏ: Remix ban đầu là một framework trả phí. Tuy nhiên, nó đã được tạo thành nguồn mở vào năm 2021 và vẫn còn non trẻ. Điều này có nghĩa là có sẵn các nguồn lực và công cụ hạn chế để giúp việc phát triển ứng dụng trở nên dễ dàng.
- Đường cong học tập dốc: Remix giới thiệu khái niệm về các tuyến đường lồng nhau và có thể gây nhầm lẫn nếu bạn đến từ React hoặc các khung của nó như Next.js. Tuy nhiên, một khi bạn đã hiểu rõ về nó, việc sử dụng framework này sẽ trở nên dễ dàng.
Tương lai của bản remix là gì?
- Chúng ta có thể sẽ thấy việc áp dụng ngày càng tăng: Remix vẫn còn non trẻ. Các nhà phát triển có thể chưa phát hiện ra tiềm năng của nó và chúng ta có thể sẽ thấy nhiều công ty và nhà phát triển sử dụng nó hơn trong tương lai.
- Hệ sinh thái có khả năng phát triển: Remix vẫn còn ít công cụ và thư viện để hỗ trợ hệ sinh thái của mình. Khi mức độ phổ biến ngày càng tăng, chúng ta có thể mong đợi nhiều công cụ và thư viện hơn.
- Cộng đồng sẽ phát triển: Cộng đồng rất quan trọng đối với sự phát triển của khung/ngôn ngữ lập trình. Chúng tôi hy vọng cộng đồng sẽ phát triển khi các nhà phát triển khám phá Remix Gems.
Remix có tốt hơn Next.js không?
Câu trả lời cho câu hỏi này sẽ phụ thuộc vào bản chất của ứng dụng được tạo. Nếu bạn muốn xây dựng một ứng dụng hoàn chỉnh bằng một framework, Remix sẽ tốt hơn Next.js. Tuy nhiên, nếu bạn muốn có một framework hoàn thiện với nhiều tài nguyên và khả năng theo dõi tốt, Next.js sẽ là lựa chọn hoàn hảo cho bạn.
Remix có phải là một khuôn khổ tốt không?
Đúng. Đó là một framework tốt để xây dựng toàn bộ ứng dụng full-stack bằng cách sử dụng một framework. Đây cũng là một nền tảng tuyệt vời nếu bạn muốn công nghệ có giới hạn lỗi tích hợp. Tuy nhiên, Remix không phải là framework phù hợp nếu bạn muốn có một framework có cộng đồng lớn và nhiều tài nguyên.
Quá trình sản xuất Remix JS đã sẵn sàng chưa?
Đúng. Nếu bạn đã quen với việc triển khai các ứng dụng Node.js thì việc làm việc và triển khai các ứng dụng Remix cũng sẽ trở nên dễ dàng.
Nên học Remix hay React?
Remix là một khung React. Vì vậy, bạn cần hiểu cách React hoạt động trước khi bắt đầu học remix. Tuy nhiên, nếu thời gian của bạn có hạn và bạn chỉ muốn học một framework thì sự lựa chọn sẽ phụ thuộc vào mục tiêu cuối cùng của bạn.
Remix cho phép bạn xây dựng các ứng dụng full-stack. Bạn cũng có thể học Remix ngay cả khi bạn không hiểu React, nhưng quá trình học tập sẽ rất khó khăn.
Tuy nhiên, nếu bạn đang sử dụng React, bạn sẽ cần sử dụng framework back-end như Django hoặc Ruby on Rails nếu bạn muốn có một ứng dụng full-stack. Nếu bạn chọn học React, bạn có thể dựa vào nhiều tài nguyên và cộng đồng của nó.
Ứng dụng
Còn quá sớm để nói liệu Remix có phải là tương lai của việc phát triển web hay không. Các tính năng tuyệt vời của nó như định tuyến linh hoạt, hiển thị phía máy chủ, chia sẻ mã và tập trung vào trải nghiệm của nhà phát triển khiến nó trở thành một khung web rất hứa hẹn.
Tuy nhiên, Remix vẫn còn non trẻ và nguồn lực còn hạn chế. Nó cũng có một cộng đồng nhỏ. Các công cụ và thư viện Remix JS rất hiếm vì hầu hết các nền tảng nguồn mở đều phụ thuộc vào sự hỗ trợ của cộng đồng và các công cụ của bên thứ ba.
Bạn cũng có thể làm quen với một số khung và thư viện với tư cách là nhà phát triển full-stack.
