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
230
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
56
CloudflareのAI関連の機能さわってみた
circled9
0
470
0.0.0.0 day
circled9
0
82
小数の丸め誤差の話
circled9
0
120
数値の文字列をパースしよう
circled9
0
180
🔥 Hono v4 やってみた
circled9
1
170
JetBrains AI Assistant を試してみた
circled9
1
460
React Hooks 勉強会 vol.3
circled9
2
420
JSON.stringify()
circled9
2
480
Other Decks in Programming
See All in Programming
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
140
技術を改善し続ける
gumioji
0
180
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
SwiftUI Viewの責務分離
elmetal
PRO
2
280
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
220
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
1
210
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
730
PEPCは何を変えようとしていたのか
ken7253
3
300
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
240
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
51
16k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
Rubyと自由とAIと
yotii23
6
1.9k
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
KATA
mclloyd
29
14k
Automating Front-end Workflow
addyosmani
1369
200k
Faster Mobile Websites
deanohume
306
31k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Visualization
eitanlees
146
15k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
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