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

Smaller, Faster, Svelter

By Adam L Barrett

Smaller, Faster, Svelter

Svelte is the hot new JavaScript framework for building 'Cybernetically enhanced web apps", where the easy to use framework is compiled away, leaving only the bare essential JavaScript needed to keep your app working as expected. Because of this paradigm, it's just so easy to just add a touch of Svelte to an already existing website or web app. Come learn about the best way to add a dash of awesome, for a tiny cost, using Svelte.

  • 539

More from Adam L Barrett