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
Forward Universal WebApps
Search
Yosuke Furukawa
PRO
October 14, 2016
Programming
6
23k
Forward Universal WebApps
ubb.jp で発表した Forward Universal WebApps の覚悟のトークです。
Yosuke Furukawa
PRO
October 14, 2016
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
3.9k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
240
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
180
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
200
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
250
型で語るカタ
irof
0
760
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
270
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
210
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
180
AIともっと楽するE2Eテスト
myohei
9
3.1k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
340
CDK引数設計道場100本ノック
badmintoncryer
2
520
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.2k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Raft: Consensus for Rubyists
vanstee
140
7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Cult of Friendly URLs
andyhume
79
6.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Side Projects
sachag
455
43k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Producing Creativity
orderedlist
PRO
346
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Forward Universal WebApps 2016/10/14 @ ubb.jp
Twitter: @yosuke_furukawa Github: yosuke-furukawa
[PR]
None
None
universal (isomorphic)
universal (isomorphic) Server Side Rendering??? Source code sharing between client
and server ???? SEO??? Only Node.js ???
None
universal ∋ isomorphic
universal (isomorphic) Why / How
universal (isomorphic) Why / How
History
past 2012 2013 2014 2015 2016 future
past 2012 2013 2014 2015 2016 future 8FC"QQTCBTFEPO)5.- XJUI+4
past 2012 2013 2014 2015 2016 future 1BSUJBM4JOHMF1BHF"QQT
past 2012 2013 2014 2015 2016 future 3JDI4JOHMF1BHF8FC"QQT
Isomorphic Survival Guide by @koichik https://speakerdeck.com/koichik/isomorphic-survival-guide
Client Server 'SPOUFOE -PHJDT #BDLFOE -PHJDT WebApps based on HTML
Client Server 'SPOUFOE -PHJDT #BDLFOE -PHJDT Partial SPA 'SPOUFOE -PHJDT
Client Server #BDLFOE -PHJDT Rich Single Page Web Apps 'SPOUFOE
-PHJDT #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT
Look back to History • ClientͱServerͰϩδοΫ͕ߦͬͨΓདྷͨΓ͍ͯ͠Δ • ͜͜࠷ۙΫϥΠΞϯτͷϦιʔε͕૿͑ɺRichͳΣ ϒΞϓϦέʔγϣϯ͕૿͑ͨɻ •
Server͕ϚΠΫϩαʔϏεͳͲͰAPIԽ͢ΔྲྀΕ͋ Γɺthin-Server / thick-Client ͳํʹͳ͍ͬͯΔ
͕ͩɺͬͯཉ͍͠ ຊʹͦΕΫϥΠΞϯτͷׂ͔ Ͳ͏͔
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ͜͜Ͱ͍ͬͯΔ͜ͱɿ "1*ͷूॲཧ "1*ϨεϙϯεΛ6*༻ʹՃ "1*SFTQPOTF$BDIF $JSDVJU#SFBLFS FUD
ͳΜͰ͜͏ͳΔͷ͔
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ΫϥΠΞϯτɿ ը໘ͱಈ͖Λ࡞Δɻ αʔόʔɿ ಠཱͨ͠ϏδωεϩδοΫΛ ఏڙ͢Δ
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ΫϥΠΞϯτɿ ը໘ͱಈ͖Λ࡞Δɻ αʔόʔɿ ಠཱͨ͠ϏδωεϩδοΫΛ ఏڙ͢Δ ͋ͱɺ৫ͷน
past 2012 2013 2014 2015 2016 future 3JDI4JOHMF1BHF8FC"QQT XJUI#''
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT ΫϥΠΞϯτຊདྷͷ6*ͷ ॲཧʹྗͰ͖Δ
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT ը໘Λߏங͢Δखॿ͚Λ͢Δ "1*ฒྻݺͼग़͠ $BDIFͨ͘͞Μ࣋ͯΔ ԚΕΛҾ͖ड͚ΒΕΔ
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend using Node.js #BDLFOE -PHJDT <13>͜͜Λ/PEFKT ʹ͢Δͱͬͱ৭ΜͳϝϦοτ͕
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Ұ෦ͷ'SPOUFOE-PHJDΛڞ ௨ԽͰ͖Δ 'SPOUFOE -PHJDT Backend For Frontend using Node.js
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ը໘ͷWBMJEBUJPO )5.-ੜFUD 'SPOUFOE -PHJDT Backend For Frontend using Node.js
Backend For Frontend • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛ ܨ͙ௐఀ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ
• Cache͜͜ͷͰΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc
Server Side Rendering
None
None
Server Side Rendering • Ͳ͜·Ͱ͘ͳͬͯϨΠςϯγ(ߦ͔ͬͯΒؼͬͯ͘ Δ·Ͱͷ࣌ؒ)ͱ͍͏ͷ͕͋Δ • Boston <=> Stanford
ؒͳΒݱ࣌Ͱ 50ms • SPAॳظϖʔδͷϩʔυʹ͓͍ͯෆར
Server Side Rendering • UIͷࣄΛݞΘΓ͢Δ *͚ͩ͡Όͳ͍* • 2ͭͷޮՌ • ॳظϨϯμϦϯάߴԽ
• Search Engine Friendly (SEO)
·ͱΊ (why) • Backend For Frontend Λ࡞Δͱ thin ͳ API
αʔόͱͷௐఀ Λ୲͑Δ • ΫϥΠΞϯτUIͷߏஙʹྗͰ͖Δ • Node.js Ͱ BFF Λ࡞Δͱ ϑϩϯτͷ࡞ۀڞ௨ԽͰ͖Δ • ಛʹ Server Side Rendering Λ͢ΔͱSPA ͷॳظϨϯμ ϦϯάͱSEOͷΛղܾͰ͖Δɻ
universal (isomorphic) Why / How
architect voice
SPAͱ֮ޛ by @teppeis http://www.slideshare.net/teppeis/spa-66093931
CLIENT SIDE OF FRESH! by @ahomu https://speakerdeck.com/ahomu/client-side-of-fresh
Isomorphic Architecture Λ࣮ͯ͠Δͱ͖ͷࡉ͔͍ΞϨίϨ by @ahomu https://havelog.ayumusato.com/develop/javascript/e682- universal_architecture_tips.html
ʂʂʂʂ֮ޛඞཁʂʂʂʂ
͔ͩΒఘΊΔʁʁʁ
NO!!!!!!!!!!!!!
We (Recruit Techs) are creating universal (isomorphic) webapps
ࠓ2ͭαʔϏε։ൃதɻ 1ͭ 11݄ϦϦʔε༧ఆ ͏1ͭ12݄ϦϦʔε༧ఆ ͦ͜ͰஷΊͨϊϋΛશαʔϏεͷΨΠ υϥΠϯͱͯ͠ϦΫϧʔτશମͰ ڞ௨Խ͢Δ(༧ఆ)
ϦΫϧʔτͷWebAppsී௨ͷα Πτ͕ଟ͍ɻ
؆୯ʹΔํ๏ͳ͍͚Ͳ Should/How-to͋Δ
ڭՊॻతͳͷ
7 principles of Rich Web Applications
7 principles of Rich Web Applications • socket.io ͷ࡞ऀ •
Guillermo Rauch ࢯఏএ • ༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
7 principles of Rich Web Applications • αʔόʔͰϖʔδΛϨϯμϦϯά͢Δ • ϢʔβʔͷೖྗʹਝʹԠ͢Δ
• σʔλͷมߋʹԠ͢Δ • αʔόʔͱͷσʔλަΛίϯτϩʔϧ͢Δ • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ • ৼΔ͍Λ༧ଌ͢Δ
΄΅͜Εʹै͍ͳ͕Βॻ͍ͯΔ
ϢʔβʔͷೖྗʹਝʹԠ͢ Δ • Googleͷྫ
ϢʔβʔͷೖྗʹਝʹԠ͢ Δ • CloudUpͷྫ
ϢʔβʔͷೖྗʹਝʹԠ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯݶք͕͋Δ • ޫͷʹউͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰԠ͍ͯ͠ΔࣄΛද͢
ϢʔβʔͷೖྗʹਝʹԠ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯݶք͕͋Δ • ޫͷʹউͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰԠ͍ͯ͠ΔࣄΛද͢ • (͝·͔͢ͱݴ͏)
σʔλͷมߋʹԠ͢Δ • ߋ৽ॲཧΛߦΘͳ࣮ͯ͘ࡍʹσʔλΛಉظ ͢Δɻ • มߋ͕ൃੜͨ͠ΒͦͷσʔλΛมߋ͢Δɻ
historyΛյ͢ͳ
historyΛյ͢ͳ
historyΛյ͢ͳ
historyΛյ͢ͳ • ํ๏ • historyͷ֦ுΛݕ౼͢Δ • history.pushState/popState/replaceState • localStorage/sessionStorageͷݕ౼ͳͲ
ৼΔ͍Λ༧ଌ͠Α͏ • ϨΠςϯγʔͷนΛ͑Ζ
ৼΔ͍Λ༧ଌ͠Α͏ • ແݶεΫϩʔϧ x ϖʔδઌಡΈ
ৼΔ͍Λ༧ଌ͠Α͏ • Ϣʔβʔͷಈ͖Λ༧ଌ͢Δɻ • Google Map ͷઌಡΈͷΑ͏ͳߟ͑ • ແݶϖʔδωʔγϣϯΛ࣮ͭͭ͠ɺ࣍ͷϖʔ δͱલͷϖʔδ͓࣋ͬͯ͘ɻ্͖ʹεΫ
ϩʔϧͨ͠Β͞ΒʹલͷϖʔδΛɺԼ͖ʹ εΫϩʔϧͨ͠Β͞Βʹ࣍ͷϖʔδΛɻ
·ͱΊ (How) • ۪ʹ7ͭͷݪଇΛಥ͖٧ΊΔ • αʔόʔͰϖʔδΛϨϯμϦϯά͢Δ • ϢʔβʔͷೖྗʹਝʹԠ͢Δ • σʔλͷมߋʹԠ͢Δ
• αʔόʔͱͷσʔλަΛίϯτϩʔϧ͢Δ • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ • ৼΔ͍Λ༧ଌ͢Δ
͏Ұճݴ͏
ʂʂʂʂ֮ޛඞཁʂʂʂʂ
͔ͩΒఘΊΔʁʁʁ
NO!!!!!!!!!!!!!
ΈΜͳͰ֮ޛ͍͖ͯ͠·͠ΐ͏