Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tweetirc presentation

835 views

Published on

Dojo/Node.js project built for Node Knockout 2010.
This is the project presentation talk on London Ajax

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Tweetirc presentation

  1. 1. A Node Knockout entry TweetIRC[.com] London Ajax User Group: JavaScript MiniConf (18 th September 2010)
  2. 2. London Ajax User Group: JavaScript MiniConf (18 th September 2010) <ul><li>48H to build a node.js based project from scratch
  3. 3. Teams from 1 to 4 members
  4. 4. Deployment to Heroku or Joyent, using Git
  5. 5. 215 teams around the world
  6. 6. My (solo) team was “Celestial Being”, 10 th place “Overall” </li></ul>About nodeko
  7. 7. London Ajax User Group: JavaScript MiniConf (18 th September 2010) <ul><li>Apply the “chatroom” concept to the Twitter network, similar to the I.R.C interfaces (channels, user lists, commands, ...)
  8. 8. User interface built upon Diijit, inheriting its high-quality widgets browser support and flexibility
  9. 9. Will allow the user to “follow” a large number of Twitter “sources” (searches, users, lists, …) in a compact and user friendly interface </li></ul>About TweetIRC
  10. 10. London Ajax User Group: JavaScript MiniConf (18 th September 2010) <ul><li>Have a working project at the end of the contest
  11. 11. Create a solid codebase (don't give in to spaguetti)
  12. 12. Maximum browser compatibility
  13. 13. Lay groundwork for easy extensibility and modularity
  14. 14. Simple straightforward development </li></ul>Project goals
  15. 15. London Ajax User Group: JavaScript MiniConf (18 th September 2010) <ul><li>node.js backend to handle HTTP requests and configuration
  16. 16. Dijit.Layout containers
  17. 17. Dojo.publish / dojo.subscribe
  18. 18. Dojox.dtl /dojo.cache
  19. 19. A core class (“kernel”) to handle features
  20. 20. Plugin framework </li></ul>How i built it
  21. 21. London Ajax User Group: JavaScript MiniConf (18 th September 2010) The U.I. <ul><li>Main dijit.layout.BorderContainer
  22. 22. dijit.layout.TabContainer on the “center” region
  23. 23. Chatrooms are a custom TweetIRC.ChatRoom class which extends dijit.layout.BorderContainer </li></ul>
  24. 24. London Ajax User Group: JavaScript MiniConf (18 th September 2010) dijit.layout.BorderContainer
  25. 25. London Ajax User Group: JavaScript MiniConf (18 th September 2010) The kernel class definition dojo.provide('TweetIRC.Kernel'); dojo.declare(&quot;TweetIRC.Kernel&quot;, null, { registerPlugin: function(plugin); onTimerTick: function(); onGlobalMessage: function(message); onMessage: function(message); onCommand: function(event); startup: function(/* Object */args); }
  26. 26. London Ajax User Group: JavaScript MiniConf (18 th September 2010) The kernel class use dojo.ready(function(){ var kernel = new TweetIRC.Kernel(); // Register plugins kernel.registerPlugin(new TweetIRC.plugins.ChatRoomPlugin()); kernel.registerPlugin(new TweetIRC.plugins.NodeKOPlugin()); kernel.startup(); // Force 1st tick kernel.onTimerTick(); });
  27. 27. London Ajax User Group: JavaScript MiniConf (18 th September 2010) Plugins dojo.declare(&quot;TweetIRC.BasePlugin&quot;, null, { _features: {}, _commands: [], ...
  28. 28. London Ajax User Group: JavaScript MiniConf (18 th September 2010) ChatRoomPlugin dojo.declare(&quot;TweetIRC.plugins.ChatRoomPlugin&quot;, [TweetIRC.BasePlugin], { _chatRooms: [], _selectedChatRoom: null, constructor: function(/* Object */args) { this._features = { 'TweetIRC.features.CommandListener': true, 'TweetIRC.features.GlobalMessageListener': true, 'TweetIRC.features.MessageListener': true, 'TweetIRC.features.DataPoller': true }; this._commands = [ 'JOIN', 'J' ];
  29. 29. London Ajax User Group: JavaScript MiniConf (18 th September 2010) Messaging dojo.publish(&quot;/commands&quot;, [{publisher:this, command:'/JOIN #dojo'}]); Pushing messages is easy, from anywhere on the browser onCommand: function(event) { if (event.command.indexOf('/')===0) { <...> for (var i=0; i<this._registeredPlugins.length; i++) { var plugin = this._registeredPlugins[i]; if (plugin.hasFeature('TweetIRC.features.CommandListener') && plugin.hasCommand(command)) { plugin.onCommand(command, args, event); }}} Goes into kernel …
  30. 30. London Ajax User Group: JavaScript MiniConf (18 th September 2010) Messaging /** * Handler for /commands */ onCommand: function(command, args, event) { //console.debug(&quot;got command:&quot;+command); //console.debug(args, event); if(command==='JOIN' || command==='J') { this._JOIN(args[0]); } }, … and ends in a plugin
  31. 31. London Ajax User Group: JavaScript MiniConf (18 th September 2010) The future <ul><li>U.I. Improvements
  32. 32. Long polling / streaming / Web sockets
  33. 33. HTML5 Storage
  34. 34. Support for additional networks (Facebook, ...) </li></ul>
  35. 35. London Ajax User Group: JavaScript MiniConf (18 th September 2010) The end Q. & A. José Moreira http://zemanel.eu http://twitter.com/zemanel http://pt.linkedin.com/in/josemoreira

×