Comenzando con NodeJS, Express y TypeScript – Parte 1

Muy buenas tardes a todos, por fin me esfuerzo un poco para volver a escribir en este blog que cada vez lo tengo más abandonado. En todo este tiempo que he durado sin escribir he tenido mucho trabajo, y como nunca me canso, en mi tiempo libre decido seguir aprendiendo tecnologías que regularmente no uso en mi trabajo.

Ahora le toca a NodeJS y el Framework Web Express junto con mi nuevo pre compilador de Javascript: TypeScript. La verdad es que Javascript es uno de mis lenguajes favoritos por el simple hecho que lo uso todos los días para funciones específicas, nunca como lenguaje principal en un desarrollo. Javascript se ha vuelto amigable conmigo gracias a Visual Studio e intellisense, pero de igual forma, por no ser fuertemente tipado, me sigue dando a veces dolor de cabeza cuando uso librerías/componentes de terceros y no hay mucha documentación.

Esto me empezó a pasar con NodeJS y Sails, un framework MVC que hace el desarrollo muy similar a Ruby on Rails. Mi costumbre al comenzar a utilizar un framework que desconozco es comenzando con intellisense y ver que posibilidades tengo al ver el autocomplete de Visual Studio (lo sé, no es muy buena idea depender de eso). Pero pensé, en que si Javascript se convertirá en el lenguaje principal en el desarrollo, en mi opinión, tiene que ser un lenguaje fuertemente tipado para hacer todo el ciclo lleno de felicidad. Para esto les presento TypeScript, un pre compilador (se le llama así?) fuertemente tipado, robusto y orientado a objetos que su código se convierte en Javascript que cualquier navegador lo correrá sin problemas.

Para comenzar, necesitaremos Visual Studio 2013 como mínimo el update 2 (cualquier versión de Visual Studio, te recomiendo Community Edition) y las herramientas de desarrollo de NodeJS. Una vez esto instalado, comenzemos.

Creando el proyecto

Creando el proyectoCrearemos el proyecto Started Node.js que como la descripción dice, es un sitio para comenzar con Bootstrap y Nodejs pero utilizando TypeScript.

Si no tienes Web Essentials instalado en tu visual studio, ve instalalo en este momento. Simplemente hace el desarrollo web más cool.

Si tienes todo como te lo he comentado, y ya conoces un poco de NodeJS, veremos el script principal app que es el que configura toda la aplicación web.

App.ts

Y si corremos el sitio (Ctrl + F5), será como cualquier template de inicio en visual studio con bootstrap.

Si eres nuevo en NodeJS, estoy suponiendo que tienes algo de conocimiento en web y en algún framework (como mvc o rails), lee un poco más acerca de express para que conozcas el ruteo y como funciona la configuración más esencial (ya que yo soy nuevo también en NodeJs y express).

La compilación de TypeScript

Si ya te diste cuenta, los archivos .ts son typescript, pero estos al final de cuentas se convierten en archivos javascript (.js). Si ya corriste la aplicación, por default, visual studio muestra los archivos que no son parte de la solución, estos archivos son los archivos javascript resultados de la compilación.

Si tienes Web essentials, veras en tiempo real a tu izquierda el código typescript que escribes y ademas a la derecha el código javascript resultado de la compilación, genial no?.

Creando una ruta “customers”

No sé si oficialmente express es MVC, pero yo trabajo con ese patrón y entonces lo seguiremos de esa forma. Para comenzar, dentro de la carpeta routes crearemos un nuevo archivo TypeScript que se llamará “customers“. Dentro de el agregaremos las rutas en las que nuestro servidor podrá responder solicitudes.

Aquí estamos declarando una ruta (y exportando), que al momento de atender la solicitud, hará render de una vista ubicada en la carpeta customers y llamada index, también envía un objeto natural Javascript enviando cierta información que la vista podrá obtener. Claro está que esta vista no existe.

Dentro de views, crearemos una carpeta llamada “customers” y dentro de la carpeta un archivo llamado index.jade.

Jade es una abstracción de HTML para poder realizar templates dinámicos (como Razor en MVC). Lo que colocaremos en este archivo será algo estático para probar nuestra nueva ruta.

Ya teniendo la ruta, la vista, hay que declararlo en nuestra configuración (desearía que fuera convención en lugar de configuración, pero tal vez omito algo).

Primero les quiero mostrar las ventajas de estar usando Visual Studio y TypeScript, ya que es fuertemente tipado, podemos ver esto como si fuera C# o cualquier otro lenguaje.

Continuamos, dentro de app.ts escribimos lo siguiente:

import customers = require('./routes/customers')
app.get('/customers', customers.index);

Lo más común es poner el import al inicio del archivo.

Si recuerdan la ruta customers.ts está exportando una función que se llama index. con require estamos importando ese modulo que se exportó en customers.ts.

Y ahora podemos correr la aplicación y entrar a la dirección /customers para ver la página que declaramos en index.jade:

Creando el modelo User y un Servicio

Como yo estoy acostumbrado al Repository/Service pattern, crearemos una capa de servicio que nos ayudará a guardar clientes y un modelo para representarlos. Crearemos una carpeta llamada models y una carpeta llamada services en la raíz de nuestro proyecto. Dentro de models agregamos un archivo llamado customerModel.ts y lo escribiremos de esta forma:

Aquí se declara una clase con tres propiedades y un constructor, les dejo la referencia del javascript compilado. Aquí aprendan un poco más del exports, básicamente estamos manejando el archivo customerModel.ts como un modulo de NodeJS que lo utilizaremos en otro archivo dspues.

Ahora, creamos dentro de la carpeta services un un TypeScript llamado customerService.ts que tendrá lo siguiente:

Estamos declarando una clase llamada CustomerService, que tiene una propiedad pública llamada dummyRepository, que es un Array de objetos tipo CustomerModel. Creamos simplemente un método llamado add que recibirá de parámetro un objeto CustomerModel y este método no podrá retornar nada ya que le indicamos con el void. 

Ahora lo que vamos a hacer, es modificar el archivo customers.ts dentro de las rutas, para agregar clientes dummy y en la ruta Index poder mostrar un listado.

Aquí lo estamos haciendo sencillo, customerService es global, y lo hacemos así para rellenar de datos dummy, pero no debemos hacerlo así, solo es ejemplo.

En la ruta index, estamos simplemente consultando nuestro repositorio dummy y se lo mandamos a la vista en una propiedad del objeto llamado customers  (se guardó en viewData arriba).

La vista la dejaremos de la siguiente manera:

Aquí estamos haciendo uso de los paneles de bootstrap y básicamente está pasando esto en esta vista: la vista index.jade está recibiendo un objeto que tiene una propiedad llamada customers y lo que guardamos aquí en la ruta que atendió la solicitud es guardar un array de objetos que tiene las tres propiedades que declaramos anteriormente.

Entonces, estamos creando una tabla, y el contenido de la tabla lo estamos iterando con el each, esto son características de Jade, al inicio esto me pareció absurdo, pero la verdad me gusta Jade.

El resultado final para esta entrada será el siguiente:

Así es, tenemos un cliente con 0 años!

Espero les resulte interesante, porque a mi me tiene maravillado TypeScript. Espero más adelante escribir sobre esta misma serie pero agregando Kendo UI u otras cosas.

Les dejo el repositorio aquí (GitHub)

Buen día!

Anuncios

6 comentarios sobre “Comenzando con NodeJS, Express y TypeScript – Parte 1

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s