Primeros pasos con AureliaJose Angel Parreño (@j8seangel)Raúl Requero Garcia (@rrequero)MADRID · NOV 27-28 · 2015
MADRID · NOV 27-28 · 2015
¿Quien somos?
Raúl RequeroFullstack developer
@rrequero
Jose Angel ParreñoFrontend developer
@j8seangel
MADRID · NOV 27-28 · 2015
Índice
- Que es Aurelia- Características- Entorno de desarrollo- Flujo de ejecución y ejemplos
MADRID · NOV 27-28 · 2015
¿Que es Aurelia?
"Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity."
Rob Eisenberg
MADRID · NOV 27-28 · 2015
Características● Poca abstracción● Inyección de dependencias● Adaptative binding● Extendible● No tiene dependencias externas● Routing● Buena documentación y ejemplos
MADRID · NOV 27-28 · 2015
Entorno
MADRID · NOV 27-28 · 2015
Demo
https://github.com/rrequero/primeros_pasos_con_aurelia_talk
MADRID · NOV 27-28 · 2015
Scaffolding
MADRID · NOV 27-28 · 2015
Ejecución 1 - index.html
MADRID · NOV 27-28 · 2015
Ejecución 2 - main.js
MADRID · NOV 27-28 · 2015
Ejecución 3 - app.js
MADRID · NOV 27-28 · 2015
Ejecución 4 - app.js(2)
MADRID · NOV 27-28 · 2015
Ejecución 5 - app.html
MADRID · NOV 27-28 · 2015
Ejecución 6 - pantallas
- Navigation lifecycle :- canActivate- activate- canDeactivate- deactivate
MADRID · NOV 27-28 · 2015
Ejecución 7 - listado
- Por convención irá a cargar el <moduleId>.js y <moduleId>.html del moduleId.
- Todos los métodos y atributos definidos en la clase están disponibles en la vista.
MADRID · NOV 27-28 · 2015
Ejecución 8 - template- String interpolation: ${varName}- Resources:
- repeat.for=”elem in array”- $index, $first, $last, $even, $odd
- if.bind / show.bind- click.trigger / delegate
- route-href=”route: “name”, params.bind;”{}””
MADRID · NOV 27-28 · 2015
Ejecución 9 - data binding- select: value.bind for.bind=”option in options”- radio/checkbox: value.bind checked.bind- innerhtml: innerhtml.bind - textcontent: textcontent.bind (1 way)- contenteditable = “true” (2 ways)- inline-styles: styles.bind=”varName”
MADRID · NOV 27-28 · 2015
Custom elements - definición- Podemos crear tags html como un “web-
component”.- Por convención:
- class <name>CustomElement- Por configuración:
- @customElement('example')
MADRID · NOV 27-28 · 2015
Custom elements - configuración- Para compartir información:
- @bindable <name>- Por convención buscará una template y js
con el mismo nombre- Por configuración:
- @useView(‘path’)- @noView()
MADRID · NOV 27-28 · 2015
Custom elements - uso- Para poder utilizar el custom element en una
template necesitamos importarla:
- Una vez importada la utilizamos como un elemento más:
MADRID · NOV 27-28 · 2015
Custom attributes - configuración- Añaden nuevo comportamiento a elementos
HTML o custom elements.- Por convención:
- class <name>CustomAttribute- Por configuración:
- @customAttribute('example')
MADRID · NOV 27-28 · 2015
Custom attributes - uso- Para poder utilizar el custom element en una
template necesitamos importarla:
- Una vez importada la utilizamos como un elemento más:
MADRID · NOV 27-28 · 2015
Http-fetch-client- Módulo de aurelia que usa la
implementación fetch API.- Permite:
- Añadir/eliminar headers- Definir baseUrl- Interceptors
MADRID · NOV 27-28 · 2015
Http-fetch-client - ejemplo
MADRID · NOV 27-28 · 2015
¡¡¡ GRACIAS !!!