SolidJS: Reactivity to Rendering

We’ve seen reactivity make its mark in several JavaScript UI frameworks from React to Angular and everything in between. Perhaps you’ve used MobX in a React project, or wired up reactive templates in Vue. Maybe you’ve used RxJS with Angular. Or had Svelte compile its reactive system into your unsuspecting code.

SolidJS is a UI rendering library that takes the unique approach of being completely built on top of a reactive system. It isn’t just some way to automate state management. It is the renderer, the components, every aspect of how the library works.

As it turns out this approach is performant. I mean really performant:

JS Framework Benchmark June 2020

Note: VanillaJS and WASM-Bindgen are both reference implementations for JavaScript and WASM respectively. They use the most optimal handcrafted code to perform the benchmarks without using a library.

It also lends to really powerful composition patterns. Each reactive primitive is atomic and composable. But more importantly only accountable to the reactive life-cycle.

So no “Hook Rules”. No this bindings. No consideration around stale closures.

But it is often unclear how we can get from the easy example of automatically triggering a console.log to fully updating views.

So today I want to show you how you can build a whole renderer with nothing but a reactive system. How we can go from that intro article demo to a full featured library like Solid:

const Greeting = (props) => (
  <>Hi <span>{props.name}</span></>
);

const App(() => {
  const [visible, setVisible] = createSignal(false),
    [name, setName] = createSignal("Josephine");

  return (
    <div onClick={() => setName("Geraldine")}>{
      visible() && <Greeting name={ name } />
    }</div>
  );
});

render(App, document.body);

#javascript #solidjs #reactive-programming

indepth.dev

SolidJS: Reactivity to Rendering