Bartosz Magier: Jak napisać w pełni reaktywną aplikację szybko i ładnie? Czy taka aplikacja będzie działać wydajnie? Przekonaj się, czym jest nowy JavaScriptowy framework Svelte, co oferuje i czy rzeczywiście jest taki „graceful and stylish” jak obiecuje jego nazwa.

1. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 1
SVELTE
Attractively thin, graceful
and stylish

2. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 2
Hello y’all!
Bartosz Magier
Senior Front End Developer @ TSH
bartosz.magier@tsh.io

3. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 3
Agenda
➡ Introduction to Svelte
➡ Live coding
➡ A little bit about TypeRunner.js
➡ Q&A

4. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 4
What is Svelte?
➡ It's a JavaScript Framework
➡ Svelte is a compiler, not a dependency like React or Vue
➡ Svelte seems to need less code for the same things that with React
require 40% more LOC (source: Rich Harris)
➡ Svelte has no virtual DOM, compiles to minimal “vanilla” JavaScript
and seems more performing than other libraries

5. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
Javascript
Framework
5

6. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 6
Here are compiled files
Development folder
Our main component
Entrypoint file
Config for Rollup

7. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 7
{
"name": "svelte-app",
"version": "1.0.0",
"devDependencies": {
"npm-run-all": "^4.1.5",
"rollup": "^1.12.0",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^4.0.4",
"svelte": "^3.0.0"
},
"dependencies": {
"sirv-cli": "^0.4.4"
},
"scripts": {
"build": "rollup -c",
"autobuild": "rollup -c -w",
"dev": "run-p start:dev autobuild",
"start": "sirv public #--single",
"start:dev": "sirv public #--single #--dev"
}
}
Everything is declared
under devDependencies
Including Svelte

8. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
Compiler
8

9. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 9
React
➡ Bundles up and minifies
your files
➡ Adds react and react-dom
to the bundle
➡ Produces one file or multiple
chunks
Svelte
➡ Compiles your components,
so they can run
independently
➡ Includes only parts of the
framework that are used
➡ It's your app that Svelte has
taught how to run
independently

10. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
Real DOM
1 0

11. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 1 1
element div
className app
children
element h1
children
text Hello world!
element input
value world
element button
text Clicks: 0
Hello world!
Clicks: 0world

12. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 1 2
element div
className app
children
element h1
children
text Hello world!
element input
value world
element button
text Clicks: 0 Clicks: 1
Hello world!
Clicks: 1world

13. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 1 3
<button on:click={handleClick}>
Clicks: {count}
#</button>
if (changed.count) {
text.data = `Clicks: ${current.count}`;
}

14. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 1 4
Basic reactivity
<script>
let count = 0;
#</script>
<button on:click={() #=> count#++}>
Clicks: {count}
#</button>

15. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 1 5
Arrays reactivity
<script>
let feature = "";
let features = [
"Fast",
"Real DOM"
];
function addFeature() {
- features.push(feature);
+ features = [##...features, feature];
}
#</script>
<input bind:value={feature} #/>
<button on:click={addFeature}>
Add Feature
#</button>
<ul>
{#each features as feature}
<li>{feature}#</li>
{/each}
#</ul>

16. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 1 6
Await/then/catch in template
{#await posts}
<p>Loading##...#</p>
{:then payload}
<Posts items={payload.data} #/>
{:catch error}
<p style="color:red">{error.message}#</p>
{/await}

17. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 1 7
Example code
➡ https://svelte.dev/repl/c2ad67c64b5249a497301575cf8b1ace
➡ https://svelte.dev/repl/50003faab13f4124a2bb45d14fd3f1a5

18. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
Use Cases
1 8

19. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
TypeRunner.js
1 9

20. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
Let's play
2 0

21. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 2 1
Architecture

22. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
Let's see some code
2 2

23. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
Svelte Ecosystem
2 3

24. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
Sapper
2 4

25. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
Svelte Native
2 5

26. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 2 6
Svelte GL

27. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9
In summary
2 7

28. S V E L T E — U S Z A N O W A N K O P R O G R A M O W A N K O 2 0 1 9 2 8
Any questions?
Thank you