En esta ocasión estaremos compartiendo con ustedes nuestra experiencia y conocimiento sobre el framework javascript Vue.js. Les brindaremos una introducción a los principales conceptos del framework, así como a diferentes tecnologías relacionadas al mismo como Vuex, Vue Router y TypeScript. Durante el evento estaremos refactorizando una pequeña aplicación haciendo uso de algunas de las prácticas recomendadas por el framework. Analizaremos además cuáles son los principales conceptos de Programación Funcional aplicados en Vue.js y la importancia de cada uno de ellos para obtener una aplicación robusta y con un diseño sólido

1. Vue.js: Adaptando un enfoque funcional.

2. Agenda
● Bibliotecas/Frameworks Javascript Modernos
● Historia
● Ecosistema
● Qué es Vue.js?
● Principales Características
● Introducción a Vuex
● Testing
● Aplicaciones Móviles
● Futuro de Vue.js
● Demo

3. Bibliotecas/Frameworks Javascript Modernos
Angular React Vue
Github Stars 42,782 115,870 119,570
Maintainers Core Team + Comunidad
Last Update: 2018-11-20
Contributors 778 1,263 215
Initial Release 2010(8 years ago) 2013(5 years ago) 2014(4 years ago)

4. Evan You
Creator of @vuejs,
Previously @meteor & @google
Historia
2016
7.6K
2017
37.6K
2018
120.2K
+219,7%
2016
0.21m
2017
1.78m
2018
9.72m
+446.0%
2017
84K
2018
355K
+322.6%

5. Ecosistema
Core Library
State Management Library
Router Library
Standard Tooling
Browser devtools extension
Official documentation site

6. “Vue (pronounced /vjuː/, like view) is a progressive
framework for building user interfaces. Unlike other
monolithic frameworks, Vue is designed from the
ground up to be incrementally adoptable.”
Qué es Vue.js?

7. Principales Características
● Virtual DOM
● Data Binding
● Component Based
● Templates
● Directives
● Fast
● Simple

8. Introducción a Vuex

9. Testing
Jest Mocha KARMA

10. Aplicaciones Móviles

11. Empresas que usan Vue.js
Facebook

12. Futuro de Vue.js
● Versión 3.0 CLI
● 2.x-Next branch
○ Se dirigirá solo a los ¨Evergreen Browser¨ para aprovechar las características nativas de ES2015.
○ Reescritura del concepto Reactivity usando Proxies en lugar de Object.defineProperty().
○ Será mantenida en paralelo con la 2.x branch.
● Extender el uso de TypeScript en el código fuente.
● Mejoras en el rendimiento de carga.
● Reemplazo de “mutations” usando async/await dentro de los “actions”.
● Mejoras en la trazabilidad de errores.

13. Demo!

14. Questions?

15. ¡Presenta tus ideas en Quito Lambda!
Si tienes algo interesante que presentar, ¡ven a presentar con nosotros!
Programación Funcional, DevOps, Cloud Computing, IaaS, Desarrollo Web, React, WebGL, ReasonML
y cualquier cosa interesante
info@stackbuilders.com

16. Stack Builders
Presenta tus ideas
info@stackbuilders.com
Trabaja con nosotros
stackbuilders.com/join
Facebook: /QuitoLambda
Twitter: @QuitoLambda