Signals

08/22/24 • 26 min

It was teased in the last episode already and here it - Michael and Alex talk about the current hype in the front end development community: Signals. But if you as a Vue developer don't feel hyped around it and maybe even didn't hear much around it, fear no more - that is normal and will be explained in the episode too.

Join the two Vue experts covering the history of Signals, what's behind the term and how they work in Vue.js and other major frameworks.
And of course, the TC39 proposal to add Signals to the language itself wasn't forgotten either.

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(01:06) - Signals and Reactivity
(04:41) - Functional Programming
(10:51) - Signals in Modern Frameworks
(11:48) - How Signals look like in other Frameworks
(14:20) - Signals in Vue
(15:20) - Signals vs. refs?
(17:51) - A Standard for Signals
(21:54) - Benefits of Signals in the language
(25:16) - Vue.JS DE Conf 2024

Links and Resources

$10 off for Michael's Nuxt Tips Collection* with this link and the code DEJAVUE
10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
DejaVue #E022 - Reactivity in Vue
Haskell
OCaml
Elixir
Elm
Zod
Valibot
Solid.js
Building solid-like Signals in Vue with shallowRef
Vue Docs on Signals
TC39 Proposal
VueUse

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(01:06) - Signals and Reactivity
(04:41) - Functional Programming
(10:51) - Signals in Modern Frameworks
(11:48) - How Signals look like in other Frameworks
(14:20) - Signals in Vue
(15:20) - Signals vs. refs?
(17:51) - A Standard for Signals
(21:54) - Benefits of Signals in the language
(25:16) - Vue.JS DE Conf 2024

Links and Resources

$10 off for Michael's Nuxt Tips Collection* with this link and the code DEJAVUE
10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
DejaVue #E022 - Reactivity in Vue
Haskell
OCaml
Elixir
Elm
Zod
Valibot
Solid.js
Building solid-like Signals in Vue with shallowRef
Vue Docs on Signals
TC39 Proposal
VueUse

Previous Episode

Reactivity in Vue

Join Alex and Michael on a talk about a key topic in Vue.js - the reactivity system. Before diving into how it works in Vue 3, reactivity in Vanilla JS is covered. Then, the differences between the major Vue versions are discussed, showing an astonishing evolution in terms of DX but also performance when it comes to reactivity.
Of course, the ref vs reactive topic can’t be left out, and neither can signals and vapor mode.
Sounds interesting? Then tune in!

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(01:38) - What is Reactivity in general?
(03:47) - Reactivity in JavaScript?
(07:45) - Reactivity in Vue 1
(09:08) - Changes to reactivity in Vue 2
(10:47) - Reactivity system and caveats in Vue 2
(15:10) - Vue 3 Reactivity with Proxies
(19:00) - No IE11 support
(20:22) - Ref and Reactive in Vue
(25:12) - shallowRef, triggerRef and more
(28:23) - Why not shallowRef by default?
(31:24) - Vue's reactivity system as a standalone package
(34:21) - Vapor Mode
(40:52) - Wrapping Up

Links and Resources

$10 off for Michael's Nuxt Tips Collection* with this link and the code DEJAVUE (Release on Aug 5th)
10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
DejaVue #E015 with Evan You
Petite Vue Talk
Debugging Guide: Why Your Vue Component Isn't Updating (and how to fix it)
Marc Backes - Building a Time Machine with Proxies
CanIUse Beowser Usage Stats
Michael Thiessen on ref vs. reactive
Alex's shallowRef guide
Alpine.js
Reactivue - Vue CAPI in React 👀
Arrow-js
Vapor Mode Repo
Vapor Mode Playground

Next Episode

TypeScript and Content Creation (with Matt Pocock)

This episode of DejaVue includes not only knowledge but also a certain degree of magic, as Alex and Michael meet up with the one and only TypeScript Wizard Matt Pocock. Together, they talk about how he became a full-time educator and what the pros and cons are, then of course discussing everything around TypeScript - from Types vs. Interfaces, any vs. unknown, Matt's ts-reset library, Flappy Bird in TypeScript and more amazing nuggets

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(02:08) - How Matt came to join DejaVue
(03:03) - Becoming a full time TypeScript educator
(05:10) - What do you miss when doing full time content creation?
(08:16) - Being an employee vs. self-employed
(14:42) - Why using TypeScript?
(19:59) - TypeScript only for libraries?
(22:40) - Migrating JS to TS
(28:08) - The build/compile step
(33:20) - Types vs. Interfaces
(37:19) - Declaration Merging pitfalls
(41:35) - TS Reset and TS 5.5 improvements
(48:25) - TypeScript enforcing a way of programming
(51:18) - any vs. unknown
(54:25) - Wrapping up

Links and Resources

$10 off for Michael's Nuxt Tips Collection* with this link and the code DEJAVUE
10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
Matt's Truck stream
Badass.dev
NeverThrow
Sentry migrating to TS
Stripe migrating to TS
TS Reset
Dan Vanderkam's PR to TS
TS Flappy Bird
Total TypeScript

DejaVue - Signals

Transcript

Alexander Lichter00:00:00.239

Hey Everybody, and welcome back to DejaVue.

Michael Thiessen00:00:02.879

It's your favorite Vue podcast. You just don't know it yet. I'm here with Alex.

Alexander Lichter00:00:09.199

Hey, everybody. What's going on? I'm Alexander Lichter. I'm a web engineering consultant, part of the Nuxt team, and, also do a little bit of content here on YouTube and Twitch about Vue, Nuxt, a