Introducing Render Functions

[00:00:00]
>> Evan You: So we talked about reactivity in the first section, and now we're talking about random functions, and random functions are essentially the other half of the puzzle that completes the whole reactivity rendering system in view itself. And in case you don't know render functions, view templates are in fact compiled into render functions under the hood.

[00:00:23]
And since not everyone has used React, we're gonna share some, I guess, basic knowledge. So, in a view context, when we first render a view app, we will first compile the template into Render function. So this compilation process happens on the fly if you are using the full build and your directly say using in DOM template, like your writing the template directly in the DOM.

[00:00:53]
Or you're giving the view instance a string of templates. But if you're using view CLI to scaffold a project with a build step. So with webpack and view loader, view loader actually pre-compiles the template at built time. So, the code that you ship to the browser doesn't contain the original template, instead it ships the compiled render function code, which is pure JavaScript.

[00:01:17]
So this is similar to the ALT compilation in Angular context. In that it saves the long-term cost of actually doing the compilation on the fly. And also, we can shift the runtime without the compiler. So in view, we have two builds, we have a full build, which includes a compiler, which is close to 30 KBG zipped.

[00:01:39]
But if you throw away the compiler the runtime-only build is 20 KB. So that's like a third size saving which is pretty good if you were using ahead-of-time compilation, okay? So after compiled into Render Functions, and what Render Functions are are essentially functions that return virtual DOM, all right?

[00:02:00]
And then view generates the actual DOM based on the virtual DOM. And then we're gonna talk a bit about what virtual DOM is. But before we do that, so on subsequent updates, so notice that initial render is what happens if you're going back to the auto run function that we implemented earlier.

[00:02:20]
This is what happens inside the auto run function, okay. And after this process, during the process that we're generating the Virtual Dom essentially calling the render function. Because the render function depends on all these data properties on your view instances. And these data properties are reactive, all these data properties are collected as dependencies of this components render function.

[00:02:46]
And now if any of those dependencies change, what happens is the render function will be called again. All right, and on subsequent updates, the render function gets called again and it'll return a new virtual DOM. And the old virtual DOM and the new virtual DOM will be compared and diffed.

[00:03:05]
And eventually we apply the minimal amount of changes to the actual DOM.