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

1. Rebuilding HelloMoney in
(in the last 3 weeks)
Michael Shilman Keywon Chung
마실 기원
안녕하세요?

2. Lab80

3. 입니다.
저희는

4. 샌프란시스코와

5. 서울에

6. 기반을

7. 둔

8. 스타트업입니다.

9.
Lab80
지난

10. 3주간

11. 미티어로

12. 우리

13. 웹서비스

14. 헬로머니를

15. 다시

16. 만들면서

17. 배운

18. 점들을

19. 소개합니다.

21. Table of Contents
1. What is Hello Money?
2. Rebuilding in Meteor
3. What we learned
오늘

22. 발표의

23. 간단한

24. 개요입니다.

25. 1. What is Hello Money?
Learn by example
Ask a question…. … With a link to code.
: JSFIDDLE α
Software Development
헬로머니는

26. 미국

27. 사용자들이

28. 연금투자

29. 및

30. 재테크에

31. 대해

32. 스스로

33. 배울

34. 수

35. 있도록

36. 돕는

37. 서비스입니다.

38.
소프트웨어

39. 개발자들이

40. 스택

41. 오버플로우에

42. 개발

43. 관련

44. 질문을

45. 올릴

46. 때

47. 말로만

48. 질문하는게

49. 아니라
코드를

50. 직접

51. 돌려

52. 볼

53. 수

54. 있도록

55. JSFiddle

56. 링크를

57. 함께

58. 올리는

59. 것처럼…⋯

60. 1. What is Hello Money?
Learn by example
Online Investing
Ask a question…. … With a link to portfolio.
:
Reddit Motley Fool Bogleheads
레딧

61. 등

62. 온라인

63. 커뮤니티에서

64. 투자

65. 관련

66. 질문을

67. 할

68. 때

69.
자기가

70. 가진

71. (또는

72. 구상한)

73. 포트폴리오를

74. 헬로머니

75. 링크

76. 형태로

77. 올릴

78. 수

79. 있습니다.

80.
즉

81. 헬로머니

82. 사이트는

83. 투자

84. 포트폴리오를

85. 웹상으로

86. 디자인하고

87. 링크를

88. 생성해

89. 주는

90. 서비스입니다.

91. Visit hellomoney.co = Backbone + Django
Design share portfolios
여기에

92. 가시면

93. 헬로머니

94. 서비스를

95. 만나보실

96. 수

97. 있습니다.:

98. http://hellomoney.co

99.
온라인으로

100. 펀드

101. 및

102. 주식

103. 투자를

104. 많이

105. 하는

106. 미국

107. 개미

108. 투자자들을

109. 타겟으로

110. 잡고

111. 있구요.
현재는

112. Backbone

113. +

114. Django

115. +

116. PostgresQL

117. 으로

118. 만든

119. 데스크탑

120. 및

121. 반응형

122. 웹

123. 앱입니다.

124. http://www.reddit.com/
Redditors use
HelloMoney link to
discuss investing.
Recently launched in the U.S.
적은

125. 기능만

126. 가지고

127. 우선

128. 소프트

129. 런칭을

130. 했는데,

131. 반응이

132. 좋습니다.

133.
레딧의

134. 투자

135. 관련

136. 포럼에서

137. 헬로머니

138. 링크를

139. 사용해서

140. 논의하는

141. 경우도

142. 상당수

143. 있구요.
첫달에서

144. 둘째달

145. 사이에

146. 등록

147. 사용자

148. 수가

149. 5배로

150. 늘었어요.

151. Hacker News
https://news.ycombinator.com
Front page of
Hacker News
Market Reaction
Y

152. Combinator에서

153. 운영하는

154. 해커

155. 뉴스

156. 사이트에서도

157.
헬로머니

158. 링크가

159. 베스트

160. 목록에

161. 올라간

162. 적이

163. 있을

164. 뿐

165. 아니라,

166. http://www.producthunt.com
Market Reaction
Ranked No. 1 on
Product Hunt
요즘

167. 해커

168. 뉴스나

169. 테크크런치보다

170. 더

171. 주목받는

172. 서비스

173. 홍보

174. 플랫폼인

175. 프로덕트

176. 헌트에서
1등을

177. 차지한

178. 적도

179. 있습니다.

180.
그래서

181. 으쌰으쌰

182. 열심히

183. 만들고

184. 키우고

185. 있는데요.

186. 2. Why Re-Build Hello Money?
Fast Iteration Technical Debt
5/21 6/06 7/02 7/22 8/03 8/22
지난

187. 몇달간

188. 열불나게

189. 코드와

190. 피쳐를

191. 갱신/추가하다

192. 보니

193. “개발

194. 부채”가

195. 많이

196. 늘었다

197. 할까요.

199.
마침

200. 현재의

201. 스택을

202. 개선할

203. 대안을

204. 찾아

205. Facebook

206. React

207. 등을

208. 들여다

209. 보던

210. 중…⋯
미티어로

211. 해보기로

212. 정했습니다.

214. 1. Recommended by our friends
Percolate Studio
http://percolatestudio.com
creators
Why Re-Build It in Meteor?
Discover Meteor Book Local Market Verso App
2.High-quality example apps
첫째

215. 이유는

216. 샌프란시스코에서

217. 알고

218. 지내던

219. 지인이자

220. 저희

221. 개발에

222. 많은

223. 조언을

224. 주고

225. 있는

226.
퍼콜레이트

227. 친구들의

228. 강력

229. 추천입니다.

230.
둘째로,

231. 마침

232. 이분들이

233. 미티어를

234. 선보이는

235. 샘플

236. 앱을

237. 제작한

238. 분들이라

239. 좋은

240. 소스가

241. 많더라구요.

242. Why Re-Build It in Meteor?
3. Meteor principles
Data on the Wire
One Language
Database Everywhere
Latency Compensation
Full Stack Reactivity
Embrace the Ecosystem
Simplicity Equals
Productivity
https://docs.meteor.com
세번째는

243. 미티어의

244. 원칙들,

245. 그

246. 중에서도

247. 데이타의

248. 통합,

249. 언어의

250. 통일,

251. 그리고

252. 반응성에

253. 끌렸기

254. 때문입니다.

255. Meteor Version: Work in Progress
그래서

256. 헬로머니의

257. 상당부분을

258. 이미

259. 미티어로

260. 재

261. 구현

262. 해놓은

263. 상태입니다.

265.
해봤더니

266. 실질적으로

267. 어떤

268. 차이가

269. 있는지

270. 궁금하시죠?

271. 3. What We Learned
80% reduction in Lines of Code
7200LOC 1530LOC
Django Python
Backbone Coffee Meteor Coffee
일단,

272. 코드

273. 라인

274. 수가

275. 7,200줄에서

276. 1,530줄로

277. 80%

278. 감소하였습니다.

279. LOC Breakdown: Before vs. After
4000
3000
2000
1000
0
3,600
30 100
500
900
500
1,300
1,800
Client View Client Model Server API Server Model
보시다시피

280. 클라이언트

281. 쪽

282. 코드는

283. 반

284. 정도

285. 감소하였구요.

286.
서버쪽

287. 코드는

288. 거의

289. 없어지다시피

290. 해서

291. 20분의

292. 1

293. 정도로

294. 줄었다고

295. 보시면

296. 됩니다.

297. *Don’t Repeat Yourself
What We Learned
DRY* Full-Stack Data
Client Model (Backbone Model)
class app.Portfolio extends
Backbone.Model
+ 600 lines Coffee helpers
Server API (Django Tastypie)
class Portfolio(tp.ModelResource):
+ 30 lines Python serialization code
Server Model (Django ORM)
class Portfolio(orm.Model):
+ 300 lines Python fields and helper methods
데이타가

298. 통합되면서

299. 이전에

300. 클라이언트,

301. API,

302. 서버에서

303. 세

304. 번

305. 반복해주던

306. 것이…⋯

307. *Don’t Repeat Yourself
What We Learned
DRY* Full-Stack Data
Meteor Collection
Portfolios = new Mongo.Collection()
Portfolios.helpers(
holdingsDetails: -
_.map(@holdings, (h) -
Funds.findOne(symbol: h.symbol))
...
+ 90 lines of Coffee helpers
Client Model (Backbone Model)
class app.Portfolio extends
Backbone.Model
+ 600 lines Coffee helpers
Server API (Django Tastypie)
class Portfolio(tp.ModelResource):
+ 30 lines Python serialization code
Server Model (Django ORM)
class Portfolio(orm.Model):
+ 300 lines Python fields and helper methods
..

308. 한

309. 번만

310. 정의해주면

311. 해결됩니다.

313.
(◕‿◕✿)

316. ヽ(＾Д＾)ﾉ

320. d=(´▽｀)=b

321. What We Learned
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-Friendly
Backbone Views + Templates Meteor Templates
프론트엔드

322. 코딩을

323. 하는

324. 디자이너

325. 입장에서

326. 좋은

327. 점은,
UI

328. 템플릿이

329. html

330. 파일

331. 안에

332. 다

333. 정의되어

334. 있어서

335.
Javascript

336. 또는

337. Coffeescript

338. 파일을

339. 보지

340. 않고도

341. 협업이

342. 가능하다는

343. 점입니다.

344. Reactivity = Awesome
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
What We Learned
Backbone Event Listeners Reactive Templates
마지막으로

345. 반응성!!

347.
＼(*T▽T*)／
이전에는

348. “A가

349. 바뀌면

350. B를

351. 업데이트

352. 해주라”는

353. 것을

354. 일일이

355. 지정해주어야

356. 했는데
미티어를

357. 사용하니까

358. 그게

359. 절로

360. 됩니다.

362. Challenges
Many open questions..
• Abstraction
• Immaturity
• Scalability
• Page load optimization
• MongoDB dependency
• Deployment
지금까지

363. 좋은것만

364. 말씀드렸는데요.

365.
이런

366. 여러가지

367. 문제들은

368. 아직

369. 직면해보지

370. 않아서

371. 앞으로

372. 대처해

373. 나가면서

374. 알아봐야

375. 한답니다.

376. So Far So Good!
Is it a fair comparison?
I think so.
2 years experience
Backbone + Django
v2 is easier
3 weeks experience
Meteor
Full production app
Pre-release prototype
v1 is hard
이렇게

377. 일부만

378. 만들어보고,

379. 그것도

380. 기존

381. 서비스를

382. 재현해

383. 보고

384. 공정한

385. 비교를

386. 할

387. 수

388. 있겠는가?

389.
하는

390. 의문이

391. 드실

392. 것

393. 같아요.

394. 저희도

395. 그게

396. 궁금한데요.

397.
지금까지

398. 받는

399. 인상은

400. 이런

401. 여러가지를

402. 감안하고도

403. 미티어를

404. 쓰는

405. 것이

406. 더

407. 좋다는

408. 것입니다.

409. Thank You
PS - We’re hiring!
Come hack Meteor with us at Lab80
in Seoul and San Francisco
이상

410. 짧은

411. 경험담을

412. 공유했습니다.

413. 또

414. 궁금한것이

415. 있으시면

416. 물어봐

417. 주세요!

418.
그리고

419. 저희

420. Lab80은

421. 함께

422. 개발하실

423. 분들을

424. 찾고

425. 있습니다.

426.
michael@lab80.co

427. 로

428. 연락

429. 주시면

430. 감사하겠습니다.