MOPCON 2016- 從 Side project 到 Product

講述一下天眼通到目前為止的演進過程，
以及技術 stack 的選擇。

Transcript

1. ℂ Side Project ک叨 ߝ物穩肬ॠ縄蝢 MOPCON 2016 Denny
2. Denny Ku Front-end Engineer 犋螂犡ॠ犋䨝拻ॡग़ Front-end
3. 穩肬ॠ縄蝢 • ࣁՈێ补ᤈ肬耬皈ӥኸ᥺ጱ Chrome 矠կ
5. Clairvoyance物穩肬ॠ縄蝢 • Side project • Serverless • Product • Solutions
6. Part 1: 岉蚕ֵ簁ጱ Side Project
7. Side Project • Deadline -> No • Quality -> Depends on developer • Business Model -> ֦藨፥牫
8. My (opinionated) rules of Side Project • 蚤ܻ๜ૡ֢犋ݶ痀௔ጱ䩚ᥜ • redux-saga • 碝ದ蔩 • 犋绐ਧ • ݶԪ犋ᆧ盿
9. Last but not least ᥝ磪Ոአࠡ牦
10. Super Simple Architecture
11. Dev Flow
12. Resource Check
13. Resource Check • A credit card • A front-end engineer
14. Resource Check • Conclusion: • Front-end物螡殼ಋጱ • Back-end • 蟂ᗟ墋㻌 • 犋አ藲Ӟञ config牏捝Ӟञ෈կ • ग़狶ग़梊 -> 墋㻌梊藮咳ኞጱ秚䨝
15. Research & Trial
16. Super Simple Architecture
17. User Interface ݝฎࢩ傶磧ᆧ磧殼ಋ 㷢ᘍ虻碘物̿Saga Pattern ࣁ獮ᒒጱ螀አ̀
18. Application Logic (౯犋ࡅ稭ஂ஑葍牧蘛蘛य़疑҂
19. Application Logic ν؈̙˸ଗଗක೯
    ምซࠅ၍ዚኜ
20. Serverless (䌘牧౯Ꭳ螇螭ฎ磪 Server牧ݝฎ犋አᓕ秚瑊)
21. Application Logic AWS Lambda • Deploy : Super fast • Function as service
22. Storage AWS Dynamodb • NoSQL • Easy to integrate with AWS lambda
23. Ready? Need a HTTP endpoint How ?
24. Http End Point AWS API Gateway • Create custom api on your own • Cache ҁᛔ癲 cloud front҂ • Easy to integrate with AWS lambda
26. 羬翄蕦褾ଶਝ盱ਧ஌ • 䌕礯ጱ礍䯤犥 function 傶㻌֖扗ெ讕獥牫 • ᓕ秚瑊 -> 䌃ݱ圵 config牏፡ AWS ෈կ • QQ 眤憽 Serverless ䷱磪虏Ո眤憽穉斃 Less
28. 磪Ӟ㮆 Serverless ጱ໛礍ݞ狶 Serverless
30. Do we really need a framework? • ̿໛礍ጱਂࣁฎԅԧ超ۗ౯ժଫ੒瓰๥ଶ̀ by Vuejs ֢ᘏ物疪襁競
31. About Serverless • v1.0: Service based • 㷢ᘍ虻碘物亮ຉ serverless 礍䯤膏䋿֢
32. 拻ਠ猻讨ԧ牧 㬵፡፡匍䋿ฎெ䰬
33. 褖ګ • AWS API Gateway ҁ吚碻҂ጱ Cache 秚ګ犋䄪肦 ก • 戔ਧ Dynamodb ጱ write牏read capacity • Auto Scaling -> No (ݢ犥蝚螂Ӟ犚॰ದ窸ૣ戔 ਧ҂ • ᰁӞ粁悳牧疰篂蕈
34. 螂Ⴡ薹ဩ物Disqus • Pros • ౮๜ᘍᰁ • ䷱磪 Scaling 㺔氂 • Cons • 虻碘ਂ硯ጱ瑿ො讔簡 • 玞ݷጱۑ胼᩻櫞አ • 蝡ฎ feature 物Disqus ๜蛪ᴠफ Spam ጱ秚ګ
35. ℂ Side Project ک叨ߝ
36. Recap: 岉蚕ֵ簁ጱ Side Project
37. Part 2: Product (WIP)
38. Architecture • Chrome Extension • Web (Need hosting) • Mobile App • Searchable • Scalability
39. Option 1物Serverless • Intro物 • 瞲 Serverless Framework (Lambda + APIGW + Dyamodb) + Hosting
40. Option 1物Serverless • Pros • 狶螂Ӟ稞 • 奲ݳ磧覄ၚ • We Made the Whole Company “Serverless” • ࢴਧ౮๜磧犵
41. Option 1物Serverless • Cons • 礓犚஠ᥝጱ氃क़戔ਧ盄讔簡ҁWAF 牏獋㮆 Cloud Front ҂ • Log (Cloud Watch) • Serverless framework 硬粚 • Platform lock-in
42. Option 2物Firebase • ᤩ Google 揮ӥጱ Back-end as service ๐率 • Ԇ಑ realtime database
43. Option 2物Firebase • Pros • Config 磧墋㻌 • Tutorial ᩻捷 • Youtube • ᑏ旉ک Mobile App 墋㻌 • 犋梊ጱ dashboard • ᛔդ殷ᶎ host ๐率
44. Option 2物Firebase • Cons • Platform lock-in : ۯ盛 Parse • 獊෈䲒ᔱ᩻讔簡 • 藯፥ጱ牧Ջ讕眐丆ӥ䨝襑ᥝ Realtime database 牫
45. Option 3物Golang + Heroku • Golang • Heroku • PaaS • git push heroku master 疰蟂ᗟਠ౮
46. Denny Ku Front-end Engineer Full-stack Engineer Fool stack Engineer
47. Golang -> Web service • Go is design for building modern web. • It’s true, you don’t need framework. • But Ոኞ者磪皃㮆 But
48. Go: Philosophy
49. 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
50. Go: Packages - Issue • Doc: 盄托奞牧֕౯㮉襑ᥝమమ Philosophy • 承ဩӤ犋 Surprise • 承఺Ӥ Surprise ֦ -> 蕦褾ଶਝ盱ਧ஌
51. Example: Auth • ℂ Config ኞڊ AuthCodeUrl ҁ蝨疰战ग़ auth ጱ pkg 犖蝡䰬狶҂
52. Go: Asset • 蚤 Webpack牏React ጱ碉ݳ物 https://github.com/olebedev/go-starter-kit • Asset Pipeline (rails) in Go https://github.com/shaoshing/train • Issue物doc牏customize
53. Go: Template • ℂ犋ݶጱ虻碘䄸愊ᶎ Load template ٚ䁆ᤈҁExecute҂ • Must牏Execute牫
54. Go: Template Ӟ㮆অጱ Template = (፡蚏㬵猟ܻ๜ጱ承ဩ or ፡蚏㬵猟蜍ڊ盅ጱ承ဩ) => ( Looks like Go or Looks like HTML ) => ( Looks like Go ) Go template ก氥膏 HTML 癩吖ፘ吚य़
55. Go: Template 犥ӥ㮆Ոቘ௔藨Ꭳ+ ஞ覄Ӥ眤ݑ物 Go Ֆ簁ฎ㮆盄磪఺௏ጱ承᥺牧 ֕ Template ፥ஞ犋অአ牐
56. Go: Template • `define` -> DSL -> ᩻犋 Go • {{.}} -> .? • ℂmapӾᥝ玲独犋ฎፗ矑 someMap["key"] ᘒฎ `index map “key”` ౯፡ׯ磪讨猟 Lisp
57. Go: Template • templateݝ胼矑ݑӞ㮆struct • ᥝࣁ template Ӿአ犨֜虋碍篷ဩፗ矑㯽獈
58. Go: Deploy • 蟂ᗟ牏Compile ፥ጱ禅盠 • gofmt • godoc
59. Heroku • Why not IaaS ? • 犋మᓕ秚瑊 • Monitor • add ons • Scale out • Load balancer • Cache • …
60. Heroku: Pros • 蟂ᗟ墋㻌 • 獥 Environment 墋㻌 • 樄咳絑ह戔ਧ墋㻌
61. Heroku: Cons • No HTTP/2 • ᥝ傶 Idle time ՞桽 • 薹ဩ物Lambda + Heroku API • add on 螡䢔ᵑ繸 • 䌘ෝ Ruby 犥क़ጱඪൔ癩䔶Ո఺ • one-off dyno: Database migrate
62. Option 4物MeteorJS • Universal JavaScript -> অತՈ • Database Everywhere
63. Option 4物MeteorJS
64. Option 4物MeteorJS • React + (Redux) • No worry about back-end (at least recently) • Deployment + Scaling + : Galaxy • Security: Subs & Pubs
65. MeteorJS: data flow
66. MeteorJS: Cons • ݷਁ盄Ӿԫ+犋ݴڥ 䨝犋䨝稴ധ • Vendor lock-in • 䕃௔犵 • * ٌ䋿ݢ犥አ relational database牧֕盄櫞አ
67. https://goo.gl/kcWpRj
68. Special Thanks
69. We need designer https://goo.gl/BP7uz8 front-end & back-end: hr@qollie.com
70. Thanks for listening