Render Function API

[00:00:00]
>> Evan You: Render functions, this is a few component. And instead of giving at a template you give render function, here's your point. So the render function takes single argument h, so this is an aliasfor create element. H is just a convention because there are a lot of different implementations of virtual dome.

[00:00:20]
And they sort of have agreed on a common API called hyperscript, which is a style of writing these virtual dome render functions. And because html is like hyper text transfer protocol. And so hyper script is a script that produces hypertext. And eventually it gets shortened to h because it's easy to type, it's just a convention, okay.

[00:00:52]
So it takes three arguments. First, argument is the type of the element, very obvious. The second is a data object. The render object can contain, so nested under it. In React this is directly the props object, but in Vue, we nest more fields under this object. So props, ATRs, DOM props can each be nested in different objects.

[00:01:21]
And class and style are also get special treatment because they are so commonly used. And we have some special convenience support for class and style. So for example, in templates you can bind to class using an array on object. You can do that in the same in render functions, the API is the same.

[00:01:43]
And eventually the third argument is just an array of more child nodes, so you will nest h calls inside this array to produce more child nodes. So everything is just nested calls, eventually together they return a tree of virtual nodes.
>> Evan You: And it's pretty versatile too. Notice that the second data object is optional, if you don't have any data for this node.

[00:02:10]
This is just a bare div node, you can omit the second object and directly give it to children. And the children argument is also pretty flexible, it can be an array or you can just directly give it some text. It will automatically convert this text into a children array of virtual text nodes.

[00:02:29]
So the first line here creates a div with some text inside of it. The second one creates the same div except it has a class of foo. And the third one creates a div with some real children. So you can have some text inside the children array, alongside it with another virtual child node which is a span.

[00:02:51]
So this would create something like div, some text, span, a bar. So if you search for random functions in the API docs, you will see more details. But this should get you through most of the basic use cases. Any questions so far?
>> Speaker 2: So any time you would have text, that would just be the actual text inside of there?

[00:03:17]
>> Evan You: Yep.
>> Speaker 2: And if it was a child that had an object, that would be an actual HTML element.
>> Evan You: Yeah, so you need to create it with the h function, yeah. And remember inside your render function you would need to eventually return this top level element, so that the whole tree gets returned.

[00:03:41]
And a relatively lesser known feature of the h function is that it can directly render a component as well. Similar to how we use custom component tags as custom element tags inside our templates. The h, in addition to taking string tag types, it can also directly take a component definition.

[00:04:03]
So let's say we import a component from another view component file. And you can directly pass that component into the h function. So that'll create a component instance, that'll create a v node representing that component instead of a normal element. And you can then pass the props to that component in the data object as well, let's run another feature.

[00:04:32]
So basically this means that you no longer have to register the component inside the component's option, then reference it using the kebab case name of it. You can completely skip that step when you're using render functions.
>> Speaker 3: There's some questions on chad, I'm not sure when you want to address them.

[00:04:51]
>> Evan You: Sure, I can take questions now.
>> Speaker 3: Okay, so do you know any major production sites that precompiled their templates?
>> Evan You: I think almost all major production sites built with view are precompiling the templates. Because you will be using Webpack and Vue Loader, and if you're using that, you're already precompiling by default.

[00:05:12]
>> Speaker 3: What do you think about templates for functional components?
>> Evan You: That's something we are planning to support, but there are some edge cases that we need to carefully evaluate. Because functional components do not support everything that stateful components support. But internally we have an experimental branch by Blake Hizarotine, and he's done an experimental branch that already sort of got it working.

[00:05:40]
It's just we have to iron out some edge cases to make sure everything works smoothly as expected.
>> Speaker 3: Can you ask whether the render function is different than the render object inside of view instance? Usually seen when I create an app via view CLI.
>> Evan You: The render object?

[00:06:06]
>> Speaker 4: When you create an app, I can kind of help rephrase it cuz I've seen it. When you create an app with UCLI at the top level- [CROSSTALK]
>> Evan You: Right.
>> Speaker 4: In the view instance there's a render and then h,
>> Evan You: Returns app, right, yeah.
>> Speaker 4: And h app yeah, so I think that's exactly what you're describing

[00:06:26]
>> Evan You: So that's a render function, and it's just using the arrow function shorthand. Instead of doing the full render return it's just directly returning another component. This is also a very common pattern, which we will in fact talk about later. That a component can return another component as it's own root node.

[00:06:47]
So this outer component doesn't render anything of it's ow, iInstead it simply renders another component. So this is like a shell component, but this shell component can do some interesting things. And in the case of the root instance, in the view CI template we let the root instance.

[00:07:06]
We want to separate the responsibility of the root instance because we do inject stores routers at the root level. Also the root instance cannot be hot reloaded, so that's a technical limitation. So by separating the root instance with your app component that allows our app component to be hot reloadable.

[00:07:28]
So when you edit the app.vue file, you will see hot reloads. But if you edit the root instance itself, then you have to manually reload your page. So that's just also a development experience concern.