Primeros pasos con aurelia
-
Upload
jose-angel-parreno-madrigal -
Category
Software
-
view
530 -
download
0
Transcript of Primeros pasos con aurelia
![Page 1: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/1.jpg)
Primeros pasos con AureliaJose Angel Parreño (@j8seangel)Raúl Requero Garcia (@rrequero)MADRID · NOV 27-28 · 2015
![Page 2: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/2.jpg)
MADRID · NOV 27-28 · 2015
¿Quien somos?
Raúl RequeroFullstack developer
@rrequero
Jose Angel ParreñoFrontend developer
@j8seangel
![Page 3: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/3.jpg)
MADRID · NOV 27-28 · 2015
Índice
- Que es Aurelia- Características- Entorno de desarrollo- Flujo de ejecución y ejemplos
![Page 4: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/4.jpg)
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
![Page 5: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/5.jpg)
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
![Page 6: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/6.jpg)
MADRID · NOV 27-28 · 2015
Entorno
![Page 7: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/7.jpg)
MADRID · NOV 27-28 · 2015
Demo
https://github.com/rrequero/primeros_pasos_con_aurelia_talk
![Page 8: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/8.jpg)
MADRID · NOV 27-28 · 2015
Scaffolding
![Page 9: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/9.jpg)
MADRID · NOV 27-28 · 2015
Ejecución 1 - index.html
![Page 10: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/10.jpg)
MADRID · NOV 27-28 · 2015
Ejecución 2 - main.js
![Page 11: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/11.jpg)
MADRID · NOV 27-28 · 2015
Ejecución 3 - app.js
![Page 12: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/12.jpg)
MADRID · NOV 27-28 · 2015
Ejecución 4 - app.js(2)
![Page 13: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/13.jpg)
MADRID · NOV 27-28 · 2015
Ejecución 5 - app.html
![Page 14: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/14.jpg)
MADRID · NOV 27-28 · 2015
Ejecución 6 - pantallas
- Navigation lifecycle :- canActivate- activate- canDeactivate- deactivate
![Page 15: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/15.jpg)
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.
![Page 16: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/16.jpg)
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;”{}””
![Page 17: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/17.jpg)
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”
![Page 18: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/18.jpg)
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')
![Page 19: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/19.jpg)
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()
![Page 20: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/20.jpg)
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:
![Page 21: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/21.jpg)
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')
![Page 22: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/22.jpg)
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:
![Page 23: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/23.jpg)
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
![Page 24: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/24.jpg)
MADRID · NOV 27-28 · 2015
Http-fetch-client - ejemplo
![Page 25: Primeros pasos con aurelia](https://reader034.fdocumento.com/reader034/viewer/2022051123/58e9f60e1a28ab9c208b642b/html5/thumbnails/25.jpg)
MADRID · NOV 27-28 · 2015
¡¡¡ GRACIAS !!!