2. MADRID · NOV 27-28 · 2015
¿Quien somos?
Raúl Requero
Fullstack developer
@rrequero
Jose Angel Parreño
Frontend developer
@j8seangel
3. MADRID · NOV 27-28 · 2015
Índice
- Que es Aurelia
- Características
- Entorno de desarrollo
- Flujo de ejecución y ejemplos
4. 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
5. 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
15. 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.
17. 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”
18. 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')
19. 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()
20. 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:
21. 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')
22. 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:
23. 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
24. MADRID · NOV 27-28 · 2015
Http-fetch-client - ejemplo
A principios de 2014 Rob Eisenberg pasa a ser parte del equipo de desarrollo de Angular 2, pero después de nueves meses (Noviembre) decide salir para posteriormente anunciar en Enero de 2015 Aurelia
http://blog.durandal.io/2015/01/26/introducing-aurelia/
porque todo son clases de ES6 y no es necesario saber controladores,servicios… como angular
alta cohesión y bajo acoplamiento
1-2way always with observe with polyfill ie9+
basado en un core simple, añadiendo funcionalidades mediantes módulos y plugins
Buen sistema de routing que veremos mas adelante
Enseñar la documentación
C
Hablar de jspm (ventajas) no es sólo para descargar paquetes, sino que además incluye systemJs (cargador de modulos ES, commonjs, AMD)
Babel transpilador para ES6
Gulp automatizador de tareas mejorando el rendimiento del uso de memoria y la velocidad
Esta basado en el ejemplo de aurelia
Explicar los distintos ficheros
System.js es nuestro cargador de módulos basado en estándares ES6.
Config.js contiene la configuración de dicho cargador, y es un archivo autogenerado por jspm donde se define las rutas de cada una de las dependencias (dónde ir a buscar cada uno de los imports en el código)
Aurelia bootstrapper cargará la configuración por defecto y arrancará la aplicación de aurelia según convención. Buscará en el html el atributo aurelia-app que le indicará cuál es el módulo donde está definido el inicio de la aplicación.
En este fichero definimos la configuración de la aplicación, podremos hacerlo según la convención, o podremos definirlo manualmente como en el ejemplo.
Aurelia-animator-css plugin para agregar animaciones, por ejemplo en las transiciones del router.
El método .start() cargará la aplicación y una vez ejecutada la promesa le decimos a aurelia por dónde empezar: nuestra primera pantalla y el router.
Definimos la configuración de todas las pantallas (rutas) a través del método configureRouter.
Para cada uno de ellos definimos:
el path
el nombre de la ruta
el nombre del fichero js que cargará
si queremos que sea registrada en el modelo de navegación, es decir se registra en el objeto router.navigation donde tenemos disponibles todas las rutas
el título de la pantalla
importamos los módulos
inject: nos proporciona la anotación @inject que nos permite inyectar las instancias de los objetos y estos estarán disponibles en el constructor
httpClient es la librería que nos permite hacer llamadas asíncronas a servidor. al importarlo tenemos la posibilidad de inyectarlo.
gracias al inject tenemos la posibilidad de especificar que objetos queremos injectar en nuestra clase y las tendremos disponibles parámetros en el constructor
configuramos de forma global el objeto http que se utilizará en todas las llamadas asíncronas, en este caso la url base de todas las llamadas.
Template: es un html de template
Require:
carga el html del elemento custom nav-bar.html
carga el css de bootstrap
Usamos el elemento nav-bar importado y pasamos el parámetro router bindado con el definido en la clase app
Router-view es el contenedor donde se irán metiendo cada uno de los templates de las pantallas.
Primer método ejecutado al instanciar una pantalla, es de utilidad para comprobar credenciales, etc.. si devolvemos false no podremos acceder a la pantalla.
Segundo método en el ciclo en el que se utiliza para hacer las llamadas asíncronas y tener los datos disponibles una vez que se renderice la pantalla. Devuelves una promesa que una vez resuelta entrará en el propio estado.
Lo mismo para salir, por ejemplo: no has guardado los datos del formulario..
Se llamará a este método si el canDeactivate y no saldremos del estado hasta que las promesas no hayan sido resueltas.
defaultBindingMode: ONE_WAY
defaultBindingMode: ONE_WAY
Funciones para modificar la request y la response
Encapsula XMLHTTPRequest
registers = ruta
method = metodo http (get,post...)
body = contenido enviado
data = respuesta