DojoConf: Building Large Apps

4,954 views

Published on

An overview of the JavaScript architecture that runs Toura Mulberry, an open-source framework for building content-rich mobile applications.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
4,954
On SlideShare
0
From Embeds
0
Number of Embeds
355
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

DojoConf: Building Large Apps

  1. 1. building large apps rebecca murphey • dojoconf • @rmurpheySaturday, 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 ComponentSaturday, 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 MeyerSaturday, 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 ComponentSaturday, September 17, 11
  7. 7. Data URL Change Router Route Device Storage RemoteSaturday, September 17, 11
  8. 8. Page Controller Component Page Factory Component Capability ComponentSaturday, September 17, 11
  9. 9. UI Browser Page Container Old Page Controller New Page Controller Component Component Component Component Component ComponentSaturday, September 17, 11
  10. 10. Data URL Change Router Route Device Storage RemoteSaturday, September 17, 11
  11. 11. #/node/123Saturday, 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 ComponentSaturday, 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 & methodsSaturday, 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 DisplaySaturday, 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 ComponentSaturday, September 17, 11
  23. 23. UI Browser Page Container Old Page Controller New Page Controller Component Component Component Component Component ComponentSaturday, 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 • @rmurpheySaturday, September 17, 11

×