Angular 2 | Conceptos previos, parte 4

Introducción a ES6

ES6, ECMAScript 6 o ES2015 es el standar de Javascript vigente a partir del 2015. En la actualidad hay mayor soporte por parte de algunos navegadores, pero aún el soporte no es total, por este motivo existen los transpiladores, que se encargan de convertir el código ES6 al estándar anterior.

Novedades

let

Permite declarar variables y limitar su alcance al bloque donde fué declarada.

Las diferencias con var son que esta última tiene como alcance su función contenedora y no es elevada a la parte superior del bloque (var si lo hace).

const

Esto es para declaración de contantes.

Objetos

Se introduce una mejora o atajo en la creación de objetos cuando la propiedad tiene el mismo nombre que la variable usada como valor.

ES5

ES6

Asignación desestructurada

Es un atajo para asignar variables desde objetos o arrays.

ES5

ES6

Ejemplo con array

Parámetros por defecto

Permite llama a una función con cualquier cantidad de argumentos, si se pasan más argumentos que los declarados, los sobrantes se ignoran, si se pasan menos, éstos serán seteados como undefined.

La definición de parámetros por defectos es como en cualquier lenguaje, podemos destacar que el valor por defecto puede ser una función:

Operador rest

Lo que hace es recoger múltiples elementos y los condensa en uno solo. En ES5 lo podemos hacer con la variable arguments, pero es ES6 lo declaramos nosotros explicitamente.

De forma similar se puede usar el operador de propagación (spread) que hace lo opuesto al rest, toma un array y lo descompone en N variables. Puede ser confundido ya que la sintaxis es la misma:

OOP

Se incorpora orientación a objetos nativa, clases, herencia, métodos estáticos, etc, etc…

Promises

Simplifican la programación asíncrona, no es una nueva funcionalidad como tal, sino que se reestructura la forma de hacerlo, que más sencillo de leer.

En ES5 tenemos que usar callbacks, ir llamando a funciones luego de que termina un llamado asíncrono.

En ES6, con las promises quedaría así:

Las promises son objetos de la clase Promise, la cual recibe 2 argumentos, un callback en caso de éxito, y otro en caso de fallo.

Otra cosa útil que tiene este objeto es el manejo de errores, en este ejemplo lo declaramos particular por cada promesa:

En este ejemplo lo declaramos general para toda la cadena de promesas, cualquiera que falle irá al catch:

Arrow functions

Recibe el nombre por su sintaxis:

Como vemos, si el argumento es único podemos enviarlo sin parentesis, en caso de que haya más de uno tendremos que usarlos. Otra cosa opcional es el bloque de código en el caso de que sea una operación simple, caso contrario deberemos usarlo. También podríamos declarar una función sin parámetros con los paréntesis vacios.

Lo que logramos en cualquiera de los casos es declarar una función que luego la podemos invocar de la forma que estamos acostumbrados:

Más allá de simplificar el código, hay un uso funcional, y es el de tener un mejor control del this, por ejemplo:

El error se debe a que estamos intentando acceder al método doSomething del objeto, pero en ese ámbito, this está haciendo referencia a document, por lo que el método buscado no existe.

Una solución podría ser bindear (ligar, asociar) el this de la función al this actual, que en este caso es el del pageHandler.

Esto lo podemos resolver mejor con las arrow functions, el valor de this dentro de estas funciones es igual al entorno donde fueron definidas. Por lo que, en el ejemplo, vemos que es definida dentro del pageHandler.

Hay ciertos casos donde no debemos usar estas funciones:

1 -Cuando se necesite acceder a argumentos dinámicos, ya que las arrow functions no exponen el objeto arguments:

2- Uso como método. Sabemos que los métodos son funciones que están asociadas a un objeto, y dependen del valor correcto de this para poder hacer su trabajo.

3- Uso como constructor

4- En funciones generador (nuevo tipo de funciones), ya que la palabra clave yield (de la que se valen estas funciones) no está permitida en funciones arrow.

Template literals

Podemos usar una sintaxis dentro de comillas invertidas ( ` ) para concatenar variables.

ES5

ES6

Estas comillas también nos permiten usar strings multilinea:

ES5

ES6

Módulos

Se incorpora de forma nativa (en ES5 se podía hacer con RequireJS por ejemplo) la organización de funcionalidades en módulos.

A través de export exponer librerías, funciones o valores y con import podemos incluirlos donde necesitemos.

races_service.js

app.js

Podemos usar alias al importar, y un wilcard (*) para importar todo lo que contiene el archivo:

Con esto terminamos la introducción a Angular intentando refrescar y reforzar conceptos que quizá ya dominaban o incluso desconocían.

Angular 2 | Conceptos previos, parte 3

Estructura de carpetas

/src/

Donde se ubica el código fuente del proyecto, puntualmente dentro de la carpeta app es donde se programa la aplicación.

Hay que recordar que al desplegar el proyecto, los archivos se compilan y se llevan a la carpeta dist, donde por ejemplo no se encontrarán los archivos .ts (recordar que estos se usan en etapa de desarrollo)

/dist/

Acá se ubicará la versión a subir al servidor público.

/Public/

Archivos estáticos, assets.

/e2e/

Para las pruebas. Viene de “end to end” testing.

/node_modules/

Archivos de las dependencias declaradas en package.json

/tmp/

Archivos temporales de Angular CLI

Typings

Como vimos, Typescript añade funcionalidades a Javascript, entre ellas, el tipado. Esta característica le permite al compilador checkear que las operaciones con las variables declaradas sean las permitidas / esperadas.

Se pueden usar tipos tanto para asignación como para retorno de métodos, como cualquier lenguaje fuertemente tipado. Luego de la transpilación, esto desaparece como tal, y es convertido en código Javascript para que se mantengan estas validaciones de tipos.

TypeScript

Como dijimos, Typescript es un superset de ES6 (ver link), 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.

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.

Algunos 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.