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

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 

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
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/