Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

    / - / / 
 - - PHP - PHP - PHPerKaigi - JAWS Days - AWS Dev Day 2
  2. 5

  3. Svelte 
 JavaScript Vite Svelte Svelte Write less code No

    virtual DOM DOM Truly reactive Hooks 9
  4. 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
  5. 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]
  6. 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 

  7. 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}
  8. Store React Redux Vue Vuex 
 Store writable Store 


    subscribe 
 
 update set Store 
 
 17
  9. ES Modules - Bundle - import export 
 - ES

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

    
 .env Svelte Import.meta.env. 
 
 prefix 
 VITE_ 30 vite.config.js Svelte
  11. 34

  12. 06