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
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
21
7.9k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
2.7k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
870
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.5k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.1k
Deep Dive International Conference
yosuke_furukawa
PRO
0
96
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.6k
フロントエンドリアーキテクトの話
yosuke_furukawa
PRO
18
8.8k
new_urlparser.pdf
yosuke_furukawa
PRO
1
420
Other Decks in Programming
See All in Programming
object-oriented-conference-2024
fuwasegu
6
1.9k
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
2.4k
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
Open Source Swiftc Workshop
kitasuke
1
290
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.2k
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.8k
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
3.1k
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Docker and Python
trallard
33
2.6k
Automating Front-end Workflow
addyosmani
1353
200k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
Designing the Hi-DPI Web
ddemaree
275
33k
How GitHub (no longer) Works
holman
301
140k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Ruby is Unlike a Banana
tanoku
95
10k
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!!!!!!!!!!!!!
ΈΜͳͰ֮ޛ͍͖ͯ͠·͠ΐ͏