3 ms·

There are - as with most things in life - pros and cons to each approach. With plain JS, it's absolutely true that you can let the language do its things when i

by lhorie 6y ago

There are - as with most things in life - pros and cons to each approach. With plain JS, it's absolutely true that you can let the language do its things when it comes to things like scope, control flow, etc as opposed to reinventing them. But at the same time, there are a million ways to loop in JS, and a more restricted DSL can offer very good optimization opportunities that cannot be reasonably implemented on top of a JS-based templating engine. You can also create custom syntax for cases where the language doesn't gel so well (e.g. each/else or await in svelte) I've been slowly seeing more and more of a third approach where there's very little in the way of control flow in the template itself, where data is wired up using different constructs. Solid.js is an interesting example where it uses reactive constructs on top of "plain JS(X)", while encapsulating control flow inside components, which it is then able to optimize aggressively.

spankalee 6y ago
> optimization opportunities that cannot be reasonably implemented on top of a JS-based templating engine You very much can do those optimizations in pure JS. lit-html's repeat() directive implements the list diffing approach used in ivi, Vue. It's invoked just like a higher-order function over an array and a mapper function: https://lit-html.polymer-project.org/guide/writing-templates#repeating-templates-with-the-repeat-directive https://lit-html.polymer-project.org/guide/writing-templates... I also don't think custom syntax is necessary or that useful. JavaScript has enough abstraction power in functions and objects that you can build very nice embedded DSLs without a compiler or custom template syntax. but my main point is that both approaches are still valid, and rather than choose a framework based on its particular DX, we should move away from frameworks and be able to write individual components with whatever DX the developer wants, and have them all work together.
- lhorie 6y ago
  Yes, you can do some optimizations. Keyed list diffing is obviously doable (any respectable vdom does it). Marko-style optimizations (i.e. compiling to no JS hydration logic whatsoever) is far more difficult. IIRC Dominic from the React team looked into it at some point a few years ago but it truly is a very very difficult class of optimizations to implement generically while also supporting unrestricted JS syntax.

by lhorie 6y ago

spankalee 6y ago

> optimization opportunities that cannot be reasonably implemented on top of a JS-based templating engine You very much can do those optimizations in pure JS. lit-html's repeat() directive implements the list diffing approach used in ivi, Vue. It's invoked just like a higher-order function over an array and a mapper function: https://lit-html.polymer-project.org/guide/writing-templates#repeating-templates-with-the-repeat-directive https://lit-html.polymer-project.org/guide/writing-templates... I also don't think custom syntax is necessary or that useful. JavaScript has enough abstraction power in functions and objects that you can build very nice embedded DSLs without a compiler or custom template syntax. but my main point is that both approaches are still valid, and rather than choose a framework based on its particular DX, we should move away from frameworks and be able to write individual components with whatever DX the developer wants, and have them all work together.

lhorie 6y ago
Yes, you can do some optimizations. Keyed list diffing is obviously doable (any respectable vdom does it). Marko-style optimizations (i.e. compiling to no JS hydration logic whatsoever) is far more difficult. IIRC Dominic from the React team looked into it at some point a few years ago but it truly is a very very difficult class of optimizations to implement generically while also supporting unrestricted JS syntax.