Build your own trello witihin 100 LOC (with Meteor)
17 likes19,024 views
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.
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