AureliaJS - Speaker Deck

Slide 1

Slide 1 text

AureliaJS DEMO AureliaJS Jesse Javier Cogollo Alvarez Developer by passion email: [email protected] MedellinJS August 19, 2015 1 / 60

Slide 2

Slide 2 text

AureliaJS DEMO Contenido AureliaJS DEMO 2 / 60

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

AureliaJS DEMO Caracteristicas 1. Forward-thinking Escrito con ES6 y ES7. se integra con Web components. no tiene dependencias externas (excepto polyﬁlls). 4 / 60

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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 eﬁciente para observar cada propiedad. Object.observer 6 / 60

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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 conﬁguraci´ on? Aurelia maneja una convenci´ on simple. 9 / 60

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 (conﬁguracion gulp). • doc (documentacion). • src (codiﬁcacion). • styles (estilos CSS). • test (pruebas). • README.md (instrucciones para empezar con AureliaJS). 12 / 60

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

AureliaJS DEMO Modulos • Plugins Aurelia permite crear e implementar plugins que se adaptan al Framework. implementaci´ on: index.html animation-main.js 14 / 60

Slide 15

Slide 15 text

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: ﬂickr.js 15 / 60

Slide 16

Slide 16 text

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. . Todo lo que este adentro de esas etiquetas ser´ a administrado por Aurelia. implementaci´ on: welcome.html 16 / 60

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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 eﬁciente al utilizar la memoria y la CPU. Implementaci´ on: welcome.js 18 / 60

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

AureliaJS DEMO Bindings • Ref Es especial para conectar elementos personalizados, utilizando esta t´ ecnica puedes conectar diferentes componentes. Implementaci´ on: form.html 20 / 60

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

AureliaJS DEMO Bindings • Checkboxes Implementaci´ on: form.html 23 / 60

Slide 24

Slide 24 text

AureliaJS DEMO Bindings • InnerHTML podemos hacer binding de los elementos innerHTMl con el atributo innerhtml. Implementaci´ on: form.html 24 / 60

Slide 25

Slide 25 text

AureliaJS DEMO Bindings • textContent Podemos hacer binding de los elementos textContect con el atributo textcontent. Implementaci´ on: form.html 25 / 60

Slide 26

Slide 26 text

AureliaJS DEMO Bindings • Style Podemos hacer binding a los string CSS u objetos en un elemento style. Implementaci´ on: form.html 26 / 60

Slide 27

Slide 27 text

AureliaJS DEMO Bindings • Adaptive binding http://blog.durandal.io/ 2015/04/03/ aurelia-adaptive-binding/ Implementaci´ on: welcome.html 27 / 60

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

AureliaJS DEMO HTML Extensions • repeat $parent Permite acceder a las propiedades de la viewModel. 31 / 60

Slide 32

Slide 32 text

AureliaJS DEMO HTML Extensions • repeat $index Es el Index del ´ ıtem en el array. 32 / 60

Slide 33

Slide 33 text

AureliaJS DEMO HTML Extensions • repeat $ﬁrst Es verdadero si es el primer ´ ıtem del array. 33 / 60

Slide 34

Slide 34 text

AureliaJS DEMO HTML Extensions • repeat $last Es verdadero si es el ´ ultimo ´ ıtem del array. 34 / 60

Slide 35

Slide 35 text

AureliaJS DEMO HTML Extensions • repeat $even Es verdadero si el ´ ıtem es un n´ umero par. 35 / 60

Slide 36

Slide 36 text

AureliaJS DEMO HTML Extensions • repeat $odd Es verdadero si el ´ ıtem es un n´ umero impar. 36 / 60

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

AureliaJS DEMO Routing • Que podemos hacer rutas estaticas: /contactUs rutas parametriables: /user/:userId/dasboard rutas wilcard: ﬁle*path 38 / 60

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

AureliaJS DEMO Routing • Convenc´ ıon de enrutadores Implementaci´ on: app.js 40 / 60

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

AureliaJS DEMO Routing • pushState si as´ ı lo preﬁeres, puedes remover el hash de la URL. Implementaci´ on: app.js 42 / 60

Slide 43

Slide 43 text

AureliaJS DEMO Routing • Reutilizando un viewModel existente Si alguna vez usted quiere implementar la misma vista para diferentes rutas. 43 / 60

Slide 44

Slide 44 text

AureliaJS DEMO Routing • Renderizando multiples viewPorts Si alguna vez necesitas renderizar contenido en mas de un ´ area con la misma ruta. 44 / 60

Slide 45

Slide 45 text

AureliaJS DEMO Routing • Rutas personalizadas Aurelia nos permite generar Routes personalizados. 45 / 60

Slide 46

Slide 46 text

AureliaJS DEMO Extendiendo HTML • Que es Aurelia tiene un compilador de templates. Existen dos tipos de extensiones: Atributos personalizados Elementos personalizados 46 / 60

Slide 47

Slide 47 text

AureliaJS DEMO Extendiendo HTML • Atributos personalizados Los atributos personalizados extienden el HTML con funcionalidades a˜ nadiendo nuevos comportamientos para elementos existentes. 47 / 60

Slide 48

Slide 48 text

AureliaJS DEMO Extendiendo HTML • Elementos personalizados Los elementos personalizados crean nuevos tags al HTML. 48 / 60

Slide 49

Slide 49 text

AureliaJS DEMO Eventos • Que es Es una ´ util herramienta para cuando se necesita desacoplar componentes y necesita hablar con otro componente. 49 / 60

Slide 50

Slide 50 text

AureliaJS DEMO Eventos • Eventos DOM Debe ser utilizado cuando un mensaje especiﬁco es enviado. https://developer.mozilla. org/en-US/docs/Web/Guide/ Events/Creating_and_ triggering_events 50 / 60

Slide 51

Slide 51 text

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: ﬂickr.js 51 / 60

Slide 52

Slide 52 text

AureliaJS DEMO DEMO =) 52 / 60

Slide 53

Slide 53 text

AureliaJS DEMO Redes sociales 1. Twitter @jessecogollo 53 / 60

Slide 54

Slide 54 text

AureliaJS DEMO Redes sociales 1. Twitter 2. Facebook /jessecogollo 54 / 60

Slide 55

Slide 55 text

AureliaJS DEMO Redes sociales 1. Twitter 2. Facebook 3. Github https://github.com/ jessecogollo/ama 55 / 60

Slide 56

Slide 56 text

AureliaJS DEMO Donde aprender 1. Pagina web oﬁcial http://aurelia.io/ get-started.html 56 / 60

Slide 57

Slide 57 text

AureliaJS DEMO Donde aprender 1. Pagina web oﬁcial 2. pluralsight http://www.pluralsight. com/courses/ building-applications-aurelia 57 / 60

Slide 58

Slide 58 text

AureliaJS DEMO Donde aprender 1. Pagina web oﬁcial 2. pluralsight 3. youtube https: //www.youtube.com/results? search_query=aurelia+js 58 / 60