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??
josegutierrezmdp@gmail.com
Web Components
By joseguti
