Creación de una librería JavaScript

Hoy comienza una serie de entradas en las que se explicará el proceso de creación de una librería JavaScript desde cero. Para lo que se utilizará el entorno de ejecución Node.js.

JavaScript es uno de los lenguajes más populares en la actualidad, debido a que se encuentra disponible en todos los navegadores. Por lo que no es de extrañar que existan múltiples librerías de Machine Learning JavaScript con las que es posible entrenar y ejecutar modelos. Este es el motivo de esta serie, explicar cómo crear una librería en JavaScript para poder distribuir los modelos para ser ejecutados en navegadores o entornos Node.

La serie consta de ocho entregas, publicándose una cada viernes a partir de hoy. En las entregas se verá cómo estructurar un proyecto en node, la creación de pruebas unitarias, medir el grado de cobertura de estas, auditar el código, la ejecución de scripts npm y la distribución del proyecto. Para seguir la serie solamente es necesario disponer de conocimientos básicos de JavaScript.

En esta primera entrega se verán los pasos básicos para la instalación de Node.js y la creación de un proyecto. Además de escribir las primeras funciones y ejecutar estas en el navegador.

Instalación de Node.js

Node.js es un entorno de ejecución JavaScript que funciona sin la necesidad de tener un navegador web. Basado en el motor V8 desarrollado por Google que es el utilizado en diferentes navegadores como es el caso de Chrome. La instalación de Node.js es tan sencilla como ir a la página web del proyecto, descargar el instalador para nuestro sistema operativo y ejecutar este.

En Analytics Lane

Nuevo test de normalidad interactivo en el laboratorio de Analytics Lane

Una vez finalizada la instalación de Node.js se puede abrir una terminal y comprobar la versión instalada. Esto se hace escribiendo en la terminal el comando node --version. En el caso de que todo esté correcto debería aparecer el número de versión. También se puede comprobar la versión de npm, el gestor de paquetes que utiliza Node.js, escribiendo el comando npm --version. Al igual que el caso anterior debería aparecer el número de versión.

Inicialización del proyecto

Tras la instalación de Node.js se puede crear una carpeta en la que se albergará el proyecto. En este tutorial llamaremos a la carpeta jslane. Desde la terminal y dentro de esta carpeta escribiremos el comando npm init. Es decir, en la terminal es necesario escribir los siguientes comandos:

$ mkdir jslane
$ cd jslane
$ npm init

Esto inicializará un asistente en el que se preguntará por los datos del proyecto. En esta ocasión simplemente se puede usar las respuestas por defecto del asistente. Una vez finalizado se creará un archivo JSON con los datos indicados al asistente.

{
  "name": "jslane",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Primera función de la librería

Ahora que se ha creado el proyecto se puede comenzar a escribir el código JavaScript de la primera función. Un ejemplo típico es una función que escriba “Hello, World!” en la terminal del navegador.

El punto de inicio del proyecto, si no se ha seleccionado otra opción en el asistente, es el archivo index.js. Ahora con un editor de texto se creará este archivo con el siguiente código.

const hello = function () {
    console.log('Hello, World!');
};

module.exports = {hello: hello};

En este archivo se puede ver una función hello que imprime por la consola una cadena de texto. Posteriormente esta función de exporta para que pueda ser utilizada fuera del módulo. Para comprobar que el código funciona se puede creará un nuevo archivo run.js con las siguientes líneas.

const jslane = require('./index');

jslane.hello();

En la primera línea se importa la librería mientras que en la segunda se ejecuta la función creada anteriormente. Para comprobar su funcionamiento solamente es necesario escribir en la terminal node run.

$ node run
Hello, World!

Distribuir el trabajo

Para crear una librería que se pueda utilizar posteriormente en el navegador se va a utilizar Browserify. Browserify es una herramienta de código abierto de JavaScript que permite compilar los módulos Node.js en una archivo que posteriormente se puede importar en otro proyecto. La instalación se realiza desde la terminal con el comando:

sudo npm install browserify -g

La opción -g indica que el paquete se instalar de forma global en sistema, por lo que en sistemas UNIX es necesario utilizar sudo. En sistemas Windows el comando sudo se ha de omitir. Al instalarlo de forma global no es necesario volver a instalar la dependencia para cada proyecto. Ahora simplemente se puede compilar la librería escribiendo en la terminal

browserify index.js --standalone jslane -o ./dist/jslane.js

Este comando produce un archivo jslane.js en la carpeta dist del proyecto. Este archivo es el que después se puede utilizar en un navegador.

Como este comando se utiliza continuamente para compilar la librería es mejor guardarlo en el listado de scripts del archivo package.json. Agregando una nueva propiedad build a scripts con el comando anterior. Una vez hecho esto, se puede compilar con el comando

npm run build

Excluir dependencias del archivo final

Puede ser que en el proyecto se utilizan librerías globales que no han de ser incluidas en el archivo generado. Ya que estas se importarán por separado, como puede ser jquery. Browserify por defecto incluirá el código de estas, por lo que es necesario indicar que las ignore explícitamente. El modificador para ellos es --ignore seguido del nombre de nombre de la librería. Por ejemplo, en el caso de utilizar jquery es necesario escribir el siguiente comando

browserify index.js --standalone jslane --ignore workerpool -o ./dist/jslane.js

Ejecutar en el navegador

Una vez creado el archivo compilado se puede ejecutar el código en un navegador. Esto se puede comprobar utilizando el siguiente archivo HTLM.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src='./dist/jslane.js'></script>
	</head>
	<body>
        <script language="javascript">
            jslane.hello();
        </script>
	</body>
</html>

En un navegador se puede comprobar cómo este funciona perfectamente.

Conclusiones

En esta primera entrada se han visto los primeros pasos del proceso de creación de una librería JavaScript. En futuras entradas se verá cómo dividir el código diferentes módulos para facilitar el desarrollo.

Gracias por el tiempo dedicado a la lectura de esta entrada. En caso de estar interesado en seguir esta serie, además del resto de publicaciones, podéis suscribiros a la lista de correo, al canal de Telegram o seguir a Analytics Lane en las redes sociales.

Todo el código utilizado en esta serie se puede descargar en el siguiente repositorio.

Imágenes: Pixabay (skylarvision)