Build your own trello witihin 100 LOC (with Meteor)
•17 likes•19,004 views
Download to read offline
Report
This is my slide in COSCUP 2013. The talk is about how to clone your own trello within 100 LOC using Meteor
Recommended
More Related Content
What's hot
What's hot(18)
Viewers also liked
Viewers also liked(6)
Similar to Build your own trello witihin 100 LOC (with Meteor)
Similar to Build your own trello witihin 100 LOC (with Meteor)(20)
More from Andy Dai
More from Andy Dai(17)
Recently uploaded
Recently uploaded(20)
Build your own trello witihin 100 LOC (with Meteor)
- 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
- 15. Data on the Wire 10
- 16. One Language 11
- 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