Svelte Radio

Sponsored by Contentful
Welcome to the new era of content management with Contentful. Say goodbye to the limitations of traditional content systems and hello to a world where collaboration sparks innovation. With Contentful, you’re not just managing content; you’re creating content-first, multi-brand experiences across all channels effortlessly. The best part? It requires zero coding! Empower your teams to collaborate and innovate, delivering impactful digital experiences at scale. Contentful's AI-driven platform not only streamlines content creation but also ensures it aligns perfectly with your brand. Ready for a game changer? Start with Contentful for free today. Unleash the potential of your digital content and drive your business forward. Learn more at contentful.com.

Summary
In this episode of Svelte Radio we sit down with Wout De Puysseleir to talk about his project LiveSvelte. A way to easily use Svelte when building applications using the Elixir framework Phoenix. A match made in heaven!

Recorded on November 21st, 2023

Discussion
Unpopular Opinions
  • Brittney: PNPM SHOULD WORK
  • Wout: TypeScript isn't that great 😬
Picks

Creators & Guests

Host
antony 
Dad / @SvelteJS maintainer / @SvelteSociety co-founder / Svelte Radio host. Born at 341.57 ppm CO2.
Host
Brittney
DS Eng @Provihq 🧜https://t.co/U8JoqVO4Sm 😺https://t.co/5FKTbGIW8d 👩‍🏫 https://t.co/wGvIldEAIe
Host
Kevin A. K.
Co-founder of Svelte Society 🌎 Organizer of Svelte Summit 🏔 Host of Svelte Radio 📻
Guest
Wout
Doing web things - https://t.co/OKco540Gpm- https://t.co/D2OCGhVU1h…- https://t.co/IxaMZasm40

What is Svelte Radio?

Things about Svelte. Sometimes weekly, sometimes not.

Kevin:

Here's a quick word from our sponsor.

Contentful:

Welcome to the new era of content management with Contentful. Say goodbye to the limitations of traditional content systems, and hello to a world where collaboration sparks innovation. With Contentful, you're not just managing content, You're creating content first, multi brand experiences across all channels effortlessly. The best part? It requires zero coding.

Contentful:

Empower your teams to collaborate and innovate, delivering impactful digital experiences at scale. Contentful's AI driven platform not only streamlines content creation but also ensures it aligns perfectly with your brand. Ready for a game changer? Start with Contentful for free today. Unleash the potential of your digital content and drive your business forward.

Contentful:

Learnmore@contentful.com.

Kevin:

Hey, everyone. Welcome to another episode of Svelte Radio, or can we say Elixir Svelte Radio? Who knows? I'm joined by my beautiful cohosts, Britney and Anthony. Hello?

Antony:

Hello.

Brittney:

Yeah.

Kevin:

Hey. What what have what have you been up to? I hear Britney is working on SVGs, and she's not happy.

Brittney:

Am I ever happy when I'm working on anything, banging my head against the wall? I mean, I don't know. I typically like SVGs, but I just I can't get JavaScript to work nicely for me more than the SVGs.

Antony:

Oh, less size of SVGs. Yeah. I've been working on point of sale systems, so potentially not better.

Kevin:

Gnarly. Yeah. I've been I've been ill after Svelte Summit. I got a fever, and I've been knocked out for, like, a week. It's been nice.

Kevin:

Just been laying in bed.

Brittney:

It's like every year for you, you're cursed or something.

Kevin:

I think so. Yeah. And double cursed as well. So they were they were redoing my water pipes in the apartment for 10 weeks, renovating the bathroom. And, we tried running the dishwasher that so we were meant to move in this Friday.

Kevin:

And, we, tried the dishwasher on the Friday, and then we left to come back on the on Saturday to actually move in properly. And there was water on the floor, so now there's water damage in the apartment. So I can move in for another week or 2. Yay. But yeah.

Kevin:

Anyway, that's that's that's a funny story.

Antony:

But you can't wait to get moved in from buying furniture, can you?

Kevin:

Well, actually, no furniture was damaged. So

Antony:

No. But, I mean I mean, you famously don't have any furniture, and you you continue to not have furniture.

Kevin:

Oh, I

Antony:

You just live in a completely barren barren empty room barren empty apartment, I assume.

Kevin:

Maybe I should just have one of those NVIDIA things behind me.

Brittney:

Yeah.

Kevin:

Just That's kind

Brittney:

of like the Swedish style though, like minimalism, IKEA, like, Very

Antony:

I think difference between minimalism and nothing. Minimum means a little. Like, nothing is

Brittney:

It's all on Kevin Day.

Kevin:

Yeah. Sorry, Kevin. I feel I feel like this is, this is trouble today. Alright. So, why are we here today?

Kevin:

No. We're we're here. We we're joined by a guest, Wout. Hello. Welcome.

Kevin:

Hello. How are you today?

Wout:

I'm good. How are you?

Kevin:

Oh, we're we're splendid, except for for the story that I just told about the Yeah. Not be being able to move in. So you're you're here to to talk about Elixir and Svelte because you, you joined the hackathon earlier this year and submitted a really cool package, called Live Svelte. But before we get into to to that, maybe you can tell us a bit about yourself. Like, how did you get started in software development and things like that?

Wout:

Yeah. So I just started when I was younger just as an internist, but, professionally, I would say 8 years ago, and I started doing Django and Python developments. And then, I basically did Django and Python until last year, I would say. And, also, I started doing some Svelte, and, yeah, Vue first, I think, 5 years ago, and then Svelte, like, around 4 or 3 years ago. Yeah.

Wout:

And then in the last year or last 2 years, I've been really interested in Alexa. So that's sort of where, where the story is now.

Kevin:

Cool.

Antony:

So, Alexa, is is that to do with Phoenix Live View? Because I understand my friend was really into it at one point. He also used a spell, actually.

Brittney:

That still doesn't help me. What is Phoenix Live View? What is what is all of that?

Kevin:

Well, I I I think we start with what is Elixir. Yeah.

Brittney:

Okay. So Yeah. Which one first? Chicken, egg? I don't know.

Brittney:

I

Wout:

would I would say you start with Erlang first, but, maybe we should Alright.

Kevin:

Fair enough. So

Wout:

so, like, just briefly, like, Elixir is a language built on top of Erlang and built on top of the Erlang virtual machine or yeah. It's also called Beam. And, it's yeah. How to describe it? It's like functional language.

Wout:

It has very it's they they say it's a fault tolerance, so you can, let it cache, and it can, re heal itself sort of. And it's, has great, concurrency. So that's basically Alexa. So it's I I would say it's like a a more, like, language wise, it's like a more easy, Haskell, I would say. Like, a little bit more easy to understand.

Antony:

So Erlang

Wout:

Erlang was built

Antony:

for concurrency. Right? It's built by Ericsson, the mobile phone company.

Wout:

Yeah. So, originally, it was built to connect phone systems together, and, it was first, like, an internal project at Ericsson. And then they decided to, open source it, and then, like, the it got a little bit popular. But Erlang itself is is not a very nice language to work with. It does some weird works, and Elixir sort of tries to solve.

Wout:

That's why it's, like, a little bit more modern in in a way it tries us to, do some things.

Antony:

Yep. I think I think Elix has revived Erlang a bit because it like you said, it was popular at one point. I remember in 2,005, we hired an Erlang guy, who built this chat system, using Erlang. And we said, cool. You need to hire someone else for your team.

Antony:

And he couldn't find a single person in the UK or outside the UK even who knew Elanck. So it was, interesting.

Kevin:

You should have gone to Sweden. Yeah. Well, exactly the furniture. Right?

Antony:

Well, you don't do furniture at all. Let's be fair. Right? You don't have anything.

Kevin:

Alright. So so Elixir is it's it's a back end, language. Right? You don't write Yep. Front end stuff, obviously, because you can only do that in JavaScript at the

Wout:

moment. So Elixir itself. Yes. So but then, in the past season tiers so okay. A little bit more also information.

Wout:

So Phoenix is sort of the the the web framework for Galaxy. So, like, Django, Ruby on Rails.

Kevin:

Or like SvelteKit for Svelte.

Wout:

Oh, like SvelteKit. Yeah. And the, Phoenix has this, feature or, like, this concept called Live View. And with that, you can build front ends. So and that's also where lifestyle is built on top of, and that's where the name also comes from.

Wout:

So Live View Svelte, life lifestyle sort of Yeah.

Kevin:

Makes sense. So so what is live view? Like, do can you explain how it works, sort of?

Wout:

Yeah. So the the way I would explain it is if you if you're familiar with back end templates and how you would just render an HTML templates. And after that, you don't really have any connection with the website anymore. You just have it on on in your browser, and you can do API requests and stuff, but that's different. Live view sort of keeps that connection alive.

Wout:

So it's it keeps the web socket connection alive, and you can build sort of these templates that are declarative a little bit like how Svelte does it. So, actually, there's a lot of overlap there, where, let's say, you click a button, it would send the request back over the WebSockets to, live view on the server. And then it would rerender the template, but it would do it sort of in a smart way, but it only sends the HTML that has changed, and then it gets updated, in the clients. And so you have this, like, sort of reactivity with, the with the server, and you don't really have to use any front end language. It's it's pure Alexa, or pure, LiveView.

Wout:

And like I said, the template that you're, building is very declarative, like in Svelte. So you have if statements, for loops, that kind of stuff. You don't have to, say, okay. Now do this or do that. It's sort of just with message passing where if you click a button, a message gets passed back, and then the HTML gets updated, back over the WebSockets and then updated in the front end.

Wout:

Sort of the concepts.

Kevin:

It's it's it's definitely interesting. Like, it's a different way of of doing interactivity. Right? It's, like, in in the in the Svelte world, we would click a button, and it would kinda you you have state on the client. But in in LiveU, you keep all the state on the server, kind of.

Kevin:

Right?

Brittney:

Yeah. So

Kevin:

Exactly. That that's that makes it, I suppose that that would make it easier to to reason. Right? Because you're not copying the state back and forth all the time, like you would in a JavaScript application. I I guess, downsides here, you you need the the latency to the server, right, is is always there.

Kevin:

Right? Because every click, you would have to send a a message back, and then that would, in turn, send a a payload back with the difference of of what's going to render, I suppose.

Wout:

Yeah. Yeah. Exactly. So the latency itself is fine, but, like, let's say you lose your connection, then stuff might not update anymore. So that that can be sometimes an issue.

Wout:

But in practice, it's actually very, very nice to work with and very responsive. But it's there's a big difference to something like SvelteKit, where you don't have that local, state. You can have your SvelteKit application completely local, and things sort of still work. And, you can you can interact with things, but that's not the case with Livefear.

Kevin:

Alright. Cool. So you you've been working on, well, for for the hackathon, you you worked on this live Svelte thing. Maybe you can talk a bit about, like, what what what inspired you to use Svelte? Like, why would you, do you need Svelte in an Elixir app?

Kevin:

Let's let's start there without Phoenix. Like, why would you want a a front end framework for for when you're working in Elixir?

Wout:

Yeah. So there there is many cases where you want some JavaScript interaction, and, there are ways to do that in in Live View and in Phoenix. So they have this concept of hooks where it's not the same as, like, in the front end world hooks, but it's it's just a way to, hook into the life cycle functions of, of, Live View on the on the, on the front end. So you have your mounts and you have your updates, and you have your list of stores. So whenever the mount is just that's obvious, but then the update is whenever in the Live View, changes.

Wout:

So whenever your your states in life view changes. And, these hooks, they're very I mean, they're they're not very front end mod modernized, I would say. So if you're working with Svelte and then you're going back to Hooks, you feel like you lost a little bit of functionality there, where you're really writing you're pure purely writing JavaScript, and you you can do some stuff with it, but it's it's more hard to import a package or just have a declarative template that does something like you you click a button and it it just does something, and then it just works. You don't have to like, with hooks, you would have to do a little bit of jQuery kind of behavior, I would say.

Kevin:

Right.

Wout:

And and that's that didn't feel right to me. So that so because I'm coming from, like, a Svelte, some Svelte experience, and then then I had this. I was like, oh, man. This is like it's so good because you're so close to the server and you have all this, like, you don't really have to make an API. That's a big thing.

Wout:

You can just call your database and you can make your API. You can make it in Alexa, and you can just, make the functions and everything. And but you don't have to have this, this API or this GraphQL, which you can do, of course. There there's ways to do it. I mean, it's very easy.

Wout:

But, like, it's it's a very nice way to to work that way. So I kinda wanted both worlds together and that's, when I found, this prototype, by, Ryan Cook. And he, he did it in a, in a little bit of a different way, but the concept is the same where you, you have these components and these are Svelte components and you insert them into your Live View. And they work sort of seamlessly with Svelte and Live View together, but I'll talk a bit about that later. But that's sort of where the idea came from.

Wout:

Like that frustration of I have to go back here a little bit to to what's what is old and I wanna have the best of both worlds.

Kevin:

Yeah. So you want the the the the developer experience of writing declaratively Yeah. All the time rather than just most of the time. Yeah. Alright.

Kevin:

So, this this Live Svelte thing, how does it work? Or does that make sense to ask now, or or are there other parts in between that we should explore? We're all pretty pretty elixir noobish here. So

Wout:

Let's just first say what it does, and then maybe after that, we can do other work because it's still not very clear. Well, for me, it's clear, but I think that thing is not clear. So, so just imagine that your Svelte so you have your Svelte components and you can have multiple components, and that's sort of your main components. And your export props of your main components are server reactive. So whenever something changes on the server, then your export prop would also change, which is something we're using in Svelte.

Wout:

If you, you're having a child component and you're just making you're updating it that way. And that's that's something you're used to, but you're not used to it being server reactive with, you're not being used to it being reactive with the server. And so these things, they can they can be influenced from other users, for example. So, like, let's say you have one user doing something that changes in the database, and then you have an event. And in Alexa, it's all relatively easy to do this kind of stuff.

Wout:

And then your, your Svelte component would update automatically. And and what you can do with that is also that you can combine these states together so you can have local state and server side states. So since you're in an Svelte environment, you can use your local variables, like how you would use Svelte in a normal way, and you can use these exported, server, variables. And so you can create

Brittney:

Right.

Wout:

This really cool, like, interactive, very easy to understand, features, where you don't really have to think about okay. Yeah. And now I need to, update something on the server. So I need to have an API that does something. And the only thing you have to do is send an event with maybe some data attached to it, and it's optional.

Wout:

And LiveVue takes care of the rest. And your server your exported server, obviously, they would they would update automatically. So you would not, for example, like, let's say you have, a number. You would not do, you would not mutate that number in the, in the client. You would actually send an event.

Wout:

That event gets sent to Live View and Live View updates the number and the number automatically updates in the client. So you would have this sort of circle where you're you're sending events this way to the server and your and your props gets updated automatically on the other side. It's sort of the thing that it's doing.

Kevin:

That's cool. So it binds together like the LiveView diffing thing and Svelte Yep. Or as a template language then. Oh, that's pretty cool. So I I I have an idea here.

Kevin:

So does does it mean, like so LiveU, does that make it easy to build kind of these, what would you call them, multi multiplayer experiences? Like, say, for example, Google Docs. Is that something that you could build using this pretty easily?

Wout:

Yep. Those those kinds of things you so Live View by itself's, default is just by per user, per connection. But you can, you can sort of combine the Live View together. So for like, you can have, you can subscribe to events, and then they can be updated, in each live view. So you can have these sort of multiplayer experiences pretty easily.

Kevin:

Yeah. Interesting. Because we're, we're, thinking about doing a, a VR meetup. You know, thinking so we're we're gonna use, like, a so I don't know if you you've heard of Threlt. It's like the I always mix these up.

Kevin:

Is it 3 JS or is it d 3? Or what's it called? 3 JS.

Wout:

3 d Oh, d three is the, is the Yeah. Visualization. So

Kevin:

Yeah. I always mix these up, and Grisha always pings me afterwards. And he's like, oh, that's not the one. It's the other one. Anyway, so there's they have this new XR module for for working in AR and VR.

Kevin:

So I was planning on maybe we can build, like, a a virtual kinda 3 d environment where people can walk around. And then I guess it would make sense to use something like Live View there to sort of, like, bind everyone's position in the room together in a in a way. I was really I don't know.

Wout:

3 JS.

Kevin:

It's 3 JS. Okay.

Brittney:

Yeah. It's 3 JS.

Kevin:

The it's it's hard to it's hard to keep them apart.

Brittney:

Yeah. I don't know. I think they're aren't they very similar technologies too?

Kevin:

Not really. Because one is about, like, working with, graphs and stuff or motion. I I don't remember. May well, maybe you know. Yeah.

Brittney:

I know. It's kind of, like, blowing my brain. I'm trying to think of, like, how you might do that in Sveltekit. And then I was kind of thinking, like, is this kind of, like, streaming? But streaming is about data going across the wire.

Brittney:

And I'm like, all of this like this is why I stick to front end.

Kevin:

Yes. This is

Brittney:

why I like my mobile. That's

Kevin:

that's kind of the thing though with if you use something like a live view. I I I mean, you would have to still create the back end for it, but you would at least get the the multiplayer part automatically, sort of. So that's interesting. I know there's there's a project called, Party Town. Yep.

Kevin:

I think it's called. Yeah. Party Kit. PartyKit.

Brittney:

PartyKit. PartyTown is the one that you put into, offload your third party services from the browser. So you put them onto a different Yeah.

Kevin:

It's Party Kit. I'm thinking about Party Kit. So that's that's completely about doing multi multiplayer, experiences. But I think it's it's like a that's a company that runs that, and so it would be more fun to build it myself or ourselves, I guess, depending on who who is

Brittney:

is Sunil Pai's company. Right?

Kevin:

Yep.

Brittney:

Yeah. I know what you're talking about.

Kevin:

Anyway yeah. So that that was just like an interesting because I I I hadn't thought about I was planning on using Party Kit for for that multiplayer bit, but maybe maybe I should actually start learning Elixir because I I've been wanting to learn Elixir for years. Like, it's it's been very enticing to to every time I I see a video or or talk about it, I get very excited, and I wanna learn it. So may maybe maybe this will be the thing that actually makes me jump in and actually learn.

Wout:

We'll see.

Brittney:

Things like that in in our world where you just wanna learn it, and there's not enough time in the day.

Kevin:

And I just saw, also a bit of a tangent, but the do you guys know about Elm? It's like the know

Brittney:

about Elm.

Kevin:

Functional programming language for for for the web. It compiles to JavaScript. But there's a new one called the Rocklang, I think, That's supposed to be, some, I guess, a successor of of sorts. I don't know. We'll see.

Kevin:

But I'm good with that.

Brittney:

It was the whole Rust, like, thing. People wanted to learn Rust.

Kevin:

Oh, yeah. There's Rust as well.

Brittney:

I'm I'm good. I'm good in I have enough trouble with JavaScript. I don't need another language.

Kevin:

Yeah. Yeah. I I always feel like well, I tried using Elm for a bit, and it it was just too much, boilerplate for me. I found it to be pretty pretty tough to work in, but that's that's probably on me. But yeah.

Kevin:

Anyway so, Liefsfeldt, you you can can you just, like, replace the the phoenix like, the the, I guess, the the template parts of Phoenix using that?

Wout:

Yeah. So that's that's the really nice thing. So because these templates, they they're very similar in functionality, actually. So Svelte is very declarative, and then these Live View templates are very declarative. And so you don't it's it's not imperative where you have to say, do this, do that.

Wout:

It's it's just you write it down like as in if statements and and and for loops, basically. And so you can, in in, Elixir or Infinix, you also have this, components concepts just like in in Svelte, basically, where you can import Svelte, you can import, Elixir codes and that kind of stuff. And LiveSelt is basically a component in in you you would just import, the the components that replaces some some part of your Live View, and, it the codes would not look so different from it. And so you you of course, the syntax is different, but the the general structure is very similar. So, yeah, that's so that's the way I, I would use it.

Wout:

So you you have maybe some piece of code that he wants a little bit of more client side interaction, and you remove it and you replace with the components, and you you copy over the the templates, codes, and you change the syntax. And that's basically it. And I

Kevin:

and Oh, that's pretty nice. Mhmm. Yeah. I I guess Svelte being just sort of HTML, it makes it pretty simple to just copy copy it over.

Wout:

Yep.

Kevin:

Yep. Yeah. Exactly. Yeah. I I I had I had a brief look at at at the library, and I I saw so the way it looks like in in LifeSwell that you, that you push, events up is you call a function.

Kevin:

You get, like, a a prop called push event. Is that is that right? Something like that that you call

Wout:

on the

Kevin:

on the client. Yeah.

Wout:

So there are 2 ways to do it. So you have, push events, which is, yeah, is also an export at prop. Or maybe now now it's like something you just import. And this is just a function you can call with. It should have a, a message name.

Wout:

So it can be increased number if you have a number. But that's a very simple example. And then you can also send some data along with it, optionally. You don't have to, but you can. And then, that sends the message over the WebSockets.

Wout:

And then in Elixir, you have to capture it. So you have you have, basically, a function that captures certain events, and then you can do do whatever you want with it. So then you're in your back end language and you can create something in the database or, update the number or or whatever he wants. And so that's one way of doing it. So you can, do it with a function.

Wout:

You can just call it function or you have these, these attributes you can attach to HTML. So you have, like, things click, for example. So b h x dash click, and you add it to your button. And Right. And you assign it the the message name.

Wout:

So the, or the messages you want to send, and you can also add values to that. So you have Phoenix value. And so if you then click that button, it also works. It's the same thing.

Kevin:

So it's interesting.

Wout:

Yeah. So you don't have to use the sort of the imperative way of calling a function to do something. You can just say, what what it should do in inside HTML itself. And that's also a nice thing. You can just copy over in live view this, this code and to this cloud components, and it would still work.

Wout:

It's just the same.

Kevin:

Nice. And so looking looking at the, the features here, you have support for Tailwind out of the box, I think.

Wout:

That's that's great if you're

Kevin:

a Tailwind user. I am nowadays. So I didn't used to be, famously, but, we all get there in the end, I think.

Wout:

Yeah.

Kevin:

But then there's also so so I'm looking at the the features here, and there's, something called dead view. I guess that would make way more sense for someone that knows what how Phoenix LiveView works. So is that what you were talking about earlier when you lose the connection?

Wout:

Not not, specifically. So, in in because you have Livefuse, Deadfuse is is just another name for a static template. So in

Kevin:

Oh, okay.

Wout:

Yeah. So So in in Ruby on Rails or something, you have just templates that you sent. So you can also just have these components, these lifestyle components inside your, static templates because it is just a Phoenix component. And Phoenix components are supported across Live View and Dead Views. So that's just what a dead view is.

Wout:

But, yeah, it's just a fancy name for just a static template.

Kevin:

Yeah. What what about, like, there's something called live JSON. Is is that what is that?

Wout:

Yes. So that is a little bit a little bit more specific to because so the problem is that if you have a lot of data, and you're you're always updating, like, let's say, because like, let's say you're making a, a big game with a lot of data, like, there's a board and like there's stuff going on. And every time that the game updates, then you would send you would have to send the entire game states across the website by default. And, live JSON is a is a way to, to make a diff of your previous game states and your new game states and just send over the diff. And so you have these really small, messages that you would be sending over instead of the entire game states every single time.

Wout:

So live live JSON is something that's, that is in the, Elixir community that you can that's it's another package, basically, and you can

Brittney:

Right.

Wout:

Integrate with it. So that's That's really cool.

Kevin:

Mhmm. Like, I I I did not know that was thing. So that makes it easier to that that makes it even easier probably to make, like, a multiplayer thing if so I'm I I assume I could just store, like, the the the state of the the, I don't know, the conference, the virtual conference room on on the server and then just send this back and forth of of Yeah. The actual state.

Wout:

Exactly. And then, like, let's say because you were talking about VR. Every time you have an update, like, a change in position of the user, you would send a message with that position updates. And you can do that a lot. I can send a lot of messages, back and forth.

Wout:

And and then you would have the glow you we would have the entire state on the server, and you can do whatever you want with it. And then you can, just send the the small diffs, across the wire.

Kevin:

That's great. That's awesome. I'm getting more and more excited. Yeah.

Wout:

Yeah. Yeah. So Once you go a little bit into Alexa, you you'll definitely like like, oh, wow. These concepts are really, really cool. Like, it's it's like, oh, yeah.

Wout:

This is wow. This is really Yeah. Because it's it's very different from other back ends that you might have used in the past. It's very, like, because it builds on top of the, the beam, which is like the Erlang virtual machine. It has a lot of functionality that you wouldn't otherwise get with a with a normal back end.

Kevin:

Yeah.

Wout:

So, yeah, there are there are a lot of cool concepts like that.

Kevin:

And I assume so so since they built it for, like, communications, this this would also be, like, a perfect use case for it. Like, communicating between different

Wout:

Originally, it's just connecting telephones together, but then you realize the Internet is basically that, but times a 100. It's just sending data across different things and and just, like so it's it suits very well for for these back end purposes.

Kevin:

Here's a quick word from our sponsor.

Contentful:

Welcome to the new era of content management with Contentful. Say goodbye to the limitations of traditional content systems, and hello to a world where collaboration sparks innovation. With Contentful, you're not just managing content. You're creating content first, multi brand experiences across all channels effortlessly. The best part?

Contentful:

It requires 0 coding. Empower your teams to collaborate and innovate, delivering impactful digital experiences at scale. Contentful's AI driven platform not only streamlines content creation but also ensures it aligns perfectly with your brand. Ready for a game changer? Start with Contentful for free today.

Contentful:

Unleash the potential of your digital content and drive your business forward. Learnmore@contentful.com.

Kevin:

So when it comes to Svelte, I don't know if you've heard heard about the recent Svelte 5 alpha, if you've had time to check it out. But be I I was thinking, like, have you looked into, upgrading Live Svelte to Svelte 5? Maybe it's already maybe it's already there. I don't know.

Wout:

Not yet, but a community, a member of, that was using the package did it, and they said it was not so difficult, but I haven't looked in edits myself. Right. The the one thing that might be very cool, that's currently a little bit, weird. So there's there's, functionality for slot support. So you can have a link ZIP code inside your components, and it would be used in your Svelte components.

Wout:

And so, that currently works, but it's not perfect because you're we're we're sort of hacking the Svelte codes and like updating the slot and sometimes it breaks.

Kevin:

Right.

Wout:

So I put it as sort of an experimental feature, but with Svelte 5, you have these, snippets and I feel these, snippets, they're they're just props and props work. So if you can have, if you can just pass a snippet, it might be that it just works very well. And that depends. Yeah. You can have these, like, elixir in Svelte and then maybe even Svelte and elixir?

Wout:

Yeah.

Kevin:

And then just go all the way down?

Wout:

Yeah. Because now that exactly. Because now the the main problem is, like, once you have your Svelte components, you can't really easily go back to Elixir if you want to. You can't you can't just like, oh, now I wanna have live here stuff again. I don't wanna mess with Svelte.

Wout:

It's not so easy, but if you have slots, then you can just say, okay. Everything that goes in here is just alexa code and just and just HTML, basically. So it looks like it might work, but it's still I still have to test it out and see see if that's the case.

Brittney:

I think Svelte is doing a lot of stuff where they're kind of hacking the Svelte code too and using things that they're gonna have to refactor. But I've been thinking about slots a lot and with the new snippets thing, the only thing I'm a little concerned about is how how do you do something ambiguous? You don't know what is gonna go into that snippet. How would you do that? Like, in a design system, there's a lot of times where I just want an empty slot so people can put whatever they want there.

Brittney:

How do I do that in this new system?

Kevin:

I don't remember the syntax off the top of my head. Maybe it's on the preview site.

Brittney:

Yeah. A lot of times I was looking at it. It looks like it looks like a function, like you pass it. Argument Yeah. Just pop up.

Brittney:

And then it's, like, you put in the markup you want, but I don't know the mark up. I don't know what I'm gonna wanna put there. I guess I could put a div. I don't wanna do that.

Kevin:

So so so so that will so I I think the default is called children.

Brittney:

So Oh, yeah. It's, like, very accurate now. That's right.

Kevin:

Yeah.

Brittney:

I do remember seeing that. Okay. Maybe I know there is a way. I just haven't really looked at it yet. But I figured there was a way

Kevin:

to We're not even sure if the syntax is is properly final yet. Right? So

Brittney:

And then Let's see. Is there still a way to do, like, the Svelte colon element?

Kevin:

I think so.

Brittney:

They didn't go away with that with it. Okay.

Kevin:

No. Just the complicated parts of the slot API.

Brittney:

Okay.

Kevin:

Because the that that was pretty confusing. Like, the let colon.

Brittney:

Something Having to do, like, declare the let within the component just to use it, that was confusing. There were lots things that are confusing. The reactivity blocks, those are confusing. A lot of things they're doing, I agree with. I was just concerned.

Brittney:

Some of the things that I'm using now, I'm concerned, are gonna go away. And then upgrading those incrementally even seems like a lot of work.

Kevin:

I I think I think you'll like it, Mikey, because, you know, it it'll get simpler overall, I think. Yeah. Hopefully.

Brittney:

I think it will. And at least it's incremental too, and you have multiple versions to do it.

Kevin:

Yeah. Exactly. You can just upgrade, in in your own pay on your own pace in your own pace.

Brittney:

In Rich's own words, like, 3 to 4 was difficult because of the removal of CJS. 4 to 5 should be a very easy upgrade, and then you can take your time on adding in the features.

Kevin:

Yeah. I mean, I I'm already running the self summit website on, on self 5. So but, yellow, we'll see

Brittney:

if we can on a cutting edge technology, though. Yeah. You don't have to. Right? Edge technology, sir.

Brittney:

I I have harder problems getting to 4.

Kevin:

I actually broke the site when I, there was something I did that yeah. Because it it stopped updating, like, the the variables. I'm sure I did something wrong.

Brittney:

Well, I'm sure there's going to be some things with the adapters too that they're going to run into because of the platforms. The platforms are going to have issues with some of this stuff, and they're gonna have to work through some of the bugs on those ends.

Kevin:

Yeah. I mean, I'm I haven't had any issues with the Vercel one Well or the Note one.

Brittney:

You're on Vercel, and they work at Vercel. You're not gonna have issues there probably.

Kevin:

Yeah. But I mean, like, the note one

Brittney:

choose probably on Netlify and on Cloudflare and on AWS.

Kevin:

Yeah. Yeah. You might be right. I'm not sure if you're right

Brittney:

now, but I have issues on Netlify with Storybook all the time.

Kevin:

Right.

Brittney:

Yeah. Netlify and Storybook work together. And every time I build a SvelteKit Storybook site, it breaks. And I have to go to the storybook my teamers and be like, why is this happening? And we have to look at something, and it's like because of PMPM workspaces, usually, because Netlify does not have their great support for them still.

Kevin:

That's odd. Maybe just say they should they should fix that. Speaking of story

Brittney:

This is apparently unpopular opinions already, and I'm getting

Kevin:

Maybe maybe this can be your unpopular opinion. But, yeah, I had a question, like because that that I think storybook brings up an interesting, question. Like, in in the Elixir world, like, are do are you familiar with Storybook, first off? Yeah. Yeah.

Kevin:

So are there similar things in in the Elixir world, like, where you can kind of preview stuff like that? Maybe maybe you don't really work in a in a similar kind of way.

Wout:

I don't think there's exactly something like Storybook, but there are there is a concept concept of components, like I said, so you can have

Kevin:

Yep.

Wout:

Add button components or whatever, and you can make sort of your own kind of version of Storybook, I guess. But it's not so it's not as easy to use as storybook, I I think.

Kevin:

Okay.

Wout:

But I might be wrong, but because there might be a package that I just don't know about.

Kevin:

Okay. Cool. K. Well, what what kinda, like, other things are there that that make Elixir exciting? Do do you have any something to push me over the edge to to start using it?

Wout:

What what which feature should I which feature should I make? I

Kevin:

don't know. Anything that's cool. I guess Phoenix LiveView is is, like, the the really cool one, maybe. I don't know.

Wout:

Yeah. That's a that's a really cool one. Another one is so everything in the airline runs in a process. And and this is this is not a OS process. This is an airline process, and it's very it's very lightweight.

Wout:

So, the famous example that people always bring up is, WhatsApp was using airline, and maybe they're still doing it. But on one machine you could run 2,000,000 processes and each process can be a WebSocket connection. For example,

Kevin:

and but

Wout:

One can be one user that is connected and that is sending some some data. And this concept of process is really powerful because you can run all your codes. You all your code is by default in process. But if a process crashes, it's not a big deal. So so, like, let's say in another language you have, in another back end language, you have, maybe you're, using, threads or whatever.

Wout:

But if it caches, it's it can be a big deal. Like you have to think about what's going on and you have to say, okay, if it cashes and I have to make sure that I clean up everything correctly. In in or in that's not the case. You just let it cache. And, in in case that you need to process again, like, let's say you have a WebSocket connection that needs to be there all the time.

Wout:

And, for some reason, it's disconnected, it would automatically reconnect. So there is concept of supervisors and stuff, which which pick up these processes and and, and boot them up again.

Kevin:

Yeah.

Wout:

And and then you can also think about this, like, you can go inside the process. So so it's very observable also. And you can see what it's doing and how much data it's using. And, these kind of things are not so difficult to do. So that's I I think that's already, like, a really big thing.

Wout:

Yeah. And then and then you can also connect these, these virtual machines together. So you can have, like, it's it's it's just really cool in in my

Kevin:

opinion. It it it does sound very cool. I immediately thought about, like, when you said, like, you can just let it crash. You cannot do that with Node. Right?

Wout:

No. No. No. No. No.

Wout:

You have to do

Kevin:

try catches everywhere and, like, figure out make sure it doesn't end up somewhere that crashes the whole the whole, application. Alright. That's that's pretty cool. I I also heard, like, Discord use uses, Elixir with pretty great, success if you look at Discord. I've got used Electron.

Kevin:

Issues. Yeah. So that that would be for the for the front end. So I think they use React and Electron for the front end, and then for the back end, it's, like, it's Elixir, I think,

Wout:

at some point at least. Yeah. It is. Yeah. I think I looked it up recently, and it's, I think, mostly Elixir for Discord.

Wout:

Yeah. And it is the perfect kind of technology for that kind of stuff. I mean, WhatsApp was built with Alexa or, like, with Erlang. And it's really for, like, for any kind of, like, like, multiplayer kind of thing where, like, chat is ultimately, like, a multiplayer kind of thing. It's it's perfect.

Wout:

Yep.

Kevin:

Cool. Alright. Unless we have other, other questions. Britney, do you have any more questions? Or if there's something that we missed about LiveSvelte that you wanna talk about, Wout?

Wout:

Not really. I think we touched on most things.

Kevin:

Cool. Alright. Then we can move on to, unpopular opinions. Maybe Britney wants to go keep keep going on our PMPM rant.

Brittney:

I just I want, like, better PM PM support across the board. I ran into it on Gitpod, and, I know Willow works there, Ghost, one of our other ambassadors. And, she said that they support PMPM, and yet I tried to run PMPM in a PMPM work space on it and got errors. And Ben had a PR up in, like, 5 minutes of me putting it in because he's ridiculous. But it's just like surpassed.

Brittney:

I feel like a lot of people use PMPM at this point, and we should just support it and not have to worry about these weird bugs.

Kevin:

Should just switch to bun. Just get skip all of the package managers. Just use bun. No. I'm kidding.

Kevin:

I don't know. Alright. I I don't have an an unpopular opinion this week. Wow. You, you've mentioned you might have one?

Kevin:

Or

Wout:

Yeah. Wait. Maybe I don't like TypeScript as much as other people. I feel that that would be another popular opinion that

Kevin:

Yep. Yep.

Wout:

But I I think I think it's definitely a a net, net positive TypeScript, so I I use it in my project. But, sometimes it's a little bit, when you just have too many types in JavaScript and you you you have to really learn a lot a lot about these types. And yeah. So it's sometimes a pain, but I do use it and it's a net positive, but I think maybe, like, JavaScript could use a little bit more of the functional IDs. I think

Brittney:

I

Wout:

think that would improve the language, or or the or the the error rate of your codes or, like, the it would reduce a lot of bugs. I think a lot of the the mutability in JavaScript is a problem. If you have just immutability by default, those kinds of things, I think, are more interesting than adding types.

Kevin:

Yeah. So, yeah, that's I guess there are some there are some ways to work functionally in in in TypeScript, I guess, or JavaScript. Right? There is Randa and and other kinds of libraries, but it's it's always like they they're kinda tacked on, so it never it never feels like it's it's as smooth as you want it to be, kind of.

Wout:

The the issue is always like, oh, you're using this library, then why why are you doing that instead of having it default immutable? Yeah. I think that should be the the case. Okay. It's I mean, it's it's not you can't just you can't just say, oh, yeah, let's make JavaScript immutable.

Wout:

But I think these kinds of things like, yeah, for example, Elm, you brought up earlier. I haven't used Elm, but the ideas that that language has is is way more interesting than TypeScript to me. Right.

Kevin:

Yep. Yeah. Same with with Rock. If you haven't if you have if you looked at that, I think that's that seems nicer than Elm to me. But yeah.

Kevin:

Alright. Cool. Pix, Who wants to who wants to go first?

Wout:

I'll I'll say my pick. Yep. So if you if you wanna get into Alexa and you just wanna spend 30 or maybe an hour on it, watch the soul of Erlang. It's by I I I I don't know how to pronounce his name, but, Sasha Juric, I think his name is.

Brittney:

Mhmm.

Wout:

And it is just the perfect intro to, Alexa and Erlang and what it can do. And it's, I had sort of the same reaction when I was first getting into Svelte. I watched, Retaking Reactivity, by Rich Harris. Yeah.

Kevin:

Classic talk.

Wout:

And that really blew me away. It's it's such a good talk, and I've I felt the same with the soul of Berlin. It's just it's very like, it's it's it just shows you, like, okay. These kind of ideas are very interesting, and maybe that's the way back end languages, they should go in that direction. So definitely watch that.

Kevin:

Yep. I think you're muted, Britney.

Brittney:

I wasn't saying anything important.

Kevin:

Oh. Oh. Alright. Do you wanna go next with your pick?

Brittney:

Sure. I guess I'm gonna pick Loki. I do another podcast. I don't think I picked it on this podcast. I picked it on the other podcast.

Brittney:

Right? So The TV show? We watched.

Kevin:

The TV show?

Brittney:

Yes. The TV show, Loki. We watched the second season and it's been so long since a lot of these COVID shows have been on that I didn't remember them, and we watched the whole first episode without realizing. I mean, we remembered bits and pieces of it, but we were like, where are we at in the show? And then we kind of figured out that we'd watched the 1st season, and we're supposed to be in the 2nd season.

Brittney:

And then we got through the 2nd season, and it was really, really good. So if you've seen it, go back, watch the 2nd season. It's really good. But it took me a minute because it has been so long since it's been on.

Kevin:

Yeah. Yeah. I I watched it as well. Pretty good. So I'm also gonna pick a TV show.

Kevin:

It's a British show called The Lazarus Project. It's about time traveling and stuff. It's pretty, so there it's it's about this, this shadowy government group or something that works behind the scenes to solve cataclysmic events in the world, to save the world, basically. It's pretty good. And they just released, the second season.

Kevin:

So I've been binge watching that this last week.

Brittney:

It sounds like someone told me about this show that's, like, AI, but they use it as, like, trying to find the holy grail and they use it as, like, is it faith or AI can guide your life like faith can guide your life?

Kevin:

Mhmm.

Brittney:

And it kinda sounds like that kinda show. I think I would really like

Kevin:

both of those shows. As well. Yeah. Do you remember what it was called?

Brittney:

I don't. I'll have to ask. What what was that show? The Lazarus Project is yours?

Kevin:

Yep. 2 seasons. And what

Brittney:

what is that on?

Kevin:

Oh, I don't know. HBO maybe?

Brittney:

Okay. I don't know. We need to

Kevin:

We have to, like,

Brittney:

show notes and actually put these in show notes.

Kevin:

I mean, I I do. I actually do that.

Brittney:

Oh, you do. Okay. Yeah.

Kevin:

Good. Yeah. Yeah. Yeah. They they do show up in in the show notes.

Kevin:

Okay. Okay. I I think, I think that's it for for the show. Wout, maybe you can tell people where we where where they can find you.

Wout:

Yeah. I would I would say, go to my website, wout.space. So w o u t dot, space. Space is a t l d. I'm not really active on Twitter, but, you'll you can find my Twitter there also.

Wout:

And, yeah, if you're looking for a freelancer in in Svelte or or Elixir, Django, Python, definitely hit me up.

Kevin:

So Yeah. Awesome. Cool. Thanks for joining us on the podcast. It was Appreciate it.

Kevin:

I'm very, very interested in Elixir, so this was, a lot of fun for me, even though I don't know that much about Elixir. And, of course, thank you to all of the listeners. We will see you again next week. Bye. Hey.

Kevin:

It's Kevin. If you like the show, please drop a review on your favorite podcast player. It would help out a lot. Thanks.