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

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

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

shiro seike
PRO

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 Slide

  2. @seike
    460
    -


    - @seike
    46
    0

    - Fusic


    - /


    - / /

    -


    - PHP


    - PHP


    - PHPerKaigi


    - JAWS Days


    - AWS Dev Day
    2

    View Slide

  3. Agenda
    1
    .Svelte + Vite


    2
    .Svelte


    3
    .Svelte


    4
    .Vite


    5
    .Vite


    6
    .
    3

    View Slide

  4. 01
    Svelte + Vite

    View Slide



  5. 5

    View Slide


  6. 6

    View Slide

  7. Svelte + Vite + Tailwind CSS


    7

    View Slide

  8. 02
    Svelte

    View Slide

  9. Svelte

    JavaScript


    Vite


    Svelte Svelte


    Write less code




    No virtual DOM DOM




    Truly reactive


    Hooks
    9

    View Slide

  10. 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 Slide

  11. 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 Slide

  12. 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 Slide

  13. 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 Slide

  14. Props
    Props


    export



    Props



    14
    Counter.svelte
    App.svelte

    View Slide

  15. $:

    $: JS





    15

    View Slide

  16. Store
    16

    View Slide

  17. Store
    React Redux Vue Vuex

    Store


    writable Store

    subscribe




    update set Store


    17

    View Slide

  18. Context API
    Svelte ContextAPI


    setContext


    getContext


    hasContext


    getAllContexts


    context

    context

    18
    Counter.svelte
    App.svelte

    View Slide

  19. Context API
    19
    Counter.svelte
    App.svelte

    View Slide

  20. Component Hooks
    onMount


    DOM


    beforeUpdate


    state


    afterUpdate



    onDestroy



    tick


    state

    resolve promise
    20

    View Slide

  21. No virtual DOM
    Virtual DOM Dom




    Virtual DOM


    Svelte DOM


    21

    View Slide

  22. krausest
    React


    Vue

    Svelte

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

    View Slide

  23. 03
    Svelte

    View Slide

  24. 👍




    HTML CSS Javascript


    🙏


    $:




    24

    View Slide

  25. Made With Svelte Svelte Society


    Example

    25

    View Slide

  26. SvelteKit

    26

    View Slide

  27. 04
    Vite

    View Slide

  28. Vite







    HMR




    Rollup


    28

    View Slide

  29. ES Modules
    - Bundle


    - import export



    - ES Modules


    -

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

    View Slide

  30. vite.config.js
    Vite vite.config.js




    Production Staging
    
 

    loadEnv

    .env


    Svelte Import.meta.env.


    prefix

    VITE_
    30
    vite.config.js
    Svelte

    View Slide

  31. 05
    Vite

    View Slide

  32. 👍



    32

    View Slide

  33. Svelte + Vite

    View Slide

  34. 34

    View Slide

  35. 06

    View Slide

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

    View Slide

  37. Thank You
    We are Hiring !


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

    View Slide