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
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
14
2.2k
Strip Types と Storage
yosuke_furukawa
PRO
4
300
Module Harmony について
yosuke_furukawa
PRO
3
1.4k
LTのやり方
yosuke_furukawa
PRO
16
2k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
660
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
9.3k
JavaScript Server Runtime History
yosuke_furukawa
PRO
9
3.6k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.7k
Other Decks in Programming
See All in Programming
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
560
実践!難読化ガイド
mitchan
0
200
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
私のEbitengineの第一歩
qt_luigi
0
450
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
オートマトン学習しろ / Do automata learning
makenowjust
3
130
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
39
2.3k
4 Signs Your Business is Dying
shpigford
179
21k
Scaling GitHub
holman
458
140k
Testing 201, or: Great Expectations
jmmastey
36
7k
Designing Experiences People Love
moore
138
23k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Visualization
eitanlees
142
15k
The Language of Interfaces
destraynor
153
23k
YesSQL, Process and Tooling at Scale
rocio
167
14k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
The Cult of Friendly URLs
andyhume
76
6k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
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!!!!!!!!!!!!!
ΈΜͳͰ֮ޛ͍͖ͯ͠·͠ΐ͏