Solid.js Journey
A Journey full of reactive surprises!
Presented with ❤️ by Mohamad Shiralizadeh
Our journey
- What? 🤔
- Why? 😍
- How? 🤓
- What! 😳
1Solid.js Journey
Solid.js Journey
A Journey full of reactive surprises!
Presented with ❤️ by Mohamad Shiralizadeh
1
Our journey
- What? 🤔
- Why? 😍
- How? 🤓
- What! 😳
2
Solid.js
- Another javascript framework for building UI
- Performant, Powerful, Pragmatic, and Productive
- Born in 2018 👶 (While the earliest known chameleon fossils date back to 40-50 million years ago)
- Particularly influenced
- Knockout, React, Svelte, Vue, and RxJS
- By Ryan Carniato
3
Features
- Lightweight (7.7kB MINIFIED + GZIPPED)
- Performance
- Composition
- Template/Rendering
- Server Side Rendering
- Typescript friendly
4
Performance
- No Virtual DOM
- Reactive
- Compiler
- Using Vite
5
Life without Reactivity
6
Reactivity
7
Components are functions that returns JSX
8
States (Signals)
9
Derived States (Signals)
10
11
Now
It's time for
Feature BOMBING!
12
Side effect & Memoization
const [count, setCount] = createSignal(initialValue); // side effect createEffect(() => { count() }); // memoization const value = createMemo(() => computeExpensiveValue(count()));const [count, setCount] = createSignal(initialValue); // side effect createEffect(() => { count() }); // memoization const value = createMemo(() => computeExpensiveValue(count()));
13
Life cycles events
import { onMount, onCleanup } from "solid-js"; const CountingComponent = () => { onMount(fn); onCleanup(fn); return <p>Hello iO</p>; };import { onMount, onCleanup } from "solid-js"; const CountingComponent = () => { onMount(fn); onCleanup(fn); return <p>Hello iO</p>; };
14
Control Flow
// Repeat <For each={state.list} fallback={<div>Loading...</div>}> {(item) => <div>{item}</div>} </For> // Show/Hide <Show when={state.count > 0} fallback={<div>Loading...</div>}> <div>My Content</div> </Show> // Switch/Match <Switch fallback={<div>Not Found</div>}> <Match when={state.route === "home"}> <Home /> </Match> ... </Switch>// Repeat <For each={state.list} fallback={<div>Loading...</div>}> {(item) => <div>{item}</div>} </For> // Show/Hide <Show when={state.count > 0} fallback={<div>Loading...</div>}> <div>My Content</div> </Show> // Switch/Match <Switch fallback={<div>Not Found</div>}> <Match when={state.route === "home"}> <Home /> </Match> ... </Switch>
15
Custom Directives
<div class="modal" use:clickOutside={() => setShow(false)}> Some Modal </div> export default function clickOutside(el, accessor) { const onClick = (e) => !el.contains(e.target) && accessor()?.(); document.body.addEventListener("click", onClick); onCleanup(() => document.body.removeEventListener("click", onClick)); }<div class="modal" use:clickOutside={() => setShow(false)}> Some Modal </div> export default function clickOutside(el, accessor) { const onClick = (e) => !el.contains(e.target) && accessor()?.(); document.body.addEventListener("click", onClick); onCleanup(() => document.body.removeEventListener("click", onClick)); }
16
& More… But …
17
Solid Start
import server$ from 'solid-start/server' function Component() { const logHello = server$(async (message: string) => { console.log(message) }); logHello('Hello') ... }import server$ from 'solid-start/server' function Component() { const logHello = server$(async (message: string) => { console.log(message) }); logHello('Hello') ... }
18
What’s coming!
- Server Components
- Lazy reactive system
- Resumability
19
Tools
- Syntax highlighting
- Prettier
- ES Lint
- TS Lint
- Plugins/Libraries
20
Status
- Stable release (1.0.0) on Jun 2021
- Latest release (1.7.3) on Mar 2023
- Weekly Downloads: 90K 🚀
- Github Stars: 27K ⭐
- Contributors: 140+ 👨💻👩💻
21
Learn more
- Solid.js Website
- Comparison with other Libraries
- JS framework benchmark
- Building a Reactive Library from Scratch
22
Thanks you,
Happy hacking!
23