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
Matsui Masashi
July 21, 2022
Programming
0
190
Fresh
新潟WEBアプリケーション勉強会 Vol.1でFreshについて話した資料です。
https://steeq.connpass.com/event/254066/
Matsui Masashi
July 21, 2022
Tweet
Share
More Decks by Matsui Masashi
See All by Matsui Masashi
数値の文字列をパースしよう
circled9
0
65
🔥 Hono v4 やってみた
circled9
1
97
JetBrains AI Assistant を試してみた
circled9
1
310
React Hooks 勉強会 vol.3
circled9
2
370
JSON.stringify()
circled9
2
430
HTML
circled9
2
920
prefers-color-schemaの話
circled9
0
600
Bundle Transpile Rock'n'Roll
circled9
0
1.6k
Hello React hooks
circled9
0
710
Other Decks in Programming
See All in Programming
Terraformテスト入門
msato
0
520
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
【Go言語】golangci-lintの使い方
tomo1227
0
270
CSC307 Lecture 12
javiergs
PRO
0
220
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Namespace on read
tagomoris
2
370
CSC307 Lecture 11
javiergs
PRO
0
240
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
How to name files
jennybc
67
96k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Raft: Consensus for Rubyists
vanstee
134
6.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
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