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 !!!