Web Components

& Angular

Web Components

Agenda

  • ¿Qué es Web Components?
  • Tag <video>
  • ¿Cuándo utilizarlos?
  • Definición de componente:
    • Custom elements
    • Templates
    • Shadow DOM
    • HTML Imports
  • Soporte de navegadores
  • Librerías y Frameworks

¿Qué es Web components?

Web Components es un estándar de HTML5 que nos permite crear componentes propios para poder reutilizarlos en cualquier aplicación web.

Tag <video>

Tag <video>

¿Cuándo utilizarlos?

Por ejemplo, si queremos agregar un datepicker

  • Incluir archivos JS
  • Agregar los css
  • Html con la estructura básica donde se agregará el calendario

Otra opción es agregarlo con un <iframe>

¿Cuándo utilizarlos?

Definición de componente

Se divide en 4 sub-elementos:

  • Custom elements
  • Templates
  • Shadow DOM
  • HTML Imports

Custom Elements

  • Nos permite crear etiquetas propias
  • El nombre debe contener '-'

o

Templates

Es un nuevo tag llamado <template> para definir código que va a ser reutilizado.

 

Inicialmente para el navegador, todo lo que esté dentro de este tag no existe.

Templates

Shadow DOM

Nos permite encapsular el HTML y CSS de un componente

Shadow DOM

Cambiar estilos a un componente desde afuera

HTML Imports

Nos permite cargar archivos html dentro del <head>

Soporte de navegadores

Librerías y Frameworks

  • Polymer
  • X-Tag
  • React
  • Angular

... y Angular?

Agenda

  • ¿Qué es Angular?
  • Características Principales de Angular
    • Definición de un componente
    • Typescript
    • Data Bind Flow
    • Template Compilation
    • Lazy loading
    • Native app Support
  • Angular-CLI

¿Qué es Angular?

Es un framwork de JS basado en Web Components

Definición de un componente

Typescript

Es un lenguaje tipado de alto nivel

Data Binding Flow

La comunicación entre componentes es a través de un data flow de entrada y un action flow de salida.

Data Binding Flow

Templete Compilation

Hay dos tipos de compilación de componentes:

  • Just In Time (JIT)
  • Ahead Of Time (AOT)

El compilador es el mismo, lo que cambia es el momento de compilación

Lazy Loading

Nos permite cargar algunas partes de la aplicación y el resto se cargan en el momento que se necesiten.

Por ejemplo: Una aplicación administrativa

Native App Support

Ahora con Angular podemos crear tanto aplicaciones web como nativas para iOS y Android.

Angular-CLI

Es una interfaz de linea de comando para Angular.

Algunos comandos disponibles:

  • ng new <NombreProyecto>
  • ng generate <TipoElemento> <NombreElemento>
  • ng serve
  • ng test
  • ng build

¿¿Consultas??