$30 off During Our Annual Pro Sale. View Details »

バックエンドエンジニアが行う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
  2. @seike 460 - - @seike 46 0
 - Fusic -

    / - / / 
 - - PHP - PHP - PHPerKaigi - JAWS Days - AWS Dev Day 2
  3. Agenda 1 .Svelte + Vite 2 .Svelte 3 .Svelte 4

    .Vite 5 .Vite 6 . 3
  4. 01 Svelte + Vite 


  5. 5

  6. 
 6

  7. Svelte + Vite + Tailwind CSS 7

  8. 02 Svelte

  9. Svelte 
 JavaScript Vite Svelte Svelte Write less code No

    virtual DOM DOM Truly reactive Hooks 9
  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 ( <div> <input type="number" value={a} onChange={handleChangeA}/> <input type="number" value={b} onChange={handleChangeB}/> <p>{a} + {b} = {a + b}</p> </div> ); }; UI React State Hook 
 State State input 
 State UI
  11. Write less code - Svelte 11 <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> Svelte let State 
 bind 築 
 [a] input 
 p [a]
  12. Write less code + Truly reactive 12 <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> Svelte 

  13. TEMPLATE SYNTAX 13 {#if porridge.temperature > 1 00 } <p>too

    hot!</p> {:else if 8 0 > porridge.temperature} <p>too cold!</p> {:else} <p>just right!</p> 
 {/if} 
 {#each items as item} <li>{item.name} x {item.qty}</li> {/each} 
 {#await promise} <p>waiting for the promise to resolve...</p> {:then value} <p>The value is {value}</p> {:catch error} <p>Something went wrong: {error.message}</p> {/await} 
 {#key value} <div transition:fade>{value}</div> {/key} {#if }... 
 {:else if } 
 {/if} 
 {#each as name, index} 
 ... 
 {/each} 
 {#await }... 
 {:then name}... 
 {:catch name} …
 {/await} 
 {#key }... 
 {/key}
  14. Props Props export 
 Props 
 14 Counter.svelte App.svelte

  15. $: 
 $: JS 
 
 15

  16. Store 16

  17. Store React Redux Vue Vuex 
 Store writable Store 


    subscribe 
 
 update set Store 
 
 17
  18. Context API Svelte ContextAPI setContext getContext hasContext getAllContexts context 


    context 
 18 Counter.svelte App.svelte
  19. Context API 19 Counter.svelte App.svelte

  20. Component Hooks onMount DOM beforeUpdate state afterUpdate onDestroy tick state

    
 resolve promise 20
  21. No virtual DOM Virtual DOM Dom 
 
 Virtual DOM

    Svelte DOM 
 21
  22. krausest React Vue 
 Svelte 
 22 https://krausest.github.io/js-framework-benchmark/current.html

  23. 03 Svelte

  24. 👍 
 
 HTML CSS Javascript 🙏 $: 24

  25. Made With Svelte Svelte Society Example 
 25

  26. SvelteKit … 26

  27. 04 Vite

  28. Vite HMR Rollup 28

  29. ES Modules - Bundle - import export 
 - ES

    Modules - 
 29 https://vitejs.dev/guide/why.html#slow-server-start
  30. vite.config.js Vite vite.config.js 
 
 Production Staging 
 
 loadEnv

    
 .env Svelte Import.meta.env. 
 
 prefix 
 VITE_ 30 vite.config.js Svelte
  31. 05 Vite

  32. 👍 
 32

  33. Svelte + Vite

  34. 34

  35. 06

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

    Point 3 Point 4
  37. Thank You We are Hiring ! https://recruit.fusic.co.jp/