This document discusses building a clone of the project management tool Trello using the Meteor framework. It describes Meteor's principles like data on the wire and one language across client and server. The document shows how to create a Meteor project, add templates with Handlebars, define data collections with MongoDB, add event handlers, and deploy the project. It demos a Trello clone built with Meteor in under 100 lines of code.

1. Build your Own Trello
within 200100 LOC
Andy Dai
andy@dorm7.com
1

2. Who am I?
• Staff@PyCon Taiwan
• co-author@iCoding.co
• 寫 Python 比較多...
2
Andy

3. Trello
3

4. Trello
• Project Management Tool
3

5. Trello
• Project Management Tool
• Real-time Web APP
3

6. Trello
• Project Management Tool
• Real-time Web APP
• 來看個 Demo 好了...
3

7. A Real-Time Web APP
• Backbone.js
• HTML5 pushstate
• Mustache template
• Socket.io and websocket
• Ajax Polling
• node.js
• MongoDB
Reference: http://blog.fogcreek.com/the-trello-tech-stack/
4

8. Trallo - clone of Trello
5

9. Trallo - clone of Trello
• Demo - http://bit.ly/trallo
5

10. Trallo - clone of Trello
• Demo - http://bit.ly/trallo
• 59 LOC for template + 96 LOC for js
5

11. HOW?
6

12. USE Meteor!
7

13. Meteor
• http://www.meteor.com
• 9292 stars in Github (most among JS
projects in 2012)
• Real-Time Web Framework
• 2011/12/01 First Preview
8

14. Seven Principles of
Meteor
9

15. Data on the Wire
10

16. One Language
11

17. Database Everywhere
12

18. Latency Compensation
13

19. Full Stack Reactivity
14

20. Embrace the Ecosystem
15

21. Simplicity Equals
Productivity
16

22. Get Start!
17

23. Install
$ curl install.meteor.com | sh
Create Project
$ meteor create trallo
18

24. Meteor Project
$ cd trallo
$ meteor
Run Meteor Project
19

25. Meteor Project
.meteor
trallo.css
trallo.html
trallo.js
Project Structure
$ cd trallo
$ meteor
Run Meteor Project
19

26. trallo.js
// The Code here will run in both client & Server
Cards = new Meteor.Collection("cards");
if (Meteor.is_client) {
...
}
if (Meteor.is_server) {
...
}
20

27. Template
21

28. Handlebars.js
<template name="todo">
{{#each todos }}
{{> card }}
{{/each }}
</template>
<template name="card">
<li id="{{ _id }}" class="card ui-state-default"
data-status="{{ status }}">
{{ task }} <a class="edit" href='#'>edit</a>
</li>
</template>
22

29. Template Helpers
if (Meteor.is_client) {
Template.todo.helpers({
todos: ...
});
...
}
<template name="todo">
{{#each todos }}
{{> card }}
{{/each }}
</template>
<template name="card">
<li id="{{ _id }}" class="card ui-state-default"
data-status="{{ status }}">
{{ task }} <a class="edit" href='#'>edit</a>
</li>
</template>
23

30. Data
24

31. Meteor Use MongoDB
as database
25

32. Client Side - miniMongo
Cards = new Meteor.Collection("cards");
if (Meteor.is_client) {
Template.todo.helpers({
todos: Cards.find(
{status:'todo'},
{sort: {position: 1, task: 1}}
)
});
}
if (Meteor.is_server) {
...
}
26

33. Server Side
Cards = new Meteor.Collection("cards");
if (Meteor.is_client) {
...
}
if (Meteor.is_server) {
if ( Cards.find().count() === 0) {
Cards.insert({
task: 'One',
status: 'todo',
position: 1
});
}
}
27

34. Event
28

35. Event Handler
if (Meteor.is_client) {
...
Template.board.events = {
"click .edit": function() {
...
}
}
...
}
29

36. Deploy
meteor deploy http://trallo.meteor.com
meteor bundle trallo.tar.gz
Deploy to Meteor.com
Deploy to your own server
30

37. DEMO
31

38. 小結
32
• Meteor is GOOD!
• 目前版號 0.6.4.1, 所以...

39. 工商服務
• iCoding.co 徵稿中
• COSCUP 有 Python.tw 攤位
• 歡迎來 Taipei.py 玩玩
33

40. Q&A
34

41. 35
• Meteor 初體驗 http://bit.ly/17q7RaA http://
bit.ly/17q7U6n
• Discover Meteor
www.discovermeteor.com
Reference