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: lab80

Post on 08-Jul-2015

1.831 views

Category:

Software


1 download

DESCRIPTION

[English & Korean] What we learned rebuilding HelloMoney.co, an investing service for the US market, in Meteor. Presented at Meteor Worldwide Day 2014 in Seoul 미티어로 "헬로머니" 웹서비스를 재구현하면서 지금껏 배운 점들을 공유합니다. (한/영)

TRANSCRIPT

Page 1: Rebuilding Hello Money in Meteor (in the last 3 weeks)

Rebuilding HelloMoney in

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

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

Michael Shilman Keywon Chung마실 기원

(in the last 3 weeks)

Lab80

Page 2: Rebuilding Hello Money in Meteor (in the last 3 weeks)

1. What is Hello Money?

2. Rebuilding in Meteor

3. What we learned

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

Table of Contents

Page 3: Rebuilding Hello Money in Meteor (in the last 3 weeks)

JSFIDDLE: α

Software Development

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

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

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

1. What is Hello Money?

Learn by example

Page 4: Rebuilding Hello Money in Meteor (in the last 3 weeks)

Learn by exampleOnline Investing

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

1. What is Hello Money?

:Reddit Motley Fool Bogleheads

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

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

Page 5: Rebuilding Hello Money in Meteor (in the last 3 weeks)

Visit hellomoney.co = Backbone + Django

Design & share portfolios

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

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

Page 6: Rebuilding Hello Money in Meteor (in the last 3 weeks)

Redditors use HelloMoney link to discuss investing.

http://www.reddit.com/

Recently launched in the U.S.

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

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

Page 7: Rebuilding Hello Money in Meteor (in the last 3 weeks)

Hacker News

https://news.ycombinator.com

Front page of Hacker News

Market Reaction

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

Page 8: Rebuilding Hello Money in Meteor (in the last 3 weeks)

http://www.producthunt.com

Market Reaction

Ranked No. 1 on Product Hunt

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

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

Page 9: Rebuilding Hello Money in Meteor (in the last 3 weeks)

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

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

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

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

Page 10: Rebuilding Hello Money in Meteor (in the last 3 weeks)

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

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

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

Page 11: Rebuilding Hello Money in Meteor (in the last 3 weeks)

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

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

Page 12: Rebuilding Hello Money in Meteor (in the last 3 weeks)

Meteor Version: Work in Progress

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

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

Page 13: Rebuilding Hello Money in Meteor (in the last 3 weeks)

7200LOC 1530LOCDjango PythonBackbone Coffee Meteor Coffee

3. What We Learned

80% reduction in Lines of Code

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

Page 14: Rebuilding Hello Money in Meteor (in the last 3 weeks)

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����������� ������������������  정도로����������� ������������������  줄었다고����������� ������������������  보시면����������� ������������������  됩니다.

Page 15: Rebuilding Hello Money in Meteor (in the last 3 weeks)

*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,����������� ������������������  서버에서����������� ������������������  세����������� ������������������  번����������� ������������������  반복해주던����������� ������������������  것이…⋯

Page 16: Rebuilding Hello Money in Meteor (in the last 3 weeks)

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

Page 17: Rebuilding Hello Money in Meteor (in the last 3 weeks)

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����������� ������������������  파일을����������� ������������������  보지����������� ������������������  않고도����������� ������������������  협업이����������� ������������������  가능하다는����������� ������������������  점입니다.

Page 18: Rebuilding Hello Money in Meteor (in the last 3 weeks)

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*)/

Page 19: Rebuilding Hello Money in Meteor (in the last 3 weeks)

• Abstraction

• Immaturity

• Scalability

• Page load optimization

• MongoDB dependency

• Deployment

Challenges

Many open questions..

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

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

Page 20: Rebuilding Hello Money in Meteor (in the last 3 weeks)

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.

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

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

Page 21: Rebuilding Hello Money in Meteor (in the last 3 weeks)

Thank YouPS - We’re hiring!

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

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

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