rebuilding hello money in meteor (in the last 3 weeks)

21
Rebuilding HelloMoney in 안녕하세요? Lab80 입니다. 저희는 샌프란시스코와 서울에 기반을 둔 스타트업입니다. 지난 3주간 미티어로 우리 웹서비스 <헬로머니>를 다시 만들면서 배운 점들을 소개합니다. Michael Shilman Keywon Chung 마실 기원 (in the last 3 weeks) Lab80

Upload: michael-shilman

Post on 20-Aug-2015

514 views

Category:

Software


0 download

TRANSCRIPT

Rebuilding HelloMoney in

안녕하세요?����������� ������������������  Lab80����������� ������������������  입니다.저희는����������� ������������������  샌프란시스코와����������� ������������������  서울에����������� ������������������  기반을����������� ������������������  둔����������� ������������������  스타트업입니다.����������� ������������������  

지난����������� ������������������  3주간����������� ������������������  미티어로����������� ������������������  우리����������� ������������������  웹서비스����������� ������������������  <헬로머니>를����������� ������������������  다시����������� ������������������  만들면서����������� ������������������  배운����������� ������������������  점들을����������� ������������������  소개합니다.����������� ������������������  

Michael Shilman Keywon Chung마실 기원

(in the last 3 weeks)

Lab80

1. What is Hello Money?

2. Rebuilding in Meteor

3. What we learned

오늘����������� ������������������  발표의����������� ������������������  간단한����������� ������������������  개요입니다.

Table of Contents

JSFIDDLE: α

Software Development

<헬로머니>는����������� ������������������  미국����������� ������������������  사용자들이����������� ������������������  연금투자����������� ������������������  및����������� ������������������  재테크에����������� ������������������  대해����������� ������������������  스스로����������� ������������������  배울����������� ������������������  수����������� ������������������  있도록����������� ������������������  돕는����������� ������������������  서비스입니다.����������� ������������������  

소프트웨어����������� ������������������  개발자들이����������� ������������������  스택����������� ������������������  오버플로우에����������� ������������������  개발����������� ������������������  관련����������� ������������������  질문을����������� ������������������  올릴����������� ������������������  때����������� ������������������  말로만����������� ������������������  질문하는게����������� ������������������  아니라 코드를����������� ������������������  직접����������� ������������������  돌려����������� ������������������  볼����������� ������������������  수����������� ������������������  있도록����������� ������������������  JSFiddle����������� ������������������  링크를����������� ������������������  함께����������� ������������������  올리는����������� ������������������  것처럼…⋯

Ask a question…. … With a link to code.

1. What is Hello Money?

Learn by example

Learn by exampleOnline Investing

Ask a question…. … With a link to portfolio.

1. What is Hello Money?

:Reddit Motley Fool Bogleheads

레딧����������� ������������������  등����������� ������������������  온라인����������� ������������������  커뮤니티에서����������� ������������������  투자����������� ������������������  관련����������� ������������������  질문을����������� ������������������  할����������� ������������������  때����������� ������������������   자기가����������� ������������������  가진����������� ������������������  (또는����������� ������������������  구상한)����������� ������������������  포트폴리오를����������� ������������������  <헬로머니>����������� ������������������  링크����������� ������������������  형태로����������� ������������������  올릴����������� ������������������  수����������� ������������������  있습니다.����������� ������������������  

즉����������� ������������������  <헬로머니>����������� ������������������  사이트는����������� ������������������  투자����������� ������������������  포트폴리오를����������� ������������������  웹상으로����������� ������������������  디자인하고����������� ������������������  링크를����������� ������������������  생성해����������� ������������������  주는����������� ������������������  서비스입니다.

Visit hellomoney.co = Backbone + Django

Design & share portfolios

여기에����������� ������������������  가시면����������� ������������������  <헬로머니>����������� ������������������  서비스를����������� ������������������  만나보실����������� ������������������  수����������� ������������������  있습니다.:����������� ������������������  http://hellomoney.co����������� ������������������  

온라인으로����������� ������������������  펀드����������� ������������������  및����������� ������������������  주식����������� ������������������  투자를����������� ������������������  많이����������� ������������������  하는����������� ������������������  미국����������� ������������������  개미����������� ������������������  투자자들을����������� ������������������  타겟으로����������� ������������������  잡고����������� ������������������  있구요. 현재는����������� ������������������  Backbone����������� ������������������  +����������� ������������������  Django����������� ������������������  +����������� ������������������  PostgresQL����������� ������������������  으로����������� ������������������  만든����������� ������������������  데스크탑����������� ������������������  및����������� ������������������  반응형����������� ������������������  웹����������� ������������������  앱입니다.

Redditors use HelloMoney link to discuss investing.

http://www.reddit.com/

Recently launched in the U.S.

적은����������� ������������������  기능만����������� ������������������  가지고����������� ������������������  우선����������� ������������������  소프트����������� ������������������  런칭을����������� ������������������  했는데,����������� ������������������  반응이����������� ������������������  좋습니다.����������� ������������������  

레딧의����������� ������������������  투자����������� ������������������  관련����������� ������������������  포럼에서����������� ������������������  <헬로머니>����������� ������������������  링크를����������� ������������������  사용해서����������� ������������������  논의하는����������� ������������������  경우도����������� ������������������  상당수����������� ������������������  있구요. 첫달에서����������� ������������������  둘째달����������� ������������������  사이에����������� ������������������  등록����������� ������������������  사용자����������� ������������������  수가����������� ������������������  5배로����������� ������������������  늘었어요.

Hacker News

https://news.ycombinator.com

Front page of Hacker News

Market Reaction

Y����������� ������������������  Combinator에서����������� ������������������  운영하는����������� ������������������  해커����������� ������������������  뉴스����������� ������������������  사이트에서도����������� ������������������   <헬로머니>����������� ������������������  링크가����������� ������������������  베스트����������� ������������������  목록에����������� ������������������  올라간����������� ������������������  적이����������� ������������������  있을����������� ������������������  뿐����������� ������������������  아니라,

http://www.producthunt.com

Market Reaction

Ranked No. 1 on Product Hunt

요즘����������� ������������������  해커����������� ������������������  뉴스나����������� ������������������  테크크런치보다����������� ������������������  더����������� ������������������  주목받는����������� ������������������  서비스����������� ������������������  홍보����������� ������������������  플랫폼인����������� ������������������  프로덕트����������� ������������������  헌트에서 1등을����������� ������������������  차지한����������� ������������������  적도����������� ������������������  있습니다.����������� ������������������  

그래서����������� ������������������  으쌰으쌰����������� ������������������  열심히����������� ������������������  만들고����������� ������������������  키우고����������� ������������������  있는데요.

5/21 6/06 7/02 7/22 8/228/03

Technical DebtFast Iteration 2. Why Re-Build Hello Money?

지난����������� ������������������  몇달간����������� ������������������  열불나게����������� ������������������  코드와����������� ������������������  피쳐를����������� ������������������  갱신/추가하다����������� ������������������  보니����������� ������������������  “개발����������� ������������������  부채”가����������� ������������������  많이����������� ������������������  늘었다����������� ������������������  할까요.����������� ������������������  ����������� ������������������  

마침����������� ������������������  현재의����������� ������������������  스택을����������� ������������������  개선할����������� ������������������  대안을����������� ������������������  찾아����������� ������������������  Facebook����������� ������������������  React����������� ������������������  등을����������� ������������������  들여다����������� ������������������  보던����������� ������������������  중…⋯ 미티어로����������� ������������������  해보기로����������� ������������������  정했습니다.����������� ������������������  

1. Recommended by our friendsPercolate Studiohttp://percolatestudio.com

creators

Why Re-Build It in Meteor?

2.High-quality example appsLocal Market Verso AppDiscover Meteor Book

첫째����������� ������������������  이유는����������� ������������������  샌프란시스코에서����������� ������������������  알고����������� ������������������  지내던����������� ������������������  지인이자����������� ������������������  저희����������� ������������������  개발에����������� ������������������  많은����������� ������������������  조언을����������� ������������������  주고����������� ������������������  있는����������� ������������������   <퍼콜레이트>����������� ������������������  친구들의����������� ������������������  강력����������� ������������������  추천입니다.����������� ������������������  

둘째로,����������� ������������������  마침����������� ������������������  이분들이����������� ������������������  미티어를����������� ������������������  선보이는����������� ������������������  샘플����������� ������������������  앱을����������� ������������������  제작한����������� ������������������  분들이라����������� ������������������  좋은����������� ������������������  소스가����������� ������������������  많더라구요.

Data on the Wire One Language Database Everywhere

Latency Compensation

Full Stack Reactivity Embrace the Ecosystem

Simplicity Equals

Productivity

https://docs.meteor.com

Why Re-Build It in Meteor?

3. Meteor principles

세번째는����������� ������������������  미티어의����������� ������������������  원칙들,����������� ������������������  그����������� ������������������  중에서도����������� ������������������  데이타의����������� ������������������  통합,����������� ������������������  언어의����������� ������������������  통일,����������� ������������������  그리고����������� ������������������  반응성에����������� ������������������  끌렸기����������� ������������������  때문입니다.

Meteor Version: Work in Progress

그래서����������� ������������������  <헬로머니>의����������� ������������������  상당부분을����������� ������������������  이미����������� ������������������  미티어로����������� ������������������  재����������� ������������������  구현����������� ������������������  해놓은����������� ������������������  상태입니다.����������� ������������������  ����������� ������������������  

해봤더니����������� ������������������  실질적으로����������� ������������������  어떤����������� ������������������  차이가����������� ������������������  있는지����������� ������������������  궁금하시죠?

7200LOC 1530LOCDjango PythonBackbone Coffee Meteor Coffee

3. What We Learned

80% reduction in Lines of Code

일단,����������� ������������������  코드����������� ������������������  라인����������� ������������������  수가����������� ������������������  7,200줄에서����������� ������������������  1,530줄로����������� ������������������  80%����������� ������������������  감소하였습니다.

LOC Breakdown: Before vs. After

0

1000

2000

3000

4000

Client View Client Model Server API Server Model

10030500

900

3,600

500

1,3001,800

보시다시피����������� ������������������  클라이언트����������� ������������������  쪽����������� ������������������  코드는����������� ������������������  반����������� ������������������  정도����������� ������������������  감소하였구요.����������� ������������������  

서버쪽����������� ������������������  코드는����������� ������������������  거의����������� ������������������  없어지다시피����������� ������������������  해서����������� ������������������  20분의����������� ������������������  1����������� ������������������  정도로����������� ������������������  줄었다고����������� ������������������  보시면����������� ������������������  됩니다.

*Don’t Repeat Yourself

Server Model (Django ORM)

Server API (Django Tastypie)

Client Model (Backbone Model)

class Portfolio(orm.Model):

class Portfolio(tp.ModelResource):

class app.Portfolio extends Backbone.Model

+ 600 lines Coffee helpers

+ 30 lines Python serialization code

+ 300 lines Python fields and helper methods

DRY* Full-Stack DataWhat We Learned

데이타가����������� ������������������  통합되면서����������� ������������������  이전에����������� ������������������  클라이언트,����������� ������������������  API,����������� ������������������  서버에서����������� ������������������  세����������� ������������������  번����������� ������������������  반복해주던����������� ������������������  것이…⋯

Portfolios = new Mongo.Collection()

Portfolios.helpers(

holdingsDetails: ->

_.map(@holdings, (h) -> Funds.findOne(symbol: h.symbol))

...

Meteor Collection

+ 90 lines of Coffee helpers

*Don’t Repeat Yourself

Server Model (Django ORM)

Server API (Django Tastypie)

Client Model (Backbone Model)

class Portfolio(orm.Model):

class Portfolio(tp.ModelResource):

class app.Portfolio extends Backbone.Model

+ 600 lines Coffee helpers

+ 30 lines Python serialization code

+ 300 lines Python fields and helper methods

DRY* Full-Stack DataWhat We Learned

..����������� ������������������  한����������� ������������������  번만����������� ������������������  정의해주면����������� ������������������  해결됩니다.����������� ������������������  ����������� ������������������  

(◕‿◕✿)����������� ������������������  ����������� ������������������  ����������� ������������������  ヽ(^Д^)ノ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  d=(´▽`)=b

app.HoldingView = Backbone.View.extend ...

<template name=“portfolio”>

<ul>

{{#each holdings}}

<li>{{> holding}}</li>

{{/each}}

</ul>

</template>

app.PortfolioView = Backbone.View.extend

template: ‘#portfolio-template'

beforeRender: ->

@holdings.each (h) =>

@insertView(‘.js-holdings', new app.HoldingView(model: h)) ...

<script id=“portfolio-template" type=...>

<ul class=“js-holdings”> </ul>

</script>

<script id=“holding-template” type=...>

<template name=“holding”>

...

Designer-FriendlyWhat We Learned

Backbone Views + Templates Meteor Templates

프론트엔드����������� ������������������  코딩을����������� ������������������  하는����������� ������������������  디자이너����������� ������������������  입장에서����������� ������������������  좋은����������� ������������������  점은, UI����������� ������������������  템플릿이����������� ������������������  html����������� ������������������  파일����������� ������������������  안에����������� ������������������  다����������� ������������������  정의되어����������� ������������������  있어서����������� ������������������   Javascript����������� ������������������  또는����������� ������������������  Coffeescript����������� ������������������  파일을����������� ������������������  보지����������� ������������������  않고도����������� ������������������  협업이����������� ������������������  가능하다는����������� ������������������  점입니다.

app.PortfolioView = Backbone.View.extend

template: ‘#portfolio-template'

initialize: ->

@holdings = @model.get('holdings')

@listenTo(@holdings, 'add', @render)

@listenTo(@holdings, 'remove', @render)

<template name=“portfolio”>

<ul>

{{#each holdings}}

<li>{{> holding}}</li>

{{/each}}

</ul>

Reactivity = AwesomeWhat We Learned

Backbone Event Listeners Reactive Templates

마지막으로����������� ������������������  반응성!!����������� ������������������  ����������� ������������������  

이전에는����������� ������������������  “A가����������� ������������������  바뀌면����������� ������������������  B를����������� ������������������  업데이트����������� ������������������  해주라”는����������� ������������������  것을����������� ������������������  일일이����������� ������������������  지정해주어야����������� ������������������  했는데 미티어를����������� ������������������  사용하니까����������� ������������������  그게����������� ������������������  절로����������� ������������������  됩니다.����������� ������������������  

\(*T▽T*)/

• Abstraction

• Immaturity

• Scalability

• Page load optimization

• MongoDB dependency

• Deployment

Challenges

Many open questions..

지금까지����������� ������������������  좋은것만����������� ������������������  말씀드렸는데요.����������� ������������������  

이런����������� ������������������  여러가지����������� ������������������  문제들은����������� ������������������  아직����������� ������������������  직면해보지����������� ������������������  않아서����������� ������������������  앞으로����������� ������������������  대처해����������� ������������������  나가면서����������� ������������������  알아봐야����������� ������������������  한답니다.

2 years experience Backbone + Django

3 weeks experience Meteor

Full production appPre-release prototype

v2 is easierv1 is hard

So Far So Good!

Is it a fair comparison? I think so.

이렇게����������� ������������������  일부만����������� ������������������  만들어보고,����������� ������������������  그것도����������� ������������������  기존����������� ������������������  서비스를����������� ������������������  재현해����������� ������������������  보고����������� ������������������  공정한����������� ������������������  비교를����������� ������������������  할����������� ������������������  수����������� ������������������  있겠는가?����������� ������������������   하는����������� ������������������  의문이����������� ������������������  드실����������� ������������������  것����������� ������������������  같아요.����������� ������������������  저희도����������� ������������������  그게����������� ������������������  궁금한데요.����������� ������������������  

지금까지����������� ������������������  받는����������� ������������������  인상은����������� ������������������  이런����������� ������������������  여러가지를����������� ������������������  감안하고도����������� ������������������  미티어를����������� ������������������  쓰는����������� ������������������  것이����������� ������������������  더����������� ������������������  좋다는����������� ������������������  것입니다.

Thank YouPS - We’re hiring!

Come hack Meteor with us at Lab80 in Seoul and San Francisco

이상����������� ������������������  짧은����������� ������������������  경험담을����������� ������������������  공유했습니다.����������� ������������������  또����������� ������������������  궁금한것이����������� ������������������  있으시면����������� ������������������  물어봐����������� ������������������  주세요!����������� ������������������  

그리고����������� ������������������  저희����������� ������������������  Lab80은����������� ������������������  함께����������� ������������������  개발하실����������� ������������������  분들을����������� ������������������  찾고����������� ������������������  있습니다.����������� ������������������   [email protected]����������� ������������������  로����������� ������������������  연락����������� ������������������  주시면����������� ������������������  감사하겠습니다.