Wer dieses Jahr schon in die Ergebnisse der jährlichen "State of JS"-Umfrage geschaut hat, dem wird Solid.js im Bereich der Frontend-Frameworks als Top-Kandidat aufgefallen sein. Solid.js kombiniert die Dynamik von Reacts JSX mit dem compiler-basierten Ansatz von Svelte und erreicht damit Performance-Zahlen, die weit näher an handgeschriebene Vanilla-JS-Lösungen kommen als die typischen Frameworks. In dieser Session arbeiten wir uns Schritt für Schritt zu einer funktionierenden Solid-App und lernen dabei, was das Framework so besonders macht.

1. Andreas Roth

2. § Dresden, Germany
§ Development Lead @ esveo
§ We help software teams accelerate
their development projects.
Andreas Roth
@andrewgreenh
andreas.roth@esveo.com

3. @andrewgreenh
Step 0

4. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

5. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

6. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

7. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

8. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

9. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

10. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

11. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

12. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer
const PerformanceComponent = React.memo(SlowComponent);
React.useMemo(() => {
// Calculate derived data
}, [name, some, other, props]);

13. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

14. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
name = new Subject<string>();
}

15. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

16. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

17. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

18. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer

19. @andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer
function handleNewValue(value: string) {
heading.textContent = value;
}

20. @andrewgreenh
Step 1

21. @andrewgreenh
Step 2

22. @andrewgreenh
Step 3

23. @andrewgreenh
Step 4

24. @andrewgreenh Framework Bundle Size (Brotli)

25. @andrewgreenh
0
20
40
60
80
100
120
140
160
0 10 20 30 40 50 60 70 80 90
Bundle
size
(kb)
Count of Todo MVC Apps
Svelte Solid React
Bundle Size with growing component numbers
https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f

26. @andrewgreenh
0
20
40
60
80
100
120
140
160
0 10 20 30 40 50 60 70 80 90
Bundle
size
(kb)
Count of Todo MVC Apps
Svelte Solid React
Bundle Size with growing component numbers
https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f

27. @andrewgreenh Geometric mean in js-framework-benchmark
https://github.com/krausest/js-framework-benchmark
0%
20%
40%
60%
80%
100%
120%
140%
160%
180%
200%
Vanilla JS Solid Svelte React

28. @andrewgreenh
How can I learn more?

29. @andrewgreenh
§ https://discord.com/invite/solidjs
§ https://www.solidjs.com/
§ https://dev.to/ryansolid

30. We help you accelerate your
software projects.
Andreas Roth
@andrewgreenh
andreas.roth@esveo.com