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
Team operations that are not burdened by SRE
kazatohiei
1
310
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
AIともっと楽するE2Eテスト
myohei
6
2.6k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
How to Ace a Technical Interview
jacobian
278
23k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Scaling GitHub
holman
460
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Cult of Friendly URLs
andyhume
79
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
What's in a price? How to price your products and services
michaelherold
246
12k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
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