SolidJS is a JavaScript framework for building fast, declarative UIs on the web. It shares many ideas with React, but does not use the virtual DOM to deliver a more performant and pragmatic developer experience.

#webdev #programming #100SecondsOfCode

🔗 Resources

Solid Docs https://www.solidjs.com/
Solid GitHub https://github.com/solidjs/solid
React in 100 Seconds https://youtu.be/Tn6-PIqc4UM
Svelte in 100 Seconds https://youtu.be/rv3Yq-B8qp4

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Solid vs React
- Is solid better than React?
- What is Solid.js?
- SolidJS basics tutorial
- Solid performance benchmarks
- Should I use Solid for web dev?
2024-02-04T05:26:57.519Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
83a46dc1-96b7-4dd5-b19f-7ea7c9a28c2b
0a4ea6797796a281eb6de671e9be2090b1fa5f948e37839f63f1442b7a8ed6e9
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Solid, a declarative JavaScript framework for building fast UIs with maximum control over reactivity.
It was created by Ryan Carniato in 2018 and is loved by developers because it's both pragmatic and extremely performant.
On the surface, it shares many similarities with React.
Components are JavaScript functions that return JSX for the UI.
However, unlike React, there's no virtual DOM.
It uses a compiler, more like Svelte, that converts your code into vanilla JavaScript to bring you as close to the dom as possible.
The framework itself only weighs 7 kilobytes, and it completely crushes runtime performance benchmarks without the need for any extra magic or weird hacks in your code.
But most importantly, it's truly reactive.
A function component is only called once, which means you can do unheard of things like you set interval predictably at the top level.
Data that changes or state is managed with the create signal primitive, which returns a getter and setter.
The framework will observe this data and surgically update its exact location in the DOM when it changes, instead of re rendering the entire component.
Again, it's truly reactive.
To get started, it, generate a new solid project.
It uses Vite as the build tool and should look very familiar if you've ever used React.
Define a component as a plain JavaScript function.
Now when you define the UI with JSX, you actually get a real DOM element, instead of some weird framework abstraction.
To add reactive state to a component, use the createSignal function.
It provides a getter and setter, and notice how the getter is a function.
This allows the framework to observe the current value reactively.
We can easily create Rive state by simply defining another function based on the original signal.
And it also provides a function to memoize the return value for expensive computations.
In some cases, you may want to run code when your data changes.
For that, create effect allows you to run side effects, and a signal referenced in the body of the function will automatically be subscribed to to rerun the side effect whenever the value changes.
Solid also provides on mount in on cleanup functions that tap into the beginning and end of the component life cycle.
The framework also goes out of its way to make JSX more developer friendly.
For example, It has a show component to handle conditional logic, and the for component to simplify loops over a collection of items.
When it comes to collections, it also provides a create store function that can easily handle nested reactivity.
And it supports custom directives with the use keyword, which is a highly efficient way to attach custom behaviors to different elements.
It.
And it has everything else you would expect in a modern framework, like lazy loading, context, SSR support, and so on.
This has been Solid in 100 seconds.
Hit the like button and subscribe if you wanna see more short videos like this.
Thanks for watching, and I will see you in the next one.

Speaker 0: Solid, a declarative JavaScript framework for building fast UIs with maximum control over reactivity. It was created by Ryan Carniato in 2018 and is loved by developers because it's both pragmatic and extremely performant. On the surface, it shares many similarities with React. Components are JavaScript functions that return JSX for the UI. However, unlike React, there's no virtual DOM.

It uses a compiler, more like Svelte, that converts your code into vanilla JavaScript to bring you as close to the dom as possible. The framework itself only weighs 7 kilobytes, and it completely crushes runtime performance benchmarks without the need for any extra magic or weird hacks in your code. But most importantly, it's truly reactive. A function component is only called once, which means you can do unheard of things like you set interval predictably at the top level. Data that changes or state is managed with the create signal primitive, which returns a getter and setter.

The framework will observe this data and surgically update its exact location in the DOM when it changes, instead of re rendering the entire component. Again, it's truly reactive. To get started, it, generate a new solid project. It uses Vite as the build tool and should look very familiar if you've ever used React. Define a component as a plain JavaScript function.

Now when you define the UI with JSX, you actually get a real DOM element, instead of some weird framework abstraction. To add reactive state to a component, use the createSignal function. It provides a getter and setter, and notice how the getter is a function. This allows the framework to observe the current value reactively. We can easily create Rive state by simply defining another function based on the original signal.

And it also provides a function to memoize the return value for expensive computations. In some cases, you may want to run code when your data changes. For that, create effect allows you to run side effects, and a signal referenced in the body of the function will automatically be subscribed to to rerun the side effect whenever the value changes. Solid also provides on mount in on cleanup functions that tap into the beginning and end of the component life cycle. The framework also goes out of its way to make JSX more developer friendly.

For example, It has a show component to handle conditional logic, and the for component to simplify loops over a collection of items. When it comes to collections, it also provides a create store function that can easily handle nested reactivity. And it supports custom directives with the use keyword, which is a highly efficient way to attach custom behaviors to different elements. It. And it has everything else you would expect in a modern framework, like lazy loading, context, SSR support, and so on.

This has been Solid in 100 seconds. Hit the like button and subscribe if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
Solid, a declarative JavaScript framework for building fast UIs with maximum control over reactivity. It was created by Ryan Carniato in 2018 and is loved by developers because it's both pragmatic and extremely performant. On the surface, it shares many similarities with React. Components are JavaScript functions that return JSX for the UI. However, unlike React, there's no virtual DOM. It uses a compiler, more like Svelte, that converts your code into vanilla JavaScript to bring you as close to the dom as possible. The framework itself only weighs 7 kilobytes, and it completely crushes runtime performance benchmarks without the need for any extra magic or weird hacks in your code. But most importantly, it's truly reactive. A function component is only called once, which means you can do unheard of things like you set interval predictably at the top level. Data that changes or state is managed with the create signal primitive, which returns a getter and setter. The framework will observe this data and surgically update its exact location in the DOM when it changes, instead of re rendering the entire component. Again, it's truly reactive. To get started, it, generate a new solid project. It uses Vite as the build tool and should look very familiar if you've ever used React. Define a component as a plain JavaScript function. Now when you define the UI with JSX, you actually get a real DOM element, instead of some weird framework abstraction. To add reactive state to a component, use the createSignal function. It provides a getter and setter, and notice how the getter is a function.
This allows the framework to observe the current value reactively. We can easily create Rive state by simply defining another function based on the original signal. And it also provides a function to memoize the return value for expensive computations. In some cases, you may want to run code when your data changes. For that, create effect allows you to run side effects, and a signal referenced in the body of the function will automatically be subscribed to to rerun the side effect whenever the value changes.
programming
Solid also provides on mount in on cleanup functions that tap into the beginning and end of the component life cycle. The framework also goes out of its way to make JSX more developer friendly.
For example, It has a show component to handle conditional logic, and the for component to simplify loops over a collection of items. When it comes to collections, it also provides a create store function that can easily handle nested reactivity. And it supports custom directives with the use keyword, which is a highly efficient way to attach custom behaviors to different elements.
programming
logic
It. And it has everything else you would expect in a modern framework, like lazy loading, context, SSR support, and so on.
This has been Solid in 100 seconds. Hit the like button and subscribe if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
youtube
Solid, a declarative JavaScript framework for building fast UIs with maximum control over reactivity. It was created by Ryan Carniato in 2018 and is loved by developers because it's both pragmatic and extremely performant. On the surface, it shares many similarities with React. Components are JavaScript functions that return JSX for the UI. However, unlike React, there's no virtual DOM. It uses a compiler, more like Svelte, that converts your code into vanilla JavaScript to bring you as close to the dom as possible. The framework itself only weighs 7 kilobytes, and it completely crushes runtime performance benchmarks without the need for any extra magic or weird hacks in your code. But most importantly, it's truly reactive. A function component is only called once, which means you can do unheard of things like you set interval predictably at the top level. Data that changes or state is managed with the create signal primitive, which returns a getter and setter. The framework will observe this data and surgically update its exact location in the DOM when it changes, instead of re rendering the entire component. Again, it's truly reactive. To get started, it, generate a new solid project. It uses Vite as the build tool and should look very familiar if you've ever used React. Define a component as a plain JavaScript function. Now when you define the UI with JSX, you actually get a real DOM element, instead of some weird framework abstraction. To add reactive state to a component, use the createSignal function. It provides a getter and setter, and notice how the getter is a function. This allows the framework to observe the current value reactively. We can easily create Rive state by simply defining another function based on the original signal. And it also provides a function to memoize the return value for expensive computations. In some cases, you may want to run code when your data changes. For that, create effect allows you to run side effects, and a signal referenced in the body of the function will automatically be subscribed to to rerun the side effect whenever the value changes. Solid also provides on mount in on cleanup functions that tap into the beginning and end of the component life cycle. The framework also goes out of its way to make JSX more developer friendly. For example, It has a show component to handle conditional logic, and the for component to simplify loops over a collection of items. When it comes to collections, it also provides a create store function that can easily handle nested reactivity. And it supports custom directives with the use keyword, which is a highly efficient way to attach custom behaviors to different elements. It. And it has everything else you would expect in a modern framework, like lazy loading, context, SSR support, and so on. This has been Solid in 100 seconds. Hit the like button and subscribe if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
Solid,
solid
a
a
declarative
declarative
JavaScript
javascript
framework
framework
for
for
building
building
fast
fast
UIs
uis
with
with
maximum
maximum
control
control
over
over
reactivity.
reactivity
It
it
was
was
created
created
by
by
Ryan
ryan
Carniato
carniato
in
in
2018
2018
and
and
is
is
loved
loved
by
by
developers
developers
because
because
it's
it's
both
both
pragmatic
pragmatic
and
and
extremely
extremely
performant.
performant
On
on
the
the
surface,
surface
it
it
shares
shares
many
many
similarities
similarities
with
with
React.
react
Components
components
are
are
JavaScript
javascript
functions
functions
that
that
return
return
JSX
jsx
for
for
the
the
UI.
ui
However,
however
unlike
unlike
React,
react
there's
there's
no
no
virtual
virtual
DOM.
dom
It
it
uses
uses
a
a
compiler,
compiler
more
more
like
like
Svelte,
svelte
that
that
converts
converts
your
your
code
code
into
into
vanilla
vanilla
JavaScript
javascript
to
to
bring
bring
you
you
as
as
close
close
to
to
the
the
dom
dom
as
as
possible.
possible
The
the
framework
framework
itself
itself
only
only
weighs
weighs
7
7
kilobytes,
kilobytes
and
and
it
it
completely
completely
crushes
crushes
runtime
runtime
performance
performance
benchmarks
benchmarks
without
without
the
the
need
need
for
for
any
any
extra
extra
magic
magic
or
or
weird
weird
hacks
hacks
in
in
your
your
code.
code
But
but
most
most
importantly,
importantly
it's
it's
truly
truly
reactive.
reactive
A
a
function
function
component
component
is
is
only
only
called
called
once,
once
which
which
means
means
you
you
can
can
do
do
unheard
unheard
of
of
things
things
like
like
you
you
set
set
interval
interval
predictably
predictably
at
at
the
the
top
top
level.
level
Data
data
that
that
changes
changes
or
or
state
state
is
is
managed
managed
with
with
the
the
create
create
signal
signal
primitive,
primitive
which
which
returns
returns
a
a
getter
getter
and
and
setter.
setter
The
the
framework
framework
will
will
observe
observe
this
this
data
data
and
and
surgically
surgically
update
update
its
its
exact
exact
location
location
in
in
the
the
DOM
dom
when
when
it
it
changes,
changes
instead
instead
of
of
re
re
rendering
rendering
the
the
entire
entire
component.
component
Again,
again
it's
it's
truly
truly
reactive.
reactive
To
to
get
get
started,
started
it,
it
generate
generate
a
a
new
new
solid
solid
project.
project
It
it
uses
uses
Vite
vite
as
as
the
the
build
build
tool
tool
and
and
should
should
look
look
very
very
familiar
familiar
if
if
you've
you've
ever
ever
used
used
React.
react
Define
define
a
a
component
component
as
as
a
a
plain
plain
JavaScript
javascript
function.
function
Now
now
when
when
you
you
define
define
the
the
UI
ui
with
with
JSX,
jsx
you
you
actually
actually
get
get
a
a
real
real
DOM
dom
element,
element
instead
instead
of
of
some
some
weird
weird
framework
framework
abstraction.
abstraction
To
to
add
add
reactive
reactive
state
state
to
to
a
a
component,
component
use
use
the
the
createSignal
createsignal
function.
function
It
it
provides
provides
a
a
getter
getter
and
and
setter,
setter
and
and
notice
notice
how
how
the
the
getter
getter
is
is
a
a
function.
function
This
this
allows
allows
the
the
framework
framework
to
to
observe
observe
the
the
current
current
value
value
reactively.
reactively
We
we
can
can
easily
easily
create
create
Rive
rive
state
state
by
by
simply
simply
defining
defining
another
another
function
function
based
based
on
on
the
the
original
original
signal.
signal
And
and
it
it
also
also
provides
provides
a
a
function
function
to
to
memoize
memoize
the
the
return
return
value
value
for
for
expensive
expensive
computations.
computations
In
in
some
some
cases,
cases
you
you
may
may
want
want
to
to
run
run
code
code
when
when
your
your
data
data
changes.
changes
For
for
that,
that
create
create
effect
effect
allows
allows
you
you
to
to
run
run
side
side
effects,
effects
and
and
a
a
signal
signal
referenced
referenced
in
in
the
the
body
body
of
of
the
the
function
function
will
will
automatically
automatically
be
be
subscribed
subscribed
to
to
to
to
rerun
rerun
the
the
side
side
effect
effect
whenever
whenever
the
the
value
value
changes.
changes
Solid
solid
also
also
provides
provides
on
on
mount
mount
in
in
on
on
cleanup
cleanup
functions
functions
that
that
tap
tap
into
into
the
the
beginning
beginning
and
and
end
end
of
of
the
the
component
component
life
life
cycle.
cycle
The
the
framework
framework
also
also
goes
goes
out
out
of
of
its
its
way
way
to
to
make
make
JSX
jsx
more
more
developer
developer
friendly.
friendly
For
for
example,
example
It
it
has
has
a
a
show
show
component
component
to
to
handle
handle
conditional
conditional
logic,
logic
and
and
the
the
for
for
component
component
to
to
simplify
simplify
loops
loops
over
over
a
a
collection
collection
of
of
items.
items
When
when
it
it
comes
comes
to
to
collections,
collections
it
it
also
also
provides
provides
a
a
create
create
store
store
function
function
that
that
can
can
easily
easily
handle
handle
nested
nested
reactivity.
reactivity
And
and
it
it
supports
supports
custom
custom
directives
directives
with
with
the
the
use
use
keyword,
keyword
which
which
is
is
a
a
highly
highly
efficient
efficient
way
way
to
to
attach
attach
custom
custom
behaviors
behaviors
to
to
different
different
elements.
elements
It.
it
And
and
it
it
has
has
everything
everything
else
else
you
you
would
would
expect
expect
in
in
a
a
modern
modern
framework,
framework
like
like
lazy
lazy
loading,
loading
context,
context
SSR
ssr
support,
support
and
and
so
so
on.
on
This
this
has
has
been
been
Solid
solid
in
in
100
100
seconds.
seconds
Hit
hit
the
the
like
like
button
button
and
and
subscribe
subscribe
if
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The transcript discusses the framework for building fast UI with maximum control over reactivity, which is created by Ryan Carniato in 2018 and is designed to use a ventricular function component with a variable UI using araunner. The framework uses Vite as the build tool and allows for unheard-unds code to be generated. It supports multiple functions and is developer-friendly, including a show component to handle conditional logic, a clean-up function, and a store function. The framework has a long live time of 100 seconds and is designed for developers to see short videos.
Solid in 100 Seconds
Solid, a declarative JavaScript framework for building fast UIs with maximum control over reactivity. It was created by Ryan Carniato in 2018 and is loved by developers because it's both pragmatic and extremely performant. On the surface, it shares many similarities with React. Components are JavaScript functions that return JSX for the UI. However, unlike React, there's no virtual DOM. It uses a compiler, more like Svelte, that converts your code into vanilla JavaScript to bring you as close to the dom as possible. The framework itself only weighs 7 kilobytes, and it completely crushes runtime performance benchmarks without the need for any extra magic or weird hacks in your code. But most importantly, it's truly reactive. A function component is only called once, which means you can do unheard of things like you set interval predictably at the top level. Data that changes or state is managed with the create signal primitive, which returns a getter and setter. The framework will observe this data and surgically update its exact location in the DOM when it changes, instead of re rendering the entire component. Again, it's truly reactive. To get started, it, generate a new solid project. It uses Vite as the build tool and should look very familiar if you've ever used React. Define a component as a plain JavaScript function. Now when you define the UI with JSX, you actually get a real DOM element, instead of some weird framework abstraction. To add reactive state to a component, use the createSignal function. It provides a getter and setter, and notice how the getter is a function. This allows the framework to observe the current value reactively. We can easily create Rive state by simply defining another function based on the original signal. And it also provides a function to memoize the return value for expensive computations. In some cases, you may want to run code when your data changes. For that, create effect allows you to run side effects, and a signal referenced in the body of the function will automatically be subscribed to to rerun the side effect whenever the value changes. Solid also provides on mount in on cleanup functions that tap into the beginning and end of the component life cycle. The framework also goes out of its way to make JSX more developer friendly. For example, It has a show component to handle conditional logic, and the for component to simplify loops over a collection of items. When it comes to collections, it also provides a create store function that can easily handle nested reactivity. And it supports custom directives with the use keyword, which is a highly efficient way to attach custom behaviors to different elements. It. And it has everything else you would expect in a modern framework, like lazy loading, context, SSR support, and so on. This has been Solid in 100 seconds. Hit the like button and subscribe if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
The transcript discusses the framework for building fast UI with maximum control over reactivity, which is created by Ryan Carniato in 2018 and is designed to use a ventricular function component with a variable UI using araunner. The framework uses Vite as the build tool and allows for unheard-unds code to be generated. It supports multiple functions and is developer-friendly, including a show component to handle conditional logic, a clean-up function, and a store function. The framework has a long live time of 100 seconds and is designed for developers to see short videos.