• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DojoConf: Building Large Apps
 

DojoConf: Building Large Apps

on

  • 4,252 views

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

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

Statistics

Views

Total Views
4,252
Views on SlideShare
3,899
Embed Views
353

Actions

Likes
5
Downloads
0
Comments
1

4 Embeds 353

http://coderwall.com 323
http://lanyrd.com 23
http://paper.li 6
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    DojoConf: Building Large Apps DojoConf: Building Large Apps Presentation Transcript

    • building large apps rebecca murphey • dojoconf • @rmurpheySaturday, September 17, 11
    • 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
    • Saturday, September 17, 11
    • 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
    • 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
    • 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
    • Data URL Change Router Route Device Storage RemoteSaturday, September 17, 11
    • Page Controller Component Page Factory Component Capability ComponentSaturday, September 17, 11
    • UI Browser Page Container Old Page Controller New Page Controller Component Component Component Component Component ComponentSaturday, September 17, 11
    • Data URL Change Router Route Device Storage RemoteSaturday, September 17, 11
    • #/node/123Saturday, September 17, 11
    • 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
    • Page Controller Component Page Factory Component Capability ComponentSaturday, September 17, 11
    • 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
    • Saturday, September 17, 11
    • 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
    • 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
    • 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
    • Saturday, September 17, 11
    • 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
    • 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
    • Page Controller Component Page Factory Component Capability ComponentSaturday, September 17, 11
    • UI Browser Page Container Old Page Controller New Page Controller Component Component Component Component Component ComponentSaturday, September 17, 11
    • 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
    • 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
    • Saturday, September 17, 11
    • http://toura.github.com/mulberry @touradev rebeccamurphey.com • blog.rebeccamurphey.com • @rmurpheySaturday, September 17, 11