12 marcos NodeJS para acelerar el desarrollo web y API

NodeJS ha estado en la industria por un tiempo. Debido a su naturaleza asíncrona y compatibilidad con el motor Chrome V8, se ha vuelto muy popular.

NodeJS ofrece una serie de marcos que vienen con diferentes bibliotecas, herramientas y plantillas para ayudar a los desarrolladores a superar los obstáculos al crear aplicaciones.

Nodejs es probablemente uno de los mejores marcos de JavaScript para desarrollar una aplicación full-stack. Una vez que haya decidido optar por Nodejs, el siguientes marcos y los complementos serán útiles para desarrollar servicios de back-end y API.

Express

Express es uno de los marcos de desarrollo de API y web más populares para NodeJS. Ha sido tan ampliamente utilizado que casi todos los proyectos de desarrollo web comienzan con la integración de Express JS.

Hay varias razones para elegir ExpressJS como primer complemento.

Gran paquete de funciones para respaldar todo lo que necesita en sus tareas de desarrollo
Facilidad de enrutamiento para enrutar sus solicitudes web a la función
Proporciona una plataforma organizada para codificar API
Compatible con la mayoría de las otras bibliotecas y complementos compatibles
Asegurado y mantenido constantemente para mantenerse al día con los estándares
Gran apoyo de la comunidad.

Además de estos beneficios, los desarrolladores del complemento también han creado un generador de proyectos fácil de usar. Este generador puede crear un proyecto de plantilla para que se levante más rápido.

Proyecto de instalación

Configuremos un proyecto para aprender los conceptos básicos del expreso. Asegúrese de haber instalado el nodo en su sistema. Puedes referirte a esta guía definitiva para el proceso de instalación del nodo.

Cree una carpeta de proyecto.
Ábrelo en la terminal.
Instale la express, body-parser, cookie-parser, cors y nodemon.
Agregue el archivo index.js al proyecto.
Agregue el script de inicio de la aplicación en el packages.json archivo con nodemon index.js mando.

Paquetes

expreso: este es el paquete central de nuestra aplicación que nos ayuda a crear API.
analizador de cuerpo: este es un middleware que analiza los datos entrantes de la API y los agrega a la req.body.
analizador de cookies: este es un middleware que analiza la Cookie de encabezado y la agrega a la req.cookie.
corazón: este es un middleware que se usa para habilitar el CORS.
nodemonio: esto se usa para ejecutar nuestra aplicación que reiniciará el servidor cada vez que cambie un archivo.

Estos son los paquetes básicos necesarios para la aplicación express para hacernos la vida más fácil. Es posible que necesite más paquetes según su proyecto. No se preocupe por eso ahora, agregar paquetes está a solo un comando de distancia.

Aplicación exprés

Veamos la aplicación básica con diferentes APIs

const express = require("express");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const cors = require("cors");

// initializing the express
const app = express();
const port = 3000;

// adding the middlewares to the app
app.use(bodyParser.json());
app.use(cookieParser());
app.use(cors());

// req: we will use this paramter to get API request details
// res: we will use
app.get("/", (req, res) => {
  return res.send("Hello, World!");
});

app.get("/json", (req, res) => {
  return res.json({ greetings: "Hello, World!" }); // you can also use res.send({})
});

app.get("/path-params/:name", (req, res) => {
  // all the path params will present in req.params object
  const { name } = req.params;
  return res.json({ greetings: `Hello, ${name}!` });
});

app.get("/query-params", (req, res) => {
  // all the query params will present in req.query object
  const { name } = req.query;
  return res.json({ greetings: `Hello, ${name ? name : "Geekflare"}!` });
});

app.post("/post", (req, res) => {
  // data will present in req.body
  const { name } = req.body;
  console.log(req.body);
  return res.json({ greetings: `Hello, ${name ? name : 'Geekflare'}!` });
});

app.listen(port, () => {
  console.log(`App listening on port ${port}`);
});

Inicie la aplicación con npm start y pruebe todas las API que hemos escrito. Leer el documentación para aprender más sobre cada concepto.

Sails

Paño es un marco de arquitectura MVC completo. Utiliza ExpressJS y SocketIO en su núcleo. Sails.js se hizo popular por su arquitectura de nivel empresarial que permitía una integración más rápida con la base de datos utilizando objetos modelo.

Algunos de los beneficios son:

Sails.JS viene con un proyecto para generar inmediatamente una plantilla de proyecto
La estructura de carpetas en Sails.JS está muy bien organizada
El desarrollo de modelos de objetos y su exposición mediante frontend es rápido
Permite una fácil integración de middleware para autorización, autenticación y preprocesamiento
Viene con soporte integrado para AWS S3 y GridFS

Configuración del proyecto

Para crear un sailsjs proyecto, necesitamos un paquete npm llamado sail. Instalémoslo globalmente con el siguiente comando.

npm install sails -g

Vaya al directorio donde desea crear su proyecto. Ahora, ejecute el siguiente comando para crear sailsjs aplicación.

sails new basic-app

Aparecerá un mensaje para seleccionar la plantilla. Selecciona el Vacío opción. Espere hasta que termine de crear el proyecto.

Abra el proyecto en su editor de código favorito. ejecutar el sails lift comando para ejecutar la aplicación. Abierto http://localhost:1337/ URL en su navegador para ver la aplicación.

Si ve la aplicación en el editor de código, encontrará muchas carpetas y archivos. Puede encontrar una explicación detallada de cada carpeta y archivo, en Documentación de velas página. En este tutorial, veremos uno api/controllers y config/routes.js.

Aplicación SailsJS

Veamos cómo crear API en la aplicación sailsjs. Consulte los pasos a continuación para crear una API en la aplicación sailsjs.

Agregue el punto final de la API al config/routes.js archivo.
Cree una acción para el punto final de la API con el comando sails generate action sample --no-actions2.
Agregue su código API en el archivo de acción que se genera en el paso 2.

Rutas y salidas

La routes.js El archivo tendrá un aspecto similar al siguiente código después de agregar los puntos finales de la API.

module.exports.routes = {
  "GET /": { action: "home" },
  "GET /json": { action: "json" },
  "GET /path-params/:name": { action: "path-params" },
  "GET /query-params": { action: "query-params" },
  "POST /post": { action: "post" },
};

Cada extremo de la API apunta a una acción. Tenemos que generar esos archivos de acción con el comando mencionado en la sección anterior. Generemos todos los archivos de acción para los puntos finales anteriores.

Acciones

Hemos añadido 5 puntos finales. Verifiquemos el código respectivo para cada punto final.

casa.js

module.exports = async function home(req, res) {
  return res.send("Hello, World!");
};

json.js

module.exports = async function json(req, res) {
  return res.json({ greetings: "Hello, World!" });
};

ruta-params.js

module.exports = async function pathParams(req, res) {
  const { name } = req.params;
  return res.json({ greetings: `Hello, ${name}!` });
};

publicar.js

module.exports = async function post(req, res) {
  const { name } = req.body;
  console.log(req.body);
  return res.json({ greetings: `Hello, ${name ? name : 'Geekflare'}!` });
};

consulta-params.js

module.exports = async function queryParams(req, res) {
  const { name } = req.query;
  return res.json({ greetins: `Hello, ${name ? name : "Geekflare"}!` });
};

Hay otra forma de escribir acciones. Lea la documentación para obtener más información sobre el marco.

Hapi

Hapi framework se construyó inicialmente para superar los inconvenientes del framework ExpressJS. Walmart detectó estos inconvenientes mientras se preparaban para un evento de tráfico pesado.

Hapi.JS es un marco robusto para construir servicios y API. Es conocido por su estabilidad y confiabilidad.

Configuración del proyecto

Vamos a crear un proyecto para tocar los conceptos básicos de Hapi.JS. Podemos configurar el proyecto Hapi de manera similar al proyecto normal de NodeJS. Ejecute los siguientes comandos para configurar el proyecto.

cd your_project_floder_path
npm init -y                    ## to init node project
npm install @hapi/hapi         ## installing core package to work with Hapi.JS
npm install nodemon            ## to run our application

Crear index.js archivo en el proyecto. Agregue el script de inicio en el package.json archivo con nodemon index.js mando.

Aplicación HapiJS

Consulte las API básicas en Hapi a continuación.

const hapi = require("@hapi/hapi");

const app = async () => {
  // initializing the hapi server
  const server = hapi.server({
    port: 3000,
    host: "localhost",
  });

  server.route({
    method: "GET",
    path: "/",
    handler: (request, h) => {
      return "Hello, World!";
    },
  });

  server.route({
    method: "GET",
    path: "/json",
    handler: (request, h) => {
      return { greetings: "Hello, World!" };
    },
  });

  server.route({
    method: "GET",
    path: "/path-params/{name}",
    handler: (request, h) => {
      const name = request.params.name;
      return { greetings: `Hello, ${name}!` };
    },
  });

  server.route({
    method: "GET",
    path: "/query-params",
    handler: (request, h) => {
      const name = request.query.name;
      return { greetings: `Hello, ${name ? name : "Geekflare"}!` };
    },
  });

  server.route({
    method: "POST",
    path: "/post",
    handler: (request, h) => {
      const data = request.payload;
      console.log(data);
      return { greetings: `Hello, ${data.name ? data.name : "Geekflare"}!` };
    },
  });

  // starting the server
  await server.start();
  console.log(`App is running on ${server.info.uri}`);
};

app();

Hemos agregado diferentes API para aprender los conceptos básicos de Hapi. Puede mover todas las rutas a un archivo separado para limpiarlas. Ve a la documentación para aprender más cosas sobre Hapi.

Total

Total es una plataforma del lado del servidor que proporciona una plataforma lista para usar para crear aplicaciones en tiempo real, chatbot, IoT, comercio electrónico y REST. También permite a los usuarios premium publicar sus aplicaciones en la plataforma para que otros las usen.

Los beneficios de utilizar Total.JS como base para su desarrollo son:

Habilidades de creación rápida de prototipos
Viene muchos componentes prediseñados que permiten un desarrollo más rápido
Contiene una biblioteca de aplicaciones que se pueden recuperar e integrar fácilmente en su aplicación
Marco basado en módulos que permite simplificar la distribución del trabajo en un gran proyecto
Chat de la comunidad
Mantenido constantemente una tienda de aplicaciones que están listas para usar

LoopBack

Bucle Atrás es un marco de desarrollo de API que viene integrado con el explorador de API. El explorador de API se puede conectar fácilmente a las aplicaciones del lado del cliente mediante los SDK de LoopbackJS disponibles. Los SDK están disponibles para aplicaciones de Android, AngularJS, Angular 2+ y iOS.

LoopBack cuenta con la confianza de Ve papi, Symantec, Bank of America y muchos más. Encontrará muchos ejemplos en su sitio para crear una API de backend, una API REST segura, datos persistentes, etc. Y sí, tiene un explorador de API integrado.

Configuración del proyecto

Configuremos el proyecto loopback y veamos cómo crear API básicas con él.

Ejecute el siguiente comando para instalar la CLI de loopback.

npm install -g @loopback/cli

Ejecute el siguiente comando para iniciar la configuración del proyecto.

lb4 app

Responde todas las preguntas en la terminal. Puede responder las preguntas según sus preferencias.

Abra la aplicación en su editor de código favorito y ejecútela con npm Comando de inicio. Ir http://localhost/ para comprobar la aplicación de bucle invertido.

Aplicación LoopBack

Si miras dentro de la src carpeta, habrá una controllers. Este es el lugar donde agregaremos controladores que contendrán nuestras API.

Tenemos que usar el siguiente comando para crear controladores en loopback.

lb4 controller

Consulte las diferentes API a continuación. Hemos agregado varias API al controlador.

import {get, param, post, requestBody} from '@loopback/rest';

interface Response {
  greetings: string;
}

export class GeekflareController {
  @get('/hello')
  home(): string {
    return 'Hello, World!';
  }

  @get('/json')
  json(): Response {
    return {greetings: 'Hello, World!'};
  }

  // accessing path param using @param decorator
  @get('/path-params/{name}')
  pathParams(@param.path.string('name') name: string): Response {
    return {greetings: `Hello, ${name}!`};
  }

  @get('/query-params')
  queryParams(@param.query.string('name') name: string): Response {
    return {greetings: `Hello, ${name ? name : "Geekflare"}!`};
  }

  // accessing path param using @requestBody decorator
  @post('/post')
  postMethod(@requestBody() data: any): Response {
    console.log(data);
    const {name} = data;
    return {greetings: `Hello, ${name ? name : 'Geekflare'}!`};
  }
}

Hemos visto cómo crear API y acceder a diferentes elementos necesarios para los conceptos básicos de las API REST. Hay mucho más que esto en el marco LoopBack. Sus documentación es el lugar adecuado para sumergirse profundamente en el marco.

Meteor

meteoro es una solución completa de desarrollo web y creación de API con un diseño increíble en su núcleo. Meteor es un marco que se utiliza para la creación rápida de aplicaciones. La arquitectura Meteor le permite ejecutar código tanto en el frontend como en el backend sin tener que volver a escribir el código.

Esto mejora la velocidad de desarrollo en gran medida. Los beneficios importantes de usar Meteor son:

Marco de desarrollo de aplicaciones híbridas
Con una sola base de código, puede crear una aplicación de escritorio, una aplicación web y una aplicación móvil
Viene con una interfaz estrechamente acoplada que ayuda a reducir la huella de su código
Altamente extensible con una variedad de complementos
Admite varios marcos de plantillas de frontend
Admite la inserción de código caliente que permite erradicar la necesidad de actualizar las aplicaciones móviles

Restify

Cree un servicio web RESTfull semánticamente correcto y listo para producción con Restificar.

Utiliza solo módulos Express JS relevantes que hacen que la base de código sea más liviana en comparación con otros marcos. Con la confianza de Netflix, Pinterest, Joyent, etc., no te equivocarás al elegirlos.

Configuración del proyecto

Configuremos el proyecto restify y veamos cómo escribir API básicas. Ejecute los siguientes comandos para crear un nuevo proyecto restify.

Antes de continuar, asegúrese de tener un nodo con la versión 11. Restify no es compatible con las últimas versiones de nodo.

cd your_project_folder
npm init -y             ## initializing node project
npm i restify           ## installing core package
npm i restify-plugins   ## to add some parsing middlewares to our application
npm i nodemon           ## to run our application

Después de instalar todos los paquetes, agregue el script de inicio en el package.json archivo con nodemon index.js dominio. No olvides agregar index.js archivo al proyecto.

Aplicación Restify

Vamos a crear algunas API para aprender los conceptos básicos.

const restify = require("restify");
const restifyPlugins = require("restify-plugins");

function home(req, res, next) {
  res.send("Hello, World!");
  next();
}

function json(req, res, next) {
  res.json({ greetings: "Hello, World!" }); // you can also use req.send(JSONData)
  next();
}

function pathParams(req, res, next) {
  const { name } = req.params;
  res.json({ greetings: `Hello, ${name}!` });
  next();
}

function queryParams(req, res, next) {
  const { name } = req.query;
  res.json({ greetings: `Hello, ${name ? name : "Geekflare"}!` });
  next();
}

function post(req, res, next) {
  const data = req.body;
  console.log(data);
  res.json({ greetings: `Hello, ${data.name ? data.name : "Geekflare"}!` });
  next();
}

// creating restify server
const server = restify.createServer();

// adding parsing middlewares
server.use(restifyPlugins.jsonBodyParser({ mapParams: true }));
server.use(restifyPlugins.queryParser({ mapParams: true }));

// adding routes
server.get("/", home);
server.get("/json", json);
server.get("/path-params/:name", pathParams);
server.get("/query-params", queryParams);
server.post("/post", post);

// starting the app
server.listen(3000, function () {
  console.log(`App is running at ${server.url}`);
});

Echa un vistazo a la restauración documentación para obtener más información sobre el marco.

Koa

Koa principalmente aprovecha los generadores de código para permitir a los desarrolladores acelerar su desarrollo. Viene con varios middlewares y complementos para ayudarlo a administrar sesiones, solicitudes, cookies y transacciones de datos.

El mismo equipo detrás de Express diseña koa. Funciona con Nodejs 7.6+ y tiene muchos ejemplos para que lo empieces.

Configuración del proyecto

Configuremos el proyecto koa con los siguientes comandos

cd your_project_folder
npm init -y            ## initializing the node project
npm i koa              ## core koa package
npm i koa-route        ## route package for handling API routes
npm i koa-bodyparser   ## parser package to parse the request body
npm i nodemon          ## to run

Aplicación Koa

La creación de API con koa es sencilla, similar a otros marcos que hemos visto anteriormente. Veamos el código.

const koa = require("koa");
const route = require("koa-route");
const bodyParser = require("koa-bodyparser");

const app = new koa();

const home = async (ctx) => {
  ctx.body = "Hello, World!";
};

const json = async (ctx) => {
  ctx.body = { greetings: "Hello, World!" };
};

// all path parameters will will pased to the function with the same name that's provided in the route
const pathParams = async (ctx, name) => {
  ctx.body = { greetings: `Hello, ${name}!` };
};

const queryParams = async (ctx) => {
  const name = ctx.query.name;
  ctx.body = { greetings: `Hello, ${name ? name : "Geekflare"}!` };
};

const post = async (ctx) => {
  const {
    body: { name },
  } = ctx.request;
  ctx.body = { greetings: `Hello, ${name ? name : "Geekflare"}!` };
};

app.use(bodyParser());

app.use(route.get("/", home));
app.use(route.get("/json", json));
app.use(route.get("/path-params/:name", pathParams));
app.use(route.get("/query-params", queryParams));
app.use(route.post("/post", post));

app.listen(3000);

Puedes empezar a explorar la documentos de koa ahora.

Nest

Nest es un marco para crear aplicaciones de nodo del lado del servidor. Utiliza express bajo el capó para el servidor HTTP. Y también podemos configurarlo con Fastify.

Es compatible con TypeScript y está construido utilizando conceptos de programación orientada a objetos, programación funcional y programación reactiva funcional. Creemos un proyecto en él y veamos cómo escribir API básicas.

Configuración del proyecto

Ejecute los siguientes comandos para crear el proyecto.

npm i -g @nestjs/cli                ## installing nest CLI globally
nest new your_project_name          ## creating a project with nest CLI

Aplicación Nest

En la carpeta src de la aplicación, hay algunos archivos. los app.controller.ts es el archivo donde incluiremos las API ahora. Recuerda que solo vamos a ver cómo escribir aplicaciones básicas.

Echemos un vistazo a diferentes API básicas que mostrarán diferentes conceptos de API.

import { Body, Controller, Get, Param, Post, Query } from '@nestjs/common';
import { AppService } from './app.service';

export interface IResponse {
  greetings: string;
}

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('/')
  home(): string {
    return 'Hello, World!';
  }

  @Get('/json')
  json(): IResponse {
    return { greetings: 'Hello, World!' };
  }

  @Get('/path-params/:name')
  pathParams(@Param() params): IResponse {
    const { name } = params;
    return { greetings: `Hello, ${name}!` };
  }

  @Get('/query-params')
  queryParams(@Query() params): IResponse {
    const { name } = params;
    return { greetings: `Hello, ${name ? name : 'Geekflare'}!` };
  }

  @Post('/post')
  post(@Body() body): IResponse {
    const { name } = body;
    return { greetings: `Hello, ${name ? name : 'Geekflare'}!` };
  }
}

Ejecute la aplicación y verifique todas las API. También puede escribir estas API en la capa de servicio y acceder a ellas en el controlador.

Visite la documentos de nido para obtener más información y comprender el marco.

Fastify

Fastificar es otro marco en la familia de marcos NodeJS. Como sugiere el nombre, afirma que es uno de los marcos NodeJS más rápidos que existen. Veamos algo del núcleo del marco.

Rápido y de alto rendimiento. Afirma que puede procesar hasta 30 XNUMX solicitudes por segundo según la complejidad del código.
Compatible con mecanografiado.
Desarrollador amigable con API expresiva para un desarrollo rápido.
Viene con un registrador incorporado. Utiliza Pino (registrador de NodeJS).

Configuración del proyecto

Configuremos el proyecto fastify para aprender los conceptos básicos del desarrollo de API. Ejecutar los siguientes comandos configurará un nuevo proyecto fastify para usted.

npm install --global fastify-cli   ## installing fastify CLI
fastify generate project_name      ## creating project with fastify CLI

Aplicación Fastify

Fasitfy CLI generó un proyecto para nosotros. Actualmente estamos preocupados por solo escribir API. Para escribir nuevas API, abra routes/root.js expediente. Agregue las siguientes API en el archivo.

module.exports = async function (fastify, opts) {
  fastify.get("/", async function (request, reply) {
    return "Hello, World!";
  });

  fastify.get("/json", async function (request, reply) {
    return { greetings: "Hello, World!" };
  });

  fastify.get("/path-params/:name", async function (request, reply) {
    const { name } = request.params;
    return { greetings: `Hello, ${name}!` };
  });

  fastify.get("/query-params", async function (request, reply) {
    const { name } = request.query;
    return { greetings: `Hello, ${name ? name : "Geekflare"}!` };
  });

  fastify.post("/post", async function (request, reply) {
    const { name } = request.body;
    return { greetings: `Hello, ${name ? name : "Geekflare"}!` };
  });
};

Inicie la aplicación y pruebe todas las API. Estos son los conceptos básicos para escribir las API. Ve a la Fastify docs para obtener más información sobre el marco.

tinyhttp

diminutohttp es un marco JS ligero y similar a express. Viene con un registrador incorporado, JWT y middleware CORS. Configuremos un pequeño proyecto y aprendamos los conceptos básicos.

Configuración del proyecto

Ejecute los siguientes comandos para configurar el proyecto tinyhttp.

cd you_project_folder
npm init -y
npm i @tinyhttp/app     ## core tinyhttp package
npm i milliparsec       ## to parse the request data and add it to request object to body key
npm i nodemon           ## to run our application which will restart automatically whenever files changes

Tenemos que hacer una cosa más. Agregar type clave con valor module En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”. package.json expediente. Lo estamos agregando porque tinyhttp no es compatible require, tenemos que usar import declaraciones en su lugar.

Aplicación tinyhttp

La API de tinyhttp se ve casi similar a la aplicación express. Verifiquemos las diferentes API en él.

import { App } from "@tinyhttp/app";
import { json } from "milliparsec";

const port = 3000;
const app = new App();

app.use(json());

// req: we will use this paramter to get API request details
// res: we will use
app.get("/", (req, res) => {
  res.send("Hello, World!");
});

app.get("/json", (req, res) => {
  res.json({ greetings: "Hello, World!" }); // you can also use res.send({})
});

app.get("/path-params/:name", (req, res) => {
  // all the path params will present in req.params object
  const { name } = req.params;
  res.json({ greetings: `Hello, ${name}!` });
});

app.get("/query-params", (req, res) => {
  // all the query params will present in req.query object
  const { name } = req.query;
  res.json({ greetings: `Hello, ${name ? name : "Geekflare"}!` });
});

app.post("/post", (req, res) => {
  // data will present in req.body
  const { name } = req.body;
  res.json({ greetings: `Hello, ${name ? name : "Geekflare"}!` });
});

app.listen(port, () => {
  console.log(`App running on port ${port}`);
});

Puede obtener más información sobre el marco en su pequeños documentos.

SocketIO

SocketIO es un marco web-socket que está disponible para múltiples lenguajes de programación.

En NodeJS, SocketIO permite la creación de aplicaciones de socket web como bots de chat, marcadores de puntaje, API de tablero y otros. SocketIO tiene beneficios significativos sobre la biblioteca de sockets web NodeJS convencional.

Soporte para enrutamiento de URL personalizado para sockets web
Identificadores generados automáticamente para cada socket
Fácil gestión de salas de conexión para transmitir datos
Integración más sencilla con Express JS
Admite la agrupación en clústeres con Redis
Soporte para autenticación de socket con un complemento adicional: socketio-auth
Manejo basado en el protocolo HTTP de respaldo incorporado para un servidor que no admite HTTP 1.1

Conclusión

La gente está usando NodeJS ampliamente en sus proyectos. Como resultado, tenemos varios marcos para elegir. Si ve los marcos, la mayoría de ellos tienen API similares. Entonces, si tiene un buen conocimiento de NodeJS y cualquier marco, eso es más que suficiente para comenzar con cualquier otro marco de NodeJS.

Desarrollar aplicaciones no es fácil debido a estos marcos. Haz buen uso de los frameworks que te gustan y sigue explorando otros.

También puede explorar algunos Paquetes de Node.js para depurar, escribir y administrar su código de manera eficiente.

Codificación feliz 🙂