Organización del código JavaScript

• Ejemplo de uso clásico de JS: utilizar un plugin de jQuery en nuestra web

• Pocas líneas de código, todas en un mismo archivo

Organización del código JavaScript

• Complicándonos un poco: programar unos tabs

• Pocas líneas de código, todas en un mismo archivo

Organización del código JavaScript

• Un paso de gigante: programar toda la UI de una página

• ¿2000 líneas en un solo archivo?

• Difícil de leer/entender
• Difícil de mantener
• Poca reusabilidad
• Difícil encontrar código no usado
• Colisiones de nombres

• Una sola petición HTTP

Organización del código JavaScript

• Optimización: dividir el código en varios archivos/módulos

• Difícil encontrar código no usado (menos difícil que antes)
• Colisiones de nombres
• Muchas peticiones HTTP
• El orden importa: dependencias

Organización del código JavaScript

• Dependencias: es difícil asegurar el orden, y no es posible tener dependencias circulares

Organización del código JavaScript: módulos

• Module loaders: ellos gestionan las dependencias y cargan los módulos (RequireJS, SystemJS)

• Module bundlers: además de lo anterior, generan un solo código encadenado y minificado (browserify, webpack)

Organización del código JavaScript: módulos

• ¿Puedo escribir mis módulos como yo quiera? ¿hay un estándar?

• ¿AMD, CommonJS, UMD, ES6?

• ¡TypeScript!

• TS -> ES5 -> webpack -> bundle -> browser =

TypeScript

• Superconjunto de JavaScript

• Transpila a ES5

• Tipado

• Errores en tiempo de compilación

• tsc

• tsconfig.json

TypeScript

• let y const

• Tipos básicos:

  • number

  • string

  • boolean

  • Array

  • any

  • void

• Enum

• Union types

TypeScript

• Funciones

• Arrow function

• Clases

  • Visibilidad de los miembros

  • Getters y setters

  • Herencia

  • Interfaces

• Template literals

• Módulos

TypeScript

• for...of, forEach

• map, filter, reduce

• find, indexOf

• Promesas

• Decoradores

Primeros pasos

• ng new para generar la app

• ng serve -o para verla en el navegador

• Componentes, templates, módulos

• ~MVC

• El módulo iniciador y el componente iniciador

• Entornos dev y prod

• Archivos de configuración

Esqueleto de una pieza en Angular

• clase =>

• => clase exportada =>

• => clase exportada y decorada =>

• => dependencias

Examinando un template

• Custom elements

• Data binding

• Interpolation

• Property binding

• Class & style binding

• Event binding

• Two-way binding

Examinando un template

• Directivas de atributo

  • ngClass

  • ngStyle

• Directivas estructurales

  • ngIf

  • ngFor

  • ngSwitch

• Pipes

Examinando un componente

• Metadata

  • selector

  • template / templateUrl

  • styles / stylesUrl

• Directivas estructurales

  • ngIf

  • ngFor

  • ngSwitch

• Pipes