Smaller, Faster, Svelter

Adam L Barrett

A Tiny Cost for Small Enhancements

Svelte adjective

Definition of svelte

  1.  SLENDER, LEAN, LITHE
    • having clean lines
    • SLEEK
  2. URBANE, SUAVE
  • What is Svelte?
  • Using Svelte to enhance web sites
  • Why Svelte is so fun and awesome!

đŸ’¡

Why should I care?

45kb

3.6kb

5.9kb

...alot

How it works

<h1>Hello {name}!</h1>
{
  "type": "Element",
  "name": "h1",
  "children": [
    { 
      "type": "Text", "raw": "Hello ", "data": "Hello "
    },
    { 
      "type": "MustacheTag", "expression": {
        "type": "Identifier",
        "name": "name"
      }
    },
    { 
      "type": "Text", "raw": "!", "data": "!"
    }
  ]
}

function instance($$self, $$props, $$invalidate) {
  let { name = 'world' } = $$props;
  $$self.$set = $$props => {
    if ('name' in $$props) {
      $$invalidate('name', (name = $$props.name));
    }
  };
  return { name };
}

HTML

AST

JS

How it works

const app = new App({
  target: document.body,
  props: {
    answer: 42
  }
});
const app = new App({
  target: document.body,
  props: {
    answer: 42
  }
});



 <my-widget></my-widget>

Demo

Questions?

Smaller, Faster, Svelter