5 ms·
Why JSXBelPack when you can import { html, render } from 'https://unpkg.com/lit-html'; const benefitTpl = ({name, desc}) => html` <dt>${name}</dt>
by bennypowers 8y ago
Why JSXBelPack when you can
import { html, render } from 'https://unpkg.com/lit-html';
const benefitTpl = ({name, desc}) => html`
<dt>${name}</dt>
<dd>${desc}</dd>
`;
render(html`
<lit-rocks>
<dl>${benefits.map(benefitTpl)}</dl>
</lit-rocks>`, document.body)
And updates are fast without any VDOM overhead.
- westbrookj 8y agoYes, this! Also, don't forget your `?module` at the end of your unpkg link to get that running
- zemptime 8y agoI'm popping in here to say, I've had people from both Vue and React join my team where we're using lit-html. Transitions have been seamless, mental models map over quite well.
- hyperpress 8y agoThere's so much less cruft and overhead with lit-html, and you get speed that's akin to vanilla JavaScript. As for JSX, I think we can all get used to something non-standard, which after enough time feels normal, but the benefits of a lit-html are so immediately apparent. The transition is super easy.
- tracker1 8y agoIs this doing a full re-render on each change? Having not seen the state management piece... but could be nice for progressive enhancement modules in a server-rendered app. I've done similar in JS.
- zemptime 8y agoNope! It doesn't visit each node like vdom. VDOM visits every virtual node. lit-html looks at only the expressions. That's where a lot of the speed/performance comes from
- spankalee 8y agozeptime's correct. lit-html places markers in the HTML where the expressions are. Then it renders the HTML once, and updates the expressions directly. That's how it avoids a full re-render and avoids building am in-memory VDOM and doing any diffing.