Giulio Zausa is a Software Engineer at Flux. They build next-generation collaborative tools for hardware design. He joins the show to talk about his projects on Flux. He also shares some of his tips and experiences on how to improve your application performance. Moreover, he dives into what the react-three-fiber library is all about and its functions. 

Hello, everyone, welcome to another episode of React. Round up. I'm your host today Page, needing house, and we are joined by our panalists, T J. Van Toll

 

Hey, everybody.

 

And Jack Harrington,

 

Hello there,

 

And our special guest today is Julio Sousa. Welcome Julio.

 

Yeah, it's too nice to hear to be here. Sorry.

 

Well, we're glad to have you here. So Julio. maybe you could tell our listeners a little bit about who you are why you're famous and what we'll be talking about today.

 

Yeah, I mean, fence is a big word, but yeah, I'm a softer engineer. I currently worked for a company called Flux, with which we are building next generation collaborative tools to design P, C B in boards on the browser, And

 

Oh neat.

 

I think so, and previously I worked on other companies doing Webjail stuff, cave, crape type script, Work with you at a lot, And yeah, I also collaborate with some of Em Sort projects, for example with Primandros, the creators of Recsbingreact, Spring and reactive fiber, and one of the outer of a library called the Rectreflex, that allows you to use Flex, lay out in treat environments, you us and react.

 

Oh neat.

 

And and I've been in contact with a lot of Performance, delicate situation on the browser. So that's what I'm working all right now, making stuff faster, making stuff scalablesoyeah.

 

Well, that sounds super interesting. I'd actually love to hear more about some of the performance intensive solutions or or things that you've been encountering lately. if you could elaborate a little

 

No kidding.

 

bit on that,

 

Yeah, absolutely, absolutely, especially right now in what I'm working on it, this product call flux and we're really investing in performance because when you're building a tool that works on the browser, you really have to build something that is not your usual webiplication, Because nobody, when you talk about qebiplication like a website or simpler webiplication, what you worry about is the first, Like the the time that takes for the page to load or the introduction time, And really you have different metrics compared to the ones that you have when you are actually building. For example, we, the dator on the web. Because like your, the scale of data that you are dealing with is completely different.

 

Yeah, I think that's one of the things that makes web performance so hard to talk about is like it's It always depends right. That's like

 

Uh,

 

our favorite line in the show. It depends

 

uh,

 

what you're building, but like your performance tips for like, Oh, I'm building something that's like C, M, s or commerce, which is like, probably the more common use case. That sort of stuff doesn't necessarily apply to everyone, because like a graphic context, like, for the most part in a three j s environment, you're not dealing with the dumb so much, right, or you're sort of Completely completely separate world. So maybe for for people that haven't been in that sort of environment Like what are some? like? What are some of the obvious performance tips? Like If you start to venture into that world where there some different things to think about that, Some of us that spend most of our time in like an E commerce, Dom

 

Yeah,

 

centric

 

Some of

 

sort

 

us who

 

of way,

 

aspire

 

wouldn't wouldn't think

 

to

 

about.

 

be in three D,

 

Yeah,

 

you know would be that

 

Uh,

 

be great,

 

Yeah,

 

but

 

uh,

 

never do it.

 

If you think about it, like when you're building a product like any commerce or a blog, and normally the amount of data that you have is limited. Normally,

 

Yeah,

 

for example, you might have the thousands and thousands of products that you're shown in your commerce, but normally you fetch only our window on of that in your view, and the silver takes care of that, and the silver is already optimised with igrnates, and search to already Ter data for you instead. When you're working with something like a narator on the weapon, What you do is that you necessarily to load your entire document because you have to be able to an instant show the entire document. Immediately. Imagine, for example, when you are working in Pima and you have a lot of different cambusses and elements, and Ima always allows you allow you to zoom out and see everything at once, And that's the difficult part, like showing the being able to store in memory everything, and the show with the second that the user requires it. The something that you don't really need the one commerce websitebecause in commerce. We, sometimes you're just the removal filter. Wait a couple of seconds. We ervic response, and then you have the data. But but and you are right when you talk about that, you are not dealing much with. Well, actually we are, Because you think about it When you're building something like we are. You both have a cambus that is just a cambasspit, which you are basically building every part of a manually, but you also have lot of parts that are done using them. For example, the thing factor in which you can enter change properties, or for example, we have the three likintigma in which you can see all your elements and

 

Yeah,

 

And select them and search around them. And that's that's till dome. But ye, you're right. When you're talking about that, we will basically eject

 

jack.

 

the from the dome and we have one big cambus and we are doing everything manly.

 

So does it become more about memory management then? Just because, like what are sort of the like dead tools? The things that you spend your days in looking for performance problems.

 

M

 

Is it just like raw? Like how much memory is this thing consuming? Because I imagine like I'm thinking Pcbes, which, by the way, Page and I work in that sort of world, So I've got a

 

Nice.

 

bunch of p. C Vs, sit sitting

 

Okay,

 

That's

 

around

 

nice.

 

here, so I'm picturing in my head like you got some complicated thing that I'm like moving around and zooming. So Like watching in Dave tools like, Oh, crap, how much memory am I am I building up, Am I like cleaning up my objects appropriately? Is that sort of? I'm just sort of curious what you're like day in day out, like performance work flow. What sort of things you're looking for? How does that work

 

Yeah, and about the tools. The things that in working with most is, of course, the the cromprofiler, the timeprofiler, That allows me to see if I have something that is taken in three seconds, what is actually doing in those three seconds, and the analyzer of coma, that is very powerful because it allows you to take a upshot of the heap and see both what are the objects

 

I,

 

that are taking a lot of space, and also there Retainers. Because you may have elements like elements in objects in memory. That the are very small on their own. But maybe they're referring to some other data. They have a point to some other data. So those objects are the reason why you have a merely. And then there is another very important too. That is the profile that he allows you to press record. Do some operations and see what is Ha In Is react

 

The

 

because he. sometimes you look at the the cramprofiler, see a lot of big stuck trades from Reactor, and you see, comment for and to stuff like that And you're like what is happening this or like? It's

 

It made.

 

especially when Re, Act ten Now with

 

Oh

 

the concurrency more than able.

 

no,

 

The, it's pretty hard to understand what

 

So

 

is going

 

great.

 

on there, so the cramprofiler is pretty important, but there is a fourth to That I had to use in some circumstanstance. That is the crom tracer That is very little known. There is unfortunately very little commendation with it, And that's

 

I

 

an internal tool that is a riblingcrom that allows you to profile not only your current Javascript Vita machine, but also the internals of Crom. You know that Crom works by segmenting your tops into the Processes, and those processes have a lot of stuff that it's going on. is not only the Un, the Lascriptvt machine, there, also the processes

 

M

 

that they separate the Bach collector trees, the compositing and a bag in which we were trying to figure out why, like the page during Low spent exactly

 

At.

 

two minutes, I think doing work that we had no idea what he was doing to, we had, And the page was tuck for two minutes, and we tried to profile that with the crumprofiler, and the result was that there was a whole on those two minutes in which the profile had no idea what happened. It was a very strange

 

Whoa.

 

situation,

 

that's

 

and

 

crazy.

 

ye,

 

For you? Say

 

and

 

like

 

were that,

 

two minutes. Because, because can this happen? Like if a page goes in the background right like you still need to know what's happening? Is that the sort of situation you're talking about, or like, how does it have two minutes where it doesn't know

 

Yeah,

 

Yeah,

 

what's happening?

 

yeah, that's interesting. and the reason why

 

A.

 

that was happening was not. The problem was not in the process. The process was fine. It was just waiting. The problem was in the process Because from handles a lot of stuff in a separate process and then that process you can. You are not really profiling it in the The comprofiler, because it's running separately. And what we discovered is that the process was running and locating a ton of memory, and a certain point it just crushed and Rom started a new instance of that process, and from that new instance it worked perfectly, So we knew that there was a problem that we were doing something working In what Gal, but we didn't know what was happening, and in Crom, it it had this behavior that it was stuck for two minutes and then it started working again. Fire folks. instead, you basically had to kill your your fire for xistence, because he will freeze up into a browser. And the cold thing is that with the cromtracer, we were able to profile what was happening inside the the process, and we saw that there was a lot of memory that was being located in the description for the webglpertic tributes. It is a very thing that. It's a thing that the people that work with nows, maybe, But if you're not, if you don't work with you, probably never heard of it. And so the problem

 

The

 

was that we were literally locating webs object in a loop. Whereas we should have done that once for the entire session, and it's spetitificult

 

M.

 

into situation, because you end up The problem, especially if you have three hundred thousand like lines, cote base, in which the introbrowser locks up and you're like What is happening? You tried with a profiler and the profiler shows your whole, And it's needs to know that there are tools at least to to keep profiling from another point of view until go on with your work.

 

Yeah,

 

It's interesting because I think memory memory de bug is something that your average web developer probably has no idea how to do because

 

Uh,

 

it like

 

Yeah,

 

very rarely actually comes up. then. The only experience I have with it is when I had a stint doing native as, because in the native world, that sort of stuff is very important right

 

Yeah,

 

because it's

 

Yeah,

 

the sort of thing a native ap can, absolutely uh, doesn't want to be losing memory. And it's it's also interesting to hear

 

He

 

that like you almost get into like S level. The bugging tools are like, because I mean it's a certain point like Crome has some responsibility for if a rogue web Ap starts like using memory like crazy, Chrome's going to shut it down at some point right like It's

 

Yeah,

 

like the browsers

 

exactly.

 

responsibility to keep things from going out of control. so it's just sort of fascinating to hear about. I think a different paradise that most of us just aren't familiar with with the web world.

 

So okay.

 

That's a problem with us because usually Crom kills Europe, thinks that this rogue after dis consuming too much memory. but sometimes we have legitimate reason to locate too much memory. so come is constantly

 

Hey,

 

killing us.

 

Yeah,

 

Oh no.

 

Is there anything you can tell Crone, like, Can you request? like say like Hey, I'm a memory heavy app. Can I get more system resources or you just kind of at the

 

I

 

mercy

 

don't think

 

of the

 

so.

 

browser? Okay,

 

Yeah, you can't

 

I've

 

make

 

seen

 

a

 

a

 

plea.

 

lot. I've tried to look into it a lot. but there is a lot of contradicting information about how much crime allows you allows you to use and it changes from version to version from over in simply to inperentise system. So the it's not easy to do that kind of stuff.

 

Okay, So from a regular persons perspective of the not regular person, but like you know, commerce or whatever, so are there unit as tools or testing tools that you, you apply to your performance level? I'm kind of curious around like you can track version to version. Yeah, you check that in and oh my God, you

 

Yeah,

 

know now,

 

Yeah, I mean, we try to do some of it. We try to start with performance performance testing, which is actually a cool concept in which you have your unit Tstthatonormally. For example, you have your functions that you use for operate with data and stuff like that, And what we are to do is to run its unit test a lot of times and see how much time it takes to know. For example that We have a function that is on hot puff, For example, something that happens every frame. We know that we wanted to function to take at most three million seconds. When we with that is that it's very depend than on a lot of stuff. I, dependent

 

Right.

 

on how the Carbet collector is feeling on the on the destination computer. And ultimately it's not too important, because if you're trying to analyze the single Unctions, then you maybe figure out that the function never actually after and that was something else that was slowing, slowing down everything completely. So actually, the way that we're tracking that right now is by doing analytic,

 

Oh,

 

we complete. and so we know that is more of a crowd founded way of doing it. But what we try to do is either with manually and check that for every is everything Speed, even with bigger projects, bigger documents, or we take for all from all the environments, the previous environment, production environment, all the data that we can. We have a lot of instrumentation In the coat is constantly sending performance information, of course, anonymized, and so the moment that we have a use for which document lading is taking more than Certain amount of seconds, we're going to final alert fire an alert, so that our T lows that something wrong going on there. and also, since we want to track how well we're doing with performance for Chbrwe, are also using other tools such as the back bear, and with which we can keep track of the average spring rate and some of this uplifter.

 

That's really cool.

 

Oh, absolutely

 

That is really interesting. So one question that I had is are you building all of this in Java Script or in React, or are there some other, maybe closer to the metal frameworks that you're using or programming languages to make this stuff so fast,

 

Yeah, mostly most of the cod business in to script, and the we, of course, had some models that are written in Web assembly, but not much for performance reason, but because we wanted to integrate with some libraries that they were originated written in. S, especially the some libraries regarding the simulator and Other stuff like operation on polygons, and the only reason why we're using we assembly there. it's because we're using libaries that the original were retaining, see or supersplas or whatever, so we are trying to keep most of our cold bells in a script. Because actually, that's the closest to the metal that you can be on the Web, because of course you can switch to a assembly, but webassembly, it's something that if you don't do it right is going to be lower than And like, you can get very close to the medal with with type skipt already. And if you like the reason why you want to use the webassemby is either because you want to use solabrates that you can use in Charlskipt, Otherwise,

 

Hm,

 

like Steve of Plus One, or if you want to literally obsess over rememoring management, Like, if you write in a language like Sspaplasyou, Um, you can basically write your memory location with routine, and you can like. If you start locating everything statically, then you can be of course, much more memory efficient, But it's something that requires an ther team of people that know South variative se, so rast colder, and you're going to have a very hard time the barking it. And it's not something that really you would recommen For for a start up that is less than one hundred employees. Because the moment that you start working in a the Supe, really open a pandora box of stuff that could go wrong and you have nobody that is able to understand what you're going under,

 

Yeah, that's fascinating. I like that way of thinking about it because it's it's It's in a way, it's the sort of traditional trade off, right job. A script. Of course, if you write everything in raw, C, C plus plus, Sure, you have the potential to write it faster, but then you have to write it in raw C, C plus

 

And

 

Plus,

 

you have to write it faster

 

Or

 

because it's

 

yeah,

 

very easy to write. Plaplcothat is low.

 

Hm,

 

Yes, it's interesting because some like Figma is sort of famously using that sort of approach at scale. But then again, like if that's sort of their nitch right, So if you come in, if you have a team that, that's what they know how to do. or maybe they've They've got some graphical tool that's written using that text ack, and wants to bring it to the web. That might be the better approach. But if your skill set is more

 

Yeah,

 

web associated,

 

Scat.

 

then it seems like that would be a pretty hard path to go

 

Yeah,

 

down.

 

I mean if you got a few feet bolefrom Photoshop team. not that that happened, but you

 

Yeah,

 

know

 

hypothetically,

 

just hypothetically.

 

Yeah, and and still figure, My using React. I know that Figmindgerally is using the Web Web assembly for the rendering engine,

 

Yeah,

 

and that was because it actually figure comes from another time from from basically ten years ago, in which it was not really clear how the web, the Web, Web, assembly Web, and everything was going to turn out, And so I think to remember that They started writing a super past, because so that it would be easier for them to the Pvotintthat. stop up, But as I remember, they said that they would not do that again and we'll simply stick to jalascipt.

 

M.

 

That's interesting

 

I think that's true of a lot of things that were written even five years

 

Ten

 

ago,

 

years ago. Yeah,

 

So react is one concept. We strangely haven't really got into too much

 

M.

 

page. Kind of asked at at this, but I'm curious. like how does react fit into the fit into the equation? Like what are you using? React for? how is it playing a part in the apse that you're building?

 

Good question. We really started Which reacted when we build flux Nd. So the our entire it's written in Introact. Originally the Commatic editor was not Freitonusing, reacted, but like the the cambuss of the Commatic editor, but instead that's done with old, playing as with classes, and that was written A long time ago. and instead he now our P B editor. It's instead the written using reactor fiber, and so still our entire, our entire U. I. It's which reactor, and our B editor is done with reacting active fibre, and were constantly re evaluating if that was a good choice or not, And yeah, were Doing a lot of a lot of optimization on that, especially because React is very nice and allows you to build the like things very quickly, but of course it doesn't cost both in terms of performance and those to it in terms of freedom. The second thing is a good thing because it restricts your freedom in a way that you know that you're going to write something. That is, It's going to be easier to maintain in the future, but of course it also creates some problems in the moment that you really want to obtimize performance further. And if you are not cocos enough, which act is very easy to introduce? I don't remember legs or performance bottle necks and we worked all out on that.

 

So for those of our listeners and myself who are not as familiar with react three fiber, can you just give us an idea of what what it is as a library and how it's useful or how it could be useful to your web app?

 

Yeah, absolutely dada Behind he retire fiber is, it's a reconciler that allows you to handle T. J. S. The clarative way is react to Sis. Is going even a step further. It's library to create treaty applications on the Web, and it relies on the concept of of a senggraph. It's a concept that. it's very similar to the Dom. Like In the dim, you can have a box that contains another box that contains text in the same way. In the days, you can have a sum that contains a group and this group contains a dream other instead of it. And the logic is that you can interact with it in an imperative way like you do with the Dom and remove elements. Other elements append move them, and every time that you example, transformation to an order to a parent, it will Some of the children. So if you have a group with stuff in side of it and you move it on the left, everything that is inside that group will be moved on the left as well. and of course that's a bit of a pain to handle, because as we know the do it relies on Get element by the pan, children and managing that like, Imagine that you have to manage a table manually with a dog. It's a pain. It's much easier to just declare how your table It's going to be displayed, Which react and ave that flow, and render the cloudtivty. There is the same same idea which fiber in Tad. In fact, it's using React under the whole, just a bit of calupter code that allows React to know how to mutate the Seine graph of Tregars, and the ideas that, instead of instantiating a new group, adding to the same isentiating other and Being, go to the the group, and so on, Rectory Fiber allows you to use just Ax to create your scenes in Rajas, and much more quickly develop a treaty, a treaty application On the Web. it also handles setting the props like. If you set up position prop on on a treaty model, it's going to culture to change the position of the object. And so it handles a lot of stuff to you, and it allows you To write to the application in a very fast and concise way, And he people at pimandrs, like Pole Hansel, for example, Tae rode a lot of very very cool Amos that became famous around the Web because they, they look very good. Introduction is super smote, And then you look at the cone is like thirtintends of cold for something that seems extemycomplicated, So the adientar like the entire system around Rectory fiber is pretty amazing, but what we discover is that when you actually want to build some data intensive application like an editor or some very complex tartivilization, the

 

Yes,

 

you arrive at a point in which the obstruction is not the right one any more, and you need

 

M.

 

to start working around it.

 

So if I'm just a novice with three j, s right, it sounds like react three fibers a way to go. Just use that. That's a big framework that sits on top of three g, S. and on top of you know the three g l stuff

 

Yeah,

 

and there you go.

 

depends what you're building, Depends what you're building, Because like, imagine that you want to like, you know that we react. You are trying to reduce the the amount of stuff, the amount of renders that you have,

 

Sure.

 

So you want to make sure that when you click about on like just one render happens, and not your entire page renders every time. Unfortunately, when you build the complex application that becomes a bit difficult to With Ritrctoryfibre, because React cannot run at one other and two different per second. it does necessary hover to defer what happened and the call order and the functions again. If our trying to do like to animate something which rectoryfiber, you know that you are going against, react, and the reactive you will not go in to be able to. You have laid, and at one hondntatifen second, and in the same way, if you have sixty thousand elements to render and you try to do that, were after it will like, internally, call you Render Function sixty thousand times. It will compare the props and call all the use Man Six thousand times like that is eventually will not scale. And and you see that You need to transition from approach, that is one react component for each element of my data, and move to an approach that is more like one record component that is responsible for rendering all my data as well, unfortunately, like, like we already do it vitalized, lest normally vitualiedist, even in the in the nominal days, are a single component thing which you pass your data to it and he internally, it doesn't use reactor. It, S normal dome and a lot of imperative motations to do stuff. Really for us. That's the same approach. Basically that we are taking as well with retour development.

 

Interesting. so

 

All right, So I have a question.

 

Yes,

 

Oh, paid. you go first.

 

Okay, Well, my question was are you able to use one of the React frameworks with this like, can you use next j, S, or you know any of the kind of now prescribed frameworks Or is it kind of a home grown solution, Since you're using React and React, three fiber, and kind of some specialized use cases.

 

Yeah, so if you're talking about ractrfiment in general, you're absolutely able to use frameworks, For example, Bilot applications that we will were built on top of both next J S and the Gatspjs in the past, and both, what happens is that the stuff for Ractrfibe will not be suburb side or statically rendered, but it will be simply be Cambus, and it will be runmentoryon He client. And so it's actually very easy to integrate it. Just plop in the component and you will work immediately. I think you will also have in the Pomander get up page sometime, plates to use next year. That's nice if you want an example about how to use it. but Internet flux right now, we're using rate Act up. We are not using a framework and for mainly to The first reason is that we started building it a few years ago, and at that moment like everybody was using trade, React after and it was. it was not like right now that recently the rack team said that either use a framework or you're doing something wrong.

 

Yeah, that

 

And the

 

was

 

second

 

hilarious.

 

reason is that, and the second reason is that Like even the team said that there is a ninety nine percent of the case of the cases, you won't use a framework, And we discussed about it, and probably an application. Like our faults, the one person case in which you don't need a framework, Because the reason why you why you used framework in your lipication, Think about next or Ic is because it allows you. It gives you a lot of facilities and like obstructions to work with routing forms Serverside of static rendering and stuff like that, But in our application we don't really have those needs. We don't have web forms extensively. We don't have a need for server side R, taticrendering, because it's like our application is literally blankhdml with a lot of Tavascript running on top of it. We don't have lots of pages in which we need the two ha. The user jump through the maintain cash between them To really our application is. I think it's more like comparable to having a vital machine inside your tub that is running an enterobradexisten of sort.

 

Yeah, I mean that makes perfect sense. It's much more client focused on a lot less like you said, a lot less need for server rendering, which, in that case,

 

Yeah,

 

you know, create, React, Ap is a really good option because it doesn't. It doesn't try and do the cashing and the rendering and all the stuff that most of the frameworks nowadays do. so. Yeah, that seems seems like a good use case for it.

 

All right, I have a question, And this is actually for the for the whole group, because I've heard about three s, and like various talks or whatever, for many years. At this point at conferences, it comes up on this podcast every so often, but I never have a chance to actually use the thing right because I think this is probably true for the lion share of our listeners as well, because it's not like my designer comes back and says like, Oh, we're going to include a three d model or a three d interaction on this page. It's like it's not in the repertoire Of your average sort of web person right, so I'm wondering if anybody here is the suggestions. Maybe something cool you've seen on the web. Like, what are some ways that like these, sort of three d effects could be useful for. Like your average website. Have you seen anything on the web? Like how? how this is like

 

I,

 

a very personal question. How can I start using this right? Because it's it's exciting stuff, but I feel like I'm inevitably just going to keep it in the back of my head, but never be able to actually build

 

Ye.

 

anything with it. So I'm just looking at any suggestions. Idea is, I'm gonna open the floor.

 

You mean use cases or

 

Yeah,

 

how

 

Yeah.

 

to?

 

yeah,

 

Okay?

 

just use cases. like. What's something cool you've seen

 

I've

 

on the

 

got

 

Web

 

one.

 

that

 

I've got

 

uses

 

one.

 

this?

 

so right around me in Oregon City. is this light saber company? No kidding. They make light sabers and

 

Okay,

 

no, not real

 

Amazing,

 

I'm

 

light

 

listening.

 

sabers. Obviously, but

 

I'm listening.

 

but you go out of their site and they've got like a builder, And then you can kind of snap together all the pieces and then you can. Actually, it renders it on the fly for you, and you kind of spin it around and you can see what the hilt is going to look like. What the saber? You know. It's really cool. Honestly, you

 

Okay.

 

know, And and it's

 

Okay,

 

hard to visualize that into D, you know as a customer

 

Hm,

 

right, And so I think it probably really helps their sales that they are able to do that.

 

I wonder, could you use this to show like a, just like a product off. Because I'm thinking like

 

Yeah,

 

standard, like standard,

 

totally,

 

like commerce. Like right, I'm buying a shoe. Well, it's like. Well, I'm

 

Hm,

 

looking at static images of shoes. But what if my shoe was there in three D, and I could spin it around and maybe change the color of the shoe

 

I can

 

like

 

one hundred

 

I

 

percent

 

could see

 

tell

 

that. B.

 

you that I'm sorry, some company in

 

Uh,

 

the Pacific Northwest that makes shoes has this exact thing and yes, it does, particularly when it's a shoe that you really hypercustomise. You know, if

 

Okay,

 

you

 

M,

 

can get your

 

yeah,

 

own logo on it or you can get your own

 

okay,

 

like, Yes, it's very, very good for that.

 

I think that that one use casing, which using the experience in on the Web really shines, also did a lot of research about these in the company in a company in which it worked previously, because like in commerce, it does really a lot of potential, especially because you can like give your company super powers with stuff like showing customers Products. like, If you see in among the reactor fibre example, we have an example in which the floating shoe, as we were talking before, with a color picker, for which you can,

 

Yeah,

 

with which you can already see how the show is going to look, and also even stuff like, Imagine that you, you are a company in your building a product like a physical product, and you still having finished your product, But you want to already show Without you want to show it to customers. You create a them of it and you put it on a website, like, even for a car, you can do that and maybe put it even in context of like you're creating. unless you V. and you put it in context of the wilderness and driving in sad forest of like that, there are really good things that you can do. I think that the bottom next there are to one is the crati Of remodel. Of course, imagine if you have a very big commerce, and you want to start building the model for every single product that you sell like that Is if you want hyquolotyto models, those are unfortunately not easy to do. The second botanic is that you may be worry that your product is not looking good enough, because if you want your product to look good, You really have to maybe have a bit of craft possessing power or

 

Yeah,

 

art teas that

 

Yeah,

 

really know how to show it off like normally, you're the treaty models look way way better if they have rate racing, but of course not something that you can do on a phone. There a lot of waste of take that, though like there are lot of tooth that allows you to create a treaty model that is actually simpler. It's pretty simple on the on the harder, but it does like all the retracing already drawn On the texture so that it already looks good living with lower and harder, But of course that's that's a thing that really you have to Do case by case for your product and you have to have artists that are capable of doing that.

 

Yeah, you can also do

 

So

 

the

 

yet,

 

thing where you like take frames right, And you actually like render on serious D. P. and you pre render frames or a movie And then you just put that on. You can spin it around and you know nobody. It

 

Yeah,

 

works

 

in

 

on

 

fact,

 

low and hardware.

 

yeah, and in fact, an interesting finger things, that, like the famous fruit company, The Tomas computers,

 

Yeah,

 

and

 

Uh,

 

for their website

 

uh,

 

Yeah,

 

I think that they're not using any truly model, but they're using

 

Oh,

 

sequences of J, P, G, and

 

Hm.

 

you with a channel, so that what you're seeing is not already model, but it's rendered stuff. Of course, that's a bit

 

Hm,

 

Fits the purple, so I think that really the value of having to lay on the webbist when you have inter activity, like being able to customise our product or even

 

Yeah,

 

more complicated stuff.

 

Yeah, I'm on a nameless swoop shoe company in the their website and I'm customizing some shoes right now and I got to say it's It's kind of fun. It's kind of cool

 

Oh

 

to

 

yeah.

 

do. It's

 

And and you get an emotional attachment to it and

 

Uh,

 

Yeah.

 

yeah, you're gonna. You're going to buy those shoes, man, I'm telling you, I know it

 

Well, I think also to like. I definitely see the challenge if you're like big commerce and I have tons of products like. Yeah, that's a huge challenge, but there's a lot of companies where like they have one product they sell, maybe, or like a small portfolio, and I'm sure there's even if you struggle with the three d modeling. I'm sure there design firms out there that say like Hey, ship us your stuff, and we can create high quality assets for you that you can use and bake

 

Definitely

 

into your website. So it's It's definitely Something you can. You can find a way to get it done. So interesting idea. giving me some ideas.

 

So

 

Page. You got any idea?

 

if you well, I mean, I'm thinking of car companies and I think that I've

 

Oh

 

even

 

yeah,

 

seen this on some websites is where you can design. You know you build your car and then you can turn it around. You can look at every angle of it or close to it. Maybe it's like you know ninety degrees, forty five degrees and they just kind of rotate it that way, but that would be. I mean, that would be a cool use case for it, but I'm wondering like if you Are new to this or you haven't used it before? What are your recommendations for getting started? Because we're obviously not going to start by building customized shoes and cars and things like that.

 

M.

 

So what's an easy way to get into it?

 

Well, actually, I don't agree with you, because building custom like customisable, She, or are, it's one of the simplest thing that you can do like programming White Modern, We absolutely out because of course, building show or Cartraly model is no trigal. But then what it boils down to, if you want to simply change the color of a show is rendering the shoe and taking the material. That is the one that you want to change the color of and setting the color value. So it's I think that is actually a good Hello word projects on for someone that starts. So

 

Hm,

 

if some bony wants to start doing it, I think that is very cool. It's very cool to just simply go into the Rectory fiber web site and look at the examples and we have a lot of good stuff That is like very simple to do in one other of gods of. And then you can already get started and see how you can integrate treaty experience with something, and a lot of very other cool experiences as well, like, for example is one that is like picking your stick, your sitting place on a train or Orion airplane. Imagine being able to see, trade your your training or your airplane and being able to click on

 

Hm,

 

the position that you're going to be or for a Cenmater Would be amazing. Imagine like keeping the user the ability to see a review of what they will see from their from the movie seats and how it will affect their possibility

 

Ah,

 

of viewing. do,

 

a stadium too. I could totally

 

Yeah,

 

Yeah,

 

stadium,

 

see

 

For

 

that

 

sure.

 

Yeah,

 

like that's

 

You don't want to be behind a big post.

 

but

 

You know.

 

man and two d, two d models of stadiums always make it so hard because you're just looking at this massive thing and you're like you have no concept of like this cheap seat up top One. Am I actually going to be able to see like you have no idea? So so really interesting ideas.

 

Yeah, an actor fiber for building stuff like that is very amazing because it provides you an obstruction. that, as we discovered, it's not really going to work if you want to render one hundred thousand elements and changing them constantly like we're doing at flux. But if you want to build an experience that it's not to be self contained and it will look really good. It really provides with an amazing system of libraries and Already made materials and controls interaction. Everything and check it out.

 

Cool. I'm gonna have to give those react three fiber examples A try. That sounds really fun. T. J. I'm excited to see what you build with it too.

 

M.

 

Well, I'm busy right now customizing my light saber based off with

 

Yeah,

 

what Jack, and so

 

Oh well,

 

You

 

Julia,

 

know, I

 

this

 

always.

 

has

 

I

 

been.

 

go to camacons and they never.

 

Oh well, Julio. this has been great. Is there anything that we haven't touched on yet that we you think we should talk about or we should know about

 

No, I think that like regarding T. J, s and performance, that would be really powers to talk about that, but yeah, I think that's a. That's a really great introduction.

 

Cool, and I'm going to check out Crome tracer as well, because that's something that I've never heard of, but it sounds really useful

 

Yeah.

 

for figuring out why my computers lagging.

 

Yeah,

 

All right. Well, I think that this is the portion of the show where we move into picks, and this can be websites that you found that are interesting products that Ou like that you think our listeners would be interested in or shows that you're watching. So T. J. would you like to kick us off today?

 

Sure, I'm going to pick the show Poker Face, which is

 

Oh,

 

on Peacock, In its pretty new. It's like Who done it detective type style, And the creator said they was heavily inspired by Columbo So if you've ever watched Columbo back in the day, which is show, used to watch with my dad all the time, So some of it is just like nostalgia for that, but the whole premise of it is they. They show you the crime, like to start the episode, So it's not like you're not like trying to figure out who did it, but you're rather going through the Is, are the person trying to figure out how it happens, So it's kind of a unique concept. I'm three episodes in. I've had fun with it so far, So if you like those sort of detective style shows, it's a pretty good one.

 

Nice and the name of it is what again?

 

Poker face, poker face.

 

Poker

 

Poker face,

 

face?

 

Yeah, I like

 

cool.

 

the actress like

 

The

 

she was in some other one and she's got this great vibe.

 

She was in the ground hog day type show. Well, that was really good. I can't remember

 

Yeah,

 

the name of it, though

 

yeah,

 

I'll have to look it up. The other thing about the show too is that her stick is that she. She can tell when people are lying. That's like the whole live behind the show So obviously that's how she, and figuring out these crimes as she can, she can tell when people are lying abou.

 

Nice. That's a good super power to have.

 

Uh,

 

All right,

 

uh.

 

Jack. What have you got for us this week?

 

Sure. so I, speaking of P. Manders, and actually dituacatotually, just released Joe Ti version, to which is an atomic based state manager, Uh, similar to like Recoil, Think there's one other one that's also atomic based. It's very cool. You can basically take data, Adams, and kind of have them depend on each other. and this new to really cleans up the inter face even more than it was. I mean, I think Always was better than recoil, and now it's even better better than recoil, and

 

Oh

 

it also brings in a vanilla aspect that the that

 

Yeah,

 

recoils never

 

yeah,

 

had, but this other right off hand what the other one is called, but it had, and so now you can use the same Adams, with not only just

 

Oh,

 

react, but also in vanilla case as well other other frameworks great.

 

Yeah,

 

just a lot of great improvements

 

yeah,

 

and it's great to see Joe Ti. kind of picking up traction like that. Think it's a great data model?

 

Very cool. Yeah, it's always exciting when things you know go to their next iteration and become even more useful than than they were And you didn't think they could get better and they do.

 

Yeah, dashes doing great work. Honestly,

 

Nice shout out to him. Um, so my pick for this week is going to be a tool that I've been using

 

Yes,

 

quite a bit lately, which is called the Open a Pi generator. and in the company that I work for, we're in the process of

 

Yeah,

 

creating our own job script library to make one of our apis easier to use in Jobascript based projects, and the tool Open, a Pi generator is able to take The open a P I speck and generate an entire job of script based library out of just that speck, So it made all the models. It made all the a p. I end points. It provided documentation and examples of Hou to actually implement the job of script library. Um. It's so cool that it was able to just do all of that with a few simple commands from the command line. So if you need to build some sort of a library Like that and you have an open, a p, I speck that you're using for your your, A pi, Um, Definitely checked this out because it saved us a ton of work, a ton of time, a ton of having to do it manually. And it was. I mean, it was so shockingly easy that I was really pleasantly surprised by it. So that will be my recommendation for this week and Julia, Do you have a recommendation for our listeners

 

Yeah, I mean, I'll be that. that kind of Ndmyrecommenation of this week is probably something that you will find cool, but completely useless And it's a library called B Eighty Six, and the idea behind it is that it's able to emulate a Ter computer on

 

M.

 

Intelegue, Ightysix, computer on Bar, and so like you can simply import Library Ave, recently published the Mpmlikemversion that you can use with with package manager and a band, and you filo up the library. You lot the the like giving you, give it the image file for the hard drive, and it will simply be able to love something like Lenox, or even when you sixpeed, and it will completely run on your Er. And Ta was trying Do some strange stuff because I'm fascinated with old computer and technologies and Red computing, and I was trying to like build. Collaborate. That allows you to use React to build userintrfacions inside of wine. Ninety eight. Like to give it that that retrostyle, but not just asses that makes it look like, but it actually sense common to the vital machine and create elements It uses. but it's cool.

 

I love it.

 

At Sounds fun? Nice, very nice. awesome. So Julio, if people want to get in touch with you, what's the best way to reach you online?

 

Well, I have a Twitter. You can find me at Cilsaza or Katuptrfinter. My milder or weiter is probably the best option.

 

Fantastic, Well, thank you again for joining us today and talking to us about React, Three fiber and flux and all the cool stuff that's available. It's been really fun having you.

 

Thank you for having me just me a pleasure

 

Yeah, it was great. See you next week.

 

Yeah, see you on the

 

Bit.

 

next episode.