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