Andreas Roth - Solid.js: Schluss mit Framework-Overhead!
Signaler
•0 j'aime•18 vues
![@andrewgreenh
App
Header
UserNameForm
Main
UserDetails UserRepos
GitHubChecker HamburgerMenu
Footer
const PerformanceComponent = React.memo(SlowComponent);
React.useMemo(() => {
// Calculate derived data
}, [name, some, other, props]);](https://image.slidesharecdn.com/andreasrothsolid-230524092849-4bd3b675/75/andreas-roth-solidjs-schluss-mit-frameworkoverhead-12-2048.jpg?cb=1684922584)
Andreas Roth - Solid.js: Schluss mit Framework-Overhead!
•0 j'aime•18 vues
Télécharger pour lire hors ligne
Signaler
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.
Recommandé
Adventure in Data: A tour of visualization projects at TwitterKrist Wongsuphasawat
1.1K vues•175 diapositives
Contenu connexe
Similaire à Andreas Roth - Solid.js: Schluss mit Framework-Overhead!
Similaire à Andreas Roth - Solid.js: Schluss mit Framework-Overhead!(20)
Plus de CarolinaMatthies1
Martin Schurz - Testing ist nicht nur etwas für Anwendungssoftware.pdfCarolinaMatthies1
20 vues•18 diapositives
Tobias Nebel- Eclipse Sparkplug - Zündfunken für MQTT in der Industrie?CarolinaMatthies1
23 vues•45 diapositives
Plus de CarolinaMatthies1(7)
Dernier
Combining Orchestration and Choreography for a Clean ArchitectureThomasHeinrichs1
67 vues•24 diapositives
"How we switched to Kanban and how it integrates with product planning", Vady...Fwdays
60 vues•24 diapositives
Dernier(20)
Andreas Roth - Solid.js: Schluss mit Framework-Overhead!
- 1. Andreas Roth
- 2. § Dresden, Germany § Development Lead @ esveo § We help software teams accelerate their development projects. Andreas Roth @andrewgreenh andreas.roth@esveo.com
- 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; }
- 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