3 ms·

Is there more information about how the 'very efficient rendering' part works?

• judofyr 11y ago
  There's two parts of the "very efficient rendering": 1. It store the previous rendered tag and does a diff. (Just like React). 2. Every tag is compiled to JavaScript that's easy for the optimiser. tag event < div def render <self> <h1 bar="123" baz=bar> "Hello world!" Compiles to: // Setting up the tag-object. Then: tag.prototype.render = function() { return this .setChildren(Imba.static([ (this.$a = this.$a || t$('h1').setBar("123")).setBaz(bar) ], 1)) .setText("Hello world!") .synced() } While React passes an object of props around, Imba will instead call setters. These setters are very easily inlined by modern browsers. Also note that it caches directly on the tag object itself which gives another additional boost. Since it caches the objects themselves it can also compare everything with `===` and/or `indexOf`. The `Imba.static`-call marks an array as static which is a guarantee that the structure of the array won't change. In this case Imba will not do the full diff-algorithm, but instead compare each item element-by-element. And yes, once you've achieved the minimal amount of DOM changes needed (like React), the next step for performance is all of these little tweaks. Does it matter? It all depends. Imba is capable of rendering bigger applications than React when you use the "render everything over again in the animation loop". TLDR: The tags are more integrated into the language. The language is also designed around features that's easy for the optimiser.