TypeScript / Node y Express

Bienvenidos sean a este post, hoy veremos otro framework de JS.

Al igual que los framework que vimos en posts anteriores estos fueron apareciendo gracias al crecimiento de javascript en los distintos navegadores y con sus respectivas mejoras. Pero el que marco un antes y despues fue el engine V8 que portaba google chrome. Cuando este paso a open source en 2008, Ryan Dahl escribio un engine que podia ser usado como un servidor web y correr desde la linea de comandos. Este se llama Node.js o simplemente como node y un año despues se lanzo el framework Express para este engine. El cual aporto una serie de herramientas y caracteristicas para facilitar la creacion de las aplicaciones del lado del servidor usando javascript.

En una forma reducida diremos que node usa una ejecucion de single-thread, thread simple, de codigo de javascript pero a su vez es capaz de manejar miles de solicitudes al servidor web de servidores que son relativamente chicos y baratos. Otra ventaja es el uso de los callback de javascript, lo cual permite a los programadores no tener que estar pensando como manejar a los threads o los efectos colaterales que podemos tener por el uso del multi-thread, aunque no esta excento bajo ciertas circunstancias pero si es muchisimo mas bajo con respecto a otros lenguajes o frameworks. Siendo esta una de las principales razones por lo que es muy popular y utilizado por grandes corporaciones.

Para poder utilizar a typescript siempre se necesito a node como engine, no a Express, pero en caso de no tener a node y por ende a typescript, les recomiendo visiten el siguiente post:

Aqui explico como instalar todas las herrramientas necesarias para trabajar. Una vez que tengan todo instalado vamos a crear un nuevo directorio con el nombre de ejemplo, ingresaremos a este y ejecutaremos el siguiente comando:

$ npm init

Esto dara creacion a la aplicacion de node, nos hara una serie de preguntas donde podemos agregar informacion de la aplicacion o simplemente presionar Enter en cada una para que almacene los valores preddeterminados. Les paso los valores que yo pase como ejemplo:

package name: (ejemplo)
version: (1.0.0)
description: es una descripcion
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /home/tinchicus/lenguajes/ts/04/ejemplo/package.json:

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

Al final pregunta si deseamos finalizar, escriban yes o directamente presionen Enter y procedera a crear el archivo package.json donde almacena toda la informacion base de la aplicacion y los valores cargados anteriormente. Nuestro siguiente paso sera ejecutar el siguiente comando:

$ npm install express

Este instalara todos los modulos necesarios para usar al framework Express. Una vez finalizado nos creara un nuevo archivo json y el directorio node_modules donde se almacenaran los nuevos modulos que instalemos. El archivo json nuevo es solo una copia de seguridad para saber cuales son los modulos instalados. Procedamos a ejecutar el siguiente comando:

$ npm install @types/express --save-dev

Este instalara los archivos de declaracion de express para que podamos usarlo mediante typescript. Nuestro ultimo comando antes de comenzar sera el siguiente:

$ tsc --init

Este creara al archivo tsconfig.json para manipular las configuraciones de typescript. Con todo esto realizado nuestro siguiente paso sera crear un archivo con el nombre de app_minima.ts y le agregaremos el siguiente codigo:

app_minima.ts

import express from 'express';
const app = express();
app.get('/',
        (
                req: express.Request,
                res: express.Response
        ) => {
                console.log(`URL solicitada: ${req.url}`);
                res.send("<h1>Hola, co' te va?</h1>");
        });
app.listen(3000, () => {
                console.log('Escuchando en el puerto 3000');
        });

Primero importaremos al modulo express para poder utilizarlo, lo siguiente es asignarlo a esa constante. De esta constante usaremos dos metodos, get y listen. El primero sera para manejar dos objetos como son la solicitud (Request) y la respuesta (Response). Donde la solicitud sera el valor que recibiremos, para este ejemplo es la barra (/). Aqui usaremos la flecha de funcion para mostrar en consola el mensaje de la url solicitada y mediante el otro objeto y el metodo send enviaremos ese mensaje al navegador. En cambio con el metodo listen estaremos escuchando todas las solicitudes o conexiones al puerto que pasamos como argumento, en este caso 3000, y mostraremos un mensaje en la consola. Este es nuestro codigo, lo primero que debemos hacer es compilarlo mediante el siguiente comando:

$ tsc

Y una vez compilado lo pondremos en accion mediante el siguiente comando:

$ node app_minima

Si todo sale bien, nos mostrara el mensaje del metodo listen y se quedara escuchando y ahora podran conectarse a la aplicacion mediante la siguiente direccion:

http://localhost:3000

Y si la abren en un navegador se vera de la siguiente manera:

Y si se fijan en la consola veran que aparte del mensaje de escucha veran lo siguiente:

tinchicus@dbn001vrt:~/lenguajes/ts/04/ejemplo$ node app_minima
Escuchando en el puerto 3000
URL solicitada: /

Con esto tenemos nuestra primera aplicacion basica de node, si tienen mas curiosidad sobre node y express tengo un curso completo donde comenzamos desde cero y trabajamos bien a fondo con ellos. Les dejo el post donde estan todos los posts para comenzar a estudiar:

En resumen, hoy hemos hablado sobre node de forma resumida, sus origenes, algunas caracteristicas, asi como tambien hemos creado nuestra primera aplicacion, asi como tambien hemos visto los pasos necesarios para crear el entorno, nuestro primer codigo con typescript, compilacion y ejecucion en node. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.