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