Successfully reported this slideshow.
Your SlideShare is downloading. ×

DojoConf: Building Large Apps

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 27 Ad
Advertisement

More Related Content

Similar to DojoConf: Building Large Apps (20)

Advertisement

Recently uploaded (20)

DojoConf: Building Large Apps

  1. 1. building large apps rebecca murphey • dojoconf • @rmurphey Saturday, September 17, 11
  2. 2. A content management system for constructing content-rich mobile applications. A content publishing system that uses Dojo and PhoneGap to create a mobile app from the output of the CMS. Saturday, September 17, 11
  3. 3. Saturday, September 17, 11
  4. 4. Data Page Controller Component URL Change Router Route Page Factory Component Capability Component Device Storage Remote UI Browser Page Container Old Page Controller New Page Controller Component Component Component Component Component Component Saturday, September 17, 11
  5. 5. e secret to building large apps is never build large apps. Break up your applications into small pieces. en, assemble those testable, bite-sized pieces into your big application. Justin Meyer Saturday, September 17, 11
  6. 6. Data Page Controller Component URL Change Router Route Page Factory Component Capability Component Device Storage Remote UI Browser Page Container Old Page Controller New Page Controller Component Component Component Component Component Component Saturday, September 17, 11
  7. 7. Data URL Change Router Route Device Storage Remote Saturday, September 17, 11
  8. 8. Page Controller Component Page Factory Component Capability Component Saturday, September 17, 11
  9. 9. UI Browser Page Container Old Page Controller New Page Controller Component Component Component Component Component Component Saturday, September 17, 11
  10. 10. Data URL Change Router Route Device Storage Remote Saturday, September 17, 11
  11. 11. #/node/123 Saturday, September 17, 11
  12. 12. function nodeRoute(route, nodeId, pageState) { pageState = pageState || {}; var nodeModel = toura.app.Data.getModel(nodeId), page = toura.app.UI.getCurrentPage(); if (!page || !page.node || nodeId !== page.node.id) { page = toura.app.PageFactory.createPage('node', nodeModel); page.init(pageState); toura.app.UI.showPage(page, nodeModel); } else { page.init(pageState); } } Saturday, September 17, 11
  13. 13. Page Controller Component Page Factory Component Capability Component Saturday, September 17, 11
  14. 14. function nodeRoute(route, nodeId, pageState) { pageState = pageState || {}; var nodeModel = toura.app.Data.getModel(nodeId), page = toura.app.UI.getCurrentPage(); if (!page || !page.node || nodeId !== page.node.id) { page = toura.app.PageFactory.createPage('node', nodeModel); page.init(pageState); toura.app.UI.showPage(page, nodeModel); } else { page.init(pageState); } } Saturday, September 17, 11
  15. 15. Saturday, September 17, 11
  16. 16. this.connect(this.videoList, 'onSelect', function(assetId) { var video = this._videoById(assetId); this.videoCaption.set('content', video.caption || ''); this.videoPlayer.play(assetId); }); Saturday, September 17, 11
  17. 17. videoPlayer.set('mediaId', mediaId); _setMediaIdAttr : function(mediaId) { var media = this.media = this.mediasCache[mediaId]; if (this.useHtml5Player && !this.player) { this._queuedMedia = media; return; } this._queuedMedia = null; if (this.player) { this.player.src = media.url; } }, Saturday, September 17, 11
  18. 18. myComponent.set(key, val) to change state myComponent.on<Evt>(data) to announce state changes myComponent.subscribe(topic) to react to published topics dojo.publish(topic, data) to announce occurrences of app-wide interest myController.connect(component, evt, handler) to listen for events & methods Saturday, September 17, 11
  19. 19. Saturday, September 17, 11
  20. 20. Search Input toura.app.Data.search(term) searchInputInstance.onSearch(term) Search Page Controller Application Data searchResults.set('results', resultSet) return resultSet Search Results Display Saturday, September 17, 11
  21. 21. dojo.declare( 'toura.pageControllers.search.Search', [ toura.pageControllers._Page ], { // ... postCreate : function() { // ... this.connect(this.searchInput, 'onSearch', '_handleSearch'); }, _handleSearch : function(term) { if (term === this.lastSearchTerm) { return; } this.searchResults.set('results', toura.app.Data.search(term)); }, // ... }); Saturday, September 17, 11
  22. 22. Page Controller Component Page Factory Component Capability Component Saturday, September 17, 11
  23. 23. UI Browser Page Container Old Page Controller New Page Controller Component Component Component Component Component Component Saturday, September 17, 11
  24. 24. function nodeRoute(route, nodeId, pageState) { pageState = pageState || {}; var nodeModel = toura.app.Data.getModel(nodeId), page = toura.app.UI.getCurrentPage(); if (!page || !page.node || nodeId !== page.node.id) { page = toura.app.PageFactory.createPage('node', nodeModel); page.init(pageState); toura.app.UI.showPage(page, nodeModel); } else { page.init(pageState); } } Saturday, September 17, 11
  25. 25. showPage : function(page, node) { if (page.startup) { var s = dojo.subscribe('/page/transition/end', function() { page.startup(); dojo.unsubscribe(s); }); } this.containers.pages.set('content', page); this.currentPage = page; } Saturday, September 17, 11
  26. 26. Saturday, September 17, 11
  27. 27. http://toura.github.com/mulberry @touradev rebeccamurphey.com • blog.rebeccamurphey.com • @rmurphey Saturday, September 17, 11

×