JSX vs. Templates

[00:00:00]
>> Evan You: Render functions, we're finally getting to it. Before we talk about render functions, so there is this sort of competing schools of thoughts in front end community about JSX render functions versus templates. People who like templates hate JSX, people who like JSX hate templates, and in my opinion, they are pretty much the same thing.

[00:00:21]
When we talk about these things, we need to think about their end goals. Both JSX and templates are a way of declaring the relationship between the dom and our state. Templates is just a more static and more constraining form of expression, and that static property has its advantages.

[00:00:49]
So template is more static, JSX or render functions are more dynamic. Being more dynamic gives you advantage of full access to the programming language. You can do anything you want. [COUGH] As long as you can write it in code, you can do it in the render function. So that kind of gets rid of the need for inventing new syntax and templates in order for you to achieve some esoteric rendering requirements.

[00:01:15]
On the other side, templates are more static. In fact, few templates are syntax-wise, they are parsable by any HTML parser. So that allows you to quickly migrate existing templates or migrating existing, say, markups produced by designers, you can quickly adopt them into your code. Better familiarity, and more importantly, the static nature of templates allowing better compile time optimizations.

[00:01:44]
The dynamic nature of JSX actually make optimization much more difficult, because there are less assumptions that can be made. Because templates are constrained, these constraints actually serves benefits when you are trying to compile them, because you know that you can only write the template this way, so you can assume a lot of things can do more optimizations at the compile time.

[00:02:03]
So there are benefits on both sides. But eventually View supports both, because we see benefits on both sides. So we expose the templates as the default API, but we also allow you to drop down to the render function layer when you actually need that level of flexibility. It's just we don't use it as the default.