Forward Universal WebApps

Slide 1

Slide 1 text

Forward Universal WebApps 2016/10/14 @ ubb.jp

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

[PR]

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

universal (isomorphic)

Slide 7

Slide 7 text

universal (isomorphic) Server Side Rendering??? Source code sharing between client and server ???? SEO??? Only Node.js ???

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

universal ∋ isomorphic

Slide 10

Slide 10 text

universal (isomorphic) Why / How

Slide 11

Slide 11 text

universal (isomorphic) Why / How

Slide 12

Slide 12 text

History

Slide 13

Slide 13 text

past 2012 2013 2014 2015 2016 future

Slide 14

Slide 14 text

past 2012 2013 2014 2015 2016 future 8FC"QQTCBTFEPO)5.- XJUI+4

Slide 15

Slide 15 text

past 2012 2013 2014 2015 2016 future 1BSUJBM4JOHMF1BHF"QQT

Slide 16

Slide 16 text

past 2012 2013 2014 2015 2016 future 3JDI4JOHMF1BHF8FC"QQT

Slide 17

Slide 17 text

Isomorphic Survival Guide by @koichik https://speakerdeck.com/koichik/isomorphic-survival-guide

Slide 18

Slide 18 text

Client Server 'SPOUFOE -PHJDT #BDLFOE -PHJDT WebApps based on HTML

Slide 19

Slide 19 text

Client Server 'SPOUFOE -PHJDT #BDLFOE -PHJDT Partial SPA 'SPOUFOE -PHJDT

Slide 20

Slide 20 text

Client Server #BDLFOE -PHJDT Rich Single Page Web Apps 'SPOUFOE -PHJDT #BDLFOE -PHJDT

Slide 21

Slide 21 text

Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT

Slide 22

Slide 22 text

Look back to History • ClientͱServerͰϩδοΫ͕ߦͬͨΓདྷͨΓ͍ͯ͠Δ • ͜͜࠷ۙ͸ΫϥΠΞϯτͷϦιʔε͕૿͑ɺRichͳ΢Σ ϒΞϓϦέʔγϣϯ͕૿͑ͨɻ • Server͕ϚΠΫϩαʔϏεͳͲͰAPIԽ͢ΔྲྀΕ΋͋ Γɺthin-Server / thick-Client ͳํ޲ʹͳ͍ͬͯΔ

Slide 23

Slide 23 text

͕ͩɺ଴ͬͯཉ͍͠ ຊ౰ʹͦΕ͸ΫϥΠΞϯτͷ໾ׂ͔ Ͳ͏͔

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ͳΜͰ͜͏ͳΔͷ͔

Slide 27

Slide 27 text

Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ΫϥΠΞϯτɿ ը໘ͱಈ͖Λ࡞Δɻ αʔόʔɿ ಠཱͨ͠ϏδωεϩδοΫΛ ఏڙ͢Δ

Slide 28

Slide 28 text

Slide 29

Slide 29 text

past 2012 2013 2014 2015 2016 future 3JDI4JOHMF1BHF8FC"QQT XJUI#''

Slide 30

Slide 30 text

Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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*૚ͷ ॲཧʹ஫ྗͰ͖Δ

Slide 33

Slide 33 text

Slide 34

Slide 34 text

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 ʹ͢Δͱ΋ͬͱ৭ΜͳϝϦοτ͕

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Backend For Frontend • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛ ܨ͙ௐఀ໾ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ໾ • Cache΋͜͜ͷ૚Ͱ΍ΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc

Slide 38

Slide 38 text

Server Side Rendering

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Server Side Rendering • Ͳ͜·Ͱ଎͘ͳͬͯ΋ϨΠςϯγ(ߦ͔ͬͯΒؼͬͯ͘ Δ·Ͱͷ࣌ؒ)ͱ͍͏΋ͷ͕͋Δ • Boston <=> Stanford ؒͳΒݱ࣌఺Ͱ΋  ໿50ms • SPA͸ॳظϖʔδͷϩʔυʹ͓͍ͯ͸ෆར

Slide 42

Slide 42 text

Server Side Rendering • UI૚ͷ࢓ࣄΛݞ୅ΘΓ͢Δ *͚ͩ͡Όͳ͍* • 2ͭͷޮՌ • ॳظϨϯμϦϯάߴ଎Խ • Search Engine Friendly (SEO)

Slide 43

Slide 43 text

·ͱΊ (why) • Backend For Frontend Λ࡞Δͱ thin ͳ API αʔόͱͷௐఀ ໾Λ୲͑Δ • ΫϥΠΞϯτ͸UI૚ͷߏஙʹ஫ྗͰ͖Δ • Node.js Ͱ BFF Λ࡞Δͱ ϑϩϯτͷ࡞ۀ΋ڞ௨ԽͰ͖Δ • ಛʹ Server Side Rendering Λ͢ΔͱSPA ͷॳظϨϯμ ϦϯάͱSEOͷ໰୊ΛղܾͰ͖Δɻ

Slide 44

Slide 44 text

universal (isomorphic) Why / How

Slide 45

Slide 45 text

architect voice

Slide 46

Slide 46 text

SPAͱ֮ޛ by @teppeis http://www.slideshare.net/teppeis/spa-66093931

Slide 47

Slide 47 text

CLIENT SIDE OF ‭‭‭‭‭ FRESH! by @ahomu https://speakerdeck.com/ahomu/client-side-of-fresh

Slide 48

Slide 48 text

Isomorphic Architecture Λ࣮૷ͯ͠Δͱ͖ͷࡉ͔͍ΞϨίϨ by @ahomu https://havelog.ayumusato.com/develop/javascript/e682- universal_architecture_tips.html

Slide 49

Slide 49 text

ʂʂʂʂ֮ޛ͸ඞཁʂʂʂʂ

Slide 50

Slide 50 text

͔ͩΒఘΊΔʁʁʁ

Slide 51

Slide 51 text

NO!!!!!!!!!!!!!

Slide 52

Slide 52 text

We (Recruit Techs) are creating universal (isomorphic) webapps

Slide 53

Slide 53 text

ࠓ͸2ͭαʔϏε։ൃதɻ 1ͭ͸ 11݄ϦϦʔε༧ఆ ΋͏1ͭ͸12݄ϦϦʔε༧ఆ ͦ͜ͰஷΊͨϊ΢ϋ΢ΛશαʔϏεͷΨΠ υϥΠϯͱͯ͠ϦΫϧʔτશମͰ ڞ௨Խ͢Δ(༧ఆ)

Slide 54

Slide 54 text

ϦΫϧʔτͷWebApps͸ී௨ͷα Πτ͕ଟ͍ɻ

Slide 55

Slide 55 text

؆୯ʹ΍Δํ๏͸ͳ͍͚Ͳ Should/How-to͸͋Δ

Slide 56

Slide 56 text

ڭՊॻతͳ΋ͷ

Slide 57

Slide 57 text

7 principles of Rich Web Applications

Slide 58

Slide 58 text

7 principles of Rich Web Applications • socket.io ͷ࡞ऀ • Guillermo Rauch ࢯఏএ • ຋༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415

Slide 59

Slide 59 text

7 principles of Rich Web Applications • αʔόʔͰ΋ϖʔδΛϨϯμϦϯά͢Δ • Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢Δ • σʔλͷมߋʹ൓Ԡ͢Δ • αʔόʔͱͷσʔλަ׵Λίϯτϩʔϧ͢Δ • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ • ৼΔ෣͍Λ༧ଌ͢Δ

Slide 60

Slide 60 text

΄΅͜Εʹै͍ͳ͕Βॻ͍ͯΔ

Slide 61

Slide 61 text

Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • Googleͷྫ

Slide 62

Slide 62 text

Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • CloudUpͷྫ

Slide 63

Slide 63 text

Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ • ޫͷ଎౓ʹ͸উͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢

Slide 64

Slide 64 text

Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ • ޫͷ଎౓ʹ͸উͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢ • (͝·͔͢ͱ΋ݴ͏)

Slide 65

Slide 65 text

σʔλͷมߋʹ൓Ԡ͢Δ • ߋ৽ॲཧΛߦΘͳͯ͘΋࣮ࡍʹσʔλΛಉظ ͢Δɻ • มߋ͕ൃੜͨ͠Βͦͷ౎౓σʔλΛมߋ͢Δɻ

Slide 66

Slide 66 text

historyΛյ͢ͳ

Slide 67

Slide 67 text

historyΛյ͢ͳ

Slide 68

Slide 68 text

historyΛյ͢ͳ

Slide 69

Slide 69 text

historyΛյ͢ͳ • ํ๏࿦ • historyͷ֦ுΛݕ౼͢Δ • history.pushState/popState/replaceState • localStorage/sessionStorageͷݕ౼ͳͲ

Slide 70

Slide 70 text

ৼΔ෣͍Λ༧ଌ͠Α͏ • ϨΠςϯγʔͷนΛ௒͑Ζ

Slide 71

Slide 71 text

ৼΔ෣͍Λ༧ଌ͠Α͏ • ແݶεΫϩʔϧ x ϖʔδઌಡΈ

Slide 72

Slide 72 text

ৼΔ෣͍Λ༧ଌ͠Α͏ • Ϣʔβʔͷಈ͖Λ༧ଌ͢Δɻ • Google Map ͷઌಡΈͷΑ͏ͳߟ͑ • ແݶϖʔδωʔγϣϯΛ࣮૷ͭͭ͠ɺ࣍ͷϖʔ δͱલͷϖʔδ͸͓࣋ͬͯ͘ɻ্޲͖ʹεΫ ϩʔϧͨ͠Β͞ΒʹલͷϖʔδΛɺԼ޲͖ʹ εΫϩʔϧͨ͠Β͞Βʹ࣍ͷϖʔδΛɻ

Slide 73

Slide 73 text

·ͱΊ (How) • ۪௚ʹ7ͭͷݪଇΛಥ͖٧ΊΔ • αʔόʔͰ΋ϖʔδΛϨϯμϦϯά͢Δ • Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢Δ • σʔλͷมߋʹ൓Ԡ͢Δ • αʔόʔͱͷσʔλަ׵Λίϯτϩʔϧ͢Δ • historyΛյ͢ͳɺhistoryΛ֦ு͠Ζ • ίʔυͷߋ৽Λαʔόʔ͔ΒPush͢Δ • ৼΔ෣͍Λ༧ଌ͢Δ