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
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
PipeCDのプラグイン化で目指すところ
warashi
1
310
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
970
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.1k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
880
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Model Pollution
hschwentner
1
160
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.6k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Navigating Team Friction
lara
187
15k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Building Applications with DynamoDB
mza
95
6.5k
4 Signs Your Business is Dying
shpigford
184
22k
KATA
mclloyd
30
14k
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