Taller de Introducción a FuseTools

Transcript

1. @SergioClebal Segundo de Ingeniería de Software Amante de la programación web Cómo crear aplicaciones nativas para Android y iOS con JavaScript
2. Índice del taller • Introducción • ¿Qué es Fuse? • ¿Cómo funciona? • ¿Qué mola tanto de Fuse? • Instalación • Let’s code
3. ¿Qué vamos a crear? Vamos a hacer una aplicación paso a paso sobre la asociación Gumus para poder ver los futuros eventos y obtener información.
4. ¿Qué vamos a crear? Vamos a hacer una aplicación paso a paso sobre la asociación Gumus para poder ver los futuros eventos y obtener información.
6. ¿Qué es Fuse? • Fuse es un conjunto de herramientas de desarrollo de aplicaciones que permite a los desarrolladores y diseñadores trabajar juntos. • Fuse puede ser utilizado tanto para el prototipado como para crear aplicaciones finales totalmente funcionales • Todo ello con la ventaja de trabajar con un rendimiento nativo a la par que aprovechamos la sencillez que nos ofrece Fuse.
7. ¿Qué es Fuse? • Fuse actualmente está en beta y la última versión es la 0.29. Cuando encontré Fuse, la versión 0.9 estaba recién salida del horno. • Fuse Tools es totalmente gratis. Según los creadores de Fuse también será gratuito cuando salga la versión estable. • En un futuro se espera que sea código abierto.
8. ¿Cómo funciona Fuse? • Fuse usa UX Markup -basado en XML-, un lenguaje creado por ellos para crear interfaces nativas, impulsada por datos, responsive y con su principal mira puesta en las animaciones para crear una suave interacción con el usuario. • La IU son finalmente renderizadas utilizando elementos nativos, OpenGL o una combinación de ambos. • Fuse es rápido gracias a que utiliza el lenguaje Uno (también creado por ellos) el cual es un dialecto de C# que compila a C++ para conseguir un rendimiento nativo.
10. ¿Cómo funciona Fuse? • En la parte lógica de la aplicación, Fuse utiliza un framework JavaScript llamada FuseJS (sí, se rompieron la cabeza con el nombre). • CommonJS • Se comparte el mismo código tanto para iOS como para Android. • No se compila a ningún otro lenguaje, utiliza el motor V8 y de esta forma aprovecha todas las ventajas de JavaScript. • Utiliza Observable, veremos más adelante lo que son. • Se puede incorporar código de otros lenguajes como Uno, Java, Objective-C, etc.
11. ¿Qué mola tanto de Fuse?
12. ¿Qué mola tanto de Fuse? El simulador muestra en tiempo real los cambios en el código
13. ¿Qué mola tanto de Fuse? El simulador muestra en tiempo real los cambios en el código
14. ¿Qué mola tanto de Fuse? Es muy sencillo de aprender, tanto UX como JavaScript
15. ¿Qué mola tanto de Fuse? Es muy sencillo de aprender, tanto UX como JavaScript
16. ¿Qué mola tanto de Fuse? Total control del diseño
17. ¿Qué mola tanto de Fuse? Total control del diseño (sin quebraderos de cabeza)
22. Un poquito de JS • JS es un lenguaje duck typing. Las variables se declaran con la palabra reservada var. • El ; es opcional. En JS casi todos son objetos que se tratan con arrays asociativos. Es lo mismo obj.x que obj.[‘x’]. • Dado a que casi todo en JS es un objeto, podemos pasar funciones como parámetros. Posibilidad de callbacks functions.
23. Un poquito de JS
24. Instalación • Para descargar tenemos que irnos a fusetools.com/downloads e instalarla. • Podemos utilizar tanto Atom como Sublime Text. • Fuse proporciona un botón en el panel de Fuse para instalar los plugins necesarios en Sublime Text. • En Atom es necesario buscarlos en Packages.
25. Comunidad Fuse Slack 1667 miembros | 19 somos de habla hispana
26. ¡Al lio!
27. ux:Name ux:Name es el identificador único de un elemento, no puede ser repetido.
28. ux:Name ux:Name es el identificador único de un elemento, no puede ser repetido.
29. ux:Class Crea una clase de un elementos que puede ser usado llamándolo como una propia etiqueta la cual heredará las propiedades del padre.
30. Navegando entre vistas
31. Navegando entre vistas
32. Navegando entre vistas router.goto(gumus);
33. Navegando entre vistas router.goto(gumus); Animación al destruir la vista
34. Navegando entre vistas router.goto(gumus); Animación al destruir la vista Animación al crear la nueva vista
35. Navegando entre vistas
36. Navegando entre vistas router.push(gumus);
37. Navegando entre vistas router.push(gumus);
38. Navegando entre vistas router.push(gumus);
39. Navegando entre vistas router.push(gumus);
40. Observable
41. Observable Un Observable representa un valor que se puede observar
42. Observable Un Observable representa un valor que se puede observar
43. Observable Un Observable representa un valor que se puede observar
44. Observable
45. Observable evento1 eventos
46. Observable {“id":"1","titulo":"hello", "descripcion":"itsme","imagen":"je"} evento1 evento1 eventos
47. Observable {“id":"1","titulo":"hello", "descripcion":"itsme","imagen":"je"} evento1 evento1 eventos