Compare Node JavaScript con JavaScript en el navegador trucos CSS

Para poder entender nodo sigue siendo una habilidad importante si eres un desarrollador front-end. Deno ha llegado como otra forma de ejecutar JavaScript fuera del navegador, pero el enorme ecosistema de herramientas y software creado con Node significa que no irá a ninguna parte en el corto plazo.

Si ha escrito básicamente JavaScript que se ejecuta en un navegador y desea comprender mejor el lado del servidor, muchos artículos le dirán que Node JavaScript es una excelente manera de escribir código del lado del servidor y beneficiarse de su experiencia con JavaScript.

Estoy de acuerdo, pero hay muchos desafíos al cambiar a Node.js, incluso si tiene experiencia en la creación de JavaScript en el lado del cliente. Este artículo asume que tiene Node instalado y lo ha usado para crear aplicaciones front-end, pero desea escribir sus propias API y herramientas usando Node.

Para obtener una explicación para principiantes sobre Node y npm, puede consultar a Jamie Corkhill Primeros pasos con el nodo en la revista Smashing.

JavaScript asíncrono

No necesitamos escribir mucho código asíncrono en el navegador. El uso más común del código asíncrono en el navegador es extraer datos de la API a través de fetch (o XMLHttpRequest si eres de la vieja escuela). Otros usos del código asíncrono pueden incluir el uso setInterval, setTimeouto respondiendo a eventos ingresados ​​por el usuario, pero podemos recorrer un largo camino al escribir una interfaz de usuario de JavaScript sin ser un genio asincrónico de JavaScript.

Si usa Node, casi lo hará siempre para escribir código asíncrono. Desde el principio, Node se creó para usar un bucle de eventos de un solo subproceso mediante devoluciones de llamadas asincrónicas. El equipo del nodo blog en 2011 sobre cómo "Node.js promueve un estilo de codificación asíncrono desde el principio". Entrevista de Ryan Dahl con Node.js en 2009habla de los beneficios de rendimiento de duplicar JavaScript asíncrono.

El estilo asíncrono es la primera parte de la razón por la cual Node está ganando popularidad frente a otros intentos de implementar JavaScript en el servidor, como. Servidores de aplicaciones Netscape o narvalSin embargo, verse obligado a escribir JavaScript asincrónico puede causar fricciones si no está preparado para ello.

Fijar un ejemplo

Digamos que estamos escribiendo una aplicación de prueba. Permitiremos a los usuarios crear una prueba de preguntas de opción múltiple para probar el conocimiento de sus amigos. Puede encontrar una versión más completa de lo que construiremos en este repositorio GitHubTambién puedes clonar toda la parte delantera y trasera para ver cómo encaja todo, o puede echar un vistazo a este CódigoSandbox (correr npm run start para encenderlo) y hacerse una idea de lo que hacemos a partir de ahí.

Las pruebas en nuestra aplicación consistirán en un montón de preguntas y cada una de estas preguntas tendrá varias respuestas para elegir, siendo solo una respuesta correcta.

Podemos almacenar estos datos en Base de datos SQLite.Nuestra base de datos contendrá:

• Tabla de preguntas con dos columnas:
  • identificador entero
  • título del texto
• Tabla de preguntas con tres columnas:
  • identificador entero
  • el texto principal
  • Referencia entera correspondiente al ID de la prueba a la que pertenece cada pregunta
• Tabla de respuestas con cuatro columnas:
  • identificador entero
  • el texto principal
  • si la respuesta es correcta o no
  • una referencia entera correspondiente al identificador de la pregunta a la que pertenece cada respuesta

SQLite no tiene un tipo de datos booleano, por lo que podemos ver si la respuesta es un número entero donde 0 es incorrecto y 1 es cierto.

Primero, necesitaremos inicializar npm e instalar paquete sqlite3 npm desde la línea de comando:

npm init -y
npm install sqlite3

Esto creará un package.json expediente. Vamos a editarlo y añadir:

"type":"module"

Al sitio JSON del más alto nivel. Esto nos permitirá usar la sintaxis moderna del módulo ES6. Ahora podemos crear un script de nodo para personalizar nuestras tablas. Llamemos a nuestro script migrate.js.

// migrate.js

import sqlite3 from "sqlite3"; 

let db = new sqlite3.Database("quiz.db");
    db.serialize(function () {
      // Setting up our tables:
      db.run("CREATE TABLE quiz (quizid INTEGER PRIMARY KEY, title TEXT)");
      db.run("CREATE TABLE question (questionid INTEGER PRIMARY KEY, body TEXT, questionquiz INTEGER, FOREIGN KEY(questionquiz) REFERENCES quiz(quizid))");
      db.run("CREATE TABLE answer (answerid INTEGER PRIMARY KEY, body TEXT, iscorrect INTEGER, answerquestion INTEGER, FOREIGN KEY(answerquestion) REFERENCES question(questionid))");
      // Create a quiz with an id of 0 and a title "my quiz" 
      db.run("INSERT INTO quiz VALUES(0,"my quiz")");
      // Create a question with an id of 0, a question body
      // and a link to the quiz using the id 0
      db.run("INSERT INTO question VALUES(0,"What is the capital of France?", 0)");
      // Create four answers with unique ids, answer bodies, an integer for whether
      // they're correct or not, and a link to the first question using the id 0
      db.run("INSERT INTO answer VALUES(0,"Madrid",0, 0)");
      db.run("INSERT INTO answer VALUES(1,"Paris",1, 0)");
      db.run("INSERT INTO answer VALUES(2,"London",0, 0)");
      db.run("INSERT INTO answer VALUES(3,"Amsterdam",0, 0)");
  });
db.close();

No explicaré este código en detalle, pero crea las tablas que necesitamos para almacenar nuestros datos. También creará una prueba, una pregunta y cuatro respuestas y lo almacenará todo en un archivo llamado quiz.dbDespués de guardar este archivo, podemos ejecutar nuestro script de línea de comando usando este comando:

node migrate.js

Si lo desea, puede abrir el archivo de la base de datos usando una herramienta como Navegador de base de datos para SQLite para comprobar de nuevo que los datos han sido creados.

Cambia la forma en que escribes JavaScript

Escribamos un código para consultar los datos que hemos creado.

Crea un nuevo archivo y llámalo index.js .Para acceder a nuestra base de datos podemos importar sqlite3crear uno nuevo sqlite3.Databasey pase la ruta del archivo de la base de datos como argumento. En este objeto de base de datos podemos llamar get función que pasa a un sql cadena para seleccionar nuestra prueba y devolución de llamada, que registrará el resultado:

// index.js
import sqlite3 from "sqlite3";

let db = new sqlite3.Database("quiz.db");

db.get(`SELECT * FROM quiz WHERE quizid  = 0`, (err, row) => {
  if (err) {
    console.error(err.message);
  }
  console.log(row);
  db.close();
});

La implementación de esto debe imprimir { quizid: 0, title: 'my quiz' } en la consola

Cómo no para usar la devolución de llamada

Ahora envolvamos este código en una función donde podamos pasar el identificador como argumento; queremos acceder a cada prueba a través de su identificador. Esta función devolverá el objeto de fila en la base de datos de la que estamos recuperando db.

Aquí es donde empezamos a tener problemas, no podemos simplemente devolver el objeto dentro de la llamada a la que vamos. db y vete. Esto no cambiará lo que devuelve nuestra función externa. En su lugar, podrías pensar que podemos crear una variable (llamémosla result) en la función externa y reasignar esta variable en la devolución de llamada. Así es como podemos probar esto:

// index.js
// Be warned! This code contains BUGS
import sqlite3 from "sqlite3";

function getQuiz(id) {
  let db = new sqlite3.Database("quiz.db");
  let result;
  db.get(`SELECT * FROM quiz WHERE quizid  = ?`, [id], (err, row) => {
    if (err) {
      return console.error(err.message);
    }
    db.close();
    result = row;
  });
  return result;
}
console.log(getQuiz(0));

Si ejecuta este código, se imprimirá el logotipo de la consola undefined!! ¿Qué sucedió?

Nos encontramos con una ruptura entre la forma en que esperamos que funcione JavaScript (de arriba a abajo) y cómo se ejecutan las devoluciones de llamada asincrónicas. getQuiz la función en el ejemplo anterior funciona de la siguiente manera:

1. declaramos result variables con let result;No hemos asignado nada a esta variable, por lo que su valor es undefined.
2. Llamamos db.get() función. Le pasamos la cadena SQL, el identificador y la devolución de llamada. ¡Pero nuestra devolución de llamada aún no se ejecutará! En su lugar, el paquete SQLite ejecuta una tarea en segundo plano para leer quiz.db La lectura del sistema de archivos lleva un tiempo relativamente largo, por lo que esta API permite que nuestro código de usuario pase a la siguiente línea mientras Node.js lee del disco en segundo plano.
3. Nuestra función devuelve resultComo nuestra devolución de llamada aún no se ha realizado, result todavía tiene un valor de undefined.
4. SQLite termina de leer del sistema de archivos e inicia la devolución de llamada que le pasamos, cerrando la base de datos y asignando el orden de result No importa asignar esta variable, ya que la función ya ha devuelto su resultado.

Transferir devoluciones de llamada

¿Cómo arreglar esto? Antes de 2015, la forma de solucionar esto sería utilizar devoluciones de llamada. En lugar de simplemente pasar la ID de prueba a nuestra función, pasamos la ID de prueba y devolución de llamada, que recibirá el objeto de la línea como argumento.

Esto es lo que parece:

// index.js
import sqlite3 from "sqlite3";
function getQuiz(id, callback) {
  let db = new sqlite3.Database("quiz.db");
  db.get(`SELECT * FROM quiz WHERE quizid  = ?`, [id], (err, row) => {
    if (err) {
       console.error(err.message);
    }
    else {
       callback(row);
    }
    db.close();
  });
}
getQuiz(0,(quiz)=>{
  console.log(quiz);
});

Eso es todo. Es una diferencia sutil que lo obliga a cambiar la apariencia de su código de usuario, pero significa que ahora nuestro console.log Huye después la solicitud está completa.

Infierno para una devolución de llamada

Pero, ¿y si tenemos que hacer varias llamadas asincrónicas consecutivas? Por ejemplo, qué sucede si tratamos de averiguar a qué prueba pertenece una respuesta y solo tenemos la identificación de la respuesta.

Primero, refactorizaré getQuiz a mas generales get función para que podamos pasar la tabla y la columna a la consulta, así como el identificador:

Desafortunadamente, no podemos usar parámetros SQL (más seguros) para parametrizar el nombre de la tabla, así que cambiaremos a usar una cadena de plantilla en su lugar. Deberá borrar esta cadena en el código de producción para evitar la inyección de SQL.

function get(params, callback) {
  // In production these strings should be scrubbed to prevent SQL injection
  const { table, column, value } = params;
  let db = new sqlite3.Database("quiz.db");
  db.get(`SELECT * FROM ${table} WHERE ${column} = ${value}`, (err, row) => {
    callback(err, row);
    db.close();
  });
}

Otro problema es que puede haber un error al leer de la base de datos. Nuestro código de usuario necesitará saber si cada consulta a la base de datos ha tenido algún error; en caso contrario no deberá seguir solicitando los datos. Usaremos la convención Node.js para enviar un objeto de error como el primer argumento de nuestra devolución de llamada. Entonces podemos verificar si hay un error antes de continuar.

Aceptemos nuestra respuesta con id en 2 y verifique a qué cuestionario pertenece. Así es como podemos hacer esto con las devoluciones de llamada:

// index.js
import sqlite3 from "sqlite3";

function get(params, callback) {
  // In production these strings should be scrubbed to prevent SQL injection
  const { table, column, value } = params;
  let db = new sqlite3.Database("quiz.db");
  db.get(`SELECT * FROM ${table} WHERE ${column} = ${value}`, (err, row) => {
    callback(err, row);
    db.close();
  });
}

get({ table: "answer", column: "answerid", value: 2 }, (err, answer) => {
  if (err) {
    console.log(err);
  } else {
    get(
      { table: "question", column: "questionid", value: answer.answerquestion },
      (err, question) => {
        if (err) {
          console.log(err);
        } else {
          get(
            { table: "quiz", column: "quizid", value: question.questionquiz },
            (err, quiz) => {
              if (err) {
                console.log(err);
              } else {
                // This is the quiz our answer belongs to
                console.log(quiz);
              }
            }
          );
        }
      }
    );
  }
});

¡Vaya, eso es mucha inserción! Cada vez que recibimos una respuesta de la base de datos, debemos agregar dos capas de entrada: una para verificar errores y otra para la próxima devolución de llamada. A medida que conectamos más y más llamadas asincrónicas, nuestro código se vuelve más y más profundo.

Podríamos evitar esto parcialmente usando funciones con nombre en lugar de funciones anónimas, lo que mantendrá el anidamiento más bajo pero hará que nuestro código sea menos conciso. También tendremos que pensar en nombres para todas estas funciones intermedias. Afortunadamente, las promesas llegaron a Node allá por 2015 para ayudar con llamadas en cadena asincrónicas como esta.

promesas

Envolviendo tareas asincrónicas con promesas le permite evitar gran parte de la inversión en el ejemplo anterior. En lugar de tener devoluciones de llamada anidadas cada vez más profundas, podemos pasar una devolución de llamada a Promise's then función.

Primero, cambiemos nuestro get para que envuelva la consulta de la base de datos con un Promise:

// index.js
import sqlite3 from "sqlite3";
function get(params) {
  // In production these strings should be scrubbed to prevent SQL injection
  const { table, column, value } = params;
  let db = new sqlite3.Database("quiz.db");

  return new Promise(function (resolve, reject) {
    db.get(`SELECT * FROM ${table} WHERE ${column} = ${value}`, (err, row) => {
      if (err) {
        return reject(err);
      }
      db.close();
      resolve(row);
    });
  });
}

Ahora nuestro código de búsqueda para el cual la prueba es parte de la respuesta puede verse así:

get({ table: "answer", column: "answerid", value: 2 })
  .then((answer) => {
    return get({
      table: "question",
      column: "questionid",
      value: answer.answerquestion,
    });
  })
  .then((question) => {
    return get({
      table: "quiz",
      column: "quizid",
      value: question.questionquiz,
    });
  })
  .then((quiz) => {
    console.log(quiz);
  })
  .catch((error) => {
    console.log(error);
  }
);

Esta es una forma mucho más agradable de trabajar con nuestro código asíncrono. Y ya no tenemos que procesar errores individualmente para cada llamada, sino que podemos usarlos catch función para manejar todos los errores que ocurren en nuestra cadena de funciones.

Todavía tenemos que escribir muchas devoluciones de llamada para que esto funcione. ¡Afortunadamente, hay una API más nueva para ayudar! cuando nodo 7.6.0 fue lanzado, actualizó su motor de JavaScript para V8 5.5 que incluye la capacidad de escribir ES2017 async/await funciones.

Asíncrono / Espera

S async/await podemos escribir nuestro código asíncrono de la misma manera que escribimos código síncrono. Sarah Drasner tiene una gran publicación que explica async/await.

Cuando tienes una función que devuelve un Promisepuedes usar await palabra clave antes de llamarlo, y esto evitará que su código se mueva a la siguiente línea Promise esta permitido. Porque ya hemos refactorizado get() Función de devolución de promesa, solo necesitamos cambiar nuestro código de usuario:

async function printQuizFromAnswer() {
  const answer = await get({ table: "answer", column: "answerid", value: 2 });
  const question = await get({
    table: "question",
    column: "questionid",
    value: answer.answerquestion,
  });
  const quiz = await get({
    table: "quiz",
    column: "quizid",
    value: question.questionquiz,
  });
  console.log(quiz);
}

printQuizFromAnswer();

Esto parece mucho más familiar para el código que estamos acostumbrados a leer. Solo este año, Node ha lanzado el nivel más alto awaitEsto significa que podemos hacer que este ejemplo sea aún más conciso eliminándolo printQuizFromAnswer() función que envuelve nuestro get() llamadas de función.

Ahora tenemos un código conciso que realizará cada una de estas tareas asincrónicas de forma secuencial. También podríamos activar otras funciones asíncronas (como leer archivos o responder a solicitudes HTTP) al mismo tiempo mientras esperamos que se ejecute este código. Esta es la ventaja de todo el estilo asíncrono.

Porque Node tiene muchas tareas asincrónicas, como leer de la web o acceder a una base de datos o un sistema de archivos. Es especialmente importante entender estos conceptos. También hay una pequeña curva de aprendizaje.

Utilice SQL en todo su potencial

¡Hay una manera aún mejor! En lugar de preocuparnos por estas llamadas asincrónicas para obtener todos los datos, podemos usar SQL para obtener todos los datos que necesitamos en una gran consulta. Podemos hacer esto con SQL JOIN consulta:

// index.js
import sqlite3 from "sqlite3";

function quizFromAnswer(answerid, callback) {
  let db = new sqlite3.Database("quiz.db");
  db.get(
    `SELECT *,a.body AS answerbody, ques.body AS questionbody FROM answer a 
    INNER JOIN question ques ON a.answerquestion=ques.questionid 
    INNER JOIN quiz quiz ON ques.questionquiz = quiz.quizid 
    WHERE a.answerid = ?;`,
    [answerid],
    (err, row) => {
      if (err) {
        console.log(err);
      }
      callback(err, row);
      db.close();
    }
  );
}
quizFromAnswer(2, (e, r) => {
  console.log(r);
});

Esto nos devolverá todos los datos que necesitamos para nuestra respuesta, pregunta y prueba en un sitio grande. También renombramos cada uno body columna de respuestas y preguntas a answerbody y questionbody Como puede ver, poner más lógica en la capa de la base de datos puede simplificar su JavaScript (así como posiblemente mejorar el rendimiento).

Si usa una base de datos relacional como SQLite, entonces tiene un lenguaje de aprendizaje completamente diferente, con muchas características diferentes que podrían ahorrar tiempo y esfuerzo y aumentar la productividad. Esto agrega más a la pila de cosas para aprender sobre la escritura de nudos.

API de nodo y convenciones

Hay muchas nuevas API de nodos para aprender al migrar desde el código del navegador a Node.js.

Todos los tipos enlaces de base de datos y/o leyendo el sistema de archivos usar API que no tenemos en el navegador (todavía). También tenemos nuevas API de configuración servidores HTTPPodemos comprobar el sistema operativo usando módulo del sistema operativoy podemos encriptar datos con Módulo criptográficoAdemás, para realizar una solicitud HTTP desde un nodo (algo que hacemos en el navegador todo el tiempo), no tenemos fetch o XMLHttpRequest Necesitamos importar en su lugar https móduloSin embargo, una solicitud de descarga reciente al repositorio node.js muestra esto la recuperación del nodo parece estar en camino!! Todavía hay muchas inconsistencias entre la API del navegador y Node. Este es uno de los problemas que Deno se ha propuesto solucionar.

También necesitamos saber acerca de las convenciones de Node, incluyendo package.json expediente. La mayoría de los desarrolladores front-end estarán bastante familiarizados con esto si han usado herramientas de construcción. Si desea publicar una biblioteca, la parte a la que quizás no esté acostumbrado es main propiedad c package.json Esta propiedad contiene una ruta que apuntará al punto de entrada de la biblioteca.

También existen convenciones como la primera devolución de llamada: donde la API de nodo aceptará una devolución de llamada que acepte un error como primer argumento y el resultado como segundo argumento. Puede ver esto anteriormente en el código de nuestra base de datos y debajo usando readFile función.

import fs from 'fs';

fs.readFile('myfile.txt', 'utf8' , (err, data) => {
  if (err) {
    console.error(err)
    return
  }
  console.log(data)
})

Diferentes tipos de módulos.

Solía ​​instruirte descuidadamente para que tiraras "type":"module" en tus package.json para que los códigos de muestra funcionen. Cuando se creó Node en 2009, los creadores necesitaban un sistema modular, pero no existía en la especificación de JavaScript. ellos inventaron Módulos comunes.js para resolver este problema. En 2015, se introdujo una especificación de módulo en JavaScript, lo que llevó a Node.js a tener un sistema modular diferente a los módulos nativos de JavaScript. Después de un gran esfuerzo del equipo de Node ahora podemos usar estos módulos nativos de JavaScript en Node.

Desafortunadamente, esto significa que muchas publicaciones de blog y recursos se escribirán con utilizando el antiguo sistema modular. ¡Esto también significa que muchos paquetes de npm no usarán sus propios módulos de JavaScript y, a veces, habrá bibliotecas que usen sus propios módulos de JavaScript de manera incompatible!

Otras preocupaciones

Hay algunas otras preocupaciones a tener en cuenta al escribir Node. Si usa un servidor Node y hay una excepción fatal, el servidor terminará y dejará de responder a cualquier solicitud. Esto significa que si comete un error, es lo suficientemente malo en un servidor Node, su aplicación está rota para todos. Esto es diferente de JavaScript del lado del cliente, donde el caso final que causa un error fatal lo encuentra un usuario a la vez, y ese usuario tiene la opción de actualizar la página.

La seguridad es algo de lo que debemos preocuparnos al frente con los scripts entre sitios y la falsificación de solicitudes entre sitios. Pero el servidor back-end tiene un área de superficie más amplia para ataques vulnerables, incluidos los ataques de fuerza bruta y la inyección SQL. Si almacena y accede a información de personas con Node, tiene la gran responsabilidad de mantener sus datos seguros.

Conclusión

Node es una excelente manera de usar sus habilidades de JavaScript para crear servidores y herramientas de línea de comandos. JavaScript es un lenguaje fácil de usar al que estamos acostumbrados a escribir. Y la naturaleza asíncrona de Node significa que puede dividir rápidamente las tareas simultáneas. Pero hay muchas cosas nuevas que aprender cuando empiezas. Estos son los recursos que me gustaría ver antes de saltar:

Y si planea almacenar datos en una base de datos SQL, siga leyendo Fundamentos de SQL.