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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *