Svelte (adjective): Attractively thin, graceful, and stylish

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

Hello y’all!
Bartosz Magier
Senior Front End Developer @ TSH
bartosz.magier@tsh.io

Agenda
➡ Introduction to Svelte
➡ Live coding
➡ A little bit about TypeRunner.js
➡ Q&A

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

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

Here are compiled files
Development folder
Our main component
Entrypoint file
Config for Rollup

{
  "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

Compiler
8

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

Real DOM
1 0

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

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

<button on:click={handleClick}>
Clicks: {count}
#</button>
if (changed.count) {
text.data = `Clicks: ${current.count}`;
}

Basic reactivity
<script>
let count = 0;
#</script>
<button on:click={() #=> count#++}>
Clicks: {count}
#</button>

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>

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}

Example code
➡ https://svelte.dev/repl/c2ad67c64b5249a497301575cf8b1ace
➡ https://svelte.dev/repl/50003faab13f4124a2bb45d14fd3f1a5

Use Cases
1 8

TypeRunner.js
1 9

Let's play
2 0

Architecture

Let's see some code
2 2

Svelte Ecosystem
2 3

Sapper
2 4

Svelte Native
2 5

Svelte GL

In summary
2 7

Any questions?
Thank you

Svelte (adjective): Attractively thin, graceful, and stylish

More Related Content

Similar to Svelte (adjective): Attractively thin, graceful, and stylish

More from The Software House

Recently uploaded

Svelte (adjective): Attractively thin, graceful, and stylish