VueJS 3.0

// Samuel Burbano
const socials = {
  twitter: "@iosamuel",
  twitch: "iosamuel",
  youtube: "iosamuel",
  github: "iosamuel",
  web: "iosamuel.dev"
};

Un vistazo

Samuel Burbano

// Samuel Burbano
const socials = {
  twitter: "@iosamuel",
  twitch: "iosamuel",
  youtube: "iosamuel",
  github: "iosamuel",
  web: "iosamuel.dev"
};

@IOSamuel

💻 Senior Frontend Engineer

💛 JavaScript Lover

🔥 Web Enthusiast

💚 Vue Evangelist

Vue.JS 3.0

Progressive Framework

Declarative

Rendering

Component

System

Client-Side

Routing

State

Management

Many

More

Vue.JS 3.0

Diversidad de usuarios

  • Principiantes que progresan de HTML, CSS y JavaScript
  • Profesionales dejando jQuery
  • Veteranos migrando de otros framework
  • Backend developers buscando una solución de frontend ligera
  • Arquitectos eligiendo la fundación para toda una organización
Vue.JS 3.0

Metas de Vue 3

  • Hacerlo más rápido
  • Hacerlo más pequeño
  • Hacerlo más mantenible
  • Hacerlo más native-friendly
  • Hacer tú vida más fácil 
Vue.JS 3.0

Pequeño

Hacer tú vida más fácil

Rápido

Fuerte

Treeshaking

TypeScript

Virtual DOM

Reactivity Sytem

Composition API

Vue.JS 3.0

Pequeño

Treeshaking

TypeScript

Vue.JS 3.0

Vue 2

Vue 3

Pequeño

Treeshaking

TypeScript

Vue.JS 3.0

Vue 2

Vue 3

Vue 2
https://v2.template-explorer.vuejs.org/
Vue 3
https://template-explorer.vuejs.org/

Pequeño

Treeshaking

TypeScript

Vue.JS 3.0

Monorepo

Pequeño

Treeshaking

TypeScript

Vue.JS 3.0

Pequeño

Treeshaking

TypeScript

Vue.JS 3.0

Rápido

Virtual DOM

Reactivity Sytem

Vue.JS 3.0

V

Object -> {}

Rápido

Virtual DOM

Reactivity Sytem

Vue.JS 3.0

Rápido

Virtual DOM

Reactivity Sytem

Vue.JS 3.0

Vue 2

Vue 3

120-130% más rápido

Rápido

Virtual DOM

Reactivity Sytem

Vue.JS 3.0

Object.defineProperty()

Rápido

Virtual DOM

Reactivity Sytem

Vue.JS 3.0

Proxy()

100% rápido

50% menos memoria

Rápido

Virtual DOM

Reactivity Sytem

Vue.JS 3.0

Proxy()

Rápido

Virtual DOM

Reactivity Sytem

Vue.JS 3.0
Performance Comparision Vue 2 & Vue 3

Rápido

Virtual DOM

Reactivity Sytem

Vue.JS 3.0
Performance Comparision Vue 3 & Other Frameworks

Rápido

Virtual DOM

Reactivity Sytem

Vue.JS 3.0
Composition API es puramente aditiva y puede ser usado en conjunto con la Options API.

Es una avanzada API alternativa que soluciona las limitaciones actuales de la Options API.

 

https://composition-api.vuejs.org/

Fuerte

Composition API

Vue.JS 3.0

Options API

Fuerte

Composition API

Vue.JS 3.0
Options API: Limitaciones
  • Organización de código
  • Re-usar lógica
  • Soporte para TypeScript

Fuerte

Composition API

Vue.JS 3.0
Organización de código

Fuerte

Composition API

Vue.JS 3.0
Organización de código

Fuerte

Composition API

Vue.JS 3.0
Organización de código

Fuerte

Composition API

Vue.JS 3.0

Fuerte

Composition API

Vue.JS 3.0

Fuerte

Composition API

Vue.JS 3.0

Fuerte

Composition API

Vue.JS 3.0

Fuerte

Composition API

Vue.JS 3.0

Fuerte

Composition API

Vue.JS 3.0

Ejemplo!

https://github.com/iosamuel/rickandmorty

Fuerte

Composition API

https://rickandmorty.iosamuel.dev/
Vue.JS 3.0

Otros!

  • Global API
  • Fragments
  • Portals
  • Suspense
  • Simpler Render Functions
  • Optional Props
  • Functional Components
  • v-model Updates
  • Mucho más

El uso de Vue 3 en 2022 casí se triplicó

npm weekly downloads

Enero 2022: 

422736

Enero 2023: 

1240932

¡Gracias!

// Samuel Burbano
const socials = {
  twitter: "@iosamuel",
  twitch: "iosamuel",
  youtube: "iosamuel",
  github: "iosamuel",
  web: "iosamuel.dev"
};

Vistazo VueJS 3.0

By Samuel Burbano

Made with Slides.com

Vistazo VueJS 3.0

  • 599

More from Samuel Burbano