Hello World

via Svelte

 

Muhtalip Dede

21.05.2020

Svelte?

XXXXX

Agenda

  1. The State of JavaScript - 2019
  2. Github & NPM Trends for Javascript Frameworks
  3. Reactivity
  4. The Cost of Javascript
  5. Real World Projects for Frontend Framewoks
  6. Svelte
  7. Sapper (Svelte App Maker)
  8. Svelte Native
  9. Svelte & Electron for Build Cross Platform Desktop Apps
  10. Progressive Web App (PWA)
  11. Who is using Svelte?

Performance (points 0–100) — higher is better.

Transfer size in KB — fewer is better

# lines of code — fewer is better

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};
<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>
<script>
	let a = 1;
	let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

How Svelte works

Thanks

Made with Slides.com