Primeros pasos con aurelia
•Descargar como PPTX, PDF•
0 recomendaciones•680 vistas
Charla sobre el nuevo framework javascript para el desarrrollo de aplicaciones web para Codemotion 2015.
Recomendados
Más contenido relacionado
Similar a Primeros pasos con aurelia
Similar a Primeros pasos con aurelia (20)
Primeros pasos con aurelia
- 1. Primeros pasos con Aurelia Jose Angel Parreño (@j8seangel) Raúl Requero Garcia (@rrequero)MADRID · NOV 27-28 · 2015
- 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
- 6. MADRID · NOV 27-28 · 2015 Entorno
- 7. MADRID · NOV 27-28 · 2015 Demo https://github.com/rrequero/primeros _pasos_con_aurelia_talk
- 8. MADRID · NOV 27-28 · 2015 Scaffolding
- 9. MADRID · NOV 27-28 · 2015 Ejecución 1 - index.html
- 10. MADRID · NOV 27-28 · 2015 Ejecución 2 - main.js
- 11. MADRID · NOV 27-28 · 2015 Ejecución 3 - app.js
- 12. MADRID · NOV 27-28 · 2015 Ejecución 4 - app.js(2)
- 13. MADRID · NOV 27-28 · 2015 Ejecución 5 - app.html
- 14. MADRID · NOV 27-28 · 2015 Ejecución 6 - pantallas - Navigation lifecycle : - canActivate - activate - canDeactivate - deactivate
- 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.
- 16. 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;”{}””
- 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
- 25. MADRID · NOV 27-28 · 2015 ¡¡¡ GRACIAS !!!
Notas del editor
- 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