Shai Reznik is the Founder & CEO at HiRez.io and he is a Qwik Team Member. They dive deep into the world of web development with a focus on the Qwik framework and JavaScript streaming. They explore topics such as predictive buffering, Qwik Insight, automating tasks, optimizing user and developer experiences, and the challenges of large-scale JavaScript refactoring. With a blend of technical insights and personal experiences, they shed light on the evolution of web development and the future role of AI in frameworks like Qwik. This episode is packed with thought-provoking discussions, expert opinions, and valuable resources for developers aiming to stay at the cutting edge of web development. So buckle up and get ready for an insightful journey into the world of fast and efficient web development.

Sponsors

Socials

Picks

Dan Shappir [00:00:06]:
Hello, everybody, and welcome to another episode of JavaScript Jabber. Today, you have just me, Dan Shapiro, your hostess with the mostest coming to you from Tel Aviv. And, with me is Shay Reznik coming from Israel. Where in Israel? Remind me, please.

Shai Reznik  [00:00:25]:
Rishon LeZion.

Dan Shappir [00:00:27]:
Rishon LeZion. That's Yeah. Yekabat town. And, we are both here today to talk about all sorts of JavaScript related goodness, specifically about the quick framework, about JavaScript streaming, and lots of other great things. Before we start, Shay, maybe you can introduce yourself.

Shai Reznik  [00:00:49]:
Yeah. Sure. And we could also play out all the other voices that people are used to, you know, hearing, like Chuck and Ajay. Yeah.

Dan Shappir [00:00:57]:
Unfortunately, it's just the 2 of us here today.

Shai Reznik  [00:01:00]:
That's that's okay. They will have FOMO. Hey. I'm Shyresnik. I'm part of the QUIC team, also the founder of Hi Rez. Io, where we make web development fun and efficient by courses and consulting and and such. And, yeah, I run the largest JavaScript meetup group in Israel over, 11,000 developers. Wow.

Shai Reznik  [00:01:29]:
Yeah. And and also as a hobby, I do improv and stand up and stuff like that. I like to do entertaining talks all over the world about JavaScript and trying to make it less boring. Yeah. That's me.

Dan Shappir [00:01:44]:
JavaScript is not boring. JavaScript is the most exciting thing ever.

Shai Reznik  [00:01:49]:
Yeah. Yeah. Yeah. I totally agree, depending on, which topics, I'm guessing.

Dan Shappir [00:01:56]:
Yeah. It's so exciting that we're in the process of replacing it with TypeScript.

Shai Reznik  [00:02:01]:
Well, it is kind of the same. Right? Like, I I wouldn't mind if TypeScript was, but, yeah, that's a hot topic probably.

Dan Shappir [00:02:09]:
I've heard several interesting points in this regard. 1, AJ likes to refer to to TypeScript as a superset of a subset of JavaScript, which means that it's a totally, distinct programming language. And the other interesting point I made, I think it was, from, what's his name? Mario Collina, I think. He's the guy who's the main one of the maintainers of Node. Mateo. Mateo.

Shai Reznik  [00:02:37]:
Mateo. Mateo.

Dan Shappir [00:02:38]:
Mateo. He says that, because every different configuration of tier every different thing you put in tsconfig basically creates, like, a different programming language. So JavaScript isn't so TypeScript isn't really a programming language. It's a multiverse of programming languages.

Shai Reznik  [00:02:57]:
Probably. But, hey. It helps with the enterprise scale refactoring, so I'm happy with it.

Dan Shappir [00:03:03]:
That's for sure. Yeah. I I I'm I'm wondering how many of your consulting gigs are helping companies transition from JavaScript code basis to TypeScript?

Shai Reznik  [00:03:16]:
Oh, no. I think more by this time, most of of the you know, our industry are in TypeScript. I think the there was a time, you know, 10 years ago or something like that where people still debated whether it's TypeScript or Flow or, like, whether we should stay with Vanilla. I think by this point, everybody kinda understand that, you know, if you want to do, if you want to save a lot of time and, you know, have a cleaner code base in terms of, like, understandability of, you know, what this code actually does. I think TypeScript is the default. So

Dan Shappir [00:03:56]:
Oh, yeah. I totally agree. It's just that taking an existing large scale JavaScript code base and transitioning it into Type script can be a challenge. So I'm wondering how many organizations are still stuck with either actual JavaScript code bases or code bases that they have theoretically transitioned to TypeScript, but in reality are mostly untyped.

Shai Reznik  [00:04:22]:
Yeah. I don't have the statistics, but, I'm guessing, like, you still have, you know, projects with the only jQuery or just the vanilla JavaScript. Pretty sure they are there in the wild, but, fortunately

Dan Shappir [00:04:37]:
Don't knock jQuery. The new version has just come out.

Shai Reznik  [00:04:40]:
No. Then wasn't enough. Yeah. I was totally for it. But, yeah, that's, so TypeScript, I think it's kinda the standard, these days. And you know what's not yet the standard?

Dan Shappir [00:04:56]:
What's not yet the standard?

Shai Reznik  [00:04:58]:
JavaScript streaming. Glad you asked.

Dan Shappir [00:05:03]:
And that's what we are here to talk about. Maybe we'll make it a standard.

Shai Reznik  [00:05:08]:
Yep. Yep. Hope so. Yeah. So so, yeah, that's, where where do you want to start? From the beginning? Like, how do you deal with it?

Dan Shappir [00:05:20]:
Good yeah. Beginning seems like a good place to start.

Shai Reznik  [00:05:24]:
Yeah. Okay. Cool. So, I was born in 1983. No. So What's gonna Wait

Dan Shappir [00:05:33]:
a minute. You're you just you made the big 4 o?

Shai Reznik  [00:05:37]:
Yep. Yeah. I'm old. And

Dan Shappir [00:05:40]:
you still have your hair.

Shai Reznik  [00:05:42]:
Yeah. I look 16. I know, but, I'm old. Older, at least. So yeah, it's kind of like the whole JavaScript, like streaming and metaphor kinda ties to, like, my whole journey with with Quick, which was a weird journey, how I, you know, got introduced to it and also how I ended up joining the team and and helping out

Dan Shappir [00:06:13]:
the weird journeys. Can you can you elaborate?

Shai Reznik  [00:06:17]:
Yeah. Okay. So I think 3 years ago or some something like that, I talked with Mishko, Hevery, who created Quake and also Angular. We've been friends for, you know, couple of years ever since I gave him a funny t shirt on, in at at NG conf, on stage.

Dan Shappir [00:06:36]:
Mishko is a great guy. I really like Mishko.

Shai Reznik  [00:06:38]:
Yeah. Yeah. Mishko is awesome. I I I gave him a T shirt saying transclusion. I don't think it means what you think it means or something like that. You keep using that word, about the the weird, choice of words in AngularJS. Ever since then, we we became friends and and stays staying in touch, and we talked just just before he left, he left Google, to join a new startup called builder. Io.

Shai Reznik  [00:07:08]:
He shared with me that he's working on this new cool framework called Cute. And I was like, cute? Yeah. But you spell it q o o t. And I said, cute. And I said, no. Cute. And I was like, Misko, we need a a different name. Okay.

Shai Reznik  [00:07:27]:
Let's,

Dan Shappir [00:07:28]:
okay. Will need to digress. You're there was this movie, like, I don't know, a few decades ago about, this band. I think Tom Hanks was the director or or he wrote the script. And the name of the band was, the they decided to call themselves the wonders. It was like a band in the fifties, but they wrote it like a one. Like, the word the the number one. So everybody would call them the the Oniters.

Dan Shappir [00:07:56]:
So eventually the so eventually the record label just changed their name to be 1 the wonders, like, spelled normally. And

Shai Reznik  [00:08:04]:
Normally. Yeah. Yeah. So that that that was like, you know, the the weird naming decision at the beginning, and he showed me a demo. He said, hey. You want to show see a demo? And if you know, Mishko is very excited about,

Dan Shappir [00:08:20]:
you know Oh, yeah.

Shai Reznik  [00:08:21]:
Showing the the bits and pieces of how the technology works and such. So it just, like, threw all this information on me. And I was at the time, like, focused solely on testing and TDD and helping companies with that. And I was, like, out of context of all, like, you know, the meta framework, you know, game back then and all that stuff. So he started, like, like, showing me that if you create all these, like, files manually and encode all the information in the HTML manually. And, if you do all this manual stuff, when you load the app, it will be instant. You have no you'll have no delay and you could just do it. An hour, I looked at it and I could only understand like 20% of everything he said, but I got it that there's some innovation here where you encode stuff in the HTML.

Shai Reznik  [00:09:17]:
Like, that was something that I didn't really see before about, like, framework state, that the HTML remembers from the server. So I said, like, that that's cool. Like, it's very innovative. And he said like, okay. So you're ready to, you know, write some content about it or videos or, you know, like, join. You send me like a a link to GitHub right away. So, you know, maybe I could contribute and and such. And I, like, I had this intuition, you know, how you have this intuition where you cannot explain, but you just feel if it's, like, the right thing or the wrong thing or, like, you know, how you feel about it.

Shai Reznik  [00:09:59]:
So I was like I was like, yeah. I'm not sure. Like, I was like, yeah. I'm super busy now. I have, like, courses to create and and such, and and it's it's a hard thing, you know, because, you know, it sounds it sounded innovating. It looked innovative, but I really, like, something felt wrong. And after the fact, I thought with myself, like, what what made me, like, say not really. And I realized that it was the whole manual thing.

Shai Reznik  [00:10:35]:
Like I needed to do, you know, if you go through the history, right, and and you see, I think you you've been in the talk where I went over, like, you know, the the history, like the last 20 years of, web development. So we saw and show there that, you know, we go through went through the cycle of, you know, user experience and, you know, developer experience. Right? Like,

Dan Shappir [00:11:01]:
We should by the way, we should probably put a link to the talk in the show notes afterwards.

Shai Reznik  [00:11:06]:
Yep. There's a updated version of it that I did in JS world from last month. It's supposed to be, yeah, waiting for them to to release the videos. But but, yeah, but but in short, it was basically, you know, if you if you think about the last 20 years, we've went through, you know, the the MPAs to the to the HTML and then, you know, SPAs, like single page apps, and then hybrid apps with, like, you know, SSR and the new hydration and and such. And every time it was, like, user experience and developer experience basically fighting, you know, with each other. You want more features, but then you're, you know, taking, taking a loss on the user experience side and which basically means that how fast that that, like, users can, you know, reach their goal, basically.

Dan Shappir [00:12:08]:
Yeah. I know what you mean. It's kinda it's it's also this whole transition of going from websites to web apps, and what does it actually even mean to be an app on the web? Yeah. And, of course, going from desktops to mobile. There there were a lot of transitions going on more or less at the same time that all got in the way of providing, you know, holistically good experience to to end users and simultaneously making things, let's call it manageable for the developers.

Shai Reznik  [00:12:46]:
Exactly. So that that was, like, that was the conclusion that I got to, which is, you know, we strived with all these transitions for apps. We wanted to have a desktop like experience, like for the user. Right? Like you click something, it opens right away, you stay in the, you, it remembers what you typed, you know, and all that stuff. You can go back and forth and such, but, it wasn't enough, like just, you know, focusing on that experience because developers, you know, what I realized is that, developers care about this stuff, like user experience, as long as it doesn't interfere with their development experience. Right? Like, if you ask them to do these extra steps, they will only do it if they have to. Right? It's just like some of the the developers with testing. They test after the fact because they have to, or the, you know, it's, it's not really part of the process because it it's extra steps.

Shai Reznik  [00:13:41]:
And when you don't see the benefit of it or you don't feel the pain yourself, then you just, like, you know, want to focus on what you're doing.

Dan Shappir [00:13:48]:
Words, what you're saying is that we're lazy.

Shai Reznik  [00:13:52]:
Of course. Yeah. Yeah. I think it's a good thing. I think it's a

Dan Shappir [00:13:56]:
For sure. And I like to say that, software development is one field where procrastination is often a good thing because maybe you end up not having to do it at all.

Shai Reznik  [00:14:07]:
Exactly. If you wait long enough, maybe the browsers will implement signals for you. Exactly. So, so come coming back to that point where I said, Mishko, said to Mishko, like, well, I'm not sure and such. It was because I had this intuition because there was like, the developer experience was lacking. Right? Like, I had to do all this manual stuff, and I I thought to myself, well, nobody will want to actually do that to just shave off, like, a couple of milliseconds of the loading time. It's not really a a big problem, and I don't know. I wasn't excited about it.

Shai Reznik  [00:14:45]:
Now, like, a year went by and and I I offered my help along the way in terms of, like, advice and and trying like ideas and all that stuff, but I didn't have really time to get involved. A year went by and, because of COVID, we started doing remote, talks in in in our meetup group. So at one of those, remote, talks, I invited Mishka to speak about we had a meetup about, like, future frameworks. So invited Mishka to to speak about, now quick, not cute, but, it's

Dan Shappir [00:15:23]:
spelled wrong, though.

Shai Reznik  [00:15:26]:
Yeah. Yeah. Still with a a twist. Yeah. So I invited you to talk about that. And I was, like, in a much busier time at my life, even, like, you know, before, when we talked, like, a year later, I was super busy with, like, managing a business and trying to to to to juggle between, like, course recording and and new clients coming in and employees and everything together. And, you know, having a family and wife and 2 kids and, and such. So I was like late in the evening, getting a call from my wife, like, are you coming home? I need help.

Shai Reznik  [00:16:03]:
And I was like, damn it. I forgot that we have this meetup today with Mishko. We're supposed to, like, come online, you know, join us, in a in a half an half an hour or something like that. And she was like, okay. I will take care of the kids. Okay.

Dan Shappir [00:16:18]:
Your love your wife is a saint.

Shai Reznik  [00:16:21]:
Yes. Shout out to Noga. I love you. Thank you. So so we had this meetup, and in that meetup, he showed, QUIC, the new version and he went through all, you know, the explanation stuff, but he showed something completely different than what he showed me a year before, because he said, well, you just write this JSX and that's it. Everything done is done for you, and you can just, like, you know, get the instant loading app. And I was like, where are all the manual, you know, like writing of stuff and, you know, inventing your own, like, file names and stuff like that? And he, he, he shared that, you know, during that time he was joined by 2 brilliant developers, Adam Bradley and Manuel Mehta,

Dan Shappir [00:17:14]:
from They are brilliant by by the way. I totally agree. They are they are 2 of the most amazing developers that I know.

Shai Reznik  [00:17:21]:
Yes. Exactly. And and they they both came from ionic and created Stencil together. So they got excited about the he he got them excited, about a a cute or quick. And and and and they're they got excited also about the potential to automate stuff, like, not just getting the result, but also not just getting the user experience, but also getting the developer experience. So that's what exactly what they did. And man, when he joined, he created a, a compiler called the optimizer. Basically it took all the manual steps and codify them and wrote a tool that does that for us automatically, like all of them.

Shai Reznik  [00:18:04]:
You know, extraction of files and renaming of of of things and really, really hard problems to solve and how to extract closures, into their own files, which is also a very difficult problem to solve. So together, the dream team, you know, solved that problem and created the, the new version that he showed in the meetup. And I was like, now it's interesting. It's more interesting. I was still busy with all of the stuff, but I, I, I, I took a mental note and said to myself, well, I will check it out. Like I will take my side project

Dan Shappir [00:18:40]:
agree that that it it's kind of necessary for for something like quick to succeed to be developer friendly. Because at the end of the day, if if the goal is to get good performance, but I have to work really hard for it as a dev, then I might as well work really hard on it from React or something. You know? It it's like the the benefit of something like quick from my perspective, and I think Mishka has also presented it this way, is essentially falling into the pit of success. Is I I want to have the same challenges that, that I have working development, you know, doing development in other frameworks, maybe even less if possible, but the the same at at the most. Mhmm. But automatically end up with much faster web applications or websites.

Shai Reznik  [00:19:35]:
Exactly. That's the the low like, the barrier of entry at least should be

Dan Shappir [00:19:40]:
Exactly.

Shai Reznik  [00:19:41]:
At least what you're used to, if not way better, you know, way simpler to develop even. So and and and one of the advantage that the that the the team had back then, in their disposal is that they they were starting from scratch basically. So they just could, like, take inspiration from different solutions and starts start from that point, like taking reactivity, although it was really essential part to, you know, be able to do all this stuff, but also like looking at, all this like tiny developer experience happiness that you got from different frameworks and bake it in, into this framework to make sure that your start your starting point is amazing. And so I took I took that you know, a couple of days later, I took a side project, you know, website that I had and, you know, with, like, a little bit of interactivity and refactor it just just as a POC, just to test the water, let let's say. And and then I I I deployed it and, you know, test it on the page speed stuff, like, to see the the the result. And I got like 99 on idea or something like that. And it was it had JavaScript. It had like stuff in it.

Shai Reznik  [00:20:58]:
And I was like, what? Like, I I couldn't believe that I just wrote JavaScript and I got this score without manually optimizing anything. I used to, like, you know, like, wrap stuff with, like, you know, with rappers to Yeah. The caching and

Dan Shappir [00:21:17]:
All the shenanigans that we that we do.

Shai Reznik  [00:21:20]:
Exactly. So I had this emotional, you know, wave coming through me. Like, you know, again, this intuition again struck me, but this time on the positive side and on the negative side of like, wow. If I have this feeling, it's like, I want this to be my future as a web developer. Like, this is what I want everybody to have to experience. So this must be the the the future in terms of technology. And when I looked more into it and spoke with Mishka and all that stuff, he he he said that, you know, in order to bring it to all of the rest of the the frameworks, they they would need to, you you know, make a lot of breaking change, breaking changes into ecosystem, also like the API and all that stuff. So it's basically, it's very, very, very hard to do and will be like, you know, you know, like like in the past, nobody likes the the big migrations and stuff like that.

Dan Shappir [00:22:22]:
So I spoke about this with Mishka as well on occasion, and he basically said, I think that initially when he came up with this idea of of, streaming, or resumability, I don't think he was using the terms yet at the time. But as an alternative to hydration, the problem that he was really looking to solve was the the performance cost of hydration, which we might, you know, touch on in a little bit. We've I I've spoken about it in the past, but it might be worthwhile to speak about it

Shai Reznik  [00:22:51]:
again. Mhmm.

Dan Shappir [00:22:51]:
But he thought about initially doing it, I think in the context of Angular. Yep. And he very quickly came to the realization that it was just not doable without, changing not only a lot of Angular's internals, but actually changing, the, 8 API or or the, the the the way that you actually use Angular, that it couldn't stay Angular, that it would be like that transition from Angular.

Shai Reznik  [00:23:23]:
1 to 2.

Dan Shappir [00:23:24]:
1 to 2, yeah, all over again. So you might as well start with something fresh. And as you said, you know, picking JSX, you basically looked at what was the, kind of effectively industry standard at at the time still ongoing.

Shai Reznik  [00:23:41]:
Yeah. The most popular.

Dan Shappir [00:23:43]:
Which is the React, and basically embracing embracing that as, like, you know, where to start in terms of, you know, what the developer experience kind of feels like even though it's it's not exactly the same. And we can touch about other differences between React and, and QUIC in terms of of, you know, the the primitives and the developer experience.

Shai Reznik  [00:24:09]:
Yeah. Yeah. So so basically, well, this is a good point because that that's that's basically how I came into like, once I had this epiphany, I went to, like, I, I scheduled a call with, with Mishko and, and, and told him, Hey, like, I want to help. Like, remember when you asked me like a year ago and I didn't have time. Right? Like, I I was busier, but I know I have I had a wife that, was, no, about to divorce me for taking yet another project. Yeah. Jokingly. Yeah.

Shai Reznik  [00:24:48]:
But, but, yeah, but I was still, like, having this, you know, invisible force, you know, pulling me towards, like, hey. I really want to get involved. I really want to be part of it. And I as I said in the beginning, I I come with a lot of experience in, like, you know, creating communities and make and and being part of, you know, multiple communities along the years since the nineties, and, and seeing what makes a, a good developer community and what's makes, you know, a bad community

Dan Shappir [00:25:19]:
developer community. Let's call it bad. Let's call it less successful.

Shai Reznik  [00:25:23]:
No, I specifically, I am not talking about existing developer communities. I'm I'm talking about, communities in the past that I was part of, which were very to toxic and they're not existing today because of that. So that's why I call, call it bad. So I, and, and, and in between you have always like, you know, nothing is perfect and you have in between, but I learned lessons from it. And I really, really wanted, you know, for quick to have a very friendly community and very helpful and very beginner friendly and, And, and, and, and, and place that people feel comfortable asking questions in and helping each other and grow. And I knew that it also will help growing the framework in terms of the ecosystem because people will, you know, feel much better about creating stuff.

Dan Shappir [00:26:12]:
Undoubtedly, promoting a new framework, is is an uphill battle. First of all, we are we're kind of spoiled for choice. I think, like, what, 8 major frameworks, maybe even more. And and, you know, I'm calling them major frameworks, but the reality is that React for now at least remains the undoubted king of the hill. I think React represents, you know, just React on its own has as many websites, I think, in the Google, Chrome user experience report as all the other frameworks put together. Mhmm. So so undoubtedly pushing or promoting a new framework is, like I said, is an uphill battle. And yeah.

Dan Shappir [00:26:59]:
Did you by the way, did you actually join Builder. Io, or did you stay? So you're kind of a contractor, a helper? What, what?

Shai Reznik  [00:27:07]:
No, I wasn't. So, so as I said, I I had a business and employees and, you know, obligations and all that stuff. And I looked at it, you know, from the beginning, they they they talked about the the project as a community project. Like, they they needed it for, you know, their products and and and the the that's why they invested in it, but they always talked about it as, you know, being a community driven project. And, so I said like, hey. I I I will join as a community, I don't know, DevRel or, you know, contributor to the community, because because the team was small at the time. They didn't have anyone, you know, focused on that because they they were, like, working very hard on getting to, you know, version 1. So I started helping with, you know, writing the community values and making sure that everybody feel welcomed and, you know, start creating these, groups and highlight certain people who are, you know, extraordinary in their con contributions by creating the quick heroes and community leaders and meetups all all around the world, and I was focusing on mainly on debt.

Shai Reznik  [00:28:21]:
And and also started, I knew that, in order, like like you say, it's a uphill battle and I came at it from a different perspective in terms of like, let's say the other solutions. I I view all of the other solutions, it wasn't a pun, as one big JavaScript family, basically, because I come from mainly the Angular community, which is also very friendly and very supportive, and I have lots and lots of friends there. And I see other communities as well, which are very, very friendly and very helpful, and everybody basically is working towards the same goal, which is make to make Sure. To make our our lives better. So since the beginning, one of our values that that that we're set, we set was making sure that people in our community don't, you know, talk badly about other, you know, frameworks or solutions, from this this mindset of 1 big JavaScript family and Except

Dan Shappir [00:29:24]:
for Vue. Everybody hates Vue. No. I'm not kidding.

Shai Reznik  [00:29:30]:
I actually I actually was like in Jess, in Jess world in Amsterdam, last month when I gave my talk, it was mainly, I think, Vue developers and lots of the Vue ecosystem projects like Nuxt and Vite, and, everybody was so, so friendly and gave me the same exact vibes and feelings, from the Angular community, which mostly, you know, been to the Angular events. So that was another confirmation that we're all just one big, JavaScript family. And, you know, people are arguing over, developer experience in terms of syntax and stuff like that, which is fine. Everybody has their own taste, but together, we can, like, you know, march forward, as as a group and try to make the web, better. So so I I help, I I I offer my help with that and start getting more and more involved. And, one of, the the the the things that, that I offer to help with because I have a lot of experience in creating courses and education and such, I I I noticed that the way that we are explaining QUIC is lacking or it's too complicated. And we're losing I I I felt that we're losing a lot of people along the way who are not yet experts at, you know, JavaScript or the frame or the ecosystem and all that stuff in order to understand, like, why is it cool. So, me and Mishko recorded a free course called A Quick Introduction, and, we recorded it in one day, but then it took me like 5 months to rerecord parts after like, the more I learned, the more I I saw how we could simplify stuff, and that's where basically the JavaScript streaming metaphor, came from.

Shai Reznik  [00:31:22]:
It's it's the metaphor of of streaming came from Mishko at at one of the talks that we gave together in Poland, but I I I wasn't I I insisted into trying to name it JavaScript streaming so we could explain the metaphor, and let me try and explain the metaphor to the viewers. Okay? So, you know, just like what is it? So remember back in the day when we wanted to, you know, see a movie, we had to download the entire movie gigabytes of file. Right?

Dan Shappir [00:31:59]:
I was there. I'm old enough to have been there.

Shai Reznik  [00:32:02]:
Yeah. And and before that with VHS and all this stuff. But anyway, I wanted to legally, of course, download the entire video and, only yeah. Only legally. And just to see the end of the, right, the movie or or to continue where we left off. But today we're not doing that anymore most of the time. Right? We have something else. Right? We have streaming.

Shai Reznik  [00:32:27]:
Streaming. Yeah. So we have Netflix and YouTube and it's really easy to jump to the end or to the last point where we stopped and just to continue watching that. And that that metaphor in a very simplistic way is the metaphor behind, the the innovation behind quick. And so in order to, like, just compare it because you asked about the hydration, just in one sentence, hydration is is basically, the act of rerunning the JavaScript framework on the client side after, like, to, to make sure that the HTML that, gets produced by the server, which is, done by the server side rendering, in technologies like, you know, Next. Js or Nuxt or any hybrid technology that runs like renders on the server. It produces, an HTML, which has no logic in it. And then the framework needs to rerun again on the client in order to make this page interactive.

Shai Reznik  [00:33:34]:
That's basically the

Dan Shappir [00:33:35]:
Yeah. That's the funny thing is, and a lot of people I I see still don't understand that point that when you use server so I'll pull back just a little bit if you excuse me just to give a little bit more context. When people moved to frameworks like React, their initial the initial approach or Angular, the initial approach with these frameworks was to actually do all the rendering on the client side. So in the very old days, we would render everything on the service side using something like PHP and send it down and then augment it with, jQuery or something like that. But if we wanted something that was really a more sophisticated application like behavior and we needed much more sophisticated interactions. We needed something like an Angular or React. But what we ended up doing is doing all the rendering on the client side. And then we would initially just deliver a blank page, then download all the JavaScript, then download all the data, then run the JavaScript, produce the UI, and only then would we start downloading things like fonts and images and stuff like that.

Dan Shappir [00:34:43]:
So the the downside with this approach was that we had the blank page effectively for a very long time at the beginning of the process. And this was especially bad on mobile where things are obviously slower. So people would literally look at the blank white page for sec multiple seconds, even longer in some cases. I've seen longer. Yep. And then we got SSR like you mentioned, which basically said, okay, let's take this JavaScript and react and run it on the server, produce the HTML. And then instead of sending down a blank page, we'll send the initial view from the get go. But like you said, you got just essentially an HTML.

Dan Shappir [00:35:24]:
It's like a picture of the website rather than the actual functioning website. And the crazy thing is that hydration process, that in order to make the page actually interactive, we had to effectively regenerate that initial HTML on the client side. So we still had to download all the JavaScript, all the data, rerun it. The only benefit really was that the user at least had the page to look at while all this stuff was going on.

Shai Reznik  [00:35:54]:
And the perceived perceived performance.

Dan Shappir [00:35:56]:
Yeah. Exactly. That if it happened quickly enough, then by the time that user actually tried to interact with the page, hopefully, you know, that hydration process will be done and the page would actually be functional so the user wouldn't actually notice that that delay.

Shai Reznik  [00:36:14]:
Yeah. And and I I was challenging, like, in the course that you created, by the way, you could find it on quick school dot com. It's free. You can, just watch it on that course. I'm challenge. I actually challenge Mishko about this point. And because he was saying the same thing, he was saying like, well, you know, people can wait for like 30 seconds to to interact with the page. And I was like, get out.

Shai Reznik  [00:36:39]:
Like, nobody's waiting for 30 seconds. And I actually experienced it later on myself by waiting being with the low reception or something like that, connectivity and waiting for, like, some very, very simple page with some interactivity to to load, and it was taking forever and forever to load. And and I was like, nope. Not, like, not by

Dan Shappir [00:37:03]:
the end. If it's not forever, even if it's just a couple of seconds. So, you know, before I I'm currently working at Next Insurance. Had nothing to do with Next. Js. And prior to that, I worked at Wix. And at Wix, when when you're looking at the Wix site on a mobile device, you usually have a hamburger menu. It's really common in a lot of of website.

Dan Shappir [00:37:26]:
But for the hamburger menu to work, it used to require the hydration to finish. So you would get the initial view of the page with the hamburger menu but before the hydration actually finished that hamburger menu wouldn't actually do anything. So you it's it's worse than a slow website is from my perspective. It's a broken web site because Yeah. The users tap on that hamburger and literally nothing happens.

Shai Reznik  [00:37:54]:
Yeah.

Dan Shappir [00:37:54]:
And, you know, that's like the worst user experience that there is. Or think about the website like a like a mark like a, you know, product page with a purchase button. Then you click that purchase button and nothing happens. It's like the worst possible experience. If I, you know, click a purchase button, like, once or I I I be afraid to click it twice because I'd be thinking I don't wanna purchase this product twice.

Shai Reznik  [00:38:22]:
Yeah. Add to cart, like, twice and so on.

Dan Shappir [00:38:24]:
And yeah. And and I basically just bounce. So

Shai Reznik  [00:38:30]:
so And and and the and the point and the point here, like, another realization that I had is that you don't see it when you're developing locally or you're just testing out like a small demo. It only bites you when you reach a certain point of an app size, and then it becomes an issue because then all of the dependencies that you added to increase your or to improve your developer experience, like this MPM package that does this and this MPM package that does that, and you combine all of them. And all of a sudden, this is part of your global shared dependency that needs to get downloaded as the first dependency for the hydration to finish up on every page, then it becomes a nightmare to try and then analyze the bundle and see what are the biggest NPM packages that you can maybe replace. I don't know moment JS with date functions to, like, to make it more functional. Yeah. It's You know, all that stuff. Right?

Dan Shappir [00:39:32]:
We said about falling into the pit of success, it's this this is exactly the opposite of that. It's literally falling into to a pit of of vipers. It's unless you unless you you actually invest potentially significant effort, by default, you'll end up with a bundle that includes everything.

Shai Reznik  [00:39:51]:
Yeah.

Dan Shappir [00:39:52]:
And that bundle by definition can be, you know, pretty big. You know, I've seen multi megabytes of of bundles. Yeah. You know, if these are compressed and whatnot, still multiple megabytes. Yep. And and That ties

Shai Reznik  [00:40:06]:
it back by the way to to the the metaphor of like video downloading. This is you as a user downloading the entire video just to hit play and, you know, waiting all this time just to have the video playing or do something. Right? Yeah. And and comparing that with streaming, which is basically how quick works, this was like when I when I when I try to, you know, looked at my definition of, like, the generation of, you know, innovation in technology, I was like, you know, generation 1 was the MPA that you talked about with the PHP, you know, rendering. Generation 1.5 was, you know, adding a bit of JavaScript on top of it, like the dynamic HTML or something like that that we call it. Generation 2 was single page apps and generation 2a half because it was, again, a lay a layer on top of, you know, the single page apps was the hybrid. At least those are my definitions. It's not like scientific.

Shai Reznik  [00:41:05]:
Mhmm. Now I I try to think about like, okay, what's coming next and what's coming next should should be, a completely paradigm shift, you know, compared to what it's it cannot be just an improvement over what we already have. It needs to be something completely different. And it took me a while, but when I realized how QUIC works or how JavaScript streaming works, I realized, we have not, we have in this a completely different paradigm shift. And then it hit me why what Mishka was talking about, about the philosophy of automatic opt automatic optimization, basically, that you get up all the optimization, but automatically done for you. So if you if you want, we can dive into how Jousting stream

Dan Shappir [00:41:54]:
So so we said just to kind of put the point of where we are. So we said that with regular SSR, the problem is that you get the initial rendered view within the HTML, you know, really quickly. But then you have to, like like you said, like downloading the entire movie. It's like getting the first frame of the movie. You see the first frame of the movie, but to see the rest of the movie, even the second frame, you need to download the entire movie and wait for the entire movie to finish downloading. And and that's what you get with most, frameworks that use, hydration. Now I've actually given a talk at, re at React Next conference, for example, talking about various different strategies that some frameworks have come up with in order to address this cost of hydration. Like, you might get something like progressive enhancement, which means that some functionality can work before hydration actually happens.

Dan Shappir [00:42:55]:
Or you've got, technologies like, React Server Components where you can specify that, you know, some components being essentially static don't need to hydrate, but anything that is dynamic still does need to hydrate and stuff like that. And and what you're saying is that with this JavaScript streaming approach, you're getting rid of hydration completely altogether. No hydration anymore. But you're still getting all the benefits that you can build interact you can build web applications that are as interactive as, you know, those classic single page applications written in React or Vue or or whatever. So can you elaborate on how this magic kind of happens?

Shai Reznik  [00:43:45]:
Yeah. Yeah. Yeah. Definitely. So, just like in video streaming, okay, when you have, like, a big file of video, you want to chunk it into packets. Right? This is basically when you upload the video to YouTube, this is what happens behind the scenes and through the technology, of the server and the client, it gets stream it gets chunked into, encoded into, a format and then, chunked into packets, and then these packets are being streamed at the client, the, like, based on the point that they, of the movie that they wanted to watch and it get buffered, right? When you pause the movie, it actually buffers the next couple of packets or the next, I don't know, 20, 30 packets in order for you to have like a smooth experience. So you won't have like the, you know, loading spinner every time you want to watch it if you have a slow connection. So, that's the same way that, QUIC and with the QUIC optimizer, the compiler that Manu wrote, works.

Shai Reznik  [00:44:51]:
You write your app in a very familiar, developer a very familiar syntax and develop development experience. Sorry. And then QUIC in its syntax, comes with a, like, built in markers that you don't need to really think about, most of the time because it's just built in in the in the syntax, which are dollar signs, mainly instead of a component, function, you have a component dollar function, and that's it. You just have to use that. You don't have any other choice, but this is a marker for the compiler to know which functions it needs to extract into these packets, right? Like this, tiny chunks of JavaScript. And you can think about all these functions as being extracted into different tiny files automatically. Now, it's it's smarter about how to bundle different stuff together, but conceptually you get these packets on the server on build time. K.

Shai Reznik  [00:45:57]:
It happens

Dan Shappir [00:45:57]:
So basically what you're saying is that you've got this thing that's kind of a cross between a compiler and a bundler, which does essentially a static analysis of of the code. And the code also includes hints or or directives or instructions. So some of it is basically just looking at the code, but some of it is looking at special directives that are embedded within the code, like the component dollar that you just mentioned.

Shai Reznik  [00:46:23]:
Mhmm.

Dan Shappir [00:46:23]:
And using this information, this compiler slash bundler is able to break the code into pieces that that are effectively can be streamed essentially independently, I guess, of one another when they're actually needed.

Shai Reznik  [00:46:39]:
Yes. And and it's not, really a bundler. It's more of like an unbundler or an extractor. Right? Like it's the opposite of a bundler because it just takes the the code and knows how to break it apart into these packets and also how to, create 2 different versions, 1 for the server side rendering and one for the client, or the client that needs to be,

Dan Shappir [00:47:04]:
I use the term bundler because most of us when we deploy code into production, we are used of you we're used to using this thing which takes a lot of JavaScript files, the source files, and then generates from them, usually a lot fewer numbers of files that are actually JavaScript files that are actually delivered. You know, having really funky names with hashes and whatnot. And what you're saying is in this case, it's not really a Bundra because the number of files that, you know, the sizes of the files we put aside the number, but the sizes of the files that get generated, they're actually often smaller than the original source code files that that we created independently. I'm not talking, you know, all of them together. I'm talking independently even Yeah. In each and every file. Because you're just looking at, you know, like units of code that needs to need to be executed together.

Shai Reznik  [00:48:01]:
Yeah. Yeah. Exactly. So you extract all of this, into different tiny files. And, so the reason we needed bundlers to make like, to concatenate everything into or to bundle everything into, you know, fewer files is because of the limitations of, you know, HTTP. We we'd like we didn't want to, you know, load all these files together because then it would get blocked and, you know, we have a bad user experience on on loading time. So we wanted to chunk it into into a single download, not to pay the cost of the extra, like, you know, for instance.

Dan Shappir [00:48:35]:
The fact that, you know, a lot of the code usually works synchronously. You know? You have a you have function a calling function b, then function b needs to be bundled with function a because the assumption is that the way that the code works is that, they they need to be able to run together.

Shai Reznik  [00:48:53]:
Yeah. Exactly. You're totally correct. So, so so getting back to so you so you have this packet on build time. It creates all these, you know, packets and, it and and it creates like a manifest of like an in the basically a map where, you know, which which location, you know, like the packets map, let's say, and then it takes it. And when the user requests a specific route, QUIC then on the server side, analyze which route it is and produces instead of a, let's say, a static HTML with just like a a freeze frame of the, you know, of the first frame of the video, it creates what I call a smart HTML, meaning the HTML that knows all of the interactivity points of the possible interactivity points in that page and it analyzes the this like packets map and realize, oh, these packets belong to this page. So it, create a set of instruction and encode it into the HTML for the browser to know what to do next, like how to preload these interactivity points or or packets, our necessary packets. Now then it sends that only that HTML over the wire, the user then loads it in the client and then starts the the next thing, which is the buffering part, like the video, right? So QUIC spins up a service worker or basically utilize this this service worker, and hands it, off, this list of the tiny packets, you know, list that it needs to buffer or to pre, prefetch in the background in a separate thread, right? So that way it won't block if the user wants to, you know, interact with the page or something like that, it won't get blocked.

Shai Reznik  [00:51:02]:
So you basically buffer all these pieces. And then the last point of this metaphor or of JavaScript streaming is that now when the user will interact with the page, instead of lazy loading the piece, like, let's say, like, clicks a button and add to the cart, right, like the your example from before. Now instead of, of of waiting for that code to load only on interaction, the code is already there because of the service worker. So then, QUIC also does something that no other solution does, which is called lazy execution instead of lazy loading. So it just execute that code on demand and because everything in QUIC is basically set up to work asynchronously, that means that it could do it in every different point in the app, meaning that, nothing gets hydrated or loaded on demand when the page loads, but every single event in the page could, conceptually become the initial main method or the entry point to the app to start the execution of just those parts of the app. Now, QUIC actually smart enough to also buffer the next couple of pages. So you always get a smooth interaction. So just to complete it instead of, it's more so a website is not like a linear video, right? It's more like a quest where depending on the user, you know, events.

Dan Shappir [00:52:37]:
Yeah.

Shai Reznik  [00:52:38]:
It, you know, you choose your own adventure thing. Right? So if you click on if you start your life on the cart page, let's say, or you click on that, button, you will end up totally different, in a different location. So QUIC is smart enough to know how to buffer in 3 dimensions in terms of like where the user progresses. So they always have a smooth experience just like a single page app, but everything will be super, super efficient and the developer won't have to think about any manual optimization. That's the philosophy behind QUIC and behind JavaScript streaming. I think

Dan Shappir [00:53:19]:
that I think that's a really important point because Mhmm. So a couple of important points, actually. So one thing is actually our our last episode that we recorded was with with Rich Harris, the creator of Svelte. And, it's it's not something that we spoke about with him, but I recall him saying I think it was him that kind of, had this critique of lazy loading things. They said that he often browses while he's commuting on, let's say, it's the subway where there's little or no reception, and he opens an article. And when it lazy loads stuff, it he just loads it before he goes on on the train. And then because it uses lazy loading, by the time something is needed, he doesn't actually have the reception, and then that stuff doesn't load. So you're saying, in a sense, you're doing lazy loading and lazy execution, but be because you're using this prefetching mechanism or preloading mechanism with a service worker, it the stuff will be there when it's actually needed.

Dan Shappir [00:54:24]:
So it's downloading in a non blocking way. It's not blocking execution or responsiveness until it downloads, but it's also not just being loaded lazily only just when needed. It's it's being loaded as soon as possible without blocking. So that's that's a really important thing. And and the other important thing is when I was at Wix and we had a one of the problems that we had was that, you know, Wix is a website builder and you have, like, in the in the Wix editor, you could pick from 100 of different types of components like buttons and menus and sliders and galleries and whatnot. And one of the problems we had was that the initial implementation downloaded all the possible we we bundled together all the possible components that you might have on the page. Now that kind of worked initially when Wix had the few dozen components, but then Wix had a few 100 components or a few 1000 components. And and it got to the point where it was ridiculous.

Dan Shappir [00:55:29]:
So we had to start thinking about how to break it up, you know, understanding which components go together, which components need each other. Like for example, a menu item is needed by a menu and and so forth. But we effectively we kind of automated it, but we had to do all the heavy lifting ourselves. Like, you know, we we as Wix, we could invest a lot of developer developer resources into it, but it was something that we as Wix needed to do. We didn't get it out for free from the framework. What you're saying is that with QUIC, you get all this goodness automatically and it's even lower than the component level. It's literally at the let's call it event handler level or or

Shai Reznik  [00:56:13]:
function level. Level.

Dan Shappir [00:56:15]:
Or function level. That if you need that function, that function will only will only be downloaded

Shai Reznik  [00:56:24]:
if not

Dan Shappir [00:56:24]:
when it's

Shai Reznik  [00:56:25]:
needed. No, no, no, no.

Dan Shappir [00:56:27]:
I'm, I'm, I'm not phrasing it correctly. It's bundled separately so it can be downloaded all on its own. It will be, and it will be downloaded in a non blocking way so that it will be available when it's needed.

Shai Reznik  [00:56:41]:
Yeah. It you can think about it as eager buffering and lazy execution. Okay. That's how I like to think about it. That's a good

Dan Shappir [00:56:48]:
a good way to phrase it. Yeah.

Shai Reznik  [00:56:50]:
Yeah. Because it's not so eager loading is like, we all, like, you know, the all these have this connotation of, oh, no. It will block the the website. So that's why I call it eager buffering. So it's it's, more obvious that it's not blocking, you know, the main thread and, and lazy execution because then, yeah, we only execute that code because part of the execution is also what blocking, you know, stuff. So, yeah, that's, that that's so the, the, the, the philosophy behind QUIC, which is automatic optimization, you know, philosophy, I think is, is one of the most, you know, important things in a, in a technology. Like if you have a good philosophy, all of your technical decisions basically are derived or, being derived from that philosophy. For example, implementing a feature that will, turn something into a more manual optimized, way is against Quick's philosophy, which is automatic optimization.

Shai Reznik  [00:57:51]:
So we will think really, really, really, really hard before we'll introduce another, you know, you know, feature into quick, which will, make it less automatic, automatically optimize or auto optimize. Now that's what, like, when I think about, you know, the future and where things are headed in terms of like the, the, the different solutions, I think that everybody is working towards a future where they want to, you know, automatically optimize as much as possible. I think that currently QUIC in terms of the technology because it because it didn't have the baggage, from, like, you know, supporting, like, backboard compatibility and all that stuff. It was in a unique point to both improve the developer experience, but also make sure that things are being done automatically, you know, as much as possible. And that's why I think that QUIC currently has, you know, a doorway to a much faster future, which everything is automatically optimized for you. And what I showed in my last lecture is kind of, another epiphany that we got, by thinking about how we can take this philosophy and this innovative, you know, paradigm shift and actually imagine how the future will look like using those tools. So do you want to hear about, like Yeah.

Dan Shappir [00:59:21]:
For sure. I'd love to hear about the future. Does it involve does it involve, AI taking over the world or something?

Shai Reznik  [00:59:29]:
Of course. The future is AI, and we won't have any jobs. And that's basically the the Well

Dan Shappir [00:59:34]:
well, look at it this way. You know? Our fear today is that AI will take our job. Our fear, like, a few decades ago was that AI will will terminate us. So at

Shai Reznik  [00:59:46]:
least Well, it it first, it will take our jobs, then let's talk. But yeah. So, yeah, obviously, you know, AI is a is a big, important part of our future. And I think that, you know, it will be an interesting next couple of years to think about, you know, or to see the involvement of frameworks and how they better incorporate themselves with the use of, AI and large, language models and such. Now in QUIC, for example, since the get go, ever since we realized that, well, things could be broken down into a function level and could be buffered and, or in a predictive manner, so to say. So, Mishko, and the team actually started talking about or and speaking about this idea of what if we could, you know, gather or, you know, track anonymously, not with any identification details and such, only the hashes of these packets, like, for users in terms of like which packet gets loaded before which packet. And that way we could take this information, feed it to a model, and build the most optimized order of packets for each page, meaning that if you land on the cart page, everything gets buffered in the perfect way. So the users will always hit the cache and not a delay when the, you know, when you need to load.

Shai Reznik  [01:01:32]:
So that's that's, that was a dream, you know, a year ago. Now it's a reality. It's called Quick Insights. Wow. Yeah. And, it actually has been, used in the QuickDocs. So QuickDocs is, is using Quick Insights, which which is, you can, you know, you can think about it

Dan Shappir [01:01:55]:
Analysis needs to happen per website. Right? It's on a per website

Shai Reznik  [01:02:00]:
level. Of course. Yeah. It's per website. It's per app, basically. If I'm

Dan Shappir [01:02:03]:
let's say I'm using something like a QuickCity, You're saying you're using, like, built in telemetry as it were to gather information from the field about, you know, that particular website in which order the various, downloaded packets are being needed. And then optimizing the order of delivery to match to best match the order in which the packets are being used. So I can elevate your anticipating which floor it will be needed at and and trying to be as close as possible to that floor by the time that it's needed.

Shai Reznik  [01:02:43]:
Yes. And and basically, this is what what we call predictive buffering. Like, it tries to predict based on the average usage, oh, these packets goes together with those packets, so let's make sure that they are either bundled together or loaded just right after or buffered just right, one after the other. So they will all be there because this is the most likely path that the user will take. Right? So, up until quick insights, the framework did it in, sets of heuristics where, you know, if it's below the fold, it will, you know, put it after, and will will buffer the, you know, stuff above the fold. But now it's a reality. And and using that, you know, I I I looked, again at the lecture or talk that we had in our meetup, where Misko visited us, you know, to record the the course there on QuickSchool, And we did a meetup, about Quick where he revealed for the first time QuickCity to the world and announced that, you know, the, they build a meta framework. In the in the end of the event, we had a talk by, Benjamin Greenbaum, very you know, another brilliant developer, and, you know, he's a core team member at Node, a very, very experienced developer who did, like, half parody, half truth, talk about the future of frameworks.

Shai Reznik  [01:04:21]:
Like, how like, the the framework of 2030, that was, like, basically he's talk about. And he it was a half parody because he took, like, a framework, an imaginary framework called Quikr. And and it showed, like, you know, all the possibilities that what we'll do in, you know, a couple of years and with, you know, lots of ideas there. And he didn't I don't think he knew at the time that Mishko has been thinking about this like quick insight thing, like, and, and thinking about how to do that. But a lot of his ideas who look, looked, imaginary, now we started thinking about them as reality because Quick Insight already works And then we thought, okay, we have those statistics. So what else could we do with those statistics? Now mind you, those are statistics based on the function level. That means that you could theoretically, it's not currently been, worked on, but theoretically you could produce automatic end to end tests because you know the set of actions and their order that the user are taking. Maybe they're, you know, so you could potentially create or get to a point where you can generate automatic end to end tests.

Shai Reznik  [01:05:43]:
Another thing that, you know, developers don't like to do, but now based on the actual user usage of your app and not just, you know, you making up stuff. And then we thought about what if we could take those tests and use them as a feedback loop for the AI model to now automatically optimize your code base for you, meaning seeing which, code, parts are not being actually used in production and removing them, creating an automatic AB test with them to see if they are needed or not. And then just eliminating code from the code base, another AI team member that could like, you know, refactor your code and all the code that technical depth, depth that you have, you know, to refactor stuff, to make stuff cleaner. You know, you could use all this stuff in feedback loop based on this ability because, again, the ability of JavaScript streaming to track stuff on the function level, which wasn't possible, possible in an automatic way before. So these are the kind of stuff that we are thinking about in terms of, like, when you think about the future of the web and the future of the framework and, what else we could leverage, and such. And I I would love for all the solutions to to to to have this, you know, so we could like I said before, we are all one big, you know, JavaScript family of web developers. I want everybody to experience this automatic, you know, feeling of, I can just focus on building the features and doing, like, cool stuff in the UI or the server and stuff and not worry about all the, you know, the stuff.

Dan Shappir [01:07:32]:
You know? So so we're we're, coming on close to the end of our episode. Before we finish, though, there's one issue that I would like to address, and and, hopefully, we can do it fairly quickly even though I think it's a non obvious issue. Now Mhmm. Suppose so here's the thing. Let's say I'm a person listening to to this, podcast, And I'm saying, wow. This is really great. I'm really excited about the vision that these guys at Quik have, all the the cool technologies that they're creating, AI, whatnot. And I really want to start leveraging that, especially since we already have a React application that is using hydration.

Dan Shappir [01:08:14]:
And if you're using hydration, then by definition, you have, like, poor startup performance or loading performance unless you take proactive steps in order to remedy it. But here's the thing. I've got this existing code base. It's written in React because, you know, React, like we said at the very beginning, is like the the king of the hill, more or less like all the other frameworks put together. And how do I get from this code existing code base in React to leveraging the capabilities of QUIC? Do I need to wait to a new project? Or is this something that I can trend gradually transition to? What what what steps can I take?

Shai Reznik  [01:09:02]:
Yep. So that's a great question. And, up until now, so since the beginning we had the ability of, quickifying React components, meaning you can feed, you know, a quick, we have a quick React integration package and you could, basically, get a function that takes a React component and quickifies it. And that make that means that you can, like, use your existing React components inside of your, you know, quick wrapper or quick application. Now there are other, strategies that you can use. So far we had the challenge of, so we had this from the beginning and I helped a bunch of companies, use this strategy in terms of like, that's the surgery that they they chose to to use. But we kept getting, you know, more and more, demands to like, people really wanted to take advantage of quick in terms of like, all, because if you do the quickifying thing, you still are, you know, you have, like, delayed, let's say, hydration, but you still are suffering from the same, you know, stuff that you described. So, what we focused on is to work a lot hard and, with a lot of community members to make sure that we are building also, native solutions to QUIC for a lot of stuff.

Shai Reznik  [01:10:26]:
For example, a UI component library, which which is fully accessible and, you know, has also the the best of, you know, the the developer experience, innovations that we we saw from like, projects like ChatCN, so we we created QuickUI, you know, in order to, you know, remedy that, and also invested time in helping other community projects in order to make sure that so the first part or first step is to quickify your existing component. The next step would be probably to replace them with a native to quick components, for example, that you could leverage the JavaScript streaming ability, over your app and slowly move. But this is now like from, from this point, onwards, this is one major key thing that we want to educate about. Like, taking all of the lessons learned from, you know, the past year and a half of, applications doing that and starting to create migration recipes on how to do this stuff. And and we just, like, started the process, so we don't have it ready yet. But, but, yeah, that's that's definitely one of the the key things that we want to, you know, to focus on. So you could do that. You have the ability to do that with Quickify, but want to have a a more optimized, let's say, or a education material, because you have different strategies for different, scenarios, you know, micro fontants and how to wrap stuff and, you know, all that stuff.

Shai Reznik  [01:12:03]:
So, yeah, that's what we're going to focus.

Dan Shappir [01:12:06]:
I I think another important point which I mentioned was that if you're using a hydrate if you're if you're not using hydration, if you're building, let's say, a dashboard that, is part of some sort of, I don't know, a leg an enterprise legacy application or whatnot, and you don't you don't care so much about loading performance, then it's a different story. But if you if you're in a place where you're leveraging hydration, you're using something like a meta framework, an extra yes, ceramics, or, Nox or whatever, and you're using hydration, then you should be caring about the hydration cost, the hydration time, and then you and any solution that you might be looking at, be it reacts server components, be it, islands of hydration, whatnot, all of them come with a certain amount of development and cognitive overhead. So it's not like you're going to be making able to make any of these transitions for free. And if it's going to cost you, then you might as well be looking at something that's probably going to give you the most bang for the buck. And, you know, quick looks like a really good candidate in in this regard. Now before we finish, let's say I've listened to this podcast. Sounds really interesting. I want to to kind of get involved in the quick community to to learn about this, you know, to be able to start playing with it, to get it the relevant resources, and and whatnot.

Dan Shappir [01:13:45]:
What's the best way to go about it?

Shai Reznik  [01:13:47]:
Okay. So, good question. First of all, to learn about it, you have we have our website. Now it's quick.dev or we have the, you know, the free course that I mentioned, quickschool.com, where Minh Mishka goes deeper into the details behind it and exercises and all that stuff. And to be involved in the community, you go to quick. Dev/ chat, which will take you to our Discord. Come say hi. We have, lots of, you know, helpful and friendly people in the community.

Shai Reznik  [01:14:21]:
If you have questions, people will help you. Our goal now is to make sure that as many companies are successful using QUIC and implementing QUIC, because as you say, you know, if you have already a lot of, things to learn and a lot of manual optimization, to do, to get in order to get to those performance, it will only scale. And so you think you need to think of yourself which solution will scale better with time in terms of, like, you know, like when the have app will reach to 50 megabytes, 100 megabytes, and such. Would you like to be in a position where you upload a video to YouTube and then you need to manually cut the video on YouTube and choose which part the, you know, delivers to the client or just upload to YouTube and have it automatically done for you. I think that's the decision that a lot of, you know, CTOs and decision makers need to, you know, think about and where they evaluate, you know, the next, project. So come, get involved. If you need help, DM me or anyone on the team, and, we'll, we'll get we'll get you, help and, yeah, up and running and, make sure that you're successful.

Dan Shappir [01:15:35]:
And if people do want to DM you or contact you in general, what's the best play way to find you specifically?

Shai Reznik  [01:15:42]:
So you can stalk me in the street or, Twitter, Shai_ Resnick, or in this Discord. I'm always on Discord on the on the quick, Discord, and, you know, you could DM me there or, yeah, Twitter or or, you know, QuickSchool or Hi Res dot io and all the stuff that I'm involved.

Dan Shappir [01:16:02]:
Cool. So, the last thing that we'll do as as we always do on this podcast Pics. Is the pics. Yeah. I I forgot to remind you about it. So but it seems that you've come prepared. So, I'll give you a little bit of time to prepare by starting first. So, I don't have a lot in the way of picks for today.

Dan Shappir [01:16:24]:
So I I have just the the one thing more or less. So, I'm not really big into anime or stuff like that, but, it turns out that, I found this series on on Netflix, which I I like. And it's actually, the the Wikipedia page says that it's an anime influenced fantasy science fiction television series. So it's it's animated and it has a kind of an anime style, but apparently it's not exactly anime if it's anime influenced. It's called my daemon, not demon, it's daemon. It's spelled d a e m o n. So it's my daemon. And, it's like about this world in which as a result of some unexplained occurrence or accident or holocaust or whatever, the monsters called demons have kind of infiltrated our existence, and people really loathe them and and hate them.

Dan Shappir [01:17:28]:
But on the other hand, they're very useful because they have these kind of weird capabilities, like, to, negate gravity or induce sleep or turn invisible or stuff like that. So people use them. But there's this kid who adopted 1 and he actually really loves it for some reason, but, of course, they are being chased. And, he's on the run, and it happens in Japan because anime. The artwork is really great, and also the the stories are so far are pretty good. I'm I'm enjoying it. So as I said, it's called my daemon, and I'll put, the link in the show notes. And, that's more or less my pick for today because I didn't come very, very prepared in this regard to our episodes.

Dan Shappir [01:18:22]:
So, Shai, maybe you can Yeah. You know, provide a bit more.

Shai Reznik  [01:18:27]:
Good choice. I also wanted to pick, but I will pick Matt Damon, the actor. He's not an anime, but he's a good actor. I like him. So I I also have a a good, show that, me and my wife, are, watching now. It's called the gentleman by Guy Blige.

Dan Shappir [01:18:48]:
I I actually picked it a couple of episodes back. It's a

Shai Reznik  [01:18:52]:
Yeah. Very, very good.

Dan Shappir [01:18:54]:
Yeah. It's actually it's a it's a Guy Ritchie show inspired by Guy Ritchie movie.

Shai Reznik  [01:19:03]:
Yeah. Yeah. Yeah. Yeah. It's, have have that distinct taste. We didn't we're we're now getting to the last episode of the, you know, the first season, so no spoilers. But that's that's that's one of my picks. Another pick that I want to pick, is, something about Angular.

Shai Reznik  [01:19:24]:
So Angular signals and the new versions of Angular are amazing. You should use if you're you have a Angular app, you should totally upgrade and use them. It makes the development experience super great, very fun to work with. So, yeah, I want to give a big shout out to the team who worked hard on, implementing it. I wanted to also, pick, SolidStart, which reaches, you know, almost a 1 point o, I think, RC now. Also, team worked super hard on, on getting there. So shout out to Ryan Carniato and the team.

Dan Shappir [01:20:02]:
Oh, yeah. Ryan Carniato is a good friend. We've actually had them on on this podcast several times. So if people are in, you know, all those exciting things going on with Solid, they can listen to those episodes. And we probably should have him on the show again as soon as they finally release version 1.

Shai Reznik  [01:20:20]:
Yep. Definitely. Totally love this guy. And, and also, yeah, I wanted to, you know, remension maybe some of the the stuff that I said, quickui.com, quickschool.com, all the the stuff that, you know, you need in order to be successful with QUIC. We now had also a a big, announcement that, you know, QUIC is becoming more community driven project, meaning that, we'll start seeing more activity and more, you know, more company supporting QUIC and, you know, lots of, great and exciting, things that, you know, our community members have been asking for quite a while now, to to see. So we now, we're now doing all the stuff that we're waiting to do. So, yeah, exciting times, and, can't wait to see what what the future, bring us.

Dan Shappir [01:21:12]:
Good luck. So, Shay, thank you very much for coming on our show. It's, I've had lots of fun. And, you know, thank you very much. And, you know, probably have you on again the next time there's something really exciting happens with QUIC. And, you know, with all the community effort, probably exciting things are ahead. So Yep. Thank you very much.

Shai Reznik  [01:21:33]:
Thank you very much, Dan. It was a pleasure. Thanks.

Dan Shappir [01:21:37]:
Bye, everybody.