Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fresh
Search
circled9
July 21, 2022
Programming
0
250
Fresh
新潟WEBアプリケーション勉強会 Vol.1でFreshについて話した資料です。
https://steeq.connpass.com/event/254066/
circled9
July 21, 2022
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
75
CloudflareのAI関連の機能さわってみた
circled9
0
630
0.0.0.0 day
circled9
0
110
小数の丸め誤差の話
circled9
0
140
数値の文字列をパースしよう
circled9
0
230
🔥 Hono v4 やってみた
circled9
1
190
JetBrains AI Assistant を試してみた
circled9
1
530
React Hooks 勉強会 vol.3
circled9
2
440
JSON.stringify()
circled9
2
490
Other Decks in Programming
See All in Programming
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
190
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
290
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
730
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
11
2.8k
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Language of Interfaces
destraynor
158
25k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Documentation Writing (for coders)
carmenintech
72
4.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Producing Creativity
orderedlist
PRO
346
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Rails Girls Zürich Keynote
gr2m
95
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Transcript
Fresh The next-gen web framework. @circled9 2022-07-20 1
About Me দҪ ਖ਼ࢤ Matsui Masashi @circled9 Frontend Engineer water-cell
inc. 2
ۙگ • ϦϞʔτͰՈ͔Βग़ͯͳ͍ • ௨ۈ͕ΘΓʹຖࢄาͯͨ͠Β૫ͤͨ • ମॏ6kgݮɺෲғ8cmݮʢࣾൺʣ • Ͱ݈߁அͻ͔͔ͬͬͨ •
݁͠ੴʢnͿΓ2ճ......ʣ • ࠓΞϧίʔϧ߇͑·͢ 3
ࠓ͢͜ͱ • deno • CSR, SSR • Fresh 4
͡Ίʹ • ࠓdenoͷWebϑϨʔϜϫʔΫͷFreshͷհΛ͠·͢ɻ • ͱ͍͏ͷΛΰʔϧʹͯ͠ɺͦͷपลͷΛ͍͖ͯ͠·͢ɻ • ͳͷͰFreshࣗମͷগͳΊͰ͢ɺ͝ΊΜͳ͍͞ɻ 5
deno 6
......ͷલʹ 7
Node.js 8
Node.js • JavaScript͕ಈ͘ϥϯλΠϜ • αʔόʔαΠυͷ࣮ߦڥͱ͚ͯͩ͠Ͱͳ͘ɺϑϩϯτΤϯυͷπʔ ϧͱͯ͠ΘΕΔ • ݱࡏͷ࠷৽൛18.6.0 9
deno 10
deno • JavaScriptͱTypeScript͕ಈ͘ϥϯλΠϜ • Node.jsͷ࡞ऀ ( Ryan Dahl ) ͕࡞ͬͨ
• ݱࡏͷ࠷৽൛1.23.4 $ deno --version deno 1.23.4 (release, aarch64-apple-darwin) v8 10.4.132.8 typescript 4.7.4 11
deno • Webඪ४ͷػೳΛαϙʔτ͍ͯ͠Δ • fetchͱ͔ • Secure by default •
໌ࣔతʹڐՄ͠ͳ͍ͱϑΝΠϧͷಡΈॻ͖ͳͲͷػೳ͕͑ͳ͍ 12
deno • ֤छπʔϧdenoࣗମ͕ఏڙ͍ͯ͠Δ • lint, fmt, test • όϯυϧͯ͠୯ಠͷJavaScriptϑΝΠϧʹ͢Δ͜ͱͰ͖Δ •
ϒϥβ͚ͷόϯυϥʔͳ͍ • ͳͷͰϒϥβ͚ʹesbuildͳͲΛ͏ 13
CSR, SSR 14
CSR, SSR • ϨϯμϦϯάͷํ๏ͷݺͼํ • ͦΕͧΕҎԼͷ಄จࣈΛऔ͍ͬͯΔ • Client Side Rendering
• Server Side Rendering • ଞʹSSGͱISR͕͋Δ͕͜͜ͰׂѪ • Static Site Generation • Incremental Static Regeneration 15
CSR • ΫϥΠΞϯτଆͰը໘ΛϨϯμʔ͢Δ • αʔόʔ੩తͳHTMLJSΛ৴͢Δ͚ͩ • HTMLʹۭͷdiv͚͕ͩఆٛ͞Ε͍ͯΔ͜ͱ͕ଟ͍ 16
SSR • αʔόʔଆͰHTMLΛϨϯμʔͯ͠ΫϥΠΞϯτʹ৴͢Δ • JS͕࣮ߦͰ͖ͳ͍ΫϩʔϥʔʹରԠͰ͖Δ • ͨͩͷHTMLʹͳΔͷͰΫϥΠΞϯτଆͰhydrateΛߦ͏ 17
hydrate • ਫͰ͢తͳҙຯɺଟ • αʔόʔ͕ੜͨ͠HTMLΠϕϯτͳͲ͕ઃఆ͞Ε͍ͯͳ͍ • hydrate͢Δ͜ͱͰΫϦοΫͳͲͷΠϕϯτͳͲ͕ઃఆ͞ΕΔ 18
͜Μͳײ͡ // ࡶͳΧϯλʔ const Counter = () => { const
[count, setCount] = useState(0); const plus = () => setCount(count + 1); const minus = () => setCount(count - 1); return ( <div> <div>{count}</div> <button onClick={plus}>+</button> <button onClick={minus}>-</button> </div> ); }; <!-- Ϩϯμʔ͢Δͱ͜͏ͳΔ --> <div> <div>0</div> <button>+</button> <button>-</button> </div> 19
Fresh 20
Fresh • denoͷWebϑϨʔϜϫʔΫ • denoͷެࣜϒϩάͰΘΕ͍ͯΔ • ࠷ۙ1.0ʹͳͬͨ 21
Fresh • ΤοδαʔόʔͰͷSSRΛఆ͍ͯ͠Δ • PreactͰϨϯμϦϯάΛߦ͏ • Island ArchitectureΛ࠾༻͍ͯ͠Δ 22
Preact 23
Preact • Fast 3kB alternative to React with the same
modern API • ↑ ެࣜΑΓҾ༻ • ܰྔ൛React • hooksͱ͔ͪΌΜͱ͑Δ 24
Island Architecture 25
Island Architecture • ը໘ͷཁૉΛౡʹݟཱͯͨΞʔΩςΫνϟ • ੩తͳཁૉ୯७ͳHTMLͱͯ͠ѻ͏ • ΠϯλϥΫςΟϒͳཁૉ͚ͩhydrate͢Δ 26
https://www.patterns.dev/posts/islands-architecture/
FreshͷϝϦοτɾσϝϦοτ • ͳΜ͔͠ΌΔ 28
ऴྃ 29