Progressivity & Mitosis

[00:00:00]
>> So, let me show you one more demo, which I think is super cool. Okay, so, here is the todo app. And again, let's go to Network tab. So watch the Network tab in here. Let's add a new item. Notice JavaScript showed up. I hit enter, more JavaScript shows up.

[00:00:22]
Let me check this, maybe I'm gonna delete this one here and I noticed as I as I am interacting with the code more and more JavaScript is showing up, and let's just show active ones over here, right? And so, this is what I mean by progressivity, right? As you interact more code shows up, so you can have as big of a complication as you want.

[00:00:42]
It's not like the user can interact with everything all at once. There are choices that the user can make and so the way to think about it is like you are streaming the application rather than upfront downloading. Imagine watching a movie that would require you to download the movie before you can watch it, it would be a pretty bad experience.

[00:00:58]
That's the world we're in, right, you download all the code then we get to run it. So, now come to the world of streaming where like as you are interacting or watching the movie, more and more code shows up. Now for the application and it's a little not ideal thing because the paths are, it's more of a tree structure rather than a linear stream.

[00:01:17]
But it's the same exact idea, which is, you don't need to have all the code present before you can interact with the app. And by doing that we significantly lower the barrier of entry and we makes it basically any application of any size will have a good startup performance because it's not about how big the app is it's about what you actually need to get going, right?

[00:01:40]
And the answer over there should be pretty close to zero and about every case. Now, yes.
>> If you see other frameworks like React or Angular and all they are very good ecosystem of components. Then they come too Qwik, I mean, if I need singlet, I need calendar, I need something tab.

[00:02:02]
How the components leverage, do we need to develop everything from scratch?
>> Yes, so that's a good question, what about components? So the short answer is, Qwik is new, and so as a result, we will have a much smaller community, all right? People are already building these components out there, but we can actually run React components inside of Qwik.

[00:02:26]
So, react as a huge ecosystem right now these components won't magically get all the properties of Qwik, right, but you can turn them relatively easily into islands. So, you can think of it as It's kind of like Astro, where you take your component and add it. We can lazy hydrate it, we can do all of the tricks that you can think of for a component.

[00:02:47]
So, if you need a calendar widget, you can do React. Now, it will mean that you're including that React in your app, right? And it will mean that widget will have to hydrate. But maybe we can delay hydrate it until it's visible or until you mouse hover on it or something like that.

[00:03:01]
So there are tricks you could do to kind of improve the situation, but there is a bridge between Qwik and React so that you can take React components and you can run them inside a Qwik.
>> Yeah, so, we've explored the adapter for React to Qwik. You also mentioned mitosis and what was interesting about that is the idea that you could start with something agnostic and generate all the things.

[00:03:27]
Well, what does that look like? And secondly, does it generate Qwik code among the other things?
>> Yes, so you're asking what does mitosis look like? Okay, so, you can check it out yourself, gonna mitosis that build a URL, let me make the font a little bigger. So, here is a component like a demo component this is written in mitosis, which is react ish like, not quite the same thing, but this is kind of like the pseudo language so to speak.

[00:03:58]
And then this is the language can be converted to, for example, this is what the equivalent would look like in view. And notice if you look at the view, there's nothing here that says anything mitosis. So this is a idiomatic view code, right? And this is idiomatic React application.

[00:04:12]
This is an idiomatic Qwik application, Qwik component and so on and so forth, right? And Angular, Svelte and so on and so forth. So, you can write your components, like if you have a design system, you can write it once in mitosis, and then it will generate all the different source codes for all the different frameworks.

[00:04:30]
So that it's native to that thing. It's not a web component, it's wrapped, it's native to that particular framework.
>> So then could you go react to mitosis?
>> And that's much more complicated. The answer is not so simple. The reason for that is that this here, even though it looks like JavaScript is actually declarative, it's restricted thing.

[00:04:52]
Whereas in React, you can do all kinds of things and we wouldn't know how to parse it. We wouldn't know what the semantic meaning behind the thing that you did is. So, there is a restricted state here now. The JSX looks very much like React. And this mitosis was inspired by React, so it is very close to what a React code would look like.

[00:05:11]
But we had somebody actually wrote a Svelte front end. So, the Svelte input again, restricted Svelte would be written here, it's called sveltoses. And then the other outputs are over there. So, you can think of this as the front end input that's highly restricted. You can do anything you want in here, there's certain rules you have to follow.

[00:05:33]
But if you follow those rules, then we will give you an output on the other side which is in components. And the restrictions of these rules is basically what prevents us from just taking anything and be able to ingest it because we just don't know what the meaning of that is.

[00:05:50]
We had this demo of the todos and I wanted to explain reasonability. So, I can click on this HTML and if I go to console, you know the trick that dollar zero gives you basically the HTML element, right? So, Qwik because it's a container, dot I can pause this.

[00:06:10]
And what pausing will do is that if you notice inside of the script tags, if I hit Enter, it's not gonna show up. So, there is a new script tag that I inserted, this one right here. This is the state of the system that gets serialized in here.

[00:06:27]
What I can do here is I can go and copy the outer HTML. This is a source of truth. And let's open up Safari. And I don't know how to use Safari, so bear with me here. So, if I go to local host, I need to have the same URL port.

[00:06:42]
So, let's just go to this home page here that has no JavaScript. And if I go here, and then can I edit? And if I paste my app into it, the app shows up, right? That in itself is not impressive because it's just HTML. But the question is, will the app be interactive and will it remember its state?

[00:07:03]
Remember there was an item that I've hidden, so it only shows active. If I click all here, will something happen and will the state be remembered? So, if I click all, sorry. When you paste HTML, it doesn't execute the Qwik loader. So, there's the Qwik loader right here.

[00:07:21]
So how do I do console? I need to .content, text content? Okay, so this piece of JavaScript, which is the Qwik loader, has to get executed. That's the boot up. And now I can click on the O, it's still not doing, what's going on? Okay, well, this demo is not going as well as it should have been going.

[00:07:53]
Let me try this. Let me do the counter cuz that one already has the Qwik loader loaded. It's an if I go edit html and Okay, paste it here. Now it works and it shows up, right. So now, you can see that the state of the system like this profit was hidden, right, it wasn't an HTML, and it knew that it needed it and so will serialize inside of code JSON.

[00:08:20]
So, this is what I mean by reasonability is kinda like, the virtual machines. You can at any time, freeze your application, serialize everything and the whole application is fully contained in the HTML. But not really the whole of it, right? Because the JavaScript is pointing to somewhere else.

[00:08:42]
That's why I had to make sure that the URL was the same, so you could download the JavaScript. All of the other bits are in the HTML, and this is what makes it so powerful, because this is literally how the application gets from the server to the client.

[00:08:58]
It runs on a server, we pause it, we move it to the client and we continue where we left off.