AureliaJS

Un breve repaso a las caracteristicas de AureliajS

1. AureliaJS DEMO AureliaJS Jesse Javier Cogollo Alvarez Developer by passion email: cogollo87@gmail.com MedellinJS August 19, 2015 1 / 60
2. AureliaJS DEMO Contenido AureliaJS DEMO 2 / 60
3. AureliaJS DEMO Que es Aurelia? Aurelia es un Framework javascript al lado del servidor. Que maneja simples convenciones. http://aurelia.io/ Rob Eisenberg robeisenberg.com 3 / 60
4. AureliaJS DEMO Caracteristicas 1. Forward-thinking Escrito con ES6 y ES7. se integra con Web components. no tiene dependencias externas (excepto polyfills). 4 / 60
5. AureliaJS DEMO Caracteristicas 1. Forward-thinking 2. Modern Architecture Aurelia esta compuesto por peque˜ nos m´ odulos. Utilizados juntos como un completo Framework. Pero tambi´ en permite personalizarlo con diferentes m´ odulos. 5 / 60
6. AureliaJS DEMO Caracteristicas 1. Forward-thinking 2. Modern Architecture 3. Two-Way Databinding Aurelia tiene una poderosa two-way binding. el cual utiliza t´ ecnicas adaptativos para utilizar el mecanismo mas eficiente para observar cada propiedad. Object.observer 6 / 60
7. AureliaJS DEMO Caracteristicas 1. Forward-thinking 2. Modern Architecture 3. Two-Way Databinding 4. Extensible HTML La extensibilidad HTML de Aurelia permite crear elementos HTML personalizados, a˜ nadir nuevos comportamientos para elementos ya existentes. 7 / 60
8. AureliaJS DEMO Caracteristicas 1. Forward-thinking 2. Modern Architecture 3. Two-Way Databinding 4. Extensible HTML 5. Routing and UI Composition Router con acoplamiento activo, patrones de ruta din´ amica, activaci´ on de pantallas asincr´ onicamente, etc. 8 / 60
9. AureliaJS DEMO Caracteristicas 1. Forward-thinking 2. Modern Architecture 3. Two-Way Databinding 4. Extensible HTML 5. Routing and UI Composition 6. MV* with Conventions Quieres invertir tiempo en escribir c´ odigo de configuraci´ on? Aurelia maneja una convenci´ on simple. 9 / 60
10. AureliaJS DEMO Caracteristicas 1. Forward-thinking 2. Modern Architecture 3. Two-Way Databinding 4. Extensible HTML 5. Routing and UI Composition 6. MV* with Conventions 7. Broad Language Support Utiliza ES5, ES6, TypeScript, AtScript, CoffeeScript. 10 / 60
11. AureliaJS DEMO Caracteristicas 1. Forward-thinking 2. Modern Architecture 3. Two-Way Databinding 4. Extensible HTML 5. Routing and UI Composition 6. MV* with Conventions 7. Broad Language Support 8. Testable combinando m´ odulos ES6 con contenedores inyecci´ on de dependencias. se hace mas f´ acil crear c´ odigo altamente cohesivo y bajo acoplamiento. haciendo las pruebas unitarias algo f´ acil. 11 / 60
12. AureliaJS DEMO Como empezar - Estructura Descargamos la ultima versi´ on del skeleton de Aurelia. https://github.com/aurelia/skeleton-navigation/ releases/tag/0.15.1 descomprimimos y ya tenemos una estructura lista para utilizar: • build (configuracion gulp). • doc (documentacion). • src (codificacion). • styles (estilos CSS). • test (pruebas). • README.md (instrucciones para empezar con AureliaJS). 12 / 60
13. AureliaJS DEMO Modulos • logging Esta librer´ ıa es parte de la plataforma Aurelia y contiene un ”Appender” para el logging. Implementaci´ on: welcome.js 13 / 60
14. AureliaJS DEMO Modulos • Plugins Aurelia permite crear e implementar plugins que se adaptan al Framework. implementaci´ on: index.html animation-main.js 14 / 60
15. AureliaJS DEMO Vistas y vistas modelos • DI inyeccion de dependencias Los AureliaElements son creados como clases los cuales son llamados por el Framework usando contenedor de inyecci´ on de dependencias. implementaci´ on: flickr.js 15 / 60
16. AureliaJS DEMO Vistas y vistas modelos • Plantillas El motor de plantillas de Aurelia es el encargado de cargar las vistas y sus recursos, compilando su HTML para un optimo desempe˜ no y renderizado del UI en la pantalla. <template></template>. Todo lo que este adentro de esas etiquetas ser´ a administrado por Aurelia. implementaci´ on: welcome.html 16 / 60
17. AureliaJS DEMO Databiding • Que es El Databinding nos permite enlazar el estado y comportamiento en un objeto(js) y una vista(html). Cualquier cambio es enlazado y/o sincronizado en una o varias direcciones. Se puede diferenciar en la vista por que el elemento va seguido de un punto en el atributo con el valor (bind, one-way, two-way o one-time). implementaci´ on: welcome.html 17 / 60
18. AureliaJS DEMO Bindings • Delegate, trigger and call Los bindings no solamente conectan elementos o atributos. Tambi´ en son utilizados para lanzar comportamientos. Se recomienda utilizar el delegate por defecto por que es el mas eficiente al utilizar la memoria y la CPU. Implementaci´ on: welcome.js 18 / 60
19. AureliaJS DEMO Bindings • String interpolation Sintaxis: ${nameVariable}. es un binding de un solo camino, la cual la salida se convierte en un string. Implementaci´ on: welcome.html 19 / 60
20. AureliaJS DEMO Bindings • Ref Es especial para conectar elementos personalizados, utilizando esta t´ ecnica puedes conectar diferentes componentes. Implementaci´ on: form.html 20 / 60
21. AureliaJS DEMO Bindings • Select elements ”value.bind” es un HTMLSelectElement que tiene un comportamiento especial para soportar seleccion simple y selecci´ on m´ ultiple de valores. normalmente se combina con el elemento repeat. Pero existe otro elemento especial que permite trabajar con objetos ”model.bind”. Implementaci´ on: form.html 21 / 60
22. AureliaJS DEMO Bindings • Radios ”checked.bind” es un HTMLInputElement tiene un comportamiento especial para soportar binding no booleano, como strings y objetos. Implementaci´ on: form.html 22 / 60
23. AureliaJS DEMO Bindings • Checkboxes Implementaci´ on: form.html 23 / 60
24. AureliaJS DEMO Bindings • InnerHTML podemos hacer binding de los elementos innerHTMl con el atributo innerhtml. Implementaci´ on: form.html 24 / 60
25. AureliaJS DEMO Bindings • textContent Podemos hacer binding de los elementos textContect con el atributo textcontent. Implementaci´ on: form.html 25 / 60
26. AureliaJS DEMO Bindings • Style Podemos hacer binding a los string CSS u objetos en un elemento style. Implementaci´ on: form.html 26 / 60
27. AureliaJS DEMO Bindings • Adaptive binding http://blog.durandal.io/ 2015/04/03/ aurelia-adaptive-binding/ Implementaci´ on: welcome.html 27 / 60
28. AureliaJS DEMO HTML Extensions • show Nos permite condicionar si un elemento o elementos ser´ an visibles o no en el DOM. Implementaci´ on: form.html 28 / 60
29. AureliaJS DEMO HTML Extensions • if Tiene el mismo comportamiento que el ”show”. lo que lo hace diferente es que esta etiqueta si remueve el componente del DOM. Implementaci´ on: form.html 29 / 60
30. AureliaJS DEMO HTML Extensions • repeat Este atributo permite renderizar un template m´ ultiples veces y trabaja en conjunto con el ”.for” Implementaci´ on: form.html 30 / 60
31. AureliaJS DEMO HTML Extensions • repeat $parent Permite acceder a las propiedades de la viewModel. 31 / 60
32. AureliaJS DEMO HTML Extensions • repeat $index Es el Index del ´ ıtem en el array. 32 / 60
33. AureliaJS DEMO HTML Extensions • repeat $first Es verdadero si es el primer ´ ıtem del array. 33 / 60
34. AureliaJS DEMO HTML Extensions • repeat $last Es verdadero si es el ´ ultimo ´ ıtem del array. 34 / 60
35. AureliaJS DEMO HTML Extensions • repeat $even Es verdadero si el ´ ıtem es un n´ umero par. 35 / 60
36. AureliaJS DEMO HTML Extensions • repeat $odd Es verdadero si el ´ ıtem es un n´ umero impar. 36 / 60
37. AureliaJS DEMO Routing • Descripci´ on Cuando implementas enrutadores, tienes varias posibilidades de implementarlo, como: navegaci´ on de la App, dashboards y MDI interfaces. El Routing de Aurelia, el Router que vive en los viewModels y los router-view que viven en las vistas. 37 / 60
38. AureliaJS DEMO Routing • Que podemos hacer rutas estaticas: /contactUs rutas parametriables: /user/:userId/dasboard rutas wilcard: file*path 38 / 60
39. AureliaJS DEMO Routing • Ciclo de vida Existen 4 estados: canActivate: permite validar si se puede navegar en el viewModel. activate: permite implementar l´ ogica antes del que el viewModel sea cargado. canDeactivate: permite controlar si deseo que en ese momento se pueda abandonar el viewModel. deactivate: permite implementar l´ ogica una vez el viewModel ya fue cambiado. 39 / 60
40. AureliaJS DEMO Routing • Convenc´ ıon de enrutadores Implementaci´ on: app.js 40 / 60
41. AureliaJS DEMO Routing • Personalizando el enrutador Aurelia nos permite agregar pasos en el proceso del Router, los que nos permite agregar validaciones de permisos. Implementaci´ on: app.js 41 / 60
42. AureliaJS DEMO Routing • pushState si as´ ı lo prefieres, puedes remover el hash de la URL. Implementaci´ on: app.js 42 / 60
43. AureliaJS DEMO Routing • Reutilizando un viewModel existente Si alguna vez usted quiere implementar la misma vista para diferentes rutas. 43 / 60
44. AureliaJS DEMO Routing • Renderizando multiples viewPorts Si alguna vez necesitas renderizar contenido en mas de un ´ area con la misma ruta. 44 / 60
45. AureliaJS DEMO Routing • Rutas personalizadas Aurelia nos permite generar Routes personalizados. 45 / 60
46. AureliaJS DEMO Extendiendo HTML • Que es Aurelia tiene un compilador de templates. Existen dos tipos de extensiones: Atributos personalizados Elementos personalizados 46 / 60
47. AureliaJS DEMO Extendiendo HTML • Atributos personalizados Los atributos personalizados extienden el HTML con funcionalidades a˜ nadiendo nuevos comportamientos para elementos existentes. 47 / 60
48. AureliaJS DEMO Extendiendo HTML • Elementos personalizados Los elementos personalizados crean nuevos tags al HTML. 48 / 60
49. AureliaJS DEMO Eventos • Que es Es una ´ util herramienta para cuando se necesita desacoplar componentes y necesita hablar con otro componente. 49 / 60
50. AureliaJS DEMO Eventos • Eventos DOM Debe ser utilizado cuando un mensaje especifico es enviado. https://developer.mozilla. org/en-US/docs/Web/Guide/ Events/Creating_and_ triggering_events 50 / 60
51. AureliaJS DEMO HTTP Client • Que es Aurelia incluye su propia interface para comunicarse con el objeto XMLHttpRequest. Tiene la mayor´ ıa de los verbos est´ andares. adem´ as incluye jsonp. Cuando realizas una petici´ on, este retorna una promesa con el objeto HttpResponseMessage. Implementaci´ on: flickr.js 51 / 60
52. AureliaJS DEMO DEMO =) 52 / 60
53. AureliaJS DEMO Redes sociales 1. Twitter @jessecogollo 53 / 60
54. AureliaJS DEMO Redes sociales 1. Twitter 2. Facebook /jessecogollo 54 / 60
55. AureliaJS DEMO Redes sociales 1. Twitter 2. Facebook 3. Github https://github.com/ jessecogollo/ama 55 / 60
56. AureliaJS DEMO Donde aprender 1. Pagina web oficial http://aurelia.io/ get-started.html 56 / 60
57. AureliaJS DEMO Donde aprender 1. Pagina web oficial 2. pluralsight http://www.pluralsight. com/courses/ building-applications-aurelia 57 / 60
58. AureliaJS DEMO Donde aprender 1. Pagina web oficial 2. pluralsight 3. youtube https: //www.youtube.com/results? search_query=aurelia+js 58 / 60
59. AureliaJS DEMO Preguntas 59 / 60
60. AureliaJS DEMO Gracias !!! =) 60 / 60