Using Renderless Components in Vue.js during your software development.

Vue.js Renderless Components
It’s like advanced internet Legos!
ToThePoint STS / Lars van Herk / 3 june, 2019

1. Build a standard, feature-rich base component
2. Separate the view from the logic
3. Slap it into a publishable library
WHAT’CHA GONNA DO?
INTRODUCTION
We’re gonna do some Vue.

WHY SO COMPLICATED?
INTRODUCTION
Every app works differently
- “Our date pickers don’t look like that!”
- Tweaking a prebuilt component’s layout is
hard or impossible
- Either accept it, or rebuild it

WHAT DO WE NEED FOR THIS?
INTRODUCTION
Slots. Scoped Slots.
https://vuejs.org/v2/guide/components-slots.html

<template>
<section class="my-alert">
<slot name="title">
<h1>This will be the default title!</h1>
</slot>
<slot v-bind:person="person">
Hello, {{ person.name }}!
</slot>
</section>
</template>
<template>
<div id="app">
<my-alert :person="outerPerson">
<template v-slot:title>
<h1>I'm going to replace the default!</h1>
</template>
</my-alert>
</div>
</template>
<template>
<section class="my-alert">
<h1>I'm going to replace the default!</h1>
Hello, Bobby!
</section>
</template>
MyAlert.vue
App.vue
Rendered Output
INTRODUCTION

RENDERING ALL THE THINGS!
INTRODUCTION
- Template part of SFC isn’t required!
- Can be replaced with a render function
- Also known as the ‘h(…)’ function
- ‘render()’: available in ‘script’ section

THE STARTING BLOCKS
BUILDING THE COMPONENT
1. Build the basic component
2. Split logic from rendering
3. Use our old view as a default
BRACE YOURSELVES, CODE AHOY!

BUILDING THE COMPONENT <script>
export default {
data: () => ({
scopeData: {
user: {
firstName: '',
lastName: ''
}
}
}),
watch: {
'scopeData.user': { … }
},
methods: {
updateUser (data) { … },
insertBob () { … }
},
render () {
return this.$scopedSlots.default({
// TODO
});
}
};
</script>
<script>
export default {
data: () => ({
user: {
firstName: '',
lastName: ''
}
}),
watch: {
user: {
handler (val) {
this.$emit('input:user', val);
},
deep: true
}
},
methods: {
insertBob () {
this.user = {
firstName: 'Bob',
lastName: 'Marley'
};
}
}
};
</script>

WE’RE ALMOST THERE 🎉
1. Build the basic component
2. Split logic from rendering
3. Use our old view as a default

RENDERLESS RECAP
- We’ve got a logic-only component
- Reusable for other ‘views’
- Added a default sample layout
- Based on the same logic layer
📦 Wrap it up and ship it! 📦

WEBPACK TIME, YAY (?)
SHIPPING COMPONENTS

SHIPPING MADE EASY
SHIPPING COMPONENTS
1. SETUP PLUGIN 2. BUILD THE LIBRARY
🎉 ALL DONE 🎉

HEY, WHERE’S THE LINKS?!
ROUNDING UP
GitHub Project:
github.com/larsvanherk/vue-renderless-demo
Adam Wathan’s original post:
adamwathan.me/renderless-components-in-vuejs/
Get in touch:
- @LarsVHerk & @ToThePointIT

🎉 Thank you! 🎉
ToThePoint STS / Lars van Herk / 3 june, 2019

Using Renderless Components in Vue.js during your software development.

Recommended

More Related Content

What's hot (20)

Similar to Using Renderless Components in Vue.js during your software development. (20)

Recently uploaded (20)

Using Renderless Components in Vue.js during your software development.