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.
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Svelte (adjective): Attractively thin, graceful, and stylish
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