Giới thiệu
Hôm nay, tôi sẽ cùng các bạn đi kiểm tra sự khác biệt giữa 3 frameworks vô cùng thịnh hành: Next, Nuxt và Nest. Cả 3 frameworks này đều có mục tiêu phục vụ Server-side rendering (SSR) và được sử dụng tương ứng ở React, Vue và Angular (3 frameworks Front-end được sử dụng rộng rãi nhất hiện nay).
Chúng ta sẽ cùng so sánh dựa trên các tiêu chí sau:
- Độ thịnh hành (Số sao trên Github và lượng tải về hàng tuần qua NPM).
- Quá trình cài đặt.
- Ứng dụng Hello World cơ bản.
- Ưu điểm.
- Nhược điểm.
- Hiệu năng.
- Sự tham gia của cộng đồng.
1. Next
Next có độ phổ biến hơn so với 2 frameworks còn lại. Nó có nhiều lượt tải mỗi tuần, nhiều sao trên Github cũng nhiều sự tham gia của cộng đồng hơn.
Next là framework giúp bạn có thể xây dựng một ứng dụng web SSR cũng như một ứng dụng web tĩnh với React.
Quá trình cài đặt
Cài đặt qua NPM:
1 2 | npm install --save next react react-dom |
Sau đó thêm scripts vào file package.json của bạn như sau:
1 2 3 4 5 6 7 8 | { "scripts": { "dev": "next", "build": "next build", "start": "next start" } } |
Sau khi hoàn thành, hệ thống các file của bạn sẽ là API chính được sử dụng. Mọi file .js sẽ được tự động xử lí và hiển thị.
Ứng dụng Hello World cơ bản
Tạo file ./pages/index.js trong project của bạn như sau:
1 2 3 4 5 6 | function Home() { return <div>Hello world!</div>; } export default Home; |
Sau đó bạn chỉ cần npm run dev và truy cập http://localhost:3000. Để chạy project ở 1 port khác, bạn có thể dùng lệnh npm run dev -- -p <port mà bạn muốn>
Ưu điểm
- Mọi thành phần đều được áp dụng SSR một cách mặc định.
- Code được phân cắt tự động để giúp tải trang nhanh hơn.
- Không tải lên những phần code không dùng tới.
- Định tuyến (routing) phía client một cách đơn giản (page-based).
- Môi trường Webpack-based dev có hỗ trợ Hot Module Replacement (HMR).
- Lấy dữ liệu một cách vô cùng đơn giản.
- Có thể triển khai cùng với Express hoặc bất kì server Node.js HTTP nào.
- Có thể tuỳ chỉnh cấu hình Babel và Webpack theo ý bạn.
- Dễ dàng triển khai ở bất cứ đâu có hỗ trợ Node.js.
- Được tích hợp sẵn công cụ tối ưu hoá tìm kiếm (SEO) cho các trang của bạn.
Nhược điểm
- Next.js không phải là Back-end; nếu bạn cần xử lí Back-end như cơ sở dữ liệu, hệ thống tài khoản,… bạn cần làm nó ở 1 ứng dụng tách biệt phía Back-end.
- Next vô cùng mạnh mẽ, nhưng nếu dùng nó chỉ để làm một ứng dụng đơn giản thì là điều không cần thiết…
- Mọi dữ liệu cần phải được tải ở cả 2 phía client và server.
- Việc chuyển giao từ một ứng dụng phía server sang một ứng dụng Next.js chắc chắn không nhanh một chút nào, nó còn phụ thuộc vào project của bạn. Đôi khi, bạn sẽ phải bỏ rất nhiều sức lực để làm được điều đó.
Hiệu năng
Để đo được hiệu năng, tôi đã sử dụng Apache Bench cho benchmarking để giúp chúng ta thấy được số lượng requests mỗi giây mà ứng dụng có thể phục vụ. Ngoài ra, tôi còn sử dụng lighthouse để kiểm toán hiệu năng, khả năng tiếp cận, tính thực tiễn (best pracctices) và SEO.
Ứng dụng Hello World cơ bản với Next.js có thể phục vụ 550.87 requests mỗi giây (ta lấy tổng số requests chia cho tổng thời gian), và mỗi request mất khoảng 18.153 giây để xử lí.
So với 2 frameworkds còn lại, Next.js có một điểm số cao hơn Nuxt.js nhưng lại không tốt bằng Nest.js (mặc dù mình là fan của Nuxt.js
Nhìn trên báo cáo của lighthouse, ta thấy được các điểm số về hiệu năng, tính truy cập, tính thực tiễn và SEO đều trên 70, cũng không tồi, nhưng so với 2 frameworks còn lại thì Next.js lại có điểm số thấp nhất về hiệu năng, và lại cao nhất về tính thực tiễn.
Sự tham gia của cộng đồng
Cộng đồng Next.js giao tiếp với nhau qua chat, slack, các issues và pull requests trên Github.
Ngoài ra, trên repo awesome-nextjs cũng có một danh sách các modules cần thiết, bài viết, project mẫu, phần mở rộng, ứng dụng, sách và video hữu ích cho các developers sử dụng Next.js.
2. Nuxt
Nuxt.js là 1 Meta Framework nhằm tạo ra những ứng dụng web phức tạp, tốc độ cao và mang tính universal một cách nhanh chóng.
Quá trình cài đặt
Cài đặt qua NPM:
1 2 | npm i nuxt |
Và rồi ta tạo một ứng dụng cơ bản chỉ với 1 dòng lệnh:
1 2 | npx create-nuxt-app <tên-project> |
Bạn có thể bắt đầu trực tiếp với CLI create-nuxt-app để có những bản cập nhật mới nhất. Hoặc bạn cũng có thể sử dụng các mẫu project có sẵn: Basic Nuxt.js, Nuxt.js + Express, Nuxt + Kao, Nuxt.js + AdonisJS, Nuxt.js + Micro, Nuxt.js + Nuxtent module dành cho các website có nội dung nặng.
Ứng dụng Hello World cơ bản
Đây là ví dụ cơ bản nhất về ứng dụng Hello World! sử dụng Nuxt:
1 2 3 4 5 6 7 8 9 | <template> <div> <h1>Hello world!</h1> <NLink to="/about"> About Page </NLink> </div> </template> |
Ưu điểm
- Phạm vi chính là biểu diễn UI, cùng lúc với việc trừu tượng hoá sự phân phối client/server.
- Biểu diễn tĩnh ứng dụng Vue của bạn, tận dụng được toàn bộ lợi thế của ứng dụng universal mà không cần server riêng.
- Tự động chia cắt code (tiền biểu diễn các trang)
- Cài đặt qua command line hoặc sử dụng project mẫu.
- Có một cấu trúc project tuyệt vời ngay từ đầu.
- Dễ dàng tạo biến chuyển giữa các trang cũng như viết ra các thành phần file đơn (Single file components).
- Biên dịch ES6/ES7 dễ dàng không cần tốn sức.
- Tự động cập nhật server khi lập trình ứng dụng ở môi trường phát triển.
- Hệ thống định tuyến mạnh mẽ cùng với dữ liệu bất đồng bộ.
- Phục vụ các file tĩnh.
- Dịch chuyển dễ dàng giữa ES6 và ES7.
- Thay thế module “nóng” nhanh chóng ở môi trường phát triển.
- Tiền xử lí: LESS, SASS, STYLUS,…
Nhược điểm
- Cộng đồng còn nhỏ nên các tài nguyên cũng như tài liệu có thể còn chưa được nhiều và phong phú.
- Còn thiếu nhiều các components quan trọng và thông dụng như Google map, calendar, vector maps…), hoặc đã có nhưng chưa được bảo trì và phát triển tốt.
- Cần có thời gian để tìm hiểu sâu để có thể tạo ra các components linh hoạt hơn của riêng mình.
- Các props phải được khai báo rõ ràng ở trong các components.
- Khả năng phản ứng với các thay đổi trực tiếp các thuộc tính.
- Lượng truy cập lớn có thể gây căng thẳng cho phía máy chủ.
- Chỉ có thể truy cập và thao tác với DOM ở một số hooks nhất định.
Hiệu năng
Để đo được hiệu năng, tôi đã sử dụng Apache Bench cho benchmarking để giúp chúng ta thấy được số lượng requests mỗi giây mà ứng dụng có thể phục vụ. Ngoài ra, tôi còn sử dụng lighthouse để kiểm toán hiệu năng, khả năng tiếp cận, tính thực tiễn (best pracctices) và SEO.
Ứng dụng Hello World cơ bản với Nuxt.js có thể phục vụ 190.05 requests mỗi giây (ta lấy tổng số requests chia cho tổng thời gian), và mỗi request mất khoảng 52.619 giây để xử lí.
So với 2 frameworkds còn lại, Nux.js có sự thể hiện khá tệ ở khoản này.
Tuy nhiên trên lighthouse, Nuxt.js lại có điểm số cao nhất về độ đo, hiệu năng, độ truy cập và SEO.
Sự tham gia của cộng đồng
Có hẳn 1 tổ chức cộng đồng nơi bạn có thể tìm thấy các modules và projects sử dụng Nuxt.js. Ngoài ra còn có cả một danh sách những điều tuyệt vời về Nuxt.js có ở awesome-nuxt như modules, công cụ, bài đề cập tới Nuxt, giới thiệu, hướng dẫn, blogs, sách, mẫu project, ví dụ chính thức, và nhiều projects sử dụng Nuxt.js
Cộng đồng liên lạc qua Gitter Chat Room, Telegram, Discord, Twitter và kênh YouTube.
3. Nest
Một framework Node.js tân tiến để xây dựng các ứng dụng phía máy chủ hiệu quả, có thể mở rộng và cấp doanh nghiệp trên TypeScript và JavaScript (ES6, ES7, ES8), Nest được truyền cảm hứng rất nhiều từ Angular.
Nest là một framework để xây dựng các ứng dụng phía máy chủ Node.js hiệu quả, có thể mở rộng. Nó sử dụng JavaScript hiện đại, được xây dựng với TypeScript (duy trì khả năng tương thích với JavaScript thuần túy) và kết hợp các yếu tố của OOP (Lập trình hướng đối tượng), FP (Lập trình chức năng) và FRP (Lập trình phản ứng chức năng).
Dưới vỏ bọc, Nest sử dụng Express, nhưng cũng cung cấp khả năng tương thích với một loạt các thư viện khác, như ví dụ: Fastify, cho phép dễ dàng sử dụng vô số plugin của bên thứ ba có sẵn.
Quá trình cài đặt
Cài đặt qua NPM:
1 2 3 | npm i @nestjs/cli nest new project-name |
Hoặt bạn có thể cài đặt project mẫu dùng Typescript từ Git
1 2 3 4 5 | git clone https://github.com/nestjs/typescript-starter.git project cd project npm install npm run start |
Ứng dụng Hello World cơ bản
Sau khi cài đặt Nest.js bằng lệnh npm cli và tạo một dự án mới với nest new tên-project, một thư mục src / sẽ được tạo và thêm vào một số files cốt lõi, bao gồm file main.ts. File main.ts bao gồm chức năng async, sẽ khởi động ứng dụng của chúng tôi:
1 2 3 4 5 6 7 8 9 | import { NestFactory } from '@nestjs/core'; import { ApplicationModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(ApplicationModule); await app.listen(3000); } bootstrap(); |
Và sau đó để chạy ứng dụng trên cổng 3000, bạn thực thi:
1 2 | npm run start |
Ưu điểm
- Là một framework web dựa trên TypeScript, có thể định nghĩa loại nghiêm ngặt.
- Framework này mang tính chú thích cao, với tất cả mọi thứ từ endpoints đến tài liệu Swagger được tạo từ chúng. Các endpoints vô cùng sạch sẽ và đơn giản, và các chú thích làm cho việc phát triển đơn giản hơn rất nhiều.
- Cấu trúc thư mục trong Nest.js chủ yếu dựa trên Angular. Điều này cho phép thời gian chết tối thiểu khi lần đầu tiên thiết kế dịch vụ Nest.
- Vì Nest.js là một framework dựa trên module, nên nó dễ dàng ngoại hóa các module có mục đích chung và sử dụng lại mã trong nhiều projects.
- Các thành phần có được các thư mục riêng của chúng, với một module ứng dụng và file chính nằm trong thư mục gốc. Cấu trúc đơn giản này cho phép chú ý nhiều hơn đến việc thiết kế các endpoints và sự sử dụng chúng, thay vì cấu trúc ứng dụng.
- Nest.js sử dụng phiên bản TypeScript mới nhất, giúp đảm bảo rằng nó sẽ vẫn có liên quan trong bối cảnh JavaScript thay đổi nhanh chóng và giúp các nhà phát triển ít chuyển đổi ngữ cảnh hơn. Việc chuyển đổi từ mã Angular sang Nest tương đối dễ dàng.
- Tương tự như Angular, Nest cũng có một công cụ dòng lệnh tiện ích, có sẵn thông qua NPM, Nestjs/cli. Công cụ dòng lệnh sẽ cho phép bạn tạo ra dự án, tạo các thành phần kiến trúc Nest và hiển thị thông tin dự án.
Nhược điểm
- Rủi ro lớn nhất mà người dùng Nest phải đối mặt là thiếu tài liệu. Framework này có các tích hợp tuyệt vời với các frameworks khác nhưng tài liệu lại khá khiêm tốn và không bao gồm bất kỳ vấn đề nào có thể phát sinh.
- Nest có một lợi thế trong việc sử dụng TypeScript và liên quan đến Angular, nhưng nó không có sức mạnh hỗ trợ của một doanh nghiệp lớn đằng sau nó.
- Nhìn chung, Nest có một cộng đồng nhỏ hơn so với các frameworks khác.
Hiệu năng
Để đo được hiệu năng, tôi đã sử dụng Apache Bench cho benchmarking để giúp chúng ta thấy được số lượng requests mỗi giây mà ứng dụng có thể phục vụ. Ngoài ra, tôi còn sử dụng lighthouse để kiểm toán hiệu năng, khả năng tiếp cận, tính thực tiễn (best pracctices) và SEO.
Ứng dụng Hello World cơ bản với Next.js có thể phục vụ 928.18 requests mỗi giây (ta lấy tổng số requests chia cho tổng thời gian), và mỗi request mất khoảng 10.774 giây để xử lí.
So với 2 frameworkds còn lại, Nest.js lại có màn trình diễn tốt hơn cả so với 2 frameworks còn lại.
Nhìn trên báo cáo của lighthouse, Nest.js có điểm số hiệu năng vô cùng tuyệt vời, nhưng lại kém hơn nhiều về các mặt còn lại.
Sự tham gia của cộng đồng
Có một nhóm các nhà phát triển cung cấp các gói tiện dụng trên tổ chức Cộng đồng NestJS GitHub. Một số gói phổ biến của họ là: Nestjs-config, một module cấu hình cho NestJS bằng cách sử dụng dotenv. nest-access-control, kiểm soát truy cập dựa trên vai trò và thuộc tính cho NestJS và Nestjs-flub, cũng như hiển thị ngăn xếp lỗi một cách thông minh.
Ngay cả khi Nest không phải là framwork phổ biến nhất, nhưng lại là framework có hiệu suất tốt hơn và có nhiều lợi thế. Bạn hoàn toàn nên thử dùng nó!
Cộng đồng Nest.js sử dụng spectrum chat và Twitter.
Kết luận
Như bạn đã thấy, mỗi frameworks lại có những ưu và nhược điểm riêng của nó, việc bạn nên sử dụng framework nào để xây dựng website của mình còn tuỳ thuộc rất nhiều vào các yếu tố thực tiễn…
Dẫu biết là vậy, nhưng bản thân tôi, tôi luôn dành một sự yêu thích, thiên vị cho Vuejs cũng như Nuxtjs
Còn bạn? Liệu trong suy nghĩ của bạn, đâu mới là frameworks đáng sử dụng nhất?