Tweet
Tweet

Slide 1

Slide 1 text

Webͷ͘͠Έ Vol.2 τϨϯυ @saboyutaka 2019/10/19 #codebase_lt

Slide 2

Slide 2 text

ͳΜͰτϨϯυΛ஌Δͱඞཁ͕͋Δʁ • ࠓޙͲ͏͍͏ٕज़͕དྷΔ͔༧૝ग़དྷΔ • ੜଘઓུͱ͓ͯͬͯ͘͠͠ͱྑ͍

Slide 3

Slide 3 text

ΞδΣϯμ • OS, Runtime • ΞϓϦέʔγϣϯ • ϑϩϯτΤϯυ • σʔλ • ܦࡁ

Slide 4

Slide 4 text

ڞ௨Խͷϓϩηε খ͘͞ελʔτ େ͖͘ͳΔ, ෳࡶԽ͢Δ ࡉ෼Խ͢Δ ڞ௨Խ͢Δ

Slide 5

Slide 5 text

OS, RuntimeͷτϨϯυ

Slide 6

Slide 6 text

Ծ૝Խ • ΦϯϓϨϛε • Ծ૝Ϛγϯ • ίϯςφ

Slide 7

Slide 7 text

Ծ૝Խ • ΦϯϓϨϛε(શ෦ࣗݾௐୡ) • Ծ૝Ϛγϯ(OSͷԾ૝Խ) • VirtualBox, Vagrant • ίϯςφ(RuntimeͷԾ૝Խ) • Docker, Kurbernetes

Slide 8

Slide 8 text

XaaS https://pt.slideshare.net/AlexZyl/functionsvslambda-presentation/4 OSͷԾ૝Խ Runtimeͷ Ծ૝Խ ΞϓϦέʔγϣϯ ͷԾ૝Խ • AWS EC2 • Ϩϯλϧαʔόʔ • Heroku • Netlify • AWS Lambda • Azure Functions શ෦ࣗݾௐୡ

Slide 9

Slide 9 text

ΦϯϓϨϛε, VMͷ࣌୅ • ΞϓϦέʔγϣϯΛఏڙ͢ΔͨΊʹඞཁͳΠ ϯϑϥͷௐୡίετ͕ߴ͍ • ग़དྷΔ͚ͩ࠷খߏ੒Ͱ

Slide 10

Slide 10 text

XaaS • IaaS, OSͷԾ૝Խ • PaaS, RuntimeͷԾ૝Խ • FaaS, ΞϓϦέʔγϣϯͷԾ૝Խ ίϯςφٕज़ͷ੒ख़ͰRuntime, ΞϓϦέʔγϣϯͷԾ૝Խ·Ͱདྷͨ

Slide 11

Slide 11 text

Ծ૝ԽʹΑͬͯ • ΞϓϦέʔγϣϯΛఏڙ͢ΔͨΊͷ౔୆(Πϯ ϑϥ)΁ͷίετ͕ݮ͖ͬͯͨ • ΞϓϦέʔγϣϯʹूதग़དྷΔΑ͏ʹͳͬͨ • ؅ཧίετ͕௿͘ͳ͖ͬͯͨͷͰେྔʹΞϓ ϦΛར༻Ͱ͖ΔΑ͏ʹͳͬͨ

Slide 12

Slide 12 text

ΞϓϦέʔγϣϯͷτϨϯυ

Slide 13

Slide 13 text

ΞϓϦέʔγϣϯͷΞʔΩςΫνϟ ϞϊϦγοΫ Microservices Serverless

Slide 14

Slide 14 text

ϞϊϦγοΫͷಛ௃ • Ұ൪ߏ੒ͱͯ͠γϯϓϧɺֶशίετ͕௿͍ • 1͔Β࢝ΊΔ࣌ʹશ෦ἧͬͯΔͷͰศར • ਓ΍γεςϜͷن໛͕େ͖͘ͳΔͱෳࡶԽ͢ Δ

Slide 15

Slide 15 text

Ծ૝ԽɾίϯςφԽʹΑͬͯ • ෳ਺ΞϓϦέʔγϣϯΛ؅ཧग़དྷΔΑ͏ʹͳͬͨ • Microservices, Serverless͕Մೳʹ • 1ͭͷΞϓϦέʔγϣϯ͕࣋ͭ୲౰Օॴ͕ࡉ෼Խ • ෳ਺ݴޠɺෳ਺ΞϓϦέʔγϣϯ͕લఏʹ • ڞ௨Խ͞Εͨॲཧ͸SaaSར༻ • Auth0, Ϣʔβʔೝূج൫ • Stripe, ܾࡁ • Algoria, ݕࡧ • Azure Cognitive Services, ػցֶशAPI

Slide 16

Slide 16 text

ΞϓϦέʔγϣϯͷτϨϯυ • ࡉ෼Խɺڞ௨෦඼ͷར༻ • Ϛϧνݴޠ, ݴޠຖͷಘҙͳͱ͜ΖΛ׆͔͢ • Rails, Laravel, Go, Python, Node.jsͷڞଘ • ֤ݴޠ, ֤DBͷෳ਺Πϯελϯεͷ૊Έ߹Θ ͤͰదࡐదॴΛ࣮ݱ

Slide 17

Slide 17 text

ϑϩϯτΤϯυͷτϨϯυ

Slide 18

Slide 18 text

ϑϩϯτΤϯυͰࠓग़ͯ͘Δ࿩୊ • UIͷίϯϙʔωϯτ(෦඼)Խ • Vue,js, React.js, Angular.js • Bootstrap, Material Design • ϚϧνϓϥοτϑΥʔϜ(Web, Mobile, Desktop) • αʔόʔαΠυͱͷ෼཭ • SPA, SSR

Slide 19

Slide 19 text

ϑϩϯτΤϯυͰى͖͍ͯΔࣄ • ίϯϙʔωϯτԽͯ͠࢖͍΍͘͢ • ؆୯ʹ͍͍ײ͡ͷσβΠϯʹ͍ͨ͠ • αʔόʔαΠυͱͷґଘؔ܎Λͳ͍ͨ͘͠ • Ͱ͖Ε͹ϊϯίʔσΟϯάͰ࡞Γ͍ͨ

Slide 20

Slide 20 text

WebϑϩϯτΤϯυͷͭ͘Γ͔ͨ 1. HTMLͷΈ αʔόʔ͕HTMLΛฦ͢ 2. HTML on JS αʔόʔ͕HTMLΛฦ͢ +JSͰ૷০ 3. HTML on Component JS αʔόʔ͕HTMLΛฦ͢ +ίϯϙʔωϯτϥΠϒϥϦ(Vue.js, React) 4. SPA or BFF HTMLΛฦ͢, αʔόʔ͸JSON APIͷΈ αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ஌͍ͬͯΔ αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ஌Βͳ͍

Slide 21

Slide 21 text

WebϑϩϯτΤϯυͷྫ 1. HTMLͷΈ αʔόʔαΠυWAF 2. HTML on JS Railsͱ jQUery 3. HTML on Component JS RailsͱVue.js 4. SPA or BFF + API Nuxt.js(Vue.js) + Rails(API) αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ஌͍ͬͯΔ αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ஌Βͳ͍

Slide 22

Slide 22 text

σʔλϕʔεͷτϨϯυ

Slide 23

Slide 23 text

σʔλϕʔεͷߏ੒ཁૉ σʔλͷೖΕ෺ + API

Slide 24

Slide 24 text

ϦϨʔγϣφϧDBͷߏ੒ ςʔϒϧ + SQL

Slide 25

Slide 25 text

σʔλͷछྨ • ςʔϒϧ • ελοΫ • Ωϡʔ • υΩϡϝϯτ(ΦϒδΣΫτ) • ΩʔόϦϡʔ • άϥϑ

Slide 26

Slide 26 text

σʔλͷAPI • SQL • GraphQL • HTTP(JSON)

Slide 27

Slide 27 text

Ծ૝ԽɾίϯςφԽʹΑͬͯ • DBίϯςφΛ؆୯ʹݐͯΒΕΔΑ͏ʹͳͬͨ • ൚༻తͳ୯ҰͷRDB͔Βෳ਺ҟछDB΁ • దࡐదॴ

Slide 28

Slide 28 text

ܦࡁͷτϨϯυ

Slide 29

Slide 29 text

ࡉ෼Խ͍ͯ͠Δͷ͸γεςϜͩ ͚Ͱ͸ͳ͍ɺܦࡁͦͷ΋ͷ

Slide 30

Slide 30 text

ܦࡁͷmicroservicesԽ • Πϯλʔωοτ͕ਁಁͯ͠৘ใ͕؆୯ʹखʹ ೖΔΑ͏ʹͳ͖ͬͯͨ • େاۀ(৘ใͷϋϒ)͕ඞཁ͕ͳ͍ • গͳ͍ਓ਺Ͱग़དྷΔ͜ͱ͕૿͑ͨ • ઐۀاۀ, SaaS͕૿͑Δ

Slide 31

Slide 31 text

·ͱΊ

Slide 32

Slide 32 text

τϨϯυͷ·ͱΊ • ࡉ෼Խɾڞ௨ԽɾઐۀԽ • Microservices • ૊৫ͷॖখԽ(ϦετϥΫγϣϯ) • ͱ͸͍͑ݪཧݪଇ͸มΘ͍ͬͯͳ͍ • ϓϩάϥϜͷݪཧ: ஞ࣍ɺ෼ذɺ൓෮ • σʔλߏ଄ • ໾ׂɺσβΠϯύλʔϯ • ਓͱ૊৫

Slide 33

Slide 33 text

ͱ͸͍͑ݪཧݪଇ͸มΘ͍ͬͯͳ͍ • ϓϩάϥϜͷݪཧ: ஞ࣍ɺ෼ذɺ൓෮ • σʔλߏ଄ • ໾ׂɺσβΠϯύλʔϯ • ਓͱ૊৫

Slide 34

Slide 34 text

ࠓޙͲ͏͍ͯ͘͠ͱ͍͍͔ • ݪཧݪଇͷཧղ • શମઃܭ͕ग़དྷΔΑ͏ʹͳΔ • ༷ʑͳαʔϏεɺݴޠɺϑϨʔϜϫʔΫΛཧ ղ͢Δ

Slide 35

Slide 35 text

ઃܭͷ͓͢͢Ίڭࡐ • https://martinfowler.com • Azure ΞʔΩςΫνϟηϯλʔ • Google Web Fundarmentals

Slide 36

Slide 36 text

σʔλϕʔε͓͢͢Ίڭࡐ