4 ms·

lit-html needs a 1600 line library where as UIBuilder is a 200-line library: https://github.com/wisercoder/uibuilder/blob/master/UIBuilder/UIBuilder.ts https://

lit-html needs a 1600 line library where as UIBuilder is a 200-line library: https://github.com/wisercoder/uibuilder/blob/master/UIBuilder/UIBuilder.ts https://github.com/wisercoder/uibuilder/blob/master/UIBuilde... Yes, JSX needs transpilation but that happens at compile-time. Which is better, pre-processing at compile-time, or "transpilation" (i.e., string processing) at run-time?

spankalee 7y ago
UIBuilder doesn't do incremental updates at all. You might as well use innerHTML and template literals. That's a 0-line library :)
- deleted 7y ago
  [deleted]
- interlocutor 7y ago
  Updates offered by lit-html appear to be very limited. If you change value of expressions it updates the DOM. What about larger changes, such as list items changing? What about child elements being replaced with new ones?
  - spankalee 7y ago
    It handles all of that.
    - interlocutor 7y ago
      That does not appear to be correct. https://github.com/Polymer/lit-html/wiki/How-it-Works#4-update https://github.com/Polymer/lit-html/wiki/How-it-Works#4-upda... Excerpt: update() simply iterates through each part and value (the parts array and values array are always the same length) and calls part.setvalue(v) for each part. https://lit-html.polymer-project.org/guide https://lit-html.polymer-project.org/guide Excerpt: Behind the scenes lit-html creates HTML <template> elements from your JavaScript templates and processes them so that it knows exactly where to insert and update the values from expressions. This is very limited. You need to manually update DOM unless your updates are simple changes in values of expressions.
      - spankalee 7y ago
        It is very correct: lit-html is amongst the fastest template systems in use right now. This is shown in every benchmark I've seen or made for it. lit-html updates only the parts of DOM that are dynamic and change. It handles nested templates as values, only updating the whole nested template if the template itself changes, otherwise recursing and only updating that template's values if needed. Repeated DOM is handled either by simply updating state for each item in sequence (non-keyed), or by using the repeat() directive which will move DOM (keyed). You absolutely don't need to manually update DOM. The whole point is to describe your DOM structure as a function of data, and to be to describe all the conditional / repeated parts in the template expression itself.

spankalee 7y ago

UIBuilder doesn't do incremental updates at all. You might as well use innerHTML and template literals. That's a 0-line library :)

deleted 7y ago
[deleted]
interlocutor 7y ago
Updates offered by lit-html appear to be very limited. If you change value of expressions it updates the DOM. What about larger changes, such as list items changing? What about child elements being replaced with new ones?
- spankalee 7y ago
  It handles all of that.
  - interlocutor 7y ago
    That does not appear to be correct. https://github.com/Polymer/lit-html/wiki/How-it-Works#4-update https://github.com/Polymer/lit-html/wiki/How-it-Works#4-upda... Excerpt: update() simply iterates through each part and value (the parts array and values array are always the same length) and calls part.setvalue(v) for each part. https://lit-html.polymer-project.org/guide https://lit-html.polymer-project.org/guide Excerpt: Behind the scenes lit-html creates HTML <template> elements from your JavaScript templates and processes them so that it knows exactly where to insert and update the values from expressions. This is very limited. You need to manually update DOM unless your updates are simple changes in values of expressions.
    - spankalee 7y ago
      It is very correct: lit-html is amongst the fastest template systems in use right now. This is shown in every benchmark I've seen or made for it. lit-html updates only the parts of DOM that are dynamic and change. It handles nested templates as values, only updating the whole nested template if the template itself changes, otherwise recursing and only updating that template's values if needed. Repeated DOM is handled either by simply updating state for each item in sequence (non-keyed), or by using the repeat() directive which will move DOM (keyed). You absolutely don't need to manually update DOM. The whole point is to describe your DOM structure as a function of data, and to be to describe all the conditional / repeated parts in the template expression itself.