2. Whoami
1. Software developer @brainhub
2. Cat (Cheetos) father
3. Netflix lover
4. Football player
@hstemplewski
@hstemplewski

3. Agenda
1. What the Solid is?
2. Quick overview
3. Solid vs React
a. Components
b. Performance
c. Build size
4. Live coding (refactor react app to solid)
5. Is Solid gonna replace React?

4. Disclaimer
This presentation could include a lot of cat GIFs
and memes, if you’re not ready, please leave this
room or close your eyes and only listen.

5. 1. What the Solid is?
SolidJS is an open source, reactive declarative JavaScript library with an
API similar to React. It was created by Ryan Carniato in 2018 and reached
the stable v1.0 version in 2021.
➔ JSX Support
In SolidJS, components are JavaScript functions that return JSX just
like in React.
➔ Reactive
Unlike React, SolidJS doesn't use a virtual DOM. Instead, templates
are compiled down to real DOM nodes and updated with reactions.
When state changes, only the code that depends on it will rerun.
➔ Blazingly fast
In comparison to different JS libraries (not only React) Solid is faster
than

6. 2. Quick overview
➔ Components
➔ Reactivity
➔ State management

7. Components
Components in solid are more
about creating boundaries,
they’re just a functions which are
doing nothing

8. Special
components
● For
● Show
● Switch/Match
● and much more
https://www.solidjs.com/docs/latest/ap
i#control-flow

9. Like MobX, Vue and Svelte, Solid
uses reactive variables, which are
monitored for change. It allows
us to not bother about
dependencies array and react on
every variable change.
Reactivity

10. Long story short,
how reactivity
works
● Getter - get value and return
newest value, set subscribers
● Setter - set new value and run all
subscribers which needs to
update a value after
● Cleanup - it’s not included here,
but we need to be sure we
removed unnecessary
subscribers
● This is simple example and it
shouldn't be used as production
code.

11. State management in Solid is
everywhere. As you create signal
it may be everywhere in the app
and whenever you will use it it
will stay reactive.
https://youtu.be/ZZ-a7B761Ds?t=2456
State
management EXAMPLE !

12. Solid vs React

13. Comparison - components

14. Comparison - effects
Effects that developers create with
createEffect run after rendering has
completed and are mostly used for
scheduling updates that interact with
the DOM. If you want to modify the
DOM earlier, use createRenderEffect.

15. Comparison - general
React Solid
Components are connected with
functionality.
Components are just for creating
“boundaries”.
Need to pass explicitly dependencies and
react on changes.
Using reactivity it automagically reacts on
changes.
VDOM Not using VDOM, it’s compiled to JS
Need to use external libraries for managing
global state.
It allows you to create state using built-in
API, but still you can use external things.
Quite big and slow Blazingly fast and small
Vast community, great support Small community, limited support

16. Performance

17. Performance

18. Performance

19. Build size

20. Build size

21. Live coding!

22. Trend

23. Trend

24. State of JS

25. Is Solid gonna replace React?
First of all it’s always worthy to try the new things, as a developers we cannot close our
minds and rest on our laurels. Even if React will still stay strong and stay first choose for
most developers do not be afraid to dig deeper into new solutions and ideas. Solid have a
chance to change something, but amount of community, marketing and now not being
enterprise solution not make it easier. Answering the question, I don’t think Solid will replace
React, it owns a vast market, has big community support and is supported by huge company.
Right now Solid is just an open-source library based on contributions.

26. Need to check:
● https://www.youtube.com/watch?v=_ne2BsvFBH0&ab_channel=KevinGhadyani-JavaScript
● https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p
● https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37
● https://levelup.gitconnected.com/finding-fine-grained-reactive-programming-89741994ddee
● https://github.com/solidjs/solid
● https://www.solidjs.com/docs/latest/api