Introduction to the

In my last article, I explored the differences, advantages, and disadvantages of the three most popular Node frameworks :Express, Koa, and Hapi. In this article, we’ll look at the differences between three other very popular frameworks :Next, Nuxt, and Nest. All three of these frameworks are server-side rendering, and they are closely related to React, Vue, and Angular, the three most popular front-end frameworks, respectively

• Our comparison will be based on the following points:
  • GitHub Stars and NPM download
  • The installation
  • Basic Hello World application
  • benefits
  • disadvantages
  • performance
  • Community activity

Next

Next is a React framework that allows you to build SSR and static Web applications using React

• start

  • Making Stars: + 36000
  • NPM weekly downloads: + 300000

• The installation

  Next React React – DOM is essential

      npm install --save next react react-dom
  Copy the code

  Add the script to package.json as follows:

      {
        "scripts": {
          "dev": "next"."build": "next build"."start": "next start"}}Copy the code

  Next will read the JS files in the page directory and parse them into page routes

• Hello World

  Create directory file./pages/index.js in the project

      function Home() {
        return <div>Hello world!</div>;
      }
      
      export default Home;
      
      // npm run dev
      // Then visit http://localhost:3000
  Copy the code

• benefits

  • By default, each component is rendered by the server
  • Automatic code splitting, speed up page loading
  • Don’t load unnecessary code
  • Simple client-side routing (page-based)
  • Webpack-based development environment, support module hot update (HMR)
  • Getting the data is very simple
  • Support for any Node HTTP server implementation, such as Express
  • Support Babel and Webpack customization
  • Can be deployed on any platform that runs Node
  • Built-in page search engine optimization (SEO) processing

• disadvantages

  • Next is not a back-end service and should be run independently of background operations
  • If you just want to create a simple WEB application, it can be overwhelming
  • Data is reloaded on both the client and server
  • Without the separation of the front and back projects, migrating to Next is a pain 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 and SEO

  

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

  

  According to the Report of Lighthouse test, Preformance, Accessibility, Best Practices, and SEO were all higher than 70, which was lower than the other two frameworks, but it was a relatively good data. Nuxt of Best Practices was higher than the other two

• Community activity

  • Number of contributors: 678
  • Pull Requests: 3029
  • The community is quite active

Nuxt

Nuxt is a general application framework based on Vue, which presets the configuration required to develop server-side rendered applications using Vue, focusing on the UI rendering of applications

• star

  • Making stars: + 19000
  • NPM weekly downloads: + 100000

• The installation

  To get started quickly, 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 < project name >Copy the code

  It lets you make a few choices: on integrated server-side frameworks like Express, Koa, Hapi, Feathers, Micro, Adonis (WIP); Choose your favorite UI framework :Bootstrap, Vuetify, Bulma, Buefy, etc

• Hello World

  Nuxt automatically generates the route configuration of the VUe-Router module based on the Pages directory structure

  // ./pages/index.vue <template> <div> <h1>Hello world! </h1> <NLink to="/about">
            About Page
          </NLink>
        </div>
      </template>
  Copy the code

• benefits

  • Its primary scope is UI rendering, while abstracting the client/server distribution
  • Static rendering, front and back separation
  • Automatic code layering
  • Services and templates can be configured
  • Clear project structure
  • Components switch seamlessly to pages
  • ES6 / ES7 is supported by default
  • Support development hot updates
  • Asynchronous data acquisition at the routing level
  • Static file services are supported
  • Style: Sass, Less, Stylus, etc

• disadvantages

  • Less surrounding resources
  • Developing complex components can be cumbersome
  • The custom configuration is cumbersome
  • Many data operations with side effects this.items[key]=value
  • High traffic may strain the server
  • The DOM can only be queried and manipulated in some hooks

• performance

  Basic HelloWorld application in Nuxt. It can process 190.05 requests per second. The average request time was 52.619 ms. On this metric, Nuxt performs worst compared to the other two frameworks

  

  The scores of Preformance, Accessibility and SEO were the highest in the Lighthouse test report

  

• The community is active

  • Number of contributors: 191
  • Pull Requests：1,385

Nest

Nest is a progressive Node framework inspired by Angular. A framework for building efficient, scalable Node. server-side applications. Built in TypeScript, with pure JS compatibility, OOP (object-oriented programming),FP (functional programming),FRP (responsive programming) in one. The service hood uses Express by default but also provides compatibility with a variety of other libraries, such as Fastify, allowing easy use of the myriad third-party plug-ins available

• The installation

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

      npm i @nestjs/cli
      nest new project-name
  Copy the code

  Alternatively, use Git to install TypeScript to start the project:

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

• Hello World

  After creating a new project using the NPM CLI command, several core files appear in the SRC directory, with main.ts as our entry point

  // Create a service and listen on 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 startCopy the code

• benefits

  • As a typescript-based Web framework, you can apply strict type definitions
  • Automatically generate Swagger documents
  • The folder structure in Nest is based on Angular
  • Module-based framework with reusable code
  • The project structure is clear, focusing only on business rather than architecture
  • Using the latest version of TypeScript means that most of the JS type features are available
  • Fewer context switches for developers. The transition from Angular code to Nest is relatively easy
  • Like Angular, Nest has a nice command-line tool

• disadvantages

  • Lack of documentation. The framework has good integration with other frameworks, but very little documentation
  • There is no support from large companies
  • Overall, Nest’s community is small compared to other frameworks

• performance

  The basic HelloWorld application in Nest. It can process 928.18 requests per second. The average time per request was 10.774 milliseconds. On this metric, Nest performed best of the three frameworks we compared

  

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

  

  Nest isn’t the most popular framework but it’s worth a try!

• Community participation

  • Number of contributors: 81
  • Pull Requests: 469

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

The article source

Columbia beauty by Liz

Twitter: @lizparody23

Liz is a self-taught Software Engineer focused on JavaScript, and Developer Relations Manager at NodeSource. She organizes different community events such as JSConf Colombia, Pioneras Developers, Startup Weekend and has been a speaker at EmpireJS, MedellinJS, PionerasDev, and GDG. She loves sharing knowledge, promoting JavaScript and Node.js ecosystem and participating in key tech events and conferences to enhance her knowledge and network

The original connection

Please indicate the source of reprint