Vue 3 y Composition API

A patear el tablero

Vue 3 y Composition API

🎯🖖 3️⃣

🐦 @ianaya89

---

🇦🇷 Nacho Anaya

🐦 @ianaya89

• 🎈 Principal Engineer @BalloonPlatform
• 👨‍🚀 Ambassador @Auth0 & @GitKraken
• 🗣 Tech Speaker @MozTechSpeakers
• 🖖 Organizador @Vuenos_Aires

---

🚨

---

🔜 vue-next

---

🤏 🏃‍♂️ 🤯

Smaller + Faster + Easier

---

0️⃣ Re-escrito

---

📝 Simple y Explícito

---

📊 Performance

~120% mas rápido

---

🐒 Monorepo

---

🎁 Paquetes Individuales

---

<br> # ➕ Extensible

---

<br> # 🌳 Tree-Shakeable

Global API

---

📉 10 KB gzipped

v2.x ~20 KB

---

<br> # 🔩 TypeScript

---

🌎 Global Mounting

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.mount('#app')

---

☢️ Reactivity Engine

• 🔚 Object.defineProperty()
• 🔜 Proxy

---

☢️ 🔙 Antes (2.x)

<script>
	export default {
	  data () {
	    return {
		    object: { name: 'Nacho' },
		    array: ['string']
	    }
	  },
	  
	  created () {
		  this.$set(this.object, 'lastName', 'Anaya')
		  this.$delete(this.object, 'lastName')
		  this.$set(this.array, 1, 'new string')
	  }
	}
</script>

---

☢️ 🔙 Antes (2.x)

<script>
	export default {
	  data () {
	    return {
		    object: { name: 'Nacho' },
		    array: ['string']
	    }
	  },
	  
	  created () {
		  this.$set(this.object, 'lastName', 'Anaya')
		  this.$delete(this.object, 'lastName')
		  this.$set(this.array, 1, 'new string')
	  }
	}
</script>

---

☢️ 🔜 Ahora (3.x)

<script>
	export default {
	  data () {
	    return {
		    object: { name: 'Nacho' },
		    array: ['string']
	    }
	  },
	  
	  created () {
			this.object.lastName = 'Anaya'
			delete this.object.lastName
			this.array[1] = 'new string'
	  }
	}
</script>

---

☢️ 🔜 Ahora (3.x)

💀 "Reactivity Caveats"

---

☢️ 🔜 Ahora (3.x)

Map - Set - WeakMap - WeakSet

---

🔗 Multiples v-model

<LoginForm
	v-model:email="email"
	v-model:password="password"
	v-model:rememberMe="rememberMe"
/>

---

🍰 Fragments

🕸 Multiples Root Elements

<template>
	<div>...</div>
	<div>...</div>
</template>

---

🕳 Portals

<Portal target="#my-portal" />

---

🕳 Portals

<!-- App.vue -->
<template>
   <main>
      <router-view />
      <div id="my-portal"></div>
   </main>
</template>

---

🕳 Portals

<!-- Other.vue -->
<template>
   <main>
      <h1>Hola!</h1>
      
      <Portal target="#my-portal">
	      <p>Este es el contenido del Portal<\p>
      </Portal>
   </main>
</template>

---

🔪 Suspense

<Suspense>
  <template #default>
     <UserList />
  <template>
  <template #fallback>
	  <p>Loading...</p>
  </template>
</Suspense>

---

🛣

---

---

🕺🏿🕺🏿🕺🏿🕺🏿 ⚰️ Class API

---

---

🕺🏿🕺🏿🕺🏿🕺🏿 ⚰️ Function API

---

---

λ 📦 Composition API

---

📦

📦📦

📦📦📦

ƛ Composicion flexible basada en funciones

---

👀 Reactivity API

---

👀 Reactivity API

import { ref } from 'vue'

const num = ref(0)
console.log(num.value)

const increment = () => (num.value += 1)
document.body.addEventListener('click', increment)

---

👀 Reactivity API

import { ref, watchEffect } from 'vue'

const num = ref(0)

const increment = () => (num.value += 1)
document.body.addEventListener('click', increment)

watchEffect(() => (
	document.body.innerHTML = `num is ${num.value}`
))

---

👀 Reactivity API

import { reactive, computed } from 'vue'

const state = reactive({ 
	count: 1,
	double: computed(() => state.count * 2)
})

---

👋 Hello Vue3!

setup(props, context)

---

<template>
	<h1>Num is {{ num }}</h1>
  <button @click="increment">+</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const num = ref(0)
    const increment = () => (num.value += 1)


    return { num, increment }
  }
}
</script>

---

👋 Hello Vue3!

<template>

  <div>

    <child-component :name="Nacho" />

  </div>

</template>

---

👋 Hello Vue3!

<template>
  <div>
    <h1>Hola {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  props: { name: String },
  
  setup(props, context) {
    const { name } = props
    
    return { name }
  }
}
</script>

---

👋 Hello Vue3!

export default {  
  setup(props, context) {
    console.log(props)
    
    context.attrs
    context.slots
    context.refs
    context.emit
    context.parent
    context.root
  }
}

---

♻️ Dynamic Lifecycle Injection

---

♻️ Dynamic Lifecycle Injection

import { onMounted, onUpdated } from 'vue'

export default {

	setup () {
	  onMounted(() => console.log('Mounted'))
	  
  	  onUpdated(() => console.log('Updated'))
	}
	
}

---

♻️ Dynamic Lifecycle Injection

import { onMounted } from 'vue'

export default {

  setup () {
  
    // attachar un hook para otro componente
    onMounted(() => console.log('Mounted...'), otherComponent)	  
  }
  
}

---

🙇‍♂️ Motivación

• Escalabilidad
• Inferencia de Tipos
• Organizacion
• Performance
• 👉Logic Composition👈

---

📦📦📦 Logic Composition

---

📜 Patrones Actuales

• Mixins
• HOC
• Renderless Components

---

📦 Logic Composition

import { ref, onMounted, onUnmounted } from 'vue'

export default function useMousePosition() {
	const x = ref(0)
	const y = ref(0)
  
  function updatePosition(e) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => window.addEventListener('mousemove', updatePosition))
  
  onUnmounted(() => window.removeEventListener('mousemove', updatePosition))
  
  return { x, y }
}

---

📦 Logic Composition

<template>
  <div>Position {{ x }} {{ y }}</div>
</template>

<script>
import useMousePosition from './useMousePosition'
import useOtherLogic from './useOtherLogic'

export default {
  setup() {
    const { x, y } = useMousePosition()
    const other  = useOtherLogic()
    
    return { x, y, other }
  }
}
</script>

---

🙀 SE ROMPE TODO!

---

---

---

🍾 NO SE ROMPE NADA!

---

Composition API

🤝

Options API

---

✅ Composition API

• Aplicaciones / componentes grandes
• Equipos grandes
• Compartir / reusar codigo
• Soporte TS

---

👨‍💻 Como usarlo?

<br>

$ vue create my-app
$ vue add vue-next

---

---

📺 Demo

---

🚀 github.com/vuejs/vue-next

---

👉 vue-composition-api-rfc.netlify.com

---

📢 github.com/vuejs/rfcs

---

Nacho: "When Vue 3.0 will be ready?"

Evan: "When it’s ready"

---

📅 Q4 2019 (?)

---

📅 Q4 2019 👉 Alpha

---

📅 Q1 2020 👉 Beta

---

📅 Q2 2020 👉 RC (?)

---

Gracias! 👏

🐦 @ianaya89

---

👇 Preguntas?

🐦 @ianaya89

---

👨‍🏫 Capacitaciones Avanzadas

🐦 @ianaya89