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

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

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

35. 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