Build your own trello witihin 100 LOC (with Meteor)

15,312 views
14,574 views

Published on

This is my slide in COSCUP 2013. The talk is about how to clone your own trello within 100 LOC using Meteor

Published in: Technology, Business

Build your own trello witihin 100 LOC (with Meteor)

  1. 1. Build your Own Trello within 200100 LOC Andy Dai andy@dorm7.com 1
  2. 2. Who am I? • Staff@PyCon Taiwan • co-author@iCoding.co • 寫 Python 比較多... 2 Andy
  3. 3. Trello 3
  4. 4. Trello • Project Management Tool 3
  5. 5. Trello • Project Management Tool • Real-time Web APP 3
  6. 6. Trello • Project Management Tool • Real-time Web APP • 來看個 Demo 好了... 3
  7. 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. 8. Trallo - clone of Trello 5
  9. 9. Trallo - clone of Trello • Demo - http://bit.ly/trallo 5
  10. 10. Trallo - clone of Trello • Demo - http://bit.ly/trallo • 59 LOC for template + 96 LOC for js 5
  11. 11. HOW? 6
  12. 12. USE Meteor! 7
  13. 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. 14. Seven Principles of Meteor 9
  15. 15. Data on the Wire 10
  16. 16. One Language 11
  17. 17. Database Everywhere 12
  18. 18. Latency Compensation 13
  19. 19. Full Stack Reactivity 14
  20. 20. Embrace the Ecosystem 15
  21. 21. Simplicity Equals Productivity 16
  22. 22. Get Start! 17
  23. 23. Install $ curl install.meteor.com | sh Create Project $ meteor create trallo 18
  24. 24. Meteor Project $ cd trallo $ meteor Run Meteor Project 19
  25. 25. Meteor Project .meteor trallo.css trallo.html trallo.js Project Structure $ cd trallo $ meteor Run Meteor Project 19
  26. 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. 27. Template 21
  28. 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. 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. 30. Data 24
  31. 31. Meteor Use MongoDB as database 25
  32. 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. 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. 34. Event 28
  35. 35. Event Handler if (Meteor.is_client) { ... Template.board.events = { "click .edit": function() { ... } } ... } 29
  36. 36. Deploy meteor deploy http://trallo.meteor.com meteor bundle trallo.tar.gz Deploy to Meteor.com Deploy to your own server 30
  37. 37. DEMO 31
  38. 38. 小結 32 • Meteor is GOOD! • 目前版號 0.6.4.1, 所以...
  39. 39. 工商服務 • iCoding.co 徵稿中 • COSCUP 有 Python.tw 攤位 • 歡迎來 Taipei.py 玩玩 33
  40. 40. Q&A 34
  41. 41. 35 • Meteor 初體驗 http://bit.ly/17q7RaA http:// bit.ly/17q7U6n • Discover Meteor www.discovermeteor.com Reference

×