rebuilding hello money in meteor (in the last 3 weeks)
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
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]����������� ������������������ 로����������� ������������������ 연락����������� ������������������ 주시면����������� ������������������ 감사하겠습니다.