Shulou(Shulou.com)06/02 Report--

This article focuses on "how to choose the right Node framework". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to choose the right Node framework.

Next

Next is a React framework that allows you to build static web applications using React

Start

GitHub Stars: + 36000

Npm weekly downloads: + 300000

Installation

Next react react-dom is essential.

Npm install-save next react react-dom

Add a script to the package.json, as follows:

{"scripts": {"dev": "next", "build": "next build", "start": "next start"}}

Next will read the js file in the page directory and parse it into page routing

Hello World

Create a directory file within the project. / pages/index.js

Function Home () {return Hello worldview;} export default Home; / / npm run dev / / then visit http://localhost:3000

Benefits

By default, each component is rendered by the server

Automatic code splitting to speed up page loading

Do not load unnecessary code

Simple client routing (page-based)

Webpack-based development environment that supports module hot update (HMR)

It is very easy to get data

Support for any Node HTTP server implementation, such as Express

Support for Babel and Webpack customization

Can be deployed on any platform that can run node

Built-in page search engine optimization (SEO) processing

Shortcoming

Next is not a backend service and should be independent of backend operations.

If you just want to create a simple WEB application, it may be a bull's-eye.

The data will be loaded repeatedly on the client and server

Without a separate project, migrating to Next is painful and may require double work

Performance

Performance is based on two points

1. Use Apache Bench to test throughput.

2. Use lighthouse to test Preformance, Accessibility, Best Practices, SEO

This is the Next basic HelloWorld program. It can process 550.87 requests per second. The average time spent per request is 18.153ms

In the lighthouse test report, we can see that Preformance, Accessibility, Best Practices and SEO are all higher than 70, which is lower than the other two frameworks, but it has to be said that it is a good data, while the Best Practices score nuxt is higher than the other two.

Community activity

Number of contributors: 678

Pull Requests: 3029

The community is very active.

Nuxt

Nuxt is a general application framework based on Vue, which presupposes various configurations needed to develop server-side rendering applications using Vue. The main focus is on applied UI rendering.

Star

GitHub stars:+19000

Npm weekly downloads: + 100000

Installation

For a quick start, the Nuxt.js team created the scaffolding tool create-nuxt-app

/ / make sure npx is installed (npx is installed by default in NPM version 5.2.0) npx create-nuxt-app

It will give you some choices: in integrated server-side frameworks such as Express, Koa, Hapi, Feathers, Micro, Adonis (WIP); choose your favorite UI framework: Bootstrap, Vuetify, Bulma, Buefy, etc.

Hello World

Nuxt automatically generates the routing configuration of the vue-router module according to the pages directory structure

/ /. / pages/index.vue Hello world! About Page

Benefits

Its main scope is UI rendering, while abstracting the client / server distribution

Static rendering, front and back separation

Automatic code layering

Services and templates are configurable

The project structure is clear

Seamless switching between components and pages

ES6 / ES7 supported by default

Support hot updates for development

Asynchronous data acquisition at routing level

Support for static file services

Style preprocessing: Sass,Less,Stylus, etc.

Shortcoming

There are few surrounding resources.

Developing complex components can be troublesome

Custom configuration is troublesome.

Many data operations with side effects, this.items [key] = value

High traffic may put pressure on the server

DOM can only be queried and manipulated in certain hooks

Performance

Basic HelloWorld applications in Nuxt. It can process 190.05 requests per second. The average request time is 52.619 milliseconds. On this metric, Nuxt performs worst compared with the other two frameworks

Community is active

Number of contributors: 191

Pull Requests:1385

Nest

Nest is a progressive Node framework inspired by Angular. It is used to build efficient and extensible Node. The framework of server-side applications. Build using TypeScript to retain compatibility with pure JS, integrating OOP (object-oriented programming), FP (functional programming), and FRP (responsive programming). The service hood uses Express by default but also provides compatibility with a variety of other libraries, such as Fastify, allowing easy use of numerous third-party plug-ins available

Installation

Nest provides cli to install Nest and create a new project using this cli command

Npm I @ nestjs/cli nest new project-name

Or, use Git to install the TypeScript startup project:

Git clone https://github.com/nestjs/typescript-starter.git project cd project npm install npm run start

Hello World

After using this npm cli command to create a new project, several core files appear in the src directory, and main.ts is our entry

/ / create a service and listen to port 3000 import {NestFactory} from'@ nestjs/core'; import {ApplicationModule} from'. / app.module'; async function bootstrap () {const app = await NestFactory.create (ApplicationModule); await app.listen (3000);} bootstrap (); / / start npm start

Benefits

As a TypeScript-based Web framework, strict type definition can be carried out

Automatically generate Swagger documents

The folder structure in Nest is mainly based on Angular

Module-based framework, code reusable

The structure of the project is clear, you only need to focus on the business, not the architecture.

The TypeScript used means that the type features of JS are basically available.

Provide developers with less context switching. The transition from Angular code to Nest is relatively easy

Like Angular, Nest also has a good command-line tool

Shortcoming

Lack of documentation. The framework is well integrated with other frameworks, but there is little documentation.

There is no support from large enterprises behind it.

Overall, Nest has a smaller community than other frameworks

Performance

Basic HelloWorld applications in Nest. It can process 928.18 requests per second. The average time per request is 10.774 milliseconds. On this indicator, Nest performs well in the three frameworks we compared.

In the report provided by Lighthouse, Nest has very high performance, but accessibility and best practices,SEO have low scores.

Nest is not a popular framework, but it's worth a try!

Community participation

Number of contributors: 81

Pull Requests:469

Next, Nuxt, Nest comparison ends here. Preformance, Accessibility, Best Practices, SEO, choose the one you want most.

At this point, I believe you have a deeper understanding of "how to choose the right Node framework". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.