Svelte Radio

In this episode we talk with the creator of Threlte, Grischa Erbe. Enjoy!

Show Notes

Sponsor
Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.

Description
In this episode we talk with the creator of Threlte, Grischa Erbe. Enjoy!

Music
Intro music by Braden Wiggins a.k.a. Fractal (braden@fractal-hq.com)

Notes
Picks
Mastodon Links

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 📻

What is Svelte Radio?

Things about Svelte. Sometimes weekly, sometimes not.

Hi.

In this episode we talked to Grischa Erbe about Threlte.

Unfortunately, I managed to catch a cold,

so I couldn't really show up for this one.

Luckily, Willow, of Svelte Siren's fame,

hopped on as a replacement.

I'll be back next week,

but before we go into the episode,

here's a word from our sponsor, Vercel.

Enjoy.

Vercel is the platform for front-end developers,

providing the speed and reliability

the innovators need to create

at the moment of inspiration.

Founded by the creators of Next.js,

Vercel has zero configuration support

for 35-plus front-end frameworks,

including SvelteKit.

We enable the world's largest brands,

like Under Armour, eBay, and Nintendo,

to iterate faster and create quality software.

Try out Vercel today to experience the easiest way

to use Svelte.

- Hello, welcome back to Svelte Radio.

We have a new speaker introducing people today

because Kev is out.

I am Brittany.

We have Willow as a guest star with us today

from the Svelte Sirens.

Swix, or Sean, is with us.

And then we have a guest speaker, Grisha, from Threlt.

Everybody say hi.

- Hey.

- Hi.

So today we are going to be talking about Threlt,

what it is, and maybe some recent changes

that have happened.

Grisha, do you want to give us a little introduction

and maybe a background of how you got started

into this 3D space?

- Yeah, hi.

My name's Grisha, and I am the creator of Threlt.

In case you didn't know how to pronounce it,

it's Threlt, actually.

Do you want me to start at the very beginning?

- Okay, I can do that.

- From a baby, yes.

We need the whole story.

I'm just kidding.

- Okay, no problem.

- Whatever background you feel comfortable with.

- Actually, it started very early.

My interest in computers, 3D graphics, started very early.

I think I have a fascination for computers

that's pretty much stemming from my dad.

He's this inventor-like person,

and I was surrounded by computers

already from a very early age on.

It was naturally that I did websites,

for example, for my local skateboard community.

It was also the time when I got into 3D graphics.

I remember I did a 3D postcard for my school.

I thought that was pretty cool

because it was basically handed to everybody.

I just recently filed it on an old hard drive,

and it's pretty ridiculous.

It looks very sad, actually.

- But you're so proud of those first things that you do.

Was the skateboarding website, was that Myspace?

Or was it before Myspace?

- No, that was its own website.

- Oh, wow.

You did your own, rolled your own thing.

- I wouldn't claim it completely for me.

- I know so many web developers with a background

that say, "Oh, I did a band on Myspace,

and that's how I got my start in web development,"

because they started playing with the BB code

or whatever it was back at that time.

- It could be a new generation.

- Yeah, but if I remember correctly, Myspace used to provide you with tools

to customize it pretty much whatever way you wanted, right?

- Yeah, you could add customizations to it,

but I think a lot of it was in the code,

so you needed to know some HTML.

I think BB code was what it used.

I don't even remember if that was a thing on top of HTML or what that was,

but that's an aside.

I was just like, "Oh, a website you built back in the day.

That sounds like so many stories I've heard."

- Yeah, no, actually it was its own website.

I think we were called City Light Skateboarding,

if I remember correctly,

but the website is not around anymore.

Don't try to look it up.

But there was also actually 3D for the web,

but it was based on Flash back then,

and I didn't really commit to Flash, and I'm glad I didn't.

And then I studied graphic design and product design,

but I didn't really see a career

in the overlap of development and design.

Then I started to work for a company,

or a design studio called Studio Monika in Amsterdam,

and they do all kinds of projects between art and design.

These projects were always dealing with

collaboration and participation,

and how the web is transforming from this Wild West thing

where everybody can do what they want

to something that it is now.

Basically, it's owned by large companies

and it has social effects.

- Interesting.

- So these projects were dealing with that,

and we used a lot of 3D on the web,

and that was actually 3JS.

I mean, everybody kind of knows 3JS, right?

It's like, if you want to do something with 3D on the web,

it's either 3JS, and I think Babylon.js is a little bit younger,

but mostly 3JS.

I learned a lot in that time.

The time at Studio Monika was basically

where things kicked off for me.

I also saw that all of a sudden,

my perspective changed.

You can be a designer and a developer,

and maybe also mainly a developer

and a little bit of a designer.

Now I'm a freelance developer.

I'm working on pretty much all kinds of projects,

be it websites, apps, mostly websites.

- Do a lot of the projects that you do for freelance

include the 3D side, and is that why you built this library?

- Yeah, so I built Threlt because I was making

or I was developing a project for a client of mine.

The design was made by Adeline Moyal.

She's a fantastic Swiss graphic designer.

She does these fancy 3D websites,

but she has a very strong opinion on WebGL.

She didn't want WebGL because she thought that images

don't look crisp enough.

I kind of agree.

By default, the browser is doing that very well.

I use CSS 3D transforms.

All the images, they just look sharp,

and it just looks good.

I then looked into libraries and solutions

that could help me to build this website completely 3D,

but without WebGL,

but with everything CSS 3D transformed.

I didn't really find anything.

I also didn't commit to any JavaScript front-end framework yet.

At Studio Monika, we used mainly React,

a little bit of Vue because I introduced Vue.js.

I couldn't handle React in a way.

But I gave Solid a benchmark and Svelte and React and Vue

because I knew React 3.0 Fiber back then,

and I knew of all the limitations it has in terms of

using properties to actually drive your scene.

It's something that they do not recommend doing.

I always thought it's not really declarative

if you then have to get a reference to the object

and then manually do all your updates.

If you can use properties on your components,

it just feels better in a way.

Of course, this is a limitation of React

and not really React 3.0 Fiber.

But I did these benchmarks to Solid and Svelte,

and I just found out that Vue.js, of course,

they are wrapping everything in proxy objects.

It's quite slow.

It cannot handle lots of components,

updating properties 60 times a second or even more.

That's just not happening.

React also, it's just not fast enough.

Svelte and Solid, they were solid in terms of performance.

No pun intended or pun intended.

I was curious how the differences are

because they're saying some of the benchmarks for Solid

just for websites are coming out a little bit faster than Svelte.

So I was wondering how you--

I had to pull up the numbers.

I don't even know if I have the numbers.

But were they similar, pretty close?

Svelte was more declarative for you?

Is that what you felt swayed it?

Coming from React and not liking the syntax

and with only a marginal performance difference,

it was kind of a no-brainer to go for Svelte instead of--

Solid still feels a little like React

because of how it uses the signals and updating.

Yeah, somehow that was kind of natural

that I then leaned towards Svelte.

And it actually was my first bigger Svelte project.

And then I started to just whip up some components

to be able to use the 3.js CSS 3D renderer.

So 3.js comes with not only a WebGL renderer,

but also a CSS 3D renderer to be able to render HTML elements

transformed via CSS 3D transforms into something

like any scene that you can basically think of,

but with HTML elements.

So it's everything we wanted,

but at some point we actually hit performance problems,

not because of Svelte,

just because the DOM cannot handle that many transform updates.

I was wondering about that,

if it's better to do the CSS transforms.

Yeah, at some point it hits a breaking point, right?

Yeah, and pretty fast actually.

I was surprised.

And then we went for WebGL again.

So it was WebGL again,

but I already had this wonderful setup.

I already had these components.

They were ready to accept the properties.

I was really confident that it's kind of a nice

development workflow.

You just assign properties instead of working

on the objects themselves.

And it felt so nice.

I didn't want to drop it.

That's basically where Threlt started.

Awesome.

How long ago did you start working on this Svelte part?

So Threlt.

That's a good question.

It was last year.

I remember that I started working on this website.

There was no Threlt yet.

There was no public library or anything to basically

be able to release.

But I remember that Rich published Svelte Cubed.

And I felt like, "Ah, damn it."

Like you missed your opportunity.

Yeah, a little bit, but I also tried that out.

And it had some limitations I was not very happy about.

Also, I'm a big fan of TypeScript.

And Svelte Cubed is completely JavaScript

and it doesn't provide, I think, a good type experience.

So that was something I just liked about Threlt.

Actually, working on Threlt, working with Threlt.

Before we continue with the episode,

here's a word from our sponsor, Vercel.

Providing the speed and reliability

innovators need to create at the moment of inspiration.

Founded by the creators of Next.js,

Vercel has zero configuration support

for 35 plus front-end frameworks, including SvelteKit.

We enable the world's largest brands,

like Under Armour, eBay, and Nintendo,

to iterate faster and create quality software.

Try out Vercel today to experience the easiest way

to use Svelte.

- All right, so Threlt had a big release recently.

It sounds like you've kind of moved pretty fast

if you just started last year.

And now we are at Threlt 5.0, is that right?

- 5.0.2, I guess.

- Just moving right along.

- Yeah, there were some bugs.

Maybe we also have to explain what Threlt is in a way.

- Absolutely.

- And the core concepts.

- I didn't really prepare for that.

I didn't really prepare for anything,

but let's see how that turns out.

- We didn't either.

- You have it in your head.

- So Threlt is a component library,

and as of recent, also a renderer,

which enables you to declaratively composite 3.js scenes.

So 3.js is this 3D library that everybody uses

to make 3D on the web.

I think I have to frame that differently.

It's really hard.

I also don't like the term declarative.

It's just jargon.

- I think that it makes it easier to read.

So it's like a higher level of code.

So you're writing something that makes it easier to read,

but it does some things under the hood for you

that you don't have to do, boilerplate stuff.

- Yeah, that, and also we hook into Threlt's lifecycle methods

to add and remove objects from the scene graph

and stuff like that.

There are actually, I mean declarative, it's not wrong.

It's just overused.

I just recently saw that AppWrite,

I don't know if you know that,

they are also using the word declaratively everywhere.

And I'm like, what?

What does that have to do with it?

Anyway.

- They also just released their new console built-in,

SvelteKit.

- Ah, yeah.

I didn't use it yet.

Like AppWrite in general.

Is it good?

- So I do another podcast and my co-host on that works

for AppWrite.

So I've used it alongside him on a couple projects,

but right now they don't have a cloud offering.

So you have to have Docker installed

and you have to host your own database.

But they are coming out with that soon.

So I think I will use it more once.

I am not a backend developer.

I don't want Docker on my computer.

So I have avoided using it personally,

but I've used it through his stuff.

- Yeah, no, by the way,

what you said was exactly what you have on the website,

which is perfectly fine.

- Yeah, but what we have on the website,

I'm not really happy with that too.

- Okay, yeah, I think that's something worth talking about.

- Yeah, so Svelte is a component library and a renderer,

which makes it as easy as possible to get started

with 3.js in Svelte.

It enables you to write declarative components

instead of imperative 3.js codes

that can get messy and spaghetti-ish.

- I think that sounds perfect.

That sounds exactly like what it is

just from my limited experience using it over the weekend.

It allows you to write that 3.js code in an easier manner.

And so what might we use Svelte for?

Is this going to be a game?

What might we want to build Svelte with?

- I think I just answered that question once on Reddit.

I just tried to look it up, but I'm not that fast.

So yeah, obviously you can do all kinds of eye candy things with it.

So if you think about the GitHub landing page, for example,

if you're not logged in, you see this globe with live data

from where commits are happening

and pull requests are coming in and stuff like that.

Super good example, but it's only, like,

quotation marks, only eye candy.

Lots of companies use it for product configurators.

For example, I'm not sure if that is a thing in the States,

but we have this furniture manufacturer, Tilco.

They are using 3D a lot where you can configure your furniture

and they just do it however you configure it.

Yeah, there are lots of applications.

You just have to commit to 3D.

- Would you be able to build a game or something with it in Svelte?

I know React and I believe React 3 Fiber and some of those libraries

are used to create some games.

- Yeah, you totally are.

I'm not sure if it makes sense, though.

I mean, I did for Threlfie V5.

Threlfie V5 released a lot of breaking changes.

Not yet breaking, but breaking in the future, breaking,

and to soothe everyone's opinion,

I made a little game for that.

So you can play and just check out how Threlfie V5 is superior to V4.

That worked actually quite well.

I think it's a good choice if you want to make a game.

It does not come with the usual batteries included in game engines.

So it does not have, I mean, it's not that big of a deal mostly,

but it does not have a complete audio solution

or it does not have an input manager.

There are, however, ways of doing that,

especially with Svelte, it's not that hard to whip that up.

You can also just look into that game's source code

and copy stuff out however you want.

There's some input management and some audio management involved.

- Okay, yeah. Can you expand a little bit?

We talked about Threlt 5.0 being released,

and that some of these breaking changes that were made

actually made the performance better.

Can you talk about some of the changes that were made

and what makes it better, I guess?

- So before version 5, Threlt was a wrapper

around existing or just around 3.js objects.

So Threlt would have an export called Mesh,

which is a component.

And if you drop that into your scene graph

or into your Svelte component in that case,

then it would instantiate a three mesh class,

make a new instance from that.

And you would be able to apply a set of predefined properties

on that mesh.

And you can already see where the bottleneck is

because 3.js is a large, large, large library.

It comes with hundreds of things.

And wrapping every single export is a very tedious

time-consuming process.

And that's why I started looking into alternatives

than wrapping stuff.

And I developed a component, a single component,

which does nothing else than accepting any property

and applying what you pass to it to an object.

And that can be, for example, a 3.js object.

Actually, this component is called three

and it accepts any JavaScript object.

You don't have to give it like a class definition,

a 3.js class definition.

It can work with anything.

It just so happens that it's just convenient

to work on 3.js objects.

And there are certain rules that you have to oblige,

not oblige, obey.

Yeah, sorry.

There's a certain rules that you have to obey

while providing the properties to this three component.

For example, let's stick with the example of a mesh.

A mesh is a visual representation of a geometry

and a surface, and that surface is a material.

So you provide a geometry, for example, a sphere,

and a material, for example, a mesh standard material,

to a mesh, and then you get like a shiny ball, for example.

So if you now want to change the position of the mesh,

the world position where it's at,

you cannot assign a new vector to this property position

because it's read-only by design of 3.js.

So we had to find, or I had to find a workaround for that.

And basically React 3 Fiber,

the React equivalent of Thread already found that,

and I used it because they obviously put a lot of thought

already in React 3 Fiber.

It's actually a really good, it's a really, really good library.

And what they do is that they check for certain other properties

on, for example, this position property,

in this case, the set property,

and check if the set is a function,

and if set is a function, it accepts an array of values

and stuff like that.

So there's a very small rule set, for example,

yeah, I don't know, there's a very small rule set

which you have to obey, and then you can basically use

pretty much every 3.js export,

be it from the standard namespace 3

or from this infamous examples folder,

and yeah, you're good to go.

Yeah, so it sounds like you made some tweaks

that opened up your options a lot more,

so you have more capabilities in it now than you used to.

But you also made sort of a migration path,

or at least deprecated 4.0 for the time being,

where it's not going to break people's current projects, right?

They have time to migrate.

They have time to migrate, yeah.

So the two versions are completely compatible

with each other, so v4 components still work for v5,

also together, you can nest a v4 component

in a v5 component, for example, it's not a problem,

it's not a big deal.

At some point, some things will be removed from v5 core,

so Thread is also split up into, as of right now,

four packages, it will be five in about some days,

and there's something really nice coming up, actually.

So there's core, which is this whole rendering thing,

which used to be basically

three JS classes as Svelte components,

and there are some components in there

which will eventually move from core to extras,

to another package extras at some point in the future.

So I'm not really sure, let's say months, I guess,

something like that.

You mentioned four packages right now, but there's five,

so what are the other three packages?

I know there's the physics engine at Thread/rapier.

Yeah, so in total it's four packages.

It's core, which used to be

the main three JS classes as Svelte components,

so mesh, cameras, group, object 3D, stuff like that,

things you would use all the time that is in core,

that used to be in core.

It is still in core, but it will move.

And then there's extras, and extras provides useful abstractions

on top of these core components.

So for example, loading a GLTF file

that you would export from Blender is kind of a tedious process

in vanilla three JS.

You have to instantiate a loader, and you have to load the model,

and then you have to somehow get that into a scene graph,

and then it's not typed, and it's just a little bit more work

than just importing the GLTF component from Thread/extras

and providing a URL, and it just deals with all the complexities

that come with it.

So you can create in Blender a 3D object

and then import that with the Thread/extras package.

Yeah, so that's kind of the standard way of doing things.

You model things in Blender or any 3D software.

I think all the major 3D softwares now support exporting GLTF

because before GLTF, that was pretty different.

I think pretty much every 3D software now supports exporting GLTF

because before that, yeah, you would have to use OBJ,

but they were very limited in terms of compatibility

when it comes to material properties and cameras, and how it

would be translated into what you then see in the browser

because, for example, some applications use,

when you define the field of view of a camera, for example,

some applications use the vertical field of view,

and some use the horizontal field of view, and GLTF just makes

that process of exporting whole scenes, streamlines.

It's pretty well, actually. It does a really good job.

Awesome. And Willow mentioned the physics renderer.

Can you talk about what rendering engine that it uses

and how anything under the hood works?

Under the hood of the physics engine, yeah, that will be complicated.

I just have to go and get a physics degree, and I'm back in 10 years.

The Rapier engine, I think, is what I was getting at.

So Thread is using the Rapier engine.

It's kind of a new physics engine on the web.

I think it's what the 3D community or the physics on the web community

really waited for because while there were alternatives,

like Ammo.js, Canon.js, they always felt like not web first,

but something else first and kind of converted to web

in a way that just felt a little bit weird.

So now Rapier is around, and Rapier is incredibly fast.

It's on par with NVIDIA's PhysX library, at least when it comes to CPU performance.

And it's not only fast, it also grows in terms of feature set.

It provides the basics in terms of shapes, but also in joints.

So you can hook things together and let them physically interact.

And it's just great fun to do physics-based projects.

Is this also the same engine that React 3 Fiber and other 3D libraries use?

So React 3 Fiber has a Rapier package,

but for React 3 Fiber, I think there are more than one physics library you can use.

Oh, interesting.

If I'm not mistaken.

I think they also offer other packages as well.

Very cool.

I just have to say to whoever's listening,

obviously this is an audio podcast,

and it's a little bit hard to follow along,

but just go onto Threl.xyz on the website,

and the Rapier demos are really impressive.

I don't know how long you spent working on these,

but they show the possibilities for sure.

Yeah, thanks.

Not that long, actually.

You can enable physics in a Threl scene really quickly, actually.

You just have to drop in this world component.

It provides this Rapier world where gravity is applied to physics objects,

and it uses the standard Threl frame loop to update everything physics-based in this world.

And there are colliders and rigid bodies.

These are the main building blocks of physical objects, and then you nest a mesh, for example, in a rigid body.

And in a collider, because a collider has to have a rigid body,

and then this collider nests, gets the children.

It's really easy, actually.

Just look at the examples.

You call Threl.t a component library.

I think this is where the power starts to shine through.

I'm not sure why the analogy of component library makes sense,

but I think once you look at the code, maybe it's just more declarative.

What's your discomfort with declarative?

What's wrong with declarative?

I mean, looking at the code, it's very short.

Maybe that's the unpopular opinion today.

No, that is not the unpopular.

I have a better unpopular.

Declarative is not unpopular.

Everybody likes to use that word, so it's probably not unpopular.

It's unpopular to say that you don't like it, which is what you're saying.

I don't particularly like the overuse of that word.

No, I think you're completely right.

It's declarative, but in a way, I'd like to think more in terms of composition than declaration.

I recently fell in love with these slot props.

Nobody really uses them.

I don't know why.

Not nobody, but I didn't really see it out in the wild a lot.

Because you have to nest objects a lot, especially in this ThreadV5 syntax,

that you can make use of this slot prop syntax quite a lot, and it just feels so natural.

Yeah, it feels really good.

I think you use them.

I like to think in terms of composition rather than declaration.

Right, exactly.

You use them because you have a component library, and you like composition.

That's exactly the situation where slots become necessary.

And maybe people coming over from React, where React doesn't have slots because it uses JSX,

that might be more of an alien concept.

I think of slots as a hack, or just because you can't pass a component in as a prop,

you have to use a slot, basically.

Aren't they the same as children in React, though?

Yeah.

They are named children.

React is very loosey-goosey.

You can pass in data, you can pass in components, whereas you can pass in a function.

There's render props in React.

But with templating languages like both Vue and Svelte,

because the templating languages insist on HTML and single file components,

you cannot just pass in some inline component that you declare somewhere else,

because there is no other component in a single file component.

It's only the one.

I got you.

But that also is what makes React really powerful in terms of what you can do with it.

For example, this React 3 Fiber thing, it's absolutely crazy.

They use a feature of React that is a custom renderer.

That is also, as far as I know, the foundation of React Native, in a way.

You cannot only use the DOM to render React components,

but also, and in this case, it's JavaScript that adds and removes components.

To and from the scene graph of Vue.js.

React 3 Fiber is using a custom renderer to do that.

We are using just a React component.

And a preprocessor, as of latest, which is really cool.

Very cool.

Looks like Brittany is dealing with some family stuff.

Yeah, sorry.

Is there anything that we missed with Svelte

before we move over to our unpopular opinions?

I think the preprocessor, we could talk about that.

I don't know.

B5 also comes with a preprocessor now.

And this preprocessor just makes it really easy to work with this B5 syntax.

Because you don't have to import anything.

You don't have to import anything from 3.js.

You just import one component from Threlt-Core.js.

And it deals with importing the 3.js modules or exports

and hooks everything up for you.

Okay, so kind of a convenience thing,

but it looks concise and nice.

It's a little bit weird, but I think it's okay.

Will it mix well with other preprocessors?

I think it does, right?

What do you mean?

You recommend some sequential preprocessor.

I'm not used to any other kind of Svelte preprocessor,

apart from the auto-preprocess, the one that everyone uses by default.

This is a new preprocessor that I haven't seen before.

So you're recommending some kind of sequence type thing.

I don't know, it's pretty cool.

Yeah, so the Threlt preprocessor, it makes use of Svelte-walk.

And Svelte-walk is an AST walker

that walks through the AST of your Svelte component.

And to be able to walk through that, it needs to be like a Svelte component

and not a TypeScript Svelte component.

So you have to run all the preprocessing

that would transform your TypeScript or SCSS or whatever you want to use.

You have to run that beforehand so that the Threlt preprocessor can use that Svelte-walk

to transform your component.

It's not only a convenience thing, it's also kind of an overview thing.

If you look through the source code of that arcade game,

you see all of these same components.

As I said before, it's just one component that does basically all the job,

all the hard work.

And it just gets very messy.

You always see this 3, 3, 3, 3, 3 component all over the place.

And you can get lost in the markup.

We had a big discussion about that actually on the GitHub pull request.

And we had some alternatives, but ultimately we came up with this solution

that also provides type safety.

And that was kind of a big deal.

So you just import one component and it also provides type safety.

And I think that's kind of a neat thing.

I think that's time for us to move on to our unpopular opinions.

I do not have one this week and I've been waiting patiently to hear Grisha's

because he's been saving it.

I'm not really sure if I'm the only one, but every time I worked with web components,

I'm a little bit disappointed.

This whole shadow DOM thing, it doesn't really feel nice.

You cannot change any CSS properties of anything.

And I know that this is kind of what they were designing.

But in terms of type safety of properties, it just doesn't feel like I want to use it that much.

It's maybe becoming a little less popular than it used to be.

But that opinion is one I've felt for a very long time.

I don't think that the API is great to work with.

I think Rich Harris has a famous blog post about why he doesn't use web components.

Where people constantly get mad at him about it.

I can imagine.

For me, the primary thing is the inability to service side render them.

They essentially only work in the browser.

Oh, I didn't know that.

Yeah, so the web components people will say, "Well, then we have all these frameworks

that help you pre-process them."

If you're using a framework, then you could choose between Svelte or--

Yeah, what's the point of using the--

Yeah, exactly.

Write more declarative code.

It's supposed to be built into the platform

and just the platform doesn't support that sort of use case.

Unfortunately, it's pretty necessary if you're going to write

programmatically generate pages, for example.

Yeah, but there are libraries or frameworks that can render web components on the server.

Oh, well, Svelte can compile out to web components,

but I don't know about on the server.

Yeah, we say that, but I bet it hasn't really been tested.

We say that.

I actually wanted to export, because that first project that I did with Threlt,

it had this really nice feature.

I can show it to you also.

It's a fly that is on the screen all the time, and it follows your cursor,

and it makes sound, and it's really annoying.

I wanted to publish that as a web component that you can just drop into your website

and you have a fly that is following your cursor, 3D fly.

It's super annoying.

That's cool.

I was going to say that sounds really awful.

How about you, Willow? Any unpopular opinions today?

I don't have any, but the fly thing sounds like something we should probably add to the Svelte docs.

Along with Dart mode.

I saw where we're finally at with Dart mode.

I think that is an unpopular opinion, to be honest.

I got nothing either, fresh out.

We have three of picks.

I know.

Let's move on to picks, because both of us have picks.

You want to go first, Wix?

I just came from playing this game with my sister called

Lovers in a Dangerous Space-Time, which is a fantastic title.

Basically, you're traveling around the universe in a spaceship.

It's a co-op game.

You're defending yourself from aliens and you're saving space bunnies to save the universe with the power of love.

That's as much as I know about it.

It sounds fantastic.

I'm going to have to buy a Switch for Christmas now so my kids and I can play this.

We love co-op games.

Actually, it's also available on Steam, so you don't have to have a Switch.

I just happen to be using a Switch right now.

How would you play Steam?

Can you get that on a PS5 as an app?

Maybe, I don't know.

I'm a fan of co-op games.

They have a Steam deck.

It's like a Switch.

It's true.

The point is co-op, right?

You need multiple controllers and a shared screen.

My only report would be that there's quite a few levels to this thing.

We got stuck on level two and it was so hard, but we took a lot of planning and we finally beat it after two hours.

It's actually pretty short.

Each round is 10 to 15 minutes.

The controls and the planning needed is hard.

You need to collaborate. You can't play this by yourself.

I just like that for any family games because then you can yell at each other.

That sounds awesome.

My pick is yesterday.

Yesterday, as of recording day, I did a stream with Uniform's Tim Benix and it's called Unpack the Stack.

We went over the Jamstack survey results that were done at Jamstack Conf and talked a little bit about how some frameworks were declining.

Some are still in the upper part where we have higher satisfaction and growth ratings.

One of those is Spellkit.

We unpacked Spellkit and what it's about, what it gives you, provides out of the box for you, and went through some stuff.

It was a fun time.

Grisha, did you come up with a pick?

Speaking of Spellkit, we're keeping a close watch on the issues now on the road back.

We're doing the countdown, right?

There's five issues left today.

It's a count up because I started with five and then I went to six.

No pressure. I think it's just fun and games until it actually lands.

Actually, I started getting into Svelte because I was so disappointed by the communication of the Nuxt team.

That was part of what we talked about yesterday.

Vue 3 came out and then the Nuxt 3 was not supported for a very long time.

There was no way to actually create a big application with Vue that was using the latest and greatest Vue 3.

Exactly. I was really on the Nuxt team for a long time and I thought it still is a pretty good piece of technology.

I still use it in production, Nuxt 2, for some clients.

Their communication for Nuxt 3 was pretty horrible, at least in the beginning.

I think they caught up at some point.

They were realizing that people were just like, "When is it coming? When is it coming? Tell us!"

I think a couple months ago, it finally released Nuxt 3 and it's officially supported and everything now.

Part of the reason the survey results were showing that Vue and Nuxt were in the danger zone is what Laurie called it in the survey results this year.

They didn't stop growing, but the growth rate between the previous year and this year was lower.

They're in that danger zone of falling off.

And it made Evan, you, pretty mad.

You're still growing, but growing less.

That's a problem.

Yes, exactly.

First of all, I do think that it's an unhealthy attitude.

Vue, for what it's worth, has always been an independent community that was felt now with Rich working for Vercell and React being React.

Vue has always been the standout in terms of independence.

I've heard inklings of this dissatisfaction and I've seen people in the Vue community quit Vue over this.

And it seems very alarming.

One thing I observe is when they did the big two to three switch,

what you just materialized to me was they had a coordinated switch of the entire ecosystem.

The state management tool, there's a whole long list of the stuff that Vue switched from two to three.

I just realized that Nuxt was not included in that list.

Yeah.

It wasn't obvious to me.

I was fairly close.

I'm friends with Evan, but I didn't notice until you said so today.

Part where you're talking about was the unhealthy attitude of them being in the danger zone.

I didn't like that phrasing on it.

It's unhealthy to say you're in danger if you do not grow faster than you did last year.

That is very VC type thinking.

Yes, I didn't really love that either.

And I think that they are still growing.

Evan made a great point on Twitter.

There's a good Twitter thread about this.

There were only 6,800 respondents and it's very geo located.

And I think a lot of Vue developers are in China where we don't have survey results from.

So there's some stipulations to that data too.

I think it needs to be taken with a grain of salt.

Well, if you want to be heard, the state of JS survey is on right now.

That's another big survey.

We're trying to get people to show up regardless of what framework you like.

And fill in Svelte Radio for the podcast.

Yeah, but you must like Svelte Radio.

You must add Svelte Radio.

You don't use Svelte, it's okay, but you can use Svelte Radio.

Did you have any picks?

Yeah, I just watched Wednesday on Netflix.

Oh, that is so your vibe.

The Addams Family?

Yes, it was very good.

I heard mixed reviews.

I really enjoyed it.

Let's just put it this way.

I started it last night and it's eight hours worth of content.

And you're done?

Oh my gosh.

I thought it was a movie and you were like, oh, I watched the movie last night.

I also saw Matilda the Musical, the new version in cinema and that was very good.

So what's Wednesday?

Is it kind of a guilty pleasure series?

It's a series about, I don't know if you know the Addams Family.

It's about Wednesday Addams.

Ah, okay.

The little girl.

Yeah, played by Jenna Ortega.

I love another Netflix series called You, which is about a serial killer.

And she played the little sister of a side character.

To see her grow up into a leading character like this and to be so darkly humorous.

I really loved that portrayal of her.

My whole family's just been Wednesday as well.

It's great.

Yeah, talking about growing up, I just started with Stranger Things Series 4, Season 4.

The kids are big now, right?

That's some serious growing up.

Wow.

I was surprised.

It's pretty good.

Yeah, yeah.

But that's not my thing.

Netflix does the good stuff.

All right.

Anything else before we're all set?

Yeah, I mean, I also have a pick now.

Oh, I completely skipped over. I'm so sorry.

It's nothing special. It's slot props, actually.

So if you don't know what slot props are, get into slot props.

They will change the way how you write your SWIRF components.

At least they did for me. Super nice.

Yeah, awesome.

Well, I have one follow-up question, just about 3D and 3JS and all that.

For what it's worth, I'm extremely impressed by your docs.

Most of the APIs have an animation or a little REPL where you can see the code and you can see stuff live.

That's really good because I don't have the imagination.

I'm not a digital artist.

A lot of people, when they try this stuff out, I move rectangles on the screen.

And to go from rectangles on the screen to 3D is a very big step.

Basically, what you have here is really good for copy-paste.

I really love there's even a vehicle controller demo.

What else would you recommend for people converting from 2D to 3D?

What resources?

Converting from 2D to 3D.

Basically, getting into 3D for the first time, whether or not using throughout, whether you're using 3JS.

There's a lot of concepts to learn.

What should people build as their first thing?

Maybe that's a fun question.

What's a book or a course that you recommend?

I cannot really recommend books.

I didn't use any books to learn that.

If you're looking for inspiration, then the 3JS page is a great source of inspiration.

The projects that they show there that are all done with 3JS are pretty good.

By the way, there's also a Studio Monaco project there.

If you are looking into just starting out with 3D, I would highly recommend getting into Blender and working with Blender.

Because 3JS was written or created with softwares like these in mind.

WebGL by itself provides all the means to make 3D on the browser.

It's just 200 lines of code to draw a single triangle.

There are no concepts like a camera or a mesh or something like that.

It's very, very low level.

3JS was created with this compatibility of 3D software and 3D software.

The stuff that actually ends up in your code to run 3D on the browser with that compatibility in mind.

Also with the mindset compatibility.

You have things like a perspective camera in 3JS, things like an orthographic camera, a mesh, certain types of geometries, animation tracks, nonlinear animations, bones to deform character movements and stuff like that.

So getting into Blender is definitely worth it if you want to get into 3D on the web.

I've heard really good things about Blender.

I've seen some cool things.

It's incredible.

It's absolutely amazing what they do.

And it's open source.

Especially the progress of the last three, four years.

Amazing.

The most intimidating thing for me is everyone does the donut tutorial for Blender.

And there's 30 hours worth of donut tutorials before you get to make a donut.

So actually do something else besides a donut.

That's true.

Well, thank you so much, Grisha.

I keep saying it.

I don't know if I'm saying it right or wrong.

I'm so sorry.

Thank you so much for coming on and explaining Threlt to us.

Everybody go out, check out Threlt.xyz.

Try it out and see what you can build with it.

Yeah, thanks for having me.

Thanks.

Wonderful.

Thanks.

It would help out a lot.

Thanks.