Hello, everybody, Welcome to another thrilling episode of JavaScript Jabber. I am
Steve Edwards, the host with the face for radio and the voice for being
of mine. But i'm your host today with me on the panel, coming
from across the pond in Tel avivvisuel As, mister Dan, how are you
doing, Dan, I'm doing well. I'm doing fine. Thank you?
Good are you? Are you my opposite today? Weatherwise, we were getting
snow on the ground here. Let's put it this way. I'm sitting in
front of an open window in a T shirts and sweatshirt. I feel your
pain, I really do. Also with us on the panels, mister A.
J. O'Neill from the purple background, Harry you aj yo, yo
yo, coming at your life from under the weather, under the weather.
Oh sorry to hear that, yeah, and I'll feel better tomorrow. Our
very special guests, also from the tele you area, mister Shaye Davidson.
How you doing, Shay? Hello, Thanks for having me. We are
glad to have you here. We are anticipating, shall we say, quite
the reaction from this one. And you'll understand as soon as as soon as
you hear this, thank you, Thank you, hey, folks, this
is Charles Maxwell. I've been talking to whole bunch of people that want to
update their resume and find a better job, and I figure, well,
why not just share my resume. So you if you go to top endevs
dot com slash resume, enter your name and email address, then you'll get
a copy of the resume that I use, that I've used through freelancing through
most of my career, as I've kind of refined it and tweaked it to
get me the jobs that I want. Like I said, top endevs dot
com slash resume, we'll get you that, and you can just kind of
use the formatting. It comes in word and pages formats and you can just
fill it in from there. All. So, Shay is here by Dan's
invite, as she wrote some very disparaging tweets. No, I'm kidding,
just some tweets with opinions on React server components and things that I am not
very knowledgeable on. So I'm going to let Dan take it from here.
Well, you know, React server components is a totally non controversial issue.
I'm just kidding. It seems that that it's got like the entire React community
still up in arms. Ever since they were introduced, we've had we've discussed
them on several episodes. Obviously, we've had Dan Abramov on the show.
More recently we had another episode about it. Let me, I forget the
name of our guests. I'll say it in in a minute. And I
also spoke about them, and and in general it's you know, a lot
of people are talking about them because oh yeah with Sam Selikov, who did
that really controversial tweet while back where he actually inlined squel query inside the React
component, like the kind of reminiscent of the good old PHP days and it
and it got the entire React community really up in arms. So so it's
a pretty controversial topic, I guess. And Shy did his uh his part
of you know, increasing that controversy. So I thought that, you know,
having him on as an actual person who actually try to use this technology
rather than you know, somebody who's either promoting it or intentionally disparaging it,
I thought would be like an interesting change of pace. And also the scenario
in which Shi that you used it is also I thought, really interesting,
So I think it's also worth talking about. So yeah, take it away,
introduce yourself, please, thank you. So I'm Shay Davidson. I'm
thirty nine at a birthday last week. The birthday, my day was your
birthday. It was a Sunday. Okay, the twenty eighth is the perfect
day, but that was mine of course enough. I've been developing things since
I remember myself started my career as a flash game developer. Actually won the
best Israeli in the game in twenty ten, but did nothing with that,
yeah, unfortunately. And then I started my actual career as a web developer
of eBay. Then with PayPal, worked in a paralttle thing with Cancy Dodd,
by the way, and then after my team got was I joined Lemonad
and I'm there for five years already and a principal engineered there, and until
recently I was the funt and lead in the company, and now I'm leading
all kinds of technical initiatives. And so both of us are kind of in
insure tech. Because I wor I work at Next Insurance. We are.
It's it's funny. I never thought I'd be in insurance. And also my
wife is a legal counsel in an insurance company in Israel, and so it's
we have insurance and I was like, no, I want to develop games.
I don't want to be in an insurance And funnily enough, my first
job, my first professional job as a developer, was in a gaming company
as well, but that was a really long time ago. A lot of
people started, I mean a lot of people I know went into development just
because they want to develop games. But now nobody that. Yeah. Funnily
enough, I've never been a big gamer. I'm not really big into actually
playing games, but actually programming games that's a lot of fun and something that
I really enjoyed doing. It's amazing and it's probably the best track in development
or coding that you can ever experience. But I can talk about it later.
Let me start sharing the story. So a few months ago, I
was in a family trip in Europe and we were hearing a podcast in during
a car ride, and we listened to the history of computer games, and
the narrator talked about games in the seventies textual adventures or months where you could
input text and the game would reply to you what you're seeing or what you
can act upon, etc. And my daughter, which was almost nine back
then, was very excited, and the first thing she said was Daddy,
did we have something like this in Abril? And I said maybe, And
we went back after the vacation and I search on Google and I couldn't find
anything in abroom and in the age of A, I said, okay,
that should be pretty easy to develop, because I mean, you can even
go to GPT today or Claude, which is even better in enbroom and write
a prompt, write me a story about it. Imagine I'm a character in
this world, and let's try to build a story together. And I mean
it works pretty well. I mean I sometimes I read stories bet time stories
for my kids, just using the problem from GPT, et cetera. That
I wanted to create a very unique experience that feels unique and feels like a
gift, something that she can be proud up that she received and she can
play with and looks pretty nice, and I don't didn't want to just center
the link to open AI website and you can do whatever she wants. And
so I started working on a project called Cepuela, which is again a simple
application, a simple reactiplication built on top of open AI APIs and just looks
way way better. And if I can interrupt you for a second though,
if what you were doing is pure text based adventures, why do you actually
even need react? How it's text? You're right, But the thing is
that that was like we've been using next JS in lamonades for quite some time.
But I mean, as the front and leading lemonade, I said,
Okay, I know all this general around the reacts of the components and next
fourteen and then the move from the page router next to the app router or
was vice versa. But and I said, I don't know anything about it.
Let's use this opportunity to also experience some new technologies. And of course
if I'm using next, I need to use reacts, and I wanted to
experience with that, considering it was a simpler it is a simple application.
We have only I have only three pages. I have some ABI calls to
get to open AI and get the new follow adventure. Yeah, I thought
that was a reasonable excuse to start using reacting next ys. So it's kind
of like that thing about developers wanting to blog. So the first step in
blogging is creating a blogging platform. Yeah, so you you kind of use
this opportunity to learn about the new REACT well, in new next Yes,
well cool. I mean, you know, if you're going to do a
hobby, you might as well get the most out of it, for sure.
I I thought that it's important for me, as somebody who is in
a leading position in a company, to first be able to reason about this
when people are approached to me and say, what about why don't we upgrade
our next or what about sother components? Do you have an opportunity to use
them in our code? And I said, well, I don't have any
experience with it. I don't have any viable use case for this right now
in our business plan, and in order to have an opinion about that,
and I might need to experience it directly. And that was a great opportunity
for me because before before we dive into that, you did mention that the
level made you do use next JS. So I'm kind of curious, are
you using it like as the general basis for your front end or for particular
things? No, you know what you know, depending on what you can
actually say. Obviously, we started using FGZZ about at the same time I've
joined like four and a half five years ago, and the purpose was mostly
around SEO. We wanted the suber side the rendering for SEO and so it
was for the public site. Well, yeah, it's only for our marketing
website, and that's how we call it. Okay, okay cool. Funnily
enough, it's the same thing at Next Insurance where I currently work, that
our marketing website or public site as we call it, is built on top
of next GS as well, and other things are not the thing that its
rank is built on nextvs. A lot of the experience in Lemonade is very,
very very dynamic, and we thought that we didn't find a good use
case for Next with these use cases. And also we ran into a lot
of problem with hidration considering we have a lot of highly interactive, in dynamic
animations in a website and we do a lot of generative CSS, and it
we always run into aggration problem and things that they need to be zomorphic,
like all your components need to work both in the server and the client in
the same way. And when you when you rely on the in some components
or some pages, when you write on the position of the scroll when the
user refreshed and it's only available once the seven request ends, then you run
into problems. So so in that case, just again, you know,
depending on what you can tell us. I'm kind of curious, then,
what are you implementing that part of the user interface? And elimonade we have
our own framework, but basically it's Vanilla reacts. Oh so it's kind of
client side, client rendered React. Okay, it's it's interesting. I'm actually
I'm kind of derailing us slightly, but I think it's an interesting point to
bring up because I am seeing kind of this uh, the split or how
would you say, bureau be by furcation, bifurcation in yeah, exactly,
in the in the React ecosystem of like you know, forget about reactions over
components. I'm talking about SSR hydration meta frameworks. On the one side,
next day, yes, you might say, because that's the like the king
of the hill for for React meta frameworks. And on the other side,
a lot of organizations simply doing client side rendered React. You know, maybe
somebody did create React app a couple of years ago, maybe they even manually
configured web back. But it's basically, you know, a lot of software
built using React, you know, and especially at larger orgs, don't care
about SEO, don't care about ranking. It's it's like dashboards and interactive applications
and whatnot, and it's just clients that react all the way at least that's
what I'm saying. Yeah, I think in our case, I mean,
in our dynamic pages, we didn't need a CEO. And I think that's
a question that I've seen, that's a problem, that's an opinion. I've
seen a lot of times that the focus on SSG and perform rendering performance with
initial learning performance is indeed a front end concern, but it's not the only
concent but people like in all the metals caussions around react nowadays it's it's only
this the rendering initial veteric speed working with network and little with server data.
But front end is more than this, and I feel, for example,
in our business case in Lemonade, we had to tackle other important things.
I'm totally with you. You know. We had Alex Russell on on the
show a while back, and he makes the distinction between websites and web apps
where based on depth of interaction. But the actual kind of split that I'm
mostly saying is around whether or not you care about you know, ranking,
and whether or not you cared whether you know whether or not the page is
actually going to be scanned and being you know, in an index, and
and a lot of cases, you know, like you said you at Lemonade,
also next where I work again, next insurance, not next years.
Uh, it's it's stuff that's behind authentication. It's it's like a funnel sort
of a thing. You never land directly into it, you don't search it.
It's very personalized, so it doesn't really need to rank. So obviously,
you know, there there are some considerations around loading time because obviously you
don't want you to load too slowly. But it's not the primary concern for
sure. But on the other hand, think about what next. What VERSLL
is selling. Versell is selling hosting, so they kind of need you to
want, you know, to care about those things related to hosting, which
are performance, which are the initial render which are stuff like that, because
if you're doing client side rendering, you can basically host it anywhere. Eventually,
I realized that I'm for us to deploy it in versa and in other
services I'm a fan of, like Netlifi. Netlifi don't support acts of a
component. I ran into problems configuring it and just gave up and paid verse
interesting anyway, back to your story. Yeah, so okay, let's wear
was I so I decided to develop this web up, not the website like
you said, for my daughter, using experiment with new technologies if that opportunity,
and the story is not only around the reacts of components like I said,
it's about around the new next thirteen next fourteen actually reacts of the components,
and also have used Superbase, which was an amazing experience. And I'm
saying it because, like I said, I came my first full cycle web.
That gig was eBay, and then there I was writing applications in rails,
real waves. And there's always this notion that it was far more easy
to write web applications back then compared to the node system today, where you
need to orchestrate everything and raisers did everything from you for you. Now,
looking back, I don't miss writing in Ruby. I love typescripts, and
I can't imagine myself writing production grade applications without tax But think good shock isn't
here kidding, but I mean it's still. I mean, there's still this
nostalgic for nostalgic reasoning for we could do better, And I think this is
what the remix is selling by the way, they say they can be the
near rails in the NOE ecosystem. But anyway, developing this game brought me
back to my earlier experience as as a developer, like, yeah, this
this philosoph familiar And so I didn't know about super base anything that I heard
about it from a friend at work, and I if you don't know what
superbase is, it's a SaaS product. It's also open source. You can
create a project and they basically give you a post press database for free with
storage that's compellable to S three, which will time functions, several as functions,
automatic graph KELAPI generation really really great. I didn't use all of this
to just use the database. Yeah, I'm kind of curious, like what
did you need all that power for. I didn't need all this power.
I just wanted free database because, like I said, it's not only rails.
Back then, if you remember, there was this company called the Parts
that Facebook bot and then close that deliver the same premise. Here's a SaaS
project, a SaaS product or that you can create a database which functions you
can deploy and you don't need to set up us the database yourself. I
don't need to set up my scul your podcast. It's just there and here's
a simple API to access. And I also Firebase I think in the sense,
well that's what it is. It's an open source version of Firebase.
Yeah, but I don't I have experience with Firebase, but honestly and without
I don't. I don't have a good experience at fivebas and I think about
the API feels awkward to me when I use it, and I don't want
to get into details because maybe it was just one my single or two times
I've been experienced with it and didn't have a good experience. Maybe I did
something wrong. But compared to super Base, I mean, it's a different,
completely different world. But that's but when I when I when I tell
about when I tell people about super Base, they say, oh, it's
like Firebase, and I say, no, it's not like Firebase. It's
it's it has a better developers. Well for what it's worth, super Basis
taglines says, I mean on the website says the open source fire based alternative.
So you can probably forget people for taking that. That's exctly what I
wanted to say. That's that's exactly a tagline. Super Base is an open
source five based alternative. Anyway, back to your story, so you you
you chose a super base for your datase and it was really good for you,
and you chose to build everything on next fourteen with React eighteen and the
app folder and reacts for components. Correct, So my applications three pages,
as I have a Linux page which is static, a dealer page which shows
all the books that I generated in AI, or I have to create book
page and I have the book itself where the user one page shows the textual
adventure what the AI says, and another one the other side of the page.
Book is formed with a single input that the user my my daughter can
write what shoes to do and submits it and then they generates a new page
and moves forward, kind of a chat interaction. Just I created an entire
book with the says, with pages and with the animation, and I actually
don't I show you, but I just realized that my open AI quota is
out, so I can't use anymore. But yeah, but I mean it
was four pages. And okay, here's a component. Do this api called
to super based in the React component, considering it to serve a component,
take the data out of it, and render the component that render the components
you wish to render based on this data in the stead of components. And
the first thing I did was to render the list of books, the list
of stories, and I said, okay, super Base a query from books
by the user, here's the data. It's typed because super Base automatically generates
the types for you, and then run a map function over these books and
render the book component. And well it worked amazing. And that was my
first experience with reacts of the components. And I said, okay, this
is fairly awesome because I don't need to declare an API function in the APA
order. It's just thirty automatical. It creates a API for you, and
I have it in a single file. Okay, nice. Undoubtedly, that's
like the big premise thing is that you, I'm sorry, can make a
call to a single kind of API with a sink a weight inside your React
code, inside your component directly render the results. You know. It's it's
very enticing. Undoubtedly. Yeah, But then things got complicated. First of
all, I ran into problems and wait, the super Base squeries. Like
let's say that I created a new book, a new new book from my
daughter. And I got back and I ticked back to the index page and
the book was not there, and I mean nothing about it appeared in the
next ges, the commentation, et cetera. But if you start training and
Google, you run into multiple Google getab issues around it. And so apparently
because next gs override the native vetch function, they with their own catching mechanism
and I got the all the responses. Well, actually, actually it's not
so much I think that you got the old response so much as it it
basically cashed the old response and it didn't and it basically just returned the cash
version. So as I recall what they did is that they now I don't
remember if they still do it or if they basically backtracked on this. On
this behavior, it's an interest. It's it's an interesting thing to check because
it actually did get a lot of pushback. Basically, the they kind of
built kind of like React query like functionality into their fetch implementation that by default
it cashes the results instead of making if the U O L is the same
or something along these lines. I think that built in cashing again is one
of the things like in rails and oh they're they're doing it for me.
I don't need to develop it myself, Like, well, it's a complete
experienced bundle. But when seeing that, I was reflected because I didn't understand
what's going on and it's belly. I mean, maybe I'm talking about it
in them. But one of the main problems that I had throughout this entire
extent is not necessarily the technology. It's the fact that it's barely documented,
and it's documented thrue vita issues, like, you know, it's it's an
you know, that's kind of the thing about living on the bleeding edge,
you know, And undoubtedly when you started using it, it was kind of
like the bleeding edge. I think it's They would argue that it's more mature
now I can look. Obviously, overriding built in function like fetch in a
way that changes its behavior is something that I'm intrinsically opposed to. I can
understand. Like the motivation, Like the problem that they faced was that when
you componentize access to APIs, you very easily repeat yourself. Like if you've
got two components that need to access the same data, you know, you
end up in this kind of world of pain where each and like, forget
about two, You've got a thousand components that all need to access the same
data. They all make the same API called you can very easily like either
overload your database or just create a performance nightmare. So they build caching into
the actual fetch to avoid this kind of waterfall of a million calls for each
like how do you preserve like the component model which where each component is like
distinct and self contained, but at the same time don't end up issuing a
million fetch calls. So I'm guessing that that was their solution. I would
have been explicit about it, you know, to something like a reacquery.
And I seem to recall that they that I'm trying to remember if it's still
that way or they changed it back a month ago it was still there because
that's when my my daughter's birthday was in February fourteenth, so it's not long
ago. Anyway. Afterwards, I discovered that there's built in caching configuration mechanism
in the new next but it's globally declared on the components files, so and
it's also it was also very hard to find it in the commentation and the
thing I only managed to solve it by digging into gidabitious, But once I
saw the cashingsue U, it was I solved this problem and I could move.
And the next thing that I found confusing, but I understand why it
works is mixing between server components and client components. So basically, whenever you
want to use a React to, it must be in a client component.
And I mean I understand why. I mean it's obvious why because you can't
serialize the state. Yeah, the server components are are kind of stateless by
definition. They render and and they're done, and that's it. So obviously
they can't be state full. They have to be state less. So and
you can't have a use state in a React server component. Steve a j
Is it? Is it clear enough? Do we need to kind of talk
about why that is? Hey? There, this is Charles Maxwood. I'm
excited because I wanted to let you know about this thing that I pulled together
that I had just I've been dying to have this for years and I never
felt like I could, And then I just realized that there's no reason why
I can't. So I'm putting together a book club and we're going to read
development focused books, career books, you know, technical books, whatever.
The first book that we're going to do is going to be Clean Architecture by
Uncle Bob Martin. If you're not familiar with clean code or some of the
other stuff that Bob has done, check that out. I've also talked to
him on the Clean Coders podcast, which is on top End Devs. But
yeah, we're going to get on. He's going to show up to some
of our meetings. And what I'm thinking is we'll probably have like five or
six people part of the conversation along with Bob and I at the same time,
and we'll just so somebody can come on, they can ask their question,
and then we'll just rotate people through, so we'll mute one person,
unmute another person when it's their turn to come on and be part of the
discussion. So we'll do that for like an hour hour and a half.
And then the other part of it that I'm putting together is just kind of
a meet and greet gather area on Gathertown. And so after the meetup and
the call, what we'll do as we'll all go over to gather Town and
you can just log in, walk up to a group and have a conversation,
and that way we can all kind of get to know each other and
make friends and get to know people across the world. One thing that I'm
finding is that, yeah, the meetups are starting to come back, but
a lot of people don't have the opportunity to go to a meetup. And
I really want to meet you guys and talk to you. So we're gonna
put all that together. It'll all be part of that book club. You
can go to topendevs dot com slash book Club to be part of it,
and I'm looking forward to seeing you there. The first book club meeting will
be in December, the beginning of December. We're starting the first week of
December, and you'll also be part of the conversation about which book we do
next. I have one in mind, but I want to see where everybody's
at. So there you go. Well, I think we should talk about
why that is because I personally don't use the components. Well, think about
it this way. If you've got a component running server side, then if
you need want it to be state full, you need to have like this
persistent connection between the client and the server, like a web socket, like
yeah. And also it's like a one to one connection between between your your
server and your client because you're keeping something in server memory that that is the
state, and that makes the whole server side development that much trickier and you
know, less scalable and more complex. You basically you generally want to keep
your server code stateless, you know, keep whatever state you have in the
database or something, and that means that you can't really use stateful hooks on
the server side. So React server components, because they run server side,
they can't use stateful hooks. That your state is not serializable, So how
would you transfer to the well In a sense, it is kind of serializable
in the sense that you know, you can't pass props from a server component
to a client component, so you're effectively serializing props across the wire. So
I can see, like you know, if it was just the protocol overhead
of serializing data back and forth, that's solvable. And like I said,
they kind of solve it already because they serialize data downstream in the React server
components sending props to client set components, and they serialize now data upstream in
server actions or server functions you send which is kind of an RPC protocol.
You send data upstream and you get the result downstream, so they are able
to serialize state across the wire. The bigger issue from my perspective is the
fact that you cannot have persistent state in the memory of a server side component
because you might be hitting one server instance in one call and another server instance
in another call, or or the server you know might be might go down
because it's some sort of a lambda function or something like that, so it
server, so server reacts. Server components by definition cannot have cannot be stateful.
They they can. The only way they can have persistent state is by
using something like a database or something like that. Is that kind of clearer
seve agent? Yeah, but yeah, it does mean that the instance you
want you you you want to use to make a component stateful by adding if
in React in React speak, by adding a use state or something along these
lines, you have to make it a component that can run on the client
side and and use client Is that divide that gets you from being service side
only to having something that can also run on the client side. Yeah.
The interesting analogy that Dan Abramov now makes when he describes it is that use
client is to React or to modern React, like the script tag is to
web development. It kind of indicates that from this point on, script tag
says this stuff runs in the browser or can run in the browser anyway.
Again, I kind of stud it derailed us, but I thought it was
a point worth making that Like you said that the instance you wanted to add
interactivity and client side state and respond to user interactions, you had to switch
over and and you know things that are beyond you know, routing, you
had to switch over to using to use to use client and client side React.
So I want to go different into this because in my case, I
have a four page application. But even with these I mean small amount of
files and components, you started having this nichemash of okay, this is a
several components, and this is another several component inside my page. Oh but
this might be a client component. And this is another client component that is
only a client component because it's he was saying, but it doesn't actually render
anything because I need to get back and data for me, So it's basically
a used client book And then you kind of get lost on what's a sever
component to what's a client And it was art for me to imagine how this
doesn't get messy in loude scale application. And so here's my two cents about
it. First of all, when I talk to people about React server components,
and so I'll backtrack a little bit, I have a talk that I
give it that I gave it a few conferences, which is about overcoming the
performance cost of vibration, in which I talk about various ways in which various
frameworks try to reduce the cost of vibration. And one of the methods is
React server components, because it's pulls some of the rendering operation from the client
to the server. So for React server components, they don't actually need to
download any JavaScript code, they don't need to do any hydration. It just
streams the results from the server directly to the client. But then I described
the downside of this approach, and I say that the biggest downside is that
it's a it's a new mental model that you can't just, you know,
assume that since you know React, you can easily just switch over to use
this stuff. You need to think differently about how you architect your React application.
And again, to be fair, dan Abramov, is you know straightforward
about that, where he basically says that the transition in React from classes to
hooks was a very very easy one because it was bottom up you wanted to
use. If you wanted to start using hooks, you can say, okay
in that, but in this particular component, I'll start using hooks. It
doesn't impact any other part of the rest of the application. And they can
like start in that in a particular point and then expand out, whereas with
Reacts over components, you know you kind of need to bottom it's top down,
and you effectively need to rethink the architecture of your entire application, and
you need to start thinking, like you said shy about, Hey, this
is going to be a server side This can be server side only, but
this part needs to also run on the client, and you know, where
do I draw the line, where do I switch? Where do I place
the divide? And it infects everything, and it really is a different way
of thinking about the architecture of your React application, so that it's not a
trivial switch. I think the comparison is really is really good because when I
joined Lemonade, I had the experience they just they've just introduced ooks and I've
had on experience with the class components, but getting into ooks was felt so
natural to me. It was, Wow, this is amazing. It's function
functional encoding which react and the look the power that LOOKS gives us, and
we don't need mixings anymore, and we don't need compound components and everything is
great. And I learned looks immediately and started applying it in all lemon It's
code. But with reacts with components it feels different because no, I don't
think it's a mental model, and I think that from the start of introducing
it, there was a great communication problem in introducing what they want to achieve,
how it's being done. What is that? But other technology actually works
and everybody are biased around it right now. So even if I had a
great experience developing reactor components, there's this little thing back in my head that
says it's a bit off, and I think that the communication problem around.
I'm not sure they can fix it anymore. And maybe in two years from
now, I'm now everybody are using reacts with components, but right now,
like it has been two years since they've announced it, I think it's still
hard to digest reacts with components, and realistically, I think that only now
people are actually starting to use it. How does that British phrase go go
in anger? Like seriously? And I think like it's it's interesting, you
know, if any of our listeners want to, you know, hit us
back on that. But I am wondering how many organizations are actually using reacts
over components for large scale projects. Uh, it's an it's an interesting question
which I don't know the answer to. I've not I've yet to encounter a
large scale application developed with reacts over components, but obviously my information is very
unecdotal. Do you think it would benefit the react and versus teams if they
have announced seven components after it has been matured enough? I don't know how
that might have worked, because it's it's like a chicken and an egg problem.
I mean, if you wait for it to be mature before you release
it into the wild, it will never be mature and you'll never release it
into the wild. These technologies, you know, they they evolve over time.
Uh. And and you know it's it's also very much about the feedback
that you get. Uh. For example, I don't know how many people
remember that the actual initial implementation of Reactions server components was Shopify Hydrogen. We
actually had a person from Shopify on our on our show I Need to find
the episode when it you know, when it was really new and we were
talking about, you know, how it works and what they do, and
we really didn't get it back then, by the way, and that project
failed effectively, and it failed, and they learned a lot from that failure.
For example, back then there was no use server and used client instead.
It was based on the file name, so you either had server or
client in the file name or something along the lines, and that would determine
whether it ran on the server or ran on the client or both. Uh.
And that turned out to be a bad idea. File name based routing
and configurations. Well yeah, but it turned out to be a bad idea,
and they would have known that it would have that it's a bad idea
if they hadn't tried it out. So yeah, you know, it's it's
you kind of have to make these kind of big bets. Sometimes. The
challenge for React is that they've got such a huge base, uh And and
you know they it's more difficult, what's more challenging for them to make these
kind of big bets than it is for smaller frameworks. Like Ryan Carneiato,
the creator of Solid. He makes sweeping changes in the way that the framework
works, like on a daily basis. But you know he's got like what
how many websites built using Solid? And the people who use Solid are buying
into this, they know what they're getting. Would reacts, it's a different
story. But like I said, I don't I think that if they would
have waited for it too mature. And also remember how long it actually took
to get from React seventeen to React eighteen, Like what was it two three
years? How much longer would they have waited another two or three? You
know? But I think when I think about it, it's not only when
you think about it, it's not only about reacts of components, because I'm
not talking about library maintaineers. But as an application developer, I mean,
you look at all these new React features, even suspense use, transition use,
differd value use. I don't even remember their new book's name is.
And I see it in the team, in the guild, in the Lemonade
front and guild. I mean nobody. It's not that we don't know how
to use this. We don't have We don't really know. It doesn't interest
us to learn it because we don't know what are the use cases for these
features. I mean sustense Okay, suspense is also at a rough initial right,
but now suspense is very known. But the rest of all these new
features, it's not only the several components when you think about that, Yeah,
but I think it's most of the act components. It's first of all,
it's also it's worth mentioning. Again, I assume most of our listeners
know what suspense is all about. Basically, suspense is about saying this stuff
can we don't need to wait on it. It can be a synchronous to
the rest of the application. That's basically from from my perspective. The shortest
explanation of what suspense is that they originally you react rendering operation was synchronous.
It all it happened all at once, and suspense was a way to say
these parts of the UI, well, they can have happened later, and
they can happen at their own time. Shine, Would you accept this definition
or would you use a different one? Yeah, But I mean there's a
way to maybe simplify it because I mean the common the most common use case
is what should I render while I wait for this data? But this part
of the wedding on is only a small part of what I'm trying to render.
Yeah, but that's kind of a fancier way of saying what I'm saying,
because if something is a synchronous to the rest, it means that it
happens in its own time, and you usually want to sew some sort of
placeholder while you're waiting on that thing to actually happen. Yeah, just a
thing. Most of the people use it for spinners and loaders, and that
I think that's the simple way to describe it. Yeah, and I'll quote
myself that One of my favorite shit tweets was that the way to tell the
difference between a modern web application and a legacy web application is that the legacy
web application is one big spinner while it's loading, and a modern web application
is a lot of tiny spinners. I prefer the first night from your ex
perspective. But well, the idea then, though, is that you know,
if with the big spinner, you're you're blocked on the slowest part,
and with the modern application, you know each thing loads arrives as soon as
it's as it's ready, which is again, by the way, part of
the thing about reactions over component streaming is that if you've got multiple reacts of
a components in the page, another thing that's kind of confusing is that each
can kind of arrive independently as soon as it's ready, and you've got a
spinner until it's there, and then it appears, and you can arrange your
page in such a way that the most important things and the high priority things
and the things that appear first are in the initial viewport, while things further
down the page appear as they become available. I think it's an interesting discussion.
I would actually love to talk about it for a few minutes because from
my personal experience, I think the big spinner problem it could solve with perceived
performance improvements like and not to remember I'm not sure that the exact right down
but ghoest texting and that it looks like there's content but it doesn't amation so
like the YouTube thing, like lots of great boxes until there's a lot of
experience SINS are doing at the moment, and when I, as a user,
I enter website and I have these all little spinners and then content starts
appears, it takes my attention. I mean, I mean, first of
all, if you're not doing it correctly, it creates like achieved, which
is which are bad. But I mean I would love I have. Maybe
I'm not the normal user, but I think I want to say everything at
once. And it's sort of compared to why I'm using when people see me
work, Why you're not using a larger monitor, You're you're only using your
MacBooks monitor because and I'm saying, I don't want to move my eyes around.
I want to remain focused on a single place. And when everything pops
out on your screen and it takes your attention, it creates this delay of
your interpretation of the content in my personal experience. So Apple Vision Pro is
not for you. Yeah, probably not. Well, look, first of
all, in a lot of ways, I agree. I mean, you
know, first of all, I hate spinners period, So preferably no big
spinner, no little spinners. Just give me the content fast so that I
don't need spinners. But but you know, think about it differently. You
know a lot of pages, you've got the important things and you've got the
less important things. So for example, if you're thinking about let's say a
weather app, you want to know the temperature and whether it's going to rain
or not. Everything else is kind of superfluous. You know, it's nice
to have, but it's not more than that. And if it's a big
spinner and you're waiting on some slow something that's not the main content, that's
that's a big issue. Think about you know a lot of like you know,
a lot of cases, a lot of modern pages, ads appear after
the main stuff, and you could have delayed everything until the very less as
ad appeared. Some native applications work like that, and that and noise the
heck out of me. Where you're you go into like this news app and
it takes a ton of time to load, but when it loads, it
has everything, including all the ads. You know, give me the text,
load the ads while I'm already reading reading the application. Now, obviously
you need to be smart about it to avoid shifts and stuff like that.
But but I do get the value of not blocking everything on the slowest thing
and prioritizing things based on how important they likely are to the user. Obviously
you need to be to build the UI in such a way that it works
well. Like for like I mentioned before, maybe you know, it's okay
if there's a tiny spinner, but it's outside the initial visual visual uh,
the whole viewport, and it's you know, you'd only see it if you
scroll down really quickly. That's okay in my book. Definitely I agree,
And maybe I've sounded two hours like. It's not that I want the entire
rebsite to load and then show content, but I think there's a middle ground
between showing when, especially for back office applications, when you have a lot
of no I totally, I totally agree. If your page looks like twenty
spinners and and things appear at random in different places, that's a very annoying
experience. Undoubtedly, especially if it also causes lots of shifts, then it's
totally ridiculous. So anyway, were you able to actually build the app?
Yeah? I did, and I actually didn't get to the best part because
I mean I added my up and downs in the experience of developing this that
I think the best feature that I've encountered is a sear action. I was
like, okay, I need an API to create a new book or the
submit the form, etcetera. But then I read about server actions and then
basically several actions work so similar to several components and the fact that you can
declare them inside the component and they are functions that run in the cervil,
but their API, their signature are native form arguments like how you would and
a submitted form from the client. You have the same API on the server
and you have access to the same service side APIs that you have in several
components. For example, I can access superbase and read the form data from
the client inside the server action. Valid. Yeah. Basically, a server
action is a function that runs on the server that can be called from the
client. Effective Now it's wrapped in a function usually wrapped in a form submit.
Does it have to be by the way or can it be just any
I didn't see any other use cases. Maybe they've improved that, but it's
I use it only for from submission the endler for the form and that was
the server action all the time. In any event. We talked about it
with Sam and I also talked about it in that episode I did on RPC.
It's effectively a form of RPC calling a function that runs on the server
from the client using effectively function called semantics and having the framework in this case,
next gs serialize the parameters in the upstream, deserialize them on the server,
and then serialize and deserialize the result which is sent back. So I
think that the serialized thing is not it's not entirely correct because this is also
where I ran to public because the response from a sever action it's it's not
the data itself, because I mean, it's it's running inside a server component.
So if you want to get a data back, you should re render
it with the data you fetched the ste A component. So a sever action
can do two things, maybe more, but I've used to. It can
either redirect to a different page or it can say I want to invalidate the
data in this certain page. And then I mean, it wasn't intuitive for
me in the beginning because I said I need to I want to let's say
that I want to refresh the data in my in the page the trigger diserver
action. So and even if deserver action can be reused, I wanted to
to invalidate the cache in the cache in a dynamic way just in the page
triggered it, And there wasn't such a function and I had, like,
in every server action, I had to figure out what was the path that
sent triggered the action, and then invalidated, so so effectively you caused a
route operation on every submit effectively, Yeah, and then send the data back
down as props in reacts over components. Yeah, next, that's it free.
Well, to be fair, look when I first, like, I
had various misconceptions about reacts over components and about server actions when I first encountered
them, because initially I assumed that it would be more akin to quick server
dollar mechanism, where it's literally a way to call a function on the server
side, but the act really subscribes to the Uni directional data flow model.
So they don't want you to call the function on the server side and send
the data down that way. They wanted to go in a circle, as
it were. You send data from the server to from parent components as props
going down, and you send notifications as events bubbling up or function calls bubbling
up. So it's it's kind of like this circle of how the thing flows.
So I can totally understand why they don't want you to just you know,
do things on the server and get data from the server by just calling
functions, getting data and re rendering it. That way, they want the
rerendering to go through the React server components. It totally makes sense read and
now that I know it, I can can develop these things fairly quickly.
But I mean again, it wasn't really intuitive, and especially the cashing validation
thing. Can you elaborate on the caching issues. Yeah, let's say I
really unfamiliar with Yeah, let's say that I want to use the same server
action in two different pages. But the result that I want is that the
data that I want to invalidate is not in a single page, but on
the same page that I triggered the action from. So it means that you
need to start analyzing the path that the action was triggered from. In my
case, and maybe I didn't do it correctly. I literally added the path
of the page as an even input on the form, so I don't need
to do it. I don't need to calculate it myself. So we're just
there. So, for example, if I want to invalidate the data on
a specific user, you need to have the idea of the user and the
l that you want to invalidate, and then instead of trying to calculate it.
I just sent it with the form lata. It's probably how do you
tell it? How do you do that in validation? By the way,
I don't real the function name, but it's called invalidate tag or something like
that. And some weeks since I've done it, don't remember precisely, but
it's the next JS thing. Yeah, it's a next gas thing, not
a reacting Okay, okay, we are close to finishing. I think shy
as anything else you want to talk to say about this project. First of
all is that you said that you kind of ran out of your open ai
quota, but like we need to wait like a month and then be able
to see it or something along these lines. You know, surely I have
your quota instantly run out as our listeners try it out. So what happened?
Is it? I intended to release it only for my daughter and I
open Ai just released their two four preview tourbal model and apparently it costs a
lot. And when I published in the Twitter, it blew up. I
got like twenty thousand impressions and people approached me, strangers and colleagues and family,
like I want to try this. I want to try this, so
concruly, I didn't have a create user form. I created all the users
manually for some of the people that requested, and then I ran out of
quota for my open AI and I paid quite a lot. But my daughter
played it and she lost interest after a week. And that's fine because I
achieved what I wanted. I created an awesome personal, great gift. I
learned a lot technologically, and I think what experience in Jena, and so
yeah, it's achievedains goal. Have you ever wished that you had a group
of people that were just as passionate about writing code as you are. I
know I did. I did that for most of my career. I'd go
to the meetups, I try and create other opportunities, and it was just
really hard, right the meetups. I got some of that, but they
were only like once or twice a month, and it was just really hard
to find that group of people that I connected with and really wanted to,
you know, talk about code a lot, right, I mean, I
love writing code. I think it's the best. And so I've decided to
create this community and create a worldwide community that we can all jump in and
do it. So we're going to have two workshops every week. One of
those or two of those every month are going to be Q and A calls
right where you can get on you can ask me or me and another expert
questions. The rest of them are going to be focused on different aspects of
career or programming or things like that. Right, So it'll go anywhere from
like deployments and containers all the way up to managing your four oh one K
and negotiating your benefits package. Well, we'll cover all of it, okay,
And then we're also going to have meetups every month for your particular technology
area. So we have shows about JavaScript, to react, angular view and
so on. We're going to have meetups for all of those things. I'm
going to revive the freelancer show. We'll have one about that, right so
you can get started freelancing or continue freelancing if that's where you're at. And
I'm working on finding authors who can actually do weekly video tutorials on some thing
for ten minutes. This related again to those technology areas so that you can
stay current, keep growing. So if you're interested, go to topendevs dot
com, slash sign up and you can get in right now for thirty nine
dollars. When we're done, that price is going to go up to seventy
five dollars, and the thirty nine dollars price gets you access to two calls
per week. The full price at one hundred and fifty dollars, which is
going to be seventy five dollars over the next few weeks. That price is
going to get you access to all of the calls and all of the tutorials
and everything else that we put out from top Endevs, along with member pricing
for our remote conferences that are coming up next year. So go check it
out topendevs dot com, slash sign up. Alrighty. So hopefully you will
all have a good reaction to this episode. I know I'm always learning.
Anything I learned about React, I hear about React, I'm learning because I
don't use it. But anything to wrap up before we move on to picks.
Anything you wanted to cover that we did not cover, No, I
think it was. I had a pretty good experience, guys. Good deal.
Alrighty, So that we'll move on to picks. Picks for part of
the show where we get to talk about anything we want to talk about that
isn't tech related or is dec related or anything within reason that's not and get
us fine, So let's see, Dan, I know you had a good
pick for us once you lead us off, after you turn yourself off with
me, Dan, Yeah, my dog was barking really loudly outside, so
I had to mute myself anyway, So yeah, AI is the thing,
So AI's the pick. My first pick is this really amusing channel on YouTube
where he basically has Arnold Schwarzenegger do all sorts of things, usually sing in
all sorts of sorts of roles. So for example, a really popular one
is Arnold Schwarzenegger doing Judy Garland and singing over the Rainbow. There's another one
whether the Arnold Schwartzenegger is a thriller instead of Michael Jackson or doing Whitney Houston.
It's it's really amusing. And by the way, that's just one example
I recently saw here, and you know it won't mean anything for our non
Israeli listeners, but the very known Israeli banned from the seventies. They had
them cover modern songs and it really but in their using you know, their
voices and their singing style. And again it was really amusing, like saying
like new songs being done by an old band that way. So it's really
amusing seeing all these things that can be done with AI. But it can
turn it turns out that this thing can kind of get scary, because there
was this story a while back about how a finance worker at some company in
Hong Kong was conned into paying twenty five million dollars to some hackers after they
tricked him by using deep by deep faking the company's CFO on on a video
chat. So basically he thought he was talking to his CFO who told him
to transfer twenty five million dollars to a certain account, which he did,
uh, and then only thought to try to verify it to get again after
he actually made the transfer. But but yeah, so you know, watch
out for those deep fakes. And I guess those would be my picks for
today. Alrighty aj, you got any picks for us? Even being under
the weather weather, I don't know. Let's see Dune. Dune was re
released in theaters a couple of weeks ago, and then I'm gonna go see
the next part tomorrow, so I'll pick Dune. It's done very well.
Has it. I've heard sort of bearing bearing reviews on it. Yeah,
thank you. I enjoyed the first part. I watched it a while back.
I thought it was fairly accurate to the book. Last week and I'm
accident it was a great experience. The second movie, the second movie.
Yeah, wait, the second movie came out. Oh well, it came
out on Friday, I guess. Yeah, for us it came out and
Tuesday. No way, Yes, movies in Israel are released earlier of the
world's. That's interesting. Okay, Yeah, well, I I think they
did a really good job with the first movie. I think that if they're
going to do the whole series, they got to tone it down a little
bit, because I think when you're when you're introducing something this epic that's been
done so poorly in prior iterations, it's good for it to come out so
bold and strong and dramatic. But if they keep the same tone that they
had for the first movie for every movie, it would be overdoing it.
But I think it was perfect for the first movie. I actually heard,
I actually heard an interesting analysis about the movie, and that's something that the
director actually did right, which that in a lot of ways, the hero
paulma Deep Polo Trades is actually, in lots of ways, really well the
opposite of a hero, because the best thing that he should have done or
could have done, was literally to kill himself like halfway into the book,
because from that point on, basically what he creates is a disaster. I
don't know. I think it's it's this what you're saying appears in the second
movie, and it's really uncanny. By the way, and without spoiling too
much, have you read the book, by the way A j Yeah,
there's probably some parts that I didn't get fully because it is it's kind of
a boring book, like Moby Dick. You know, it's got a lot
of words, a lot of words. Amazing how books tend to have this,
Well, it's got the book has more words than it has story.
You know. It's it's saying a lot without saying a lot. Well,
he does a lot of what he does a lot of world building, so
you really need to be into world building to enjoy the book in a way.
Yeah, I guess that's the hard part about having such an intricate book
making into a movie, because it's really hard to get in all that background
actually in the description. In a certain way, a movie has a certain
it, don't right. Movies can have an advantage in that regard because they
can just show without needing to explain. One of the problems in in the
the old, the original movie, the one who was done by what's his
name by Devalunch exactly was that he literally told the story as he was showing
the story. Uh, you know, it was all there was all like,
everything was narrated. That was one that was one of the problems of
the movie. The other problem was that it was totally incomprehensible to anybody who
didn't read the book. But yeah, you know there was a planned earlier
version, Yeah of course. Yeah, yeah, the the most the most
famous movie that never was never made. Yeah, too bad, by the
way. Yeah, but he actually he planned on totally changing the story,
by the way, Oh yeah, his story was actually totally different. So
all right, before we move on, I'll give you guys one bit of
trivia. And I may have told this before, so apologies that puts a
repeat. But the inspiration for Dune for Frank Herbert was the large dunes on
the southern Oregon coast not too far from where I live. He lived up
in Tacoma, up in Washington, just north of here, and he's talked
about how that was when he went down and saw the dunes like bandon down
that way, that was his inspiration for writing dune yep. Okay, anyway
myself, I'll move on to the the Dad Jokes of a Week, which,
as we all know, the high point of any any of these episodes.
I'm sorry if you weren't Warren shy, but just to be prepared,
So, did you know that penguins produce an oil that helps keep their helps
their feathers retain their heat, you know, And so in other words,
you could say the oily board gets the warm, you know, for those
of the you know what Popeye is you can think about. Let's see,
the other day I went to my doctor said I wasn't feeling good. AJ
might appreciate this one, as I said, Doc, I've got an earache
and flamed sinuses, conjunctivitis and headaches and he but he was really dismissive.
He said, nah, it's all in your head, right, And then
finally I, uh, my wife and I always brush our teeth together separate
toothbrushes by the way, just because I found out that nine out of ten
dentists say that brushing alone won't reduce cavities yet it so that was funny.
That was funny, right, all right? What do you have for any
picks? Any shameless I thought whether to talk about a game, I'm playing
a computer game, or to talk about the to stick with the sci fi
a concept theme that we had area, And we'll stick with the sci fi
one, because Villain. Your next movie is probably Rendezvous with Rama Stick Clo
Drama, which is my favorite book, and I'm really excited if and when
it shows up, and afterwards it's supposed to do Dune Messiah, which is
the third part of the Dune Saka. Do you know did you read Rama?
I myself have not. I don't know where. Then when its basically,
without spotting too much, it's basically futur a futuristic art sci fi book
about cylindrical spaceship that enters the Solar System and how humans interact and explore it.
And I'm a big art sci fi fan, so the book is one
of my favorites art sci fi. I haven't heard that term before. Yeah,
art sci fi is basically science fiction that tries to cling through reality,
unlike, for example, sci fi, which has a lot of aliens and
a bit our tangent to fantasy, like Star Wars, which is definitely not
sci fi. So it usually touches things like futurism, solar system exploration,
and things that really cling into real science. Okay, cool, I like
to alrighty, so that we are going to wrap up this episode of job
Scripture. We lost and but a j still here. I'm still here,
shy here. Thank you all for watching slash listening, and we will talk
to you next time on javiscript jabber h