MOPCON 2016- 從 Side project 到 Product

Slide 1

Slide 1 text

ℂ Side Project ک叨 ߝ物穩肬ॠ縄蝢 MOPCON 2016 Denny

Slide 2

Slide 2 text

Denny Ku Front-end Engineer 犋螂犡ॠ犋䨝拻ॡग़ Front-end

Slide 3

Slide 3 text

穩肬ॠ縄蝢 • ࣁՈێ补ᤈ肬耬皈ӥኸ᥺ጱ Chrome 矠կ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Clairvoyance物穩肬ॠ縄蝢 • Side project • Serverless • Product • Solutions

Slide 6

Slide 6 text

Part 1: 岉蚕ֵ簁ጱ Side Project

Slide 7

Slide 7 text

Side Project • Deadline -> No • Quality -> Depends on developer • Business Model -> ֦藨፥牫

Slide 8

Slide 8 text

My (opinionated) rules of Side Project • 蚤ܻ๜ૡ֢犋ݶ痀௔ጱ䩚ᥜ • redux-saga • 碝ದ蔩 • 犋绐ਧ • ݶԪ犋ᆧ盿

Slide 9

Slide 9 text

Last but not least ᥝ磪Ոአࠡ牦

Slide 10

Slide 10 text

Super Simple Architecture

Slide 11

Slide 11 text

Dev Flow

Slide 12

Slide 12 text

Resource Check

Slide 13

Slide 13 text

Resource Check • A credit card • A front-end engineer

Slide 14

Slide 14 text

Resource Check • Conclusion: • Front-end物螡殼ಋጱ • Back-end • 蟂ᗟ墋㻌 • 犋አ藲Ӟञ conﬁg牏捝Ӟञ෈կ • ग़狶ग़梊 -> 墋㻌梊藮咳ኞጱ秚䨝

Slide 15

Slide 15 text

Research & Trial

Slide 16

Slide 16 text

Super Simple Architecture

Slide 17

Slide 17 text

User Interface ݝฎࢩ傶磧ᆧ磧殼ಋ 㷢ᘍ虻碘物̿Saga Pattern ࣁ獮ᒒጱ螀አ̀

Slide 18

Slide 18 text

Application Logic (౯犋ࡅ稭ஂ஑葍牧蘛蘛य़疑҂

Slide 19

Slide 19 text

Application Logic ν؈̙˸ଗଗක೯ ምซࠅ၍ዚኜ

Slide 20

Slide 20 text

Serverless (䌘牧౯Ꭳ螇螭ฎ磪 Server牧ݝฎ犋አᓕ秚瑊)

Slide 21

Slide 21 text

Application Logic AWS Lambda • Deploy : Super fast • Function as service

Slide 22

Slide 22 text

Storage AWS Dynamodb • NoSQL • Easy to integrate with AWS lambda

Slide 23

Slide 23 text

Ready? Need a HTTP endpoint How ?

Slide 24

Slide 24 text

Http End Point AWS API Gateway • Create custom api on your own • Cache ҁᛔ癲 cloud front҂ • Easy to integrate with AWS lambda

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

羬翄蕦褾ଶਝ盱ਧ஌ • 䌕礯ጱ礍䯤犥 function 傶㻌֖扗ெ讕獥牫 • ᓕ秚瑊 -> 䌃ݱ圵 conﬁg牏፡ AWS ෈կ • QQ 眤憽 Serverless ䷱磪虏Ո眤憽穉斃 Less

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

磪Ӟ㮆 Serverless ጱ໛礍ݞ狶 Serverless

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Do we really need a framework? • ̿໛礍ጱਂࣁฎԅԧ超ۗ౯ժଫ੒瓰๥ଶ̀ by Vuejs ֢ᘏ物疪襁競

Slide 31

Slide 31 text

About Serverless • v1.0: Service based • 㷢ᘍ虻碘物亮ຉ serverless 礍䯤膏䋿֢

Slide 32

Slide 32 text

拻ਠ猻讨ԧ牧㬵፡፡匍䋿ฎெ䰬

Slide 33

Slide 33 text

褖ګ • AWS API Gateway ҁ吚碻҂ጱ Cache 秚ګ犋䄪肦 ก • 戔ਧ Dynamodb ጱ write牏read capacity • Auto Scaling -> No (ݢ犥蝚螂Ӟ犚॰ದ窸ૣ戔 ਧ҂ • ᰁӞ粁悳牧疰篂蕈

Slide 34

Slide 34 text

螂Ⴡ薹ဩ物Disqus • Pros • ౮๜ᘍᰁ • ䷱磪 Scaling 㺔氂 • Cons • 虻碘ਂ硯ጱ瑿ො讔簡 • 玞ݷጱۑ胼᩻櫞አ • 蝡ฎ feature 物Disqus ๜蛪ᴠफ Spam ጱ秚ګ

Slide 35

Slide 35 text

ℂ Side Project ک叨ߝ

Slide 36

Slide 36 text

Recap: 岉蚕ֵ簁ጱ Side Project

Slide 37

Slide 37 text

Part 2: Product (WIP)

Slide 38

Slide 38 text

Architecture • Chrome Extension • Web (Need hosting) • Mobile App • Searchable • Scalability

Slide 39

Slide 39 text

Option 1物Serverless • Intro物 • 瞲 Serverless Framework (Lambda + APIGW + Dyamodb) + Hosting

Slide 40

Slide 40 text

Option 1物Serverless • Pros • 狶螂Ӟ稞 • 奲ݳ磧覄ၚ • We Made the Whole Company “Serverless” • ࢴਧ౮๜磧犵

Slide 41

Slide 41 text

Option 1物Serverless • Cons • 礓犚஠ᥝጱ氃क़戔ਧ盄讔簡ҁWAF 牏獋㮆 Cloud Front ҂ • Log (Cloud Watch) • Serverless framework 硬粚 • Platform lock-in

Slide 42

Slide 42 text

Option 2物Firebase • ᤩ Google 揮ӥጱ Back-end as service ๐率 • Ԇ಑ realtime database

Slide 43

Slide 43 text

Option 2物Firebase • Pros • Conﬁg 磧墋㻌 • Tutorial ᩻捷 • Youtube • ᑏ旉ک Mobile App 墋㻌 • 犋梊ጱ dashboard • ᛔդ殷ᶎ host ๐率

Slide 44

Slide 44 text

Option 2物Firebase • Cons • Platform lock-in : ۯ盛 Parse • 獊෈䲒ᔱ᩻讔簡 • 藯፥ጱ牧Ջ讕眐丆ӥ䨝襑ᥝ Realtime database 牫

Slide 45

Slide 45 text

Option 3物Golang + Heroku • Golang • Heroku • PaaS • git push heroku master 疰蟂ᗟਠ౮

Slide 46

Slide 46 text

Denny Ku Front-end Engineer Full-stack Engineer Fool stack Engineer

Slide 47

Slide 47 text

Golang -> Web service • Go is design for building modern web. • It’s true, you don’t need framework. • But Ոኞ者磪皃㮆 But

Slide 48

Slide 48 text

Go: Philosophy

Slide 49

Slide 49 text

Go: Packages • Routing: github.com/gorilla/mux • Database migration: github.com/mattes/migrate • User Identity: golang.org/x/oauth2 • Package Management: govendor • Since Heroku doesn’t support glide

Slide 50

Slide 50 text

Go: Packages - Issue • Doc: 盄托奞牧֕౯㮉襑ᥝమమ Philosophy • 承ဩӤ犋 Surprise • 承఺Ӥ Surprise ֦ -> 蕦褾ଶਝ盱ਧ஌

Slide 51

Slide 51 text

Example: Auth • ℂ Conﬁg ኞڊ AuthCodeUrl ҁ蝨疰战ग़ auth ጱ pkg 犖蝡䰬狶҂

Slide 52

Slide 52 text

Go: Asset • 蚤 Webpack牏React ጱ碉ݳ物 https://github.com/olebedev/go-starter-kit • Asset Pipeline (rails) in Go https://github.com/shaoshing/train • Issue物doc牏customize

Slide 53

Slide 53 text

Go: Template • ℂ犋ݶጱ虻碘䄸愊ᶎ Load template ٚ䁆ᤈҁExecute҂ • Must牏Execute牫

Slide 54

Slide 54 text

Go: Template Ӟ㮆অጱ Template = (፡蚏㬵猟ܻ๜ጱ承ဩ or ፡蚏㬵猟蜍ڊ盅ጱ承ဩ) => ( Looks like Go or Looks like HTML ) => ( Looks like Go ) Go template ก氥膏 HTML 癩吖ፘ吚य़

Slide 55

Slide 55 text

Go: Template 犥ӥ㮆Ոቘ௔藨Ꭳ+ ஞ覄Ӥ眤ݑ物 Go Ֆ簁ฎ㮆盄磪఺௏ጱ承᥺牧 ֕ Template ፥ஞ犋অአ牐

Slide 56

Slide 56 text

Go: Template • `deﬁne` -> DSL -> ᩻犋 Go • {{.}} -> .? • ℂmapӾᥝ玲独犋ฎፗ矑 someMap["key"] ᘒฎ `index map “key”` ౯፡ׯ磪讨猟 Lisp

Slide 57

Slide 57 text

Go: Template • templateݝ胼矑ݑӞ㮆struct • ᥝࣁ template Ӿአ犨֜虋碍篷ဩፗ矑㯽獈

Slide 58

Slide 58 text

Go: Deploy • 蟂ᗟ牏Compile ፥ጱ禅盠 • gofmt • godoc

Slide 59

Slide 59 text

Heroku • Why not IaaS ? • 犋మᓕ秚瑊 • Monitor • add ons • Scale out • Load balancer • Cache • …

Slide 60

Slide 60 text

Heroku: Pros • 蟂ᗟ墋㻌 • 獥 Environment 墋㻌 • 樄咳絑ह戔ਧ墋㻌

Slide 61

Slide 61 text

Heroku: Cons • No HTTP/2 • ᥝ傶 Idle time ՞桽 • 薹ဩ物Lambda + Heroku API • add on 螡䢔ᵑ繸 • 䌘ෝ Ruby 犥क़ጱඪൔ癩䔶Ո఺ • one-off dyno: Database migrate

Slide 62

Slide 62 text

Option 4物MeteorJS • Universal JavaScript -> অತՈ • Database Everywhere

Slide 63

Slide 63 text

Option 4物MeteorJS

Slide 64

Slide 64 text

Option 4物MeteorJS • React + (Redux) • No worry about back-end (at least recently) • Deployment + Scaling + : Galaxy • Security: Subs & Pubs

Slide 65

Slide 65 text

MeteorJS: data ﬂow

Slide 66

Slide 66 text

MeteorJS: Cons • ݷਁ盄Ӿԫ+犋ݴڥ 䨝犋䨝稴ധ • Vendor lock-in • 䕃௔犵 • * ٌ䋿ݢ犥አ relational database牧֕盄櫞አ