Manuel Berger: Svelte

Talk: Svelte – the framework without a framework (15 min)

Bei modernen Webseiten wird heutzutage oft schon beim ersten Aufruf sehr viel Code an den User geschickt. Das beeinträchtigt sowohl die Ladezeit als auch die Performance. Eine vielversprechende Verbesserung könnte der Ansatz von Svelte sein.

Svelte ist ein radikal neuer Weg, um Boilerplate-freie Webanwendungen zu entwickeln. Es ist ein komponentenbasiertes Framework, bei dem der Code während des Build-Prozesses in kleine, hoch effiziente Standalone-JavaScript-Module kompiliert wird. Svelte definiert zudem State Management neu, hilft dabei, weniger Code zu schreiben und ermöglicht eine einzigartige Developer Experience.

In diesem Talk lernst du Svelte grundlegend kennen und erfährst, wie es sich zu traditionellen Frameworks wie React unterscheidet. Des Weiteren schauen wir uns kurz Sapper an, ein Next.js-style Framework, das auf Svelte basiert.

Speaker: Manuel Berger

Mein Name ist Manuel, ich bin ein begeisterter Full-Stack Entwickler mit einem starken Fokus auf Front-End, da man so näher beim User ist. Meine Karriere begann in einem Softwarekonzern, dann in einer Digitalagentur, bis ich 2020 als Softwareentwickler zu codecentric gestoßen bin. Neben JavaScript liebe ich die Berge und interessiere mich für Themen rund um die bemannte Raumfahrt.

Transcript

1. The Framework without a Framework
2. manuel.berger@codecentric.de twitter.com/manuelbrgr Manuel Berger What is Svelte?
3. Component Framework / Library
4. Compiler “Compilers are the new Frameworks” — Tom Dale, Creator of Ember.js .svelte files .js files
5. • Less boilerplate code • No Virtual DOM • Brings reactivity to JS itself • State-Management out of the box • CSS scoping included • Smaller bundle size Talk by Rich Harris: https://youtu.be/AdNJ3fydeao
6. Benchmarks • https://krausest.github.io/js-framework-benchmark/current.html • https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-f rameworks-with-benchmarks-2019-update-4be0d3c78075/ File size (KB) • Svelte: 9.7 • Vue: 41 • Angular + ngrx + nx: 134 • React + Redux: 193 Lines of Code • Svelte: 1116 • React + Redux: 2050 • Vue: 2076 • Angular + ngrx + nx: 4210
12. Writable Store
13. Long story short
14. Rankings: https://2019.stateos.com/front-end-frameworks/ Satisfaction Interest
15. Downsides compared to React or Angular • Missing TypeScript support • Not yet very popular • Initially a One-man show • Small community (although growing) • Not many 3rd party components available yet
16. sapper.svelte.dev
17. Conclusion Svelte is definitely worth exploring, or adding it to your next project. • https://blog.codecentric.de/2020/02/gleich-und-doch-anders-einfuehrung-in-svelte/ • https://blog.codecentric.de/2020/02/state-management-in-svelte/
18. Thank you! Questions?