Vue.js: Adaptando un enfoque funcional

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

Transcript

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