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
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
XP, Testing and ninja testing
m_seki
3
240
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
120
Porting a visionOS App to Android XR
akkeylab
0
460
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
The Language of Interfaces
destraynor
158
25k
Agile that works and the tools we love
rasmusluckow
329
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Navigating Team Friction
lara
187
15k
Speed Design
sergeychernyshev
32
1k
Fireside Chat
paigeccino
37
3.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Scaling GitHub
holman
460
140k
The Invisible Side of Design
smashingmag
301
51k
Docker and Python
trallard
44
3.5k
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