Getting Started
Docs and information available at www.solidjs.com
SolidJS: Origins
SolidJS: Yet another JavaScript Framework
- Started development in 2016
- A return to fine-grained
reactivity
- Performance without a
Virtual DOM
SolidJS: Performance Champion
Enter React Hooks
- Return to primitives
- Adopted almost in every
framework
- They look a lot like reactive
primitives
Reactivity vs Hooks
function MyApp() { function MyApp() {
const count = observable(0); const [count] = useState(0);
const double = pureComputed( const double = useMemo(
() => count() * 2 () => count * 2
); , count);
computed( useEffect(
() => console.log(double()) () => console.log(double)
); , double);
/* ... */ /* ... */
} }
Primitives everywhere
- React Hooks
- Reactivity as a language
- Composition API
- Solid’s primitives
- Common Hooks for Web
Components
SolidJS: Reactivity
What’s Reactive Programming?
a = b + c
* where the value of a updates whenever the value of b or c
changes.
Why Reactive Programming
Declarative
Composable
Simple model consists of only 3 concepts:
● Signals
● Derivations
● Effects
Signals
Getter, Setter, and a value
Also known as Observable,
Ref, Atom, Behavior
Effects
Creates Side Effects
Also known as: Reactions,
Autoruns, Watches,
Computeds
Derivations
Both observer and a signal
Only re-calculates when value
of dependencies change
Also known as Computeds,
Memos, Selectors
Why Derivations?
Cache work from expensive computations
Used in more than one computation
One of multiple dependencies in computation
What can be derived, should be derived
Dynamic Tracking
Every execution dependencies are cleaned up and collected again.
This ensures that only currently dependencies are tracked.
This is something that can only feasibly be done at runtime.
SolidJS: Rendering
Introducing JSX
JSX is a XML syntax in JavaScript
popularized by React.
Describe your view inside your
JavaScript.
Convenient syntax sugar for the
DOM.
React’s JSX
function Counter() { function Counter() {
const [count, setCount] = createSignal(0); const [count, setCount] = createSignal(0);
return <h2>{count()}</h2>; return createElement("h2", {}, count());
} }
Reactive JSX
function Counter() {
const [count, setCount] = createSignal(0);
function Counter() {
const [count, setCount] = createSignal(0); const el = document.createElement("h2");
return <h2>{count()}</h2>; createEffect(() => {
} el.textContent = count();
});
return el;
}
Making a Counter in Solid
import { createSignal, onCleanup } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(0);
const id = setInterval(() => {
setCount(count() + 1)
}, 1000);
onCleanup(() => clearInterval(id));
return <h2>{count()}</h2>;
}
Controlling Flow
<ul>{
<ul>
list().map(
<For
<Paginated
each={list()}>{
each={list()}>{
(item) => <li>{item}</li>}
<li>{item}</li>
)
</For>
</Paginated>
}</ul>
</ul>
Reactive Advantage
Components Run Once
Templates compile to Real DOM Nodes
State Independent of Component
SolidJS: Getting Started
Single Page App Starters
> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
Static Site Generation with Astro
> cd my-app
> npm init astro # select Solid
> npm i
> npm run dev
SolidStart: Adaptive Server Side Rendering
> cd my-app
> npm init solid@next
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
site: https://solidjs.com
twitter: @solid_js
github: https://github.com/solidjs
