The new wave of Javascript frameworks

By Fabrizio A. Vitale & Guido D'Orsi

The new wave of Javascript frameworks

By Fabrizio A. Vitale & Guido D'Orsi

1

The first rise of the Javascript frameworks

jQuery 🏆

Select2.prototype.render = function () {
  var $container = $(
    '<span class="select2 select2-container">' +
      '<span class="selection"></span>' +
      '<span class="dropdown-wrapper" aria-hidden="true"></span>' +
    '</span>'
  );

  $container.attr('dir', this.options.get('dir'));

  this.$container = $container;

  this.$container[0].classList
    .add('select2-container--' + this.options.get('theme'));

  Utils.StoreData($container[0], 'element', this.$element);

  return $container;
};
Select2.prototype.render = function () {
  var $container = $(
    '<span class="select2 select2-container">' +
      '<span class="selection"></span>' +
      '<span class="dropdown-wrapper" aria-hidden="true"></span>' +
    '</span>'
  );

  $container.attr('dir', this.options.get('dir'));

  this.$container = $container;

  this.$container[0].classList
    .add('select2-container--' + this.options.get('theme'));

  Utils.StoreData($container[0], 'element', this.$element);

  return $container;
};

2

The coming of React

Declarative
Performant (compared to .innerHTML)
Composable
SSR!

3

Today

4

React is starting to show it’s limits

Too many renders issue
Lack of standards
Hydration times

5

The new wave of Javascript frameworks

Solid.js & Qwik

6

7

What's SolidJS?

Solid is a lightweight and declarative reactive library for building user interfaces.

Features

JSX templating
Component based
Fine-grained reactivity model
Familiar api and DX for React developers
Unidirectional data flow
Client & Server side rendering
Typescript support
Code-splitting - lazy(import(…))
Suspense (render-as-you-fetch)
Transitions

8

SolidJS is fast

It’s just 7.3KB min+gzip.
At the top of UI speed and memory utilization benchmarks.
Blazing fast server-side rendering, based on string interpolation.
No Virtual Dom, components render once.

9

Smaller bundles | A demo app

React

[...]
index.html                1.58 KiB
assets/index.f8c30131.css 51.87 KiB / gzip: 10.26 KiB
assets/index.d60afae4.js  141.33 KiB / gzip: 45.79 KiB
[...]
index.html                1.58 KiB
assets/index.f8c30131.css 51.87 KiB / gzip: 10.26 KiB
assets/index.d60afae4.js  141.33 KiB / gzip: 45.79 KiB

SolidJS

[...]
index.html                1.58 KiB
assets/index.f8c30131.css 51.87 KiB / gzip: 10.26 KiB
assets/index.54c59109.js  13.62 KiB / gzip: 5.75 KiB
[...]
index.html                1.58 KiB
assets/index.f8c30131.css 51.87 KiB / gzip: 10.26 KiB
assets/index.54c59109.js  13.62 KiB / gzip: 5.75 KiB

10

Solid component

function Counter(props) {
  const [count, setCount] = createSignal(props.initialCount ?? 0);

  createEffect(() => {
    console.log(`count ${count()}`);
  });

  return (
    <button type="button" onClick={() => setCount((n) => ++n)}>
      {count()}
    </button>
  );
}
function Counter(props) {
  const [count, setCount] = createSignal(props.initialCount ?? 0);

  createEffect(() => {
    console.log(`count ${count()}`);
  });

  return (
    <button type="button" onClick={() => setCount((n) => ++n)}>
      {count()}
    </button>
  );
}

A standard Solid component it’s just a function that:

returns a DOM Element
receives props from the parent component
runs once per instance, in other words, does not rerender

11

React reconciliation

count: 7=>8

setCount(n => n + 1);

react reconciliation

12

SolidJS update

count: 7=>8

setCount(n => n + 1);

react reconciliation

13

Automatic dependency tracking

function Sum() {
  const [a, setA] = createSignal(0);
  const [b, setB] = createSignal(0);

  createEffect(() => {
    console.log(`a + b = ${a() + b()}`);
  });

  return (
    <>
      <button type="button" onClick={() => setA((n) => ++n)}>
        a + 1 ({a()})
      </button>
      <button type="button" onClick={() => setB((n) => ++n)}>
        b + 1 ({(b())})
      </button>
    </>
  );
}
function Sum() {
  const [a, setA] = createSignal(0);
  const [b, setB] = createSignal(0);

  createEffect(() => {
    console.log(`a + b = ${a() + b()}`);
  });

  return (
    <>
      <button type="button" onClick={() => setA((n) => ++n)}>
        a + 1 ({a()})
      </button>
      <button type="button" onClick={() => setB((n) => ++n)}>
        b + 1 ({(b())})
      </button>
    </>
  );
}

playground - reactivity guide

14

Fine-Grained reactivity

Signals are observables that notify whenever their value changes.
Effects are automatically subscribed to signals they read.
Before an Effect executes (or re-executes) it is marked as current listener.
Any Signal that is read adds the current listener to its subscribers.

reactivity guide

15

Side by side API comparison

16

Familiar api for React developers

17

Conditional rendering

React

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const toggle = () => setIsLoggedIn((val) => !val);

  return isLoggedIn ? (
    <button onClick={toggle}>Log out</button>
  ) : (
    <button onClick={toggle}>Log in</button>
  );
}
function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const toggle = () => setIsLoggedIn((val) => !val);

  return isLoggedIn ? (
    <button onClick={toggle}>Log out</button>
  ) : (
    <button onClick={toggle}>Log in</button>
  );
}

Solid

function App() {
  const [isLoggedIn, setIsLoggedIn] = createSignal(false);
  const toggle = () => setIsLoggedIn((val) => !val);

  return (
    <Show 
      when={isLoggedIn()} 
      fallback={<button onClick={toggle}>Log in</button>}
    >
      <button onClick={toggle}>Log out</button>
    </Show>
  );
}
function App() {
  const [isLoggedIn, setIsLoggedIn] = createSignal(false);
  const toggle = () => setIsLoggedIn((val) => !val);

  return (
    <Show 
      when={isLoggedIn()} 
      fallback={<button onClick={toggle}>Log in</button>}
    >
      <button onClick={toggle}>Log out</button>
    </Show>
  );
}

18

Render lists

React

const palette = [
  '#26547C', '#EF476F', '#FFD166', '#06D6A0'
];

function Palette({ palette }: { palette: string [] }) {
  return (
    <ul className="color-list">
      {palette.map((color) => (
        <li key={color} style={{ background: color }} />
      ))}
    </ul>
  );
}
const palette = [
  '#26547C', '#EF476F', '#FFD166', '#06D6A0'
];

function Palette({ palette }: { palette: string [] }) {
  return (
    <ul className="color-list">
      {palette.map((color) => (
        <li key={color} style={{ background: color }} />
      ))}
    </ul>
  );
}

Solid

const palette = [
  '#26547C', '#EF476F', '#FFD166', '#06D6A0'
];

function Palette(props: { palette: string[] }) {
  return (
    <ul class="color-list">
      <For each={props.palette}>
        {(color) => <li style={{ background: color }} />}
      </For>
    </ul>
  );
}
const palette = [
  '#26547C', '#EF476F', '#FFD166', '#06D6A0'
];

function Palette(props: { palette: string[] }) {
  return (
    <ul class="color-list">
      <For each={props.palette}>
        {(color) => <li style={{ background: color }} />}
      </For>
    </ul>
  );
}

19

Ecosystem | Libraries

20

Create new project | Vite template

npx degit solidjs/templates/ts my-solid-app
npx degit solidjs/templates/ts my-solid-app

Rendering

Client-side rendering - solid-router.
Server-side rendering *

Guides

* some assembly required

21

Create new project | Astro

npm create astro@latest
npm create astro@latest

Rendering

Guides

22

Create new project | SolidStart

Meta-framework developed by the SolidJS team, powered by vite and currently in beta.

Rendering

Client-side rendering (CSR)
Server-side rendering (SSR)
Streaming SSR
Static site generation (SSG)

Guides

23

Resources

Community

24

25

26

React 17 Hydration

27

React 17 Hydration

28

React 18 Hydration

29

React 18 Hydration

30

Islands Hydration (like Astro)

31

Islands Hydration (like Astro)

32

Islands Hydration (like Astro)

33

Qwik (resumability)

34

Qwik (resumability)

35

Qwik (resumability)

36

37

Auto lazy loading!

import { component$ } from '@builder.io/qwik';

export const App = component$(() => {
  const str = 'hello';

  return (
    <button onClick$={() => alert(str)}>
      Hello Qwik
    </button>
  );
});
import { component$ } from '@builder.io/qwik';

export const App = component$(() => {
  const str = 'hello';

  return (
    <button onClick$={() => alert(str)}>
      Hello Qwik
    </button>
  );
});

38

Auto lazy loading! - Output

app_component_button_onclick_0x8svzfkndi.js

import { useLexicalScope } from "@builder.io/qwik";
export const App_component_button_onClick_0X8SVzFKNdI = ()=>{
    const [str] = useLexicalScope();
    return alert(str);
};
import { useLexicalScope } from "@builder.io/qwik";
export const App_component_button_onClick_0X8SVzFKNdI = ()=>{
    const [str] = useLexicalScope();
    return alert(str);
};

app_component_akbu84a8zes.js

import { jsxDEV as _jsxDEV } from "@builder.io/qwik/jsx-dev-runtime";
import { qrlDEV } from "@builder.io/qwik";
export const App_component_AkbU84a8zes = ()=>{
    const str = 'hello';
    return /*#__PURE__*/ _jsxDEV("button", {
        onClick$: qrlDEV(()=>import("./app_component_button_onclick_0x8svzfkndi"), "App_component_button_onClick_0X8SVzFKNdI", {
            file: "/app.tsx",
            lo: 137,
            hi: 153,
            displayName: "App_component_button_onClick"
        }, [
            str
        ]),
        children: "Hello Qwik"
    }, void 0, false, {
        fileName: "/app.tsx",
        lineNumber: 6,
        columnNumber: 10
    }, this);
};
import { jsxDEV as _jsxDEV } from "@builder.io/qwik/jsx-dev-runtime";
import { qrlDEV } from "@builder.io/qwik";
export const App_component_AkbU84a8zes = ()=>{
    const str = 'hello';
    return /*#__PURE__*/ _jsxDEV("button", {
        onClick$: qrlDEV(()=>import("./app_component_button_onclick_0x8svzfkndi"), "App_component_button_onClick_0X8SVzFKNdI", {
            file: "/app.tsx",
            lo: 137,
            hi: 153,
            displayName: "App_component_button_onClick"
        }, [
            str
        ]),
        children: "Hello Qwik"
    }, void 0, false, {
        fileName: "/app.tsx",
        lineNumber: 6,
        columnNumber: 10
    }, this);
};

39

Auto lazy loading! - Resuming

<!DOCTYPE html>
<html q:container="paused" q:version="0.11.0" q:render="ssr" q:base="/repl/21uldbnhtl3/build/">
  <html>
    <head q:head>
      <title q:head>Hello Qwik</title>
    </head>
    <body>
      <!--qv q:id=0 q:key=AkbU84a8zes:-->
      <button
        on:click="app_component_button_onclick_0x8svzfkndi.js#App_component_button_onClick_0X8SVzFKNdI[0]"
        q:id="1"
      >Hello Qwik</button><!--/qv-->
    </body>
  </html>
  <script type="qwik/json">
    {"ctx":{"#1":{"r":"0"}},"objs":["hello"],"subs":[]}
  </script>
  <script id="qwikloader">
   // qwik loader minifyed code
  </script>
  <script>
    window.qwikevents.push("click")
  </script>
</html>
<!DOCTYPE html>
<html q:container="paused" q:version="0.11.0" q:render="ssr" q:base="/repl/21uldbnhtl3/build/">
  <html>
    <head q:head>
      <title q:head>Hello Qwik</title>
    </head>
    <body>
      <!--qv q:id=0 q:key=AkbU84a8zes:-->
      <button
        on:click="app_component_button_onclick_0x8svzfkndi.js#App_component_button_onClick_0X8SVzFKNdI[0]"
        q:id="1"
      >Hello Qwik</button><!--/qv-->
    </body>
  </html>
  <script type="qwik/json">
    {"ctx":{"#1":{"r":"0"}},"objs":["hello"],"subs":[]}
  </script>
  <script id="qwikloader">
   // qwik loader minifyed code
  </script>
  <script>
    window.qwikevents.push("click")
  </script>
</html>

40

Demo Time!

41

Is production ready?

Meta-framework: Qwik City (supports both SSR and SSG)
It’s still in alpha (they are still working on the core API)
You can easily find some bugs related to the rendering

42

Open source

Qwik is still young and requires alot of work to become stable.

It’s a huge opportunity to become a contributor!

Open issues
Contribute to the documentation
Join discord and collaborate on the development!

43

Resources

Community

44

Conclusions

SolidJS

Lightweight and fast runtime ⚡️
Familiar DX for React developers
Deceptively shallow learning curve

Qwik

Blazing fast page loads ⚡
WIP 🚧
All the closures must be serializable

45

Thank you!

Slides

Demo apps

Speakers

46