Angular 2 | Conceptos previos, términos

ReactJS

Proyecto de Facebook para la implementación de componentes web

EmberJS

Podríamos verlo como una alternativa a AngularJS, un framework MVC para desarrollar aplicaciones del lado del cliente.

Traceur

Es un compilador, permite llevar código ES6 y lo lleva a ES5 (o versión de ES que indiquemos).

Babel

Idem Traceur.

Transpilar

Misma tarea que un compilador, pero parte de Typescript.

SystemJS

Es una librería encargada de cargar módulos de varios tipos: ES6, AMD, CommonJS, scripts globales de cliente y servidor (Node). Le indicamos donde se encuentran los módulos necesarios y se encarga automáticamente de descargar las dependencias de nuestra aplicación.

Esto funciona bien en desarrollo, pero en producción tendríamos muchisimas descargas de pequeños módulos, la librería cuenta con una herramienta para empaquetar varios módulos en uno.

Webpack

Alternativa a SystemJS.

Yeoman

Es un generador de estructura de proyectos a través de línea de comandos, tiene una gran cantidad de posibles generadores, entre ellos obviamente Angular.

Angular 2 | Conceptos previos, Typescript

Typescript es un superset de ES6, por lo que a todo lo que éste trae, le agrega nuevas cosas y la principal es el tipado (de ahí el nombre) estático.

Por esta característica de ser un superset, podemos usar ES6 estándar mezclado con Typescript y el transpilador se encargará de transformar todo eso en ES5 sin problemas y de forma transparente a nosotros.

Tipos

Volviendo a los tipos, Javascript es de tipado dinámico, lo que quiere decir es que podríamos hacer algo así sin problemas:

¿Pero qué pasaría si esta variable la debemos enviar a un método que necesita operar sobre un número? Veamos:

Javascript

Typescript

En Javascript obtendríamos un solo error y en tiempo de ejecución por intentar iterar sobre un número.

En cambio, en Typescript obtendríamos 2 errores y en tiempo de compilación, el primero al intentar asignar un string a un array (error de código a propósito) y el segundo error es por el tipo de parámetro esperado por el constructor.

La sintaxis básica es:

Y también podemos usarla para definir tipos de retorno de una función:

Otra ventaja de los tipos es que al trabajar con otras librerías no sabemos que tipos de parámetros debemos usar, para esto, la comunidad usa archivos especiales que contienen la interfaz (nosotros deberíamos hacerlo también), por convención tienen la extensión .d.ts.

Podemos ir a https://github.com/DefinitelyTyped/DefinitelyTyped para ver un listado de posibles tipos a usar y luego agregarlo como dependencia de desarrollo en nuestro package.json:

OOP

Podemos usar todo lo relacionado con OOP, veamos un ejemplo:

Decoradores

Es un patrón de diseño que permite agregar funcionalidades a un objeto (métodos, clases, funciones, etc) de forma dinámica a través de otra función, todo esto sin modificar la original.

Puede ser usado, por ejemplo, para alterar los parámetros de llamada, llamar a otros métodos cuando el objeto es llamado, agregar metadata para un framework (esto hace Angular2).

Los decoradores empiezan con un @ y pueden ser aplicados a clases, propiedades de clases, funciones o parámetros. Pero no pueden ser aplicadas a un constructor.

Por ejemplo, necesitamos loguear cada vez que es llamado un método:

Con Angular2 usaremos mucho este concepto, ya que el framework se vale del mismo para enviar metadata de sus componentes.