miércoles, 14 de febrero de 2018

TypeScript a producción: primeros pasos


Desde hace tiempo, especialmente desde que la lógica de negocio se comenzó a desarrollar a nivel de UI, escribir código JavaScript no ha sido fácil. Esto se debe a que dicho código suele ser difícil de leer, mantener, siendo engorroso hacerlo prolijo (habría que utilizar prototypes, closures, IIFEs, etc.) y, sobre todo, casi imposible de testear.
Para solucionarnos los problemas anteriormente mencionados, salió al mercado un lenguaje llamado TypeScript. Sin entrar en detalles técnicos, quiero mencionar dos de las principales ventajas que nos provee:
  • Funciona en todos los browsers y sistemas operativos
  • Es puramente orientado a objetos.

Si analizamos la situación, fácilmente nos damos cuenta de que nuestro código backend es prolijo y fácil de leer, mantenible, extensible, orientado a objetos y testeable. Esto nos hace pensar, ¿utilizando TypeScript, será posible programar como en backend? ¿Cómo llevamos esto a la práctica?

En esta serie de artículos vamos a ver cómo incluir TypeScript en nuestros proyectos, cómo tenerlo testeado y bajo control y, finalmente, cómo pasar código JavaScript a código TypeScript, o como me gusta decirle: código sucio a código limpio.
Para todo aquel que no sepa mucho acerca del lenguaje TypeScript, puede ingresar al siguiente link y, de esta manera, obtener una base de conocimiento más homogénea: https://www.typescriptlang.org/.

Y ahora sí, vayamos al “kit” de la cuestión. ¿Cómo agregamos TypeScript a nuestro proyecto productivo? En primer lugar, sugiero utilizar Visual Studio 2013 o posterior, donde la integración con TypeScript ya viene resuelta por la misma IDE. Es probable que los que están utilizando frameworks o Visual Studio viejos hayan dejado escapar alguna palabra de más. Pero no se preocupen, también pueden instalar TypeScript en sus IDEs:
  • Visual Studio 2010 (http://www.c-sharpcorner.com/UploadFile/SamTomato/typescript-with-visual-studio-2010)

  • Visual Studio 2012 (https://www.microsoft.com/en-us/download/details.aspx?id=34790)

No obstante, recomiendo ampliamente que traten de utilizar los Visual Studio más modernos, ya que además de incluir TypeScript, cuentan con muchísimas otras ventajas y tienen una mejor performance a la hora de tener que desarrollar aplicaciones complejas.

Antes de agregar el primer archivo TypeScript es muy importante pensar dos cosas:

1- ¿Para qué? Es una pregunta que se debe responder con un nuevo requerimiento o funcionalidad que anteriormente involucraba crear nuevos archivos JavaScript. Entonces ahora es el momento de crear nuestro primer archivo TypeScript.

2- ¿De qué manera? Esta pregunta apunta a pensar un poco la arquitectura. ¿Dónde voy a dejar los archivos TypeScript? ¿Dónde voy a querer que se generen los archivos JavaScript luego de transpilar? ¿A qué versión de JavaScript queremos que transpile? ¿Cómo voy a estructurar el código?

Veamos cómo crear un nuevo archivo TypeScript en un proyecto Web (Figuras 1 y 2) (Los ejemplos y capturas son desde el Visual Studio 2013.)


Figura 1

Figura 2

En este caso el archivo se crea a nivel del proyecto Web. Si deseáramos agregarlo a una carpeta específica, tendríamos que hacer “click” sobre la misma y a partir de ahí seguir las Figuras 1 y 2.

En las Figuras 3 y 4 se puede observar como configurar en dónde guardar los archivos transpilados, en qué versión de JavaScript, entre otras configuraciones posibles.
Figura 3

Figura 4

En la Figura 4 se ven las posibles configuraciones, pero quiero centrarme en ECMAScript Version y Redirect JavaScript output to directory, que son las más importantes.
ECMAScript Version sirve para configurar a qué versión de JavaScript se quiere transpilar. 

Esto es importante, sobre todo, por si los usuarios están usando versiones de browsers más viejas.

Redirect JavaScript output to directory es importante para saber dónde localizar el JavaScript que se transpila. Recuerden que en nuestro HTML hacemos referencia al JavaScript generado, por lo tanto, es muy importante definir una ruta propicia.

Desde mi experiencia, todo esto lo logré sin un tutorial, es decir, fue a prueba y error. Es por eso que quería compartirles los pasos que fui haciendo y los problemas con los que me fui encontrando, para lograr que mi JavaScript sea de calidad, y siempre manteniendo el foco en “diseñar una aplicación testeable”.

Espero haber aportado mi granito de arena para que cada uno de ustedes pueda comenzar a implementar TypeScript en sus proyectos.

No se pierdan los próximos posts en donde vamos a estar viendo cómo testear el código TypeScript generado y cómo migrar nuestro código JS a TS.


Autor:
Leandro Goldin 
.NET Technical Expert.