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
MOPCON 2016- 從 Side project 到 Product
Search
Tsung Chen Ku
November 07, 2016
Programming
0
160
MOPCON 2016- 從 Side project 到 Product
講述一下天眼通到目前為止的演進過程,
以及技術 stack 的選擇。
Tsung Chen Ku
November 07, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.4k
私の後悔をAWS DMSで解決した話
hiramax
4
210
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.3k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
旅行プランAIエージェント開発の裏側
ippo012
2
930
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Designing Experiences People Love
moore
142
24k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Rails Girls Zürich Keynote
gr2m
95
14k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing for Performance
lara
610
69k
Designing for humans not robots
tammielis
253
25k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Transcript
ℂ Side Project ک叨 ߝ物穩肬ॠ縄蝢 MOPCON 2016 Denny
Denny Ku Front-end Engineer 犋螂犡ॠ犋䨝拻ॡग़ Front-end
穩肬ॠ縄蝢 • ࣁՈێ补ᤈ肬耬皈ӥኸጱ Chrome 矠կ
None
Clairvoyance物穩肬ॠ縄蝢 • Side project • Serverless • Product • Solutions
Part 1: 岉蚕ֵ簁ጱ Side Project
Side Project • Deadline -> No • Quality -> Depends
on developer • Business Model -> ֦藨፥牫
My (opinionated) rules of Side Project • 蚤ܻૡ֢犋ݶ痀ጱ䩚ᥜ • redux-saga
• 碝ದ蔩 • 犋绐ਧ • ݶԪ犋ᆧ盿
Last but not least ᥝ磪Ոአࠡ牦
Super Simple Architecture
Dev Flow
Resource Check
Resource Check • A credit card • A front-end engineer
Resource Check • Conclusion: • Front-end物螡殼ಋጱ • Back-end • 蟂ᗟ墋㻌
• 犋አ藲Ӟञ config牏捝Ӟञկ • ग़狶ग़梊 -> 墋㻌梊藮咳ኞጱ秚䨝
Research & Trial
Super Simple Architecture
User Interface ݝฎࢩ傶磧ᆧ磧殼ಋ 㷢ᘍ虻碘物̿Saga Pattern ࣁ獮ᒒጱ螀አ̀
Application Logic (౯犋ࡅ稭ஂ葍牧蘛蘛य़疑҂
Application Logic ν؈̙˸ଗଗක೯ ምซࠅ၍ዚኜ
Serverless (䌘牧౯Ꭳ螇螭ฎ磪 Server牧ݝฎ犋አᓕ秚瑊)
Application Logic AWS Lambda • Deploy : Super fast •
Function as service
Storage AWS Dynamodb • NoSQL • Easy to integrate with
AWS lambda
Ready? Need a HTTP endpoint How ?
Http End Point AWS API Gateway • Create custom api
on your own • Cache ҁᛔ癲 cloud front҂ • Easy to integrate with AWS lambda
None
羬翄蕦褾ଶਝ盱ਧ • 䌕礯ጱ礍䯤犥 function 傶㻌֖扗ெ讕獥牫 • ᓕ秚瑊 -> 䌃ݱ圵 config牏፡
AWS կ • QQ 眤憽 Serverless ䷱磪虏Ո眤憽穉斃 Less
None
磪Ӟ㮆 Serverless ጱ礍ݞ狶 Serverless
None
Do we really need a framework? • ̿礍ጱਂࣁฎԅԧ超ۗ౯ժଫ瓰ଶ̀ by Vuejs
֢ᘏ物疪襁競
About Serverless • v1.0: Service based • 㷢ᘍ虻碘物亮ຉ serverless 礍䯤膏䋿֢
拻ਠ猻讨ԧ牧 㬵፡፡匍䋿ฎெ䰬
褖ګ • AWS API Gateway ҁ吚碻҂ጱ Cache 秚ګ犋䄪肦 ก •
戔ਧ Dynamodb ጱ write牏read capacity • Auto Scaling -> No (ݢ犥蝚螂Ӟ犚॰ದ窸ૣ戔 ਧ҂ • ᰁӞ粁悳牧疰篂蕈
螂Ⴡ薹ဩ物Disqus • Pros • ౮ᘍᰁ • ䷱磪 Scaling 㺔氂 •
Cons • 虻碘ਂ硯ጱ瑿ො讔簡 • 玞ݷጱۑ胼᩻櫞አ • 蝡ฎ feature 物Disqus 蛪ᴠफ Spam ጱ秚ګ
ℂ Side Project ک叨ߝ
Recap: 岉蚕ֵ簁ጱ Side Project
Part 2: Product (WIP)
Architecture • Chrome Extension • Web (Need hosting) • Mobile
App • Searchable • Scalability
Option 1物Serverless • Intro物 • 瞲 Serverless Framework (Lambda +
APIGW + Dyamodb) + Hosting
Option 1物Serverless • Pros • 狶螂Ӟ稞 • 奲ݳ磧覄ၚ • We
Made the Whole Company “Serverless” • ࢴਧ౮磧犵
Option 1物Serverless • Cons • 礓犚ᥝጱ氃क़戔ਧ盄讔簡ҁWAF 牏獋㮆 Cloud Front ҂
• Log (Cloud Watch) • Serverless framework 硬粚 • Platform lock-in
Option 2物Firebase • ᤩ Google 揮ӥጱ Back-end as service ๐率
• Ԇ realtime database
Option 2物Firebase • Pros • Config 磧墋㻌 • Tutorial ᩻捷
• Youtube • ᑏ旉ک Mobile App 墋㻌 • 犋梊ጱ dashboard • ᛔդ殷ᶎ host ๐率
Option 2物Firebase • Cons • Platform lock-in : ۯ盛 Parse
• 獊䲒ᔱ᩻讔簡 • 藯፥ጱ牧Ջ讕眐丆ӥ䨝襑ᥝ Realtime database 牫
Option 3物Golang + Heroku • Golang • Heroku • PaaS
• git push heroku master 疰蟂ᗟਠ౮
Denny Ku Front-end Engineer Full-stack Engineer Fool stack Engineer
Golang -> Web service • Go is design for building
modern web. • It’s true, you don’t need framework. • But Ոኞ者磪皃㮆 But
Go: Philosophy
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
Go: Packages - Issue • Doc: 盄托奞牧֕౯㮉襑ᥝమమ Philosophy • 承ဩӤ犋
Surprise • 承Ӥ Surprise ֦ -> 蕦褾ଶਝ盱ਧ
Example: Auth • ℂ Config ኞڊ AuthCodeUrl ҁ蝨疰战ग़ auth ጱ
pkg 犖蝡䰬狶҂
Go: Asset • 蚤 Webpack牏React ጱ碉ݳ物 https://github.com/olebedev/go-starter-kit • Asset Pipeline
(rails) in Go https://github.com/shaoshing/train • Issue物doc牏customize
Go: Template • ℂ犋ݶጱ虻碘䄸愊ᶎ Load template ٚ䁆ᤈҁExecute҂ • Must牏Execute牫
Go: Template Ӟ㮆অጱ Template = (፡蚏㬵猟ܻጱ承ဩ or ፡蚏㬵猟蜍ڊ盅ጱ承ဩ) => (
Looks like Go or Looks like HTML ) => ( Looks like Go ) Go template ก氥膏 HTML 癩吖ፘ吚य़
Go: Template 犥ӥ㮆Ոቘ藨Ꭳ+ ஞ覄Ӥ眤ݑ物 Go Ֆ簁ฎ㮆盄磪ጱ承牧 ֕ Template ፥ஞ犋অአ牐
Go: Template • `define` -> DSL -> ᩻犋 Go •
{{.}} -> .? • ℂmapӾᥝ玲独犋ฎፗ矑 someMap["key"] ᘒฎ `index map “key”` ౯፡ׯ磪讨猟 Lisp
Go: Template • templateݝ胼矑ݑӞ㮆struct • ᥝࣁ template Ӿአ犨֜虋碍篷ဩፗ矑㯽獈
Go: Deploy • 蟂ᗟ牏Compile ፥ጱ禅盠 • gofmt • godoc
Heroku • Why not IaaS ? • 犋మᓕ秚瑊 • Monitor
• add ons • Scale out • Load balancer • Cache • …
Heroku: Pros • 蟂ᗟ墋㻌 • 獥 Environment 墋㻌 • 樄咳絑ह戔ਧ墋㻌
Heroku: Cons • No HTTP/2 • ᥝ傶 Idle time ՞桽
• 薹ဩ物Lambda + Heroku API • add on 螡䢔ᵑ繸 • 䌘ෝ Ruby 犥क़ጱඪൔ癩䔶Ո • one-off dyno: Database migrate
Option 4物MeteorJS • Universal JavaScript -> অತՈ • Database Everywhere
Option 4物MeteorJS
Option 4物MeteorJS • React + (Redux) • No worry about
back-end (at least recently) • Deployment + Scaling + : Galaxy • Security: Subs & Pubs
MeteorJS: data flow
MeteorJS: Cons • ݷਁ盄Ӿԫ+犋ݴڥ 䨝犋䨝稴ധ • Vendor lock-in • 䕃犵
• * ٌ䋿ݢ犥አ relational database牧֕盄櫞አ
https://goo.gl/kcWpRj
Special Thanks
We need designer https://goo.gl/BP7uz8 front-end & back-end:
[email protected]
Thanks for listening