Upgrade to Pro — share decks privately, control downloads, hide ads and more …

バックエンドエンジニアが行うSvelte + Vite なフロントエンド構築

shiro seike
November 19, 2022

バックエンドエンジニアが行うSvelte + Vite なフロントエンド構築

shiro seike

November 19, 2022
Tweet

More Decks by shiro seike

Other Decks in Technology

Transcript

  1. バ ド ジ が 

    Svelte + Vite
    ド
    2022
    2
    0
    22
    .
    11
    .
    19



    @seike
    4
    60
    1

    View full-size slide

  2. @seike
    460
    -


    - @seike
    46
    0

    - Fusic


    - /


    - / /

    -


    - PHP


    - PHP


    - PHPerKaigi


    - JAWS Days


    - AWS Dev Day
    2

    View full-size slide

  3. Agenda
    1
    .Svelte + Vite


    2
    .Svelte


    3
    .Svelte


    4
    .Vite


    5
    .Vite


    6
    .
    3

    View full-size slide

  4. 01
    Svelte + Vite

    View full-size slide

  5. Svelte + Vite + Tailwind CSS


    7

    View full-size slide

  6. Svelte

    JavaScript


    Vite


    Svelte Svelte


    Write less code




    No virtual DOM DOM




    Truly reactive


    Hooks
    9

    View full-size slide

  7. Write less code - React
    10
    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 (











    {a} + {b} = {a + b}





    );


    };
    UI React


    State Hook

    State State


    input

    State


    UI

    View full-size slide

  8. Write less code - Svelte
    11
    <br/><br/><br/>let a =<br/>1<br/>;<br/><br/><br/>let b =<br/>2<br/>;<br/><br/><br/>








    {a} + {b} = {a + b}
    Svelte


    let State

    bind




    [a] input

    p [a]

    View full-size slide

  9. Write less code + Truly reactive
    12
    <br/><br/><br/>let a =<br/>1<br/>;<br/><br/><br/>let b =<br/>2<br/>;<br/><br/><br/>








    {a} + {b} = {a + b}
    Svelte





    View full-size slide

  10. TEMPLATE SYNTAX
    13
    {#if porridge.temperature >
    1
    00
    }


    too hot!


    {:else if
    8 0
    > porridge.temperature}


    too cold!


    {:else}


    just right!

    {/if}



    {#each items as item}


    {item.name} x {item.qty}


    {/each}



    {#await promise}


    waiting for the promise to resolve...


    {:then value}


    The value is {value}


    {:catch error}


    Something went wrong: {error.message}


    {/await}



    {#key value}


    {value}


    {/key}
    {#if }...

    {:else if }

    {/if}

    {#each as name, index}

    ...

    {/each}

    {#await }...

    {:then name}...

    {:catch name}
    …

    {/await}

    {#key }...

    {/key}

    View full-size slide

  11. Props
    Props


    export



    Props



    14
    Counter.svelte
    App.svelte

    View full-size slide

  12. $:

    $: JS





    15

    View full-size slide

  13. Store
    React Redux Vue Vuex

    Store


    writable Store

    subscribe




    update set Store


    17

    View full-size slide

  14. Context API
    Svelte ContextAPI


    setContext


    getContext


    hasContext


    getAllContexts


    context

    context

    18
    Counter.svelte
    App.svelte

    View full-size slide

  15. Context API
    19
    Counter.svelte
    App.svelte

    View full-size slide

  16. Component Hooks
    onMount


    DOM


    beforeUpdate


    state


    afterUpdate



    onDestroy



    tick


    state

    resolve promise
    20

    View full-size slide

  17. No virtual DOM
    Virtual DOM Dom




    Virtual DOM


    Svelte DOM


    21

    View full-size slide

  18. krausest
    React


    Vue

    Svelte

    22
    https://krausest.github.io/js-framework-benchmark/current.html

    View full-size slide

  19. 👍




    HTML CSS Javascript


    🙏


    $:




    24

    View full-size slide

  20. Made With Svelte Svelte Society


    Example

    25

    View full-size slide

  21. SvelteKit

    26

    View full-size slide

  22. Vite







    HMR




    Rollup


    28

    View full-size slide

  23. ES Modules
    - Bundle


    - import export



    - ES Modules


    -

    29
    https://vitejs.dev/guide/why.html#slow-server-start

    View full-size slide

  24. vite.config.js
    Vite vite.config.js




    Production Staging
    
 

    loadEnv

    .env


    Svelte Import.meta.env.


    prefix

    VITE_
    30
    vite.config.js
    Svelte

    View full-size slide

  25. Svelte + Vite

    View full-size slide

  26. 36
    Svelte UI
    Point
    1
    Example
    Point
    2
    Vite 頻
    Point
    3
    Point
    4

    View full-size slide

  27. Thank You
    We are Hiring !


    https://recruit.fusic.co.jp/

    View full-size slide