Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
-
A VDOM library like Inferno uses this information to compile its JSX directly into pre-optimized node structures. Marko, and Vue hoist their static VDOM nodes outside of their components so that they don't incur the overhead of recreating them on every render.
With non-VDOM libraries, like Svelte or Solid, we can further optimize for updates as well since the framework is not built on a diff engine. We can use the statically known information like attributes and directly associate template expressions with them, without necessarily understanding much about those expressions. This is basically loop unwinding. Instead of iterating over a list of unknown properties we compile in the inline update expressions. You can think of it like:
Svelte separates its code between create and update lifecycles. Solid takes that one step further hoisting the DOM creation into clone-able Template elements that create whole portions of the DOM in a single call, incidentally a runtime technique used by Tagged Template Literal libraries like @webreflection 's uhtml and Lit.
We are just scratching the surface of compiled JavaScript frameworks, but the techniques that we associate with pure compiled frameworks are working their way into others. For example, Vue has been exploring new data-level language in their Single File Components. And it is easy since the groundwork is already there.
We are just scratching the surface of compiled JavaScript frameworks, but the techniques that we associate with pure compiled frameworks are working their way into others. For example, Vue has been exploring new data-level language in their Single File Components. And it is easy since the groundwork is already there.
With non-VDOM libraries, like Svelte or Solid, we can further optimize for updates as well since the framework is not built on a diff engine. We can use the statically known information like attributes and directly associate template expressions with them, without necessarily understanding much about those expressions. This is basically loop unwinding. Instead of iterating over a list of unknown properties we compile in the inline update expressions. You can think of it like:
Both of these approaches use specific syntax to denote understanding the nature of their state. Their data has become part of their language. While not enforced, have you ever wondered about the potential value of the use prefix on React hooks?
Ones where end user code is run through a compiler to produce the final output. To be fair this might be a bit too loose but I want to show that the approach is a spectrum rather than a single target. The term most often gets associated with frameworks like Svelte or Marko where everything ends up getting processed. But almost all popular frameworks use some form of ahead of time(AOT) compilation on their templates.
A VDOM library like Inferno uses this information to compile its JSX directly into pre-optimized node structures. Marko, and Vue hoist their static VDOM nodes outside of their components so that they don't incur the overhead of recreating them on every render.
But there are more steps still to go on this path. This trend of UI Framework in JavaScript being a language goes back much further. Elm(2012), Marko(2014), and Imba(2015) are just handful. But fast-forward to 2021 and we have many more libraries in this space.