modular, mobile, and reinventing web app development - phoenix mobile festival
DESCRIPTION
AMD: The Definitive Source http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/ Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile FestivalTRANSCRIPT
![Page 1: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/1.jpg)
© SitePen, Inc. All Rights Reserved
Modular, Mobile, and Reinventing Web App
DevelopmentPhoenix Mobile Festival
April 2012
presents
![Page 2: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/2.jpg)
© SitePen, Inc. All Rights Reserved
Nice to Meet you
Co-Founder of Dojo Toolkit
CEO, SitePen, Inc.
President, Dojo Foundation
Dylan Schiemann
@dylans @sitepen @dojo
![Page 3: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/3.jpg)
© SitePen, Inc. All Rights Reserved
Evolution of Web App Development
https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/
![Page 4: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/4.jpg)
© SitePen, Inc. All Rights Reserved
Evolution of Web App Development
https://secure.flickr.com/photos/dylans/3439037456/
Web 1.0
Dumb client, smart server
Focus on HTML & CSS, "separation of markup and presentation"
![Page 5: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/5.jpg)
© SitePen, Inc. All Rights Reserved
Evolution of Web App Development
Web 2.0
Smarter client, smart server, con!ict
Initial break of many paradigms
Search indexing, history, navigation
Didn't really account for mobile
DOM-centric
Ajax: sort of real-time
![Page 6: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/6.jpg)
© SitePen, Inc. All Rights Reserved
https://secure.flickr.com/photos/dylans/5206483166/
We Want More
![Page 7: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/7.jpg)
© SitePen, Inc. All Rights Reserved
Revolution: Separation of Data and UX
Users want access to data, info
in a variety of experiences
relevant to their current context
Aggregation
User Interfaces and experiences
Challenging past assumptions
statelessness, truly embracing REST
abusing markup for "separation of markup and presentation"
control and federation of data
https://secure.flickr.com/photos/dylans/5916167025/
![Page 8: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/8.jpg)
© SitePen, Inc. All Rights Reserved
Anatomy of Apps
![Page 9: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/9.jpg)
© SitePen, Inc. All Rights Reserved
Performance and Modularity
Difficult to mix and match code from different projects without risk of name collisions or dependency con!icts
Loading and executing dependencies
Cross-domain loading
Multiple versions of the same package, or load two different packages with the same name, or patching a single module with another module
![Page 10: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/10.jpg)
© SitePen, Inc. All Rights Reserved
User Interface Widgets
Even with HTML5, form controls are limited and inconsistent in their styling and capabilities.
Native vector graphics, audio, video
Drag-n-Drop, Multi-$le upload, grids, charts, gauges, and more...
Themes
![Page 11: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/11.jpg)
© SitePen, Inc. All Rights Reserved
Mobile Heterogeneity
Native requires learning many new languages for many new devices
Web has challenges to overcome.
![Page 12: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/12.jpg)
© SitePen, Inc. All Rights Reserved
Separate Data from UX
Separate UI from data handling
Independent evolution of UI components and data components
Separation of concerns (MVC, MVP, etc.)
Inversion of Control (IOC)
![Page 13: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/13.jpg)
© SitePen, Inc. All Rights Reserved
Real-Time
Competing Protocols (web sockets, long-polling)
Reconnection
Integration with data stores, local storage, events
![Page 14: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/14.jpg)
© SitePen, Inc. All Rights Reserved
Distribution
Web
Native
Hybrid
![Page 15: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/15.jpg)
© SitePen, Inc. All Rights Reserved
![Page 16: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/16.jpg)
© SitePen, Inc. All Rights Reserved
Code here
Dojo History and Roadmap
2005 2006 2007 2008 2009 2010 2011 20122004
First Code
Dojo Foundation Dojo 0.1 Dojo 0.4
Dojo 0.2 Dojo 0.9
Dojo 1.0
Dojo 1.2
Dojo 1.3
Dojo 1.4
Dojo 1.5
Dojo 1.6
Dojo 1.7
Dojo 1.8, 2.0
![Page 17: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/17.jpg)
© SitePen, Inc. All Rights Reservedhttp://dojotoolkit.org/
![Page 18: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/18.jpg)
© SitePen, Inc. All Rights Reserved
Dojo Toolkit: Project Goals
Uni$ed JavaScript toolkit for superior web and mobile apps
Fill the Gaps (browsers, platforms)
Awesome, Fast, Powerful, Efficient, Modular, Extensible
Business-friendly: grids, charts, forms, & data
Rich UI widgets (calendars, 3D carousel, etc)
![Page 19: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/19.jpg)
© SitePen, Inc. All Rights Reserved
Philosophy
Push the limits (vector graphics/WebGL, offline, HTML5, ...)
De$ne and adopt defacto standards (AMD, JSON Schema)
Developer productivity and tools
Open, free, & liberally licensed
with clear IP
JSON
![Page 20: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/20.jpg)
© SitePen, Inc. All Rights Reserved
HTML5 & CSS3
Native <audio> and <video>
More new elements
New <input> types
CSS animations
Mobile-speci$c CSS
Flexible layouts
![Page 21: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/21.jpg)
© SitePen, Inc. All Rights Reserved
Dojo Nano and AMD
"Base-less" Dojo
Only using the parts of Dojo you really need, on a much more granular level
Dojo 1.7 AMD loader <4K gzip/mini!ed
Asynchronous Module De$nition (AMD)
A grassroots standard for interoperable code modules
Client and Server
Plugin framework for additional extensibility
Default module system for Dojo 1.7+
![Page 22: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/22.jpg)
© SitePen, Inc. All Rights Reserved
Squeezing Performance
• Automated build with dependency resolution, AMD & has.js optimized builds.
• All from one place with full licensing and support.
Dojo Base
Dijit (View)
dojox Grid
dojo/store(Model)
Dojo Nano
![Page 23: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/23.jpg)
© SitePen, Inc. All Rights Reserved
Data Access: Dojo Object Store
Work on HTML5 IndexedDB recommendation
key/value approach to data access
local storage
but useful in other contextsaccessing data stores (JSON, XML, REST, etc.)
matches nicely with NoSQL
implemented in Persevere (middleware for SSJS, Node or Narwhal+Jack)
very clean approach to getting and setting data
modular layering of functionality like noti$cations
![Page 24: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/24.jpg)
© SitePen, Inc. All Rights Reserved
Modern Web Features
Native vector graphics: GFX
Audio and Video
DnD, multi-$le upload
Data attributes
Widgets
Web Sockets
Local storage
...
![Page 25: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/25.jpg)
© SitePen, Inc. All Rights Reserved
Application Controllers and Patterns
We don’t just build websites, we build web applications, so why just build mobile websites?
dojox/app is a full web and mobile application controller.
Manages scenes in mobile context
Asyncronously loads the application’s resources as they are needed.
Uses pub/sub for application-wide communication.
Provides commonly used widgets (AlertDialog, TextBox, ListSelector) for full-scale mobile apps.
![Page 26: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/26.jpg)
© SitePen, Inc. All Rights Reserved
Open Source Visual Tools for Dojo and HTML5
http://maqetta.org/
Maqetta
![Page 27: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/27.jpg)
© SitePen, Inc. All Rights Reserved
Cross-platform mobile Web apps
Dojo Mobile
Started in Dojo 1.5
Support for many HTML5 features
Open source (BSD)
Simple mobile UI paradigms, same data interactions
Native or general themes
Grids, charts, maps, gauges
![Page 28: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/28.jpg)
© SitePen, Inc. All Rights Reserved
Key Paradigms
Lightweight Dojo-based widgets for mobile webapps
Native access is not in the scope of Dojo Mobile
Works well with PhoneGap
Develop device-speci$c or device-neutral look & feel
CSS themes for iOS, Android, Blackberry devices
iOS, Android, and Blackberry style controls and widgets
A complete mobile widget framework
Fully integrated part of Dojo, yet lightweight
AMD compliant with minimal base dependencies
Reuse application code across devices
Server technology agnostic
![Page 29: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/29.jpg)
© SitePen, Inc. All Rights Reserved
http://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/intro_tweetview/http://dojotoolkit.org/features/mobile_showcase.php
TweetView and Feature Explorer
![Page 30: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/30.jpg)
© SitePen, Inc. All Rights Reserved
![Page 31: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/31.jpg)
© SitePen, Inc. All Rights Reserved
Touch and Scroll
dojox.mobile manages scrolling to allow for native paging simulation
A variety of layout container widgets are available which can respond to scrolling in different ways (Flippable View, Scrollable View)
Touch events are synchronized in mobile and desktop environments for more efficient development
![Page 32: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/32.jpg)
© SitePen, Inc. All Rights Reserved
Layout, Scenes, & Animations
Dojo Mobile creates layouts and animations which are consistent with the mobile OS.
You can use an unlimited number of scenes
The simple API allows you to move from scene to scene via basic moveTo attributes
Layout widgets have been constructed to be lightweight, and can be created declaratively or programmatically.
CSS Animations are primary animation source (faster) -- JavaScript is used primarily as a fallback.
![Page 33: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/33.jpg)
© SitePen, Inc. All Rights Reserved
Transition Effects
Dojo 1.7:
4 standard effects
16 new transition effects
![Page 34: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/34.jpg)
© SitePen, Inc. All Rights Reserved
Independently scrollable contentFixed Position Header
Single application can automatically adjust to side-by-side layout based on detection of screen dimensions
Side-by-side Tablet Layout vs. Phones
![Page 35: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/35.jpg)
© SitePen, Inc. All Rights Reserved
Vector Graphics, Charts, Gauges, Maps
![Page 36: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/36.jpg)
© SitePen, Inc. All Rights Reserved
Business Charts
Mobile enablement and optimizations for all existing Dojo chart types!
Themes adapted to small screen
Touch support for scrolling and panning
Interactive Legends
Smart label layouts
Chart Titles
![Page 37: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/37.jpg)
© SitePen, Inc. All Rights Reserved
Gauges
Mobile enablement and optimization of Dojo gauges! (Webkit mobile)
Several new high-quality gauge styles
Touch support for changing gauge values
![Page 38: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/38.jpg)
© SitePen, Inc. All Rights Reserved
Swipe to browse or change views
Carousel
![Page 39: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/39.jpg)
© SitePen, Inc. All Rights Reserved
Geo ChartingVector map component
Desktop and Mobile enabled with touch/zoom
Connect to a Dojo store for coloring map elements
Tooltips
Legend
![Page 40: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/40.jpg)
© SitePen, Inc. All Rights Reserved
OpenLayers Map Integration for DojoGeo-referenced positioning of GFX Shapes and Widgets
OpenLayers Maps
![Page 41: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/41.jpg)
© SitePen, Inc. All Rights Reserved
wire.js
Inversion of control container
Lazy-load application dependencies
Manage component lifecycle
DOM management
Pub / Sub
AOP
![Page 42: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/42.jpg)
© SitePen, Inc. All Rights Reserved
PhoneGap/Cordova
Build mobile apps with HTML, CSS, and JavaScript
Doesn’t compile into native code
Works with many devices
Build service for easy compiles
Easy to learn
Free
![Page 43: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/43.jpg)
© SitePen, Inc. All Rights Reserved
Dojo Mobile 1.8 Under Development
Accordion Grid Grid Layout Icon container and Badge
Form panel
Editable List
Menu Dialog
Video player
Audio player
Cube transition
Swap transition
Tree map
![Page 44: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/44.jpg)
© SitePen, Inc. All Rights Reserved
AMD
![Page 45: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/45.jpg)
© SitePen, Inc. All Rights Reserved
The Basics
Allows for asynchronous module loading and callback management
Allows for loading of non-AMD modules, sometimes using plugins (HTML templates, JSON/con$g $les, basic ".js" $les)
dojo/domReady!
dojo/text!
Works via script tag injection (or XHR) and onload events
![Page 46: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/46.jpg)
© SitePen, Inc. All Rights Reserved
The Bene$ts
Works cross-domain without issues
We’re simply injecting <script> tags!
Prevents the need for globals
Provides excellent encapsulation
Mix and match code from different projects
Load only what you need, expose only what you should!
Loads modules only once, caches them
Simple API: define and require
Create modules that are easily distributed
![Page 47: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/47.jpg)
© SitePen, Inc. All Rights Reserved
// We're not using the configuration object here, just an array of requirements and
// a callback. dojo/domReady! is a plug-in that we will explain in a moment.
require(["dojo/dom-construct", "dojo/domReady!"], function(domConstruct){
var newButton = domConstruct.create("button", {innerHTML: "foo"});
domConstruct.place(newButton, document.body, "last");});
// The same code in the legacy system
// dojo.require("dojo/dom"); //this module was included by default
dojo.ready(function(){
var newButton = dojo.create("button", {innerHTML: "foo"});
dojo.place(newButton, document.body, "last");})
require()
![Page 48: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/48.jpg)
© SitePen, Inc. All Rights Reserved
// Creating a widget with AMDdefine( ["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/TemplatedWidget.html"], function(declare, _WidgetBase, _TemplatedMixin, template){ return declare([_WidgetBase, _TemplatedMixin], { templateString: template }); });
// Note how the dependencies map into the function call!
Creating a widget with de$ne + declare
![Page 49: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/49.jpg)
© SitePen, Inc. All Rights Reserved
Objects Stores and IndexedDB
![Page 50: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/50.jpg)
© SitePen, Inc. All Rights Reserved
Why Object Store?
Separate UI from data handling
Independent evolution of UI components and data components
Object Store API redone in 1.6, follows the HTML5 IndexedDB object store API.
Positioned as successor to Dojo Data API
Also aligns with dojox/storage API
![Page 51: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/51.jpg)
© SitePen, Inc. All Rights Reserved
Data Backed Objects
A uniform API can provide access to data that comes from any source
In Dojo
Many widgets
DataGrid, dgrid
Charting
Django Template Language
![Page 52: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/52.jpg)
© SitePen, Inc. All Rights Reserved
Dojo Store Architecture
Tree dgrid ComboBox
CustomStoreJsonRestMemory
Dojo Store API
![Page 53: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/53.jpg)
© SitePen, Inc. All Rights Reserved
What it Provides
Uniform data access layer
Primarily an API speci$cation, but Dojo and DojoX include several implementations of various stores
Variable feature set, with feature discovery
Data is represented as JavaScript objects
![Page 54: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/54.jpg)
© SitePen, Inc. All Rights Reserved
Responsibility of Stores
Stores may delegate responsibilities to the server
Associate Items w/ Identifiers
Handle Queries
Sort Data
Save Data Changes
Trigger Notifications
![Page 55: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/55.jpg)
© SitePen, Inc. All Rights Reserved
Design Philosophy
Feature Detection LayerNo Separate Interfaces; Implement What is Needed
Simple Core APIEasy to Implement
Object Property MutationUse Plain JS Objects, Directly Access & Mutate Properties
(instead of data items)
![Page 56: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/56.jpg)
© SitePen, Inc. All Rights Reserved
Resource Oriented Programming
REST concepts applied to programming
Uniform interface
Layering, store wrappers can be used to add functionality
Easy to implement simple store, add wrappers for more advanced capability
Cacheable
![Page 57: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/57.jpg)
© SitePen, Inc. All Rights Reserved
Promise-Based, Functional
Same API for sync and async stores
async returns promises instead of values
sync stores can be used without callbacks for simplicity
dojo/when makes it easy to use stores generically (sync or async)
Highly functional query results, useful iterative functions
Noti$cations built around query results
![Page 58: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/58.jpg)
© SitePen, Inc. All Rights Reserved
Dojo Object Store API
![Page 59: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/59.jpg)
© SitePen, Inc. All Rights Reserved
Basic API
get(id, options) - Gets an object by identity
query(query, options) - Performs a query
put(object, options) - Stores/updates an object
add(object, options) - Adds an object to the store
remove(id, options) - Deletes an object
getIdentity(object) - Get the identity from an object
![Page 60: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/60.jpg)
© SitePen, Inc. All Rights Reserved
require(["dojo/store/JsonRest", "dojo/store/Observable"], function(JsonStore, Observable){ var foodStore = new store({ target: "/Food/" }); foodStore.get("cherry").then(function(cherry){ cherry.color = "red"; foodStore.put(cherry); }); foodStore.remove("pickle");
foodStore = Observable(foodStore);
var query = foodStore.query({color:"red"}); query.forEach(function(food){ //... }); query.observe(function(object, oldIndex, newIndex){ //... });});
Simple Example
![Page 61: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/61.jpg)
© SitePen, Inc. All Rights Reserved
Query Results
Query results object includes methods:
forEach
map
$lter
Based on Array methods, but always there, and may be asynchronous
total - count of all items when a range is used (can be a promise)
Provided by dojo/store/util/QueryResults
![Page 62: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/62.jpg)
© SitePen, Inc. All Rights Reserved
Core Stores
Concrete Stores
Memory - In memory
JsonRest - Connected to store through HTTP/REST
DataStore - Adapter for old Dojo Data stores
Store Wrappers
Observable
![Page 63: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/63.jpg)
© SitePen, Inc. All Rights Reserved
dojox/socket.js
Check for WebSocket
support
Connect to WebSocket
server
Make XHR request
Yes
No
Connection failure (due to proxy)
Receive response
Receive message
message event
Very lightweight socket communication
WebSocket if available
Fallback to XHR if not available
![Page 64: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/64.jpg)
© SitePen, Inc. All Rights Reserved
dojox.socket
Wraps the WebSocket API with an API consistent with the rest of the Dojo Toolkit
Provides fallback for servers that don’t support WebSockets: dojox.socket.LongPoll
Provides dojox.socket.Reconnect to automatically reconnect if disconnected
Provides an on method which aliases socket.connect
![Page 65: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/65.jpg)
© SitePen, Inc. All Rights Reserved
dojox.socket and Comet Servers
dojox.socket works with CometD, Socket.IO, Tunguska, Hookbox, Orbited, etc.
http://www.sitepen.com/blog/2010/10/31/dojo-websocket/
![Page 66: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/66.jpg)
© SitePen, Inc. All Rights Reserved
require(["dojox/socket"], function (Socket) { // Create socket instance var socket = new Socket("/comet");
// Create open event listener socket.on("open", function (event) { console.log("Socket opened successfully!"); });
// Create message event listener socket.on("message", function (event) { console.log("Message received!", event, event.data); // Send a message back! socket.send("Received your message!"); });
// Customized headers var socket2 = new Socket({ url: "/comet", headers: { "Accept": "application/json", "Content-Type": "application/json" } });});
dojox.socket Sample
![Page 67: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/67.jpg)
© SitePen, Inc. All Rights Reserved
dgrid
Created by SitePen
Available on GitHubgithub.com/sitepen/dgrid
Mobile-ready Grid widget
Several plugins and enhancements available
Native or general themes
Quick and efficient
![Page 68: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/68.jpg)
© SitePen, Inc. All Rights Reserved
Lightweight
<12KB mini$ed
<32KB mini$ed with all dependencies
less than Dojo Base, can go
baseless (nano)
Easy to grok
https://github.com/sitepen/dgrid
![Page 69: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/69.jpg)
© SitePen, Inc. All Rights Reserved
Object Store Driven
Fast, lightweight stores
Correct query observation events
Uses the new HTML5-inspired object store API directly
![Page 70: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/70.jpg)
© SitePen, Inc. All Rights Reserved
Modular, Composable
Pluggable design
Different grid components combined as mixins
Column components can be used per-column
![Page 71: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/71.jpg)
© SitePen, Inc. All Rights Reserved
Performance
Fast. Very Fast.
Loads much faster being smaller
Renders results about 6-10x faster than the DataGrid!
Optimized for modern platforms (like mobile)
![Page 72: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/72.jpg)
© SitePen, Inc. All Rights Reserved
DOM-based Element Creation
innerHTML no longer fastest approach
Direct DOM creation makes easy to reference, connect, modify elements at every step in rendering
Plugins are super simple
Tree is <100 lines of code!
![Page 73: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/73.jpg)
© SitePen, Inc. All Rights Reserved
CSS-Driven
Almost no inline styles
Easy customization via CSS
No coding necessary for styling
Further improves performance
![Page 74: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/74.jpg)
© SitePen, Inc. All Rights Reserved
CSS Modularity
Proper skin vs structure separation
Easing skinning with generic classes
Utilizes XStyle
Framework for shimming and extending CSS
Handles loading CSS
Parsing CSS
Uses CSS plugins to handle speci$c shims and extensions
![Page 75: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/75.jpg)
© SitePen, Inc. All Rights Reserved
Features!
Start with basics...
Tabular view of data
Headers with scrolling body
Virtual paging/scrolling
Sorting
Keyboard Navigation
![Page 76: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/76.jpg)
© SitePen, Inc. All Rights Reserved
Feature Comparison
![Page 77: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/77.jpg)
© SitePen, Inc. All Rights Reserved
Complex Layout: dTunes
![Page 78: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/78.jpg)
© SitePen, Inc. All Rights Reserved
The Dojo FoundationOpen Home for the Open Web
![Page 79: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/79.jpg)
© SitePen, Inc. All Rights Reserved
Community
![Page 80: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/80.jpg)
© SitePen, Inc. All Rights Reserved
http://vepi-2k3208aja.acs.cnet-caen.fr/df/
Community App
![Page 81: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/81.jpg)
© SitePen, Inc. All Rights Reserved
Foundation Structure
The Dojo Foundation is the home of great 100-point open source projects, created by extraordinary people and companies to solve important problems.
501(c)(6) non-pro$t foundationjust enough foundation without bureaucracy or excessive process
5 member board
Toolkit project lead council (1 per project)
Voting by committers (generally through mailing lists)
Committers nominated by project, reviewed by board
Projects are very autonomous
All code contributed through CLAs
![Page 82: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/82.jpg)
© SitePen, Inc. All Rights Reserved
Foundation Projects
![Page 83: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/83.jpg)
© SitePen, Inc. All Rights Reserved
Major Contributors & Users
IBM, Orange, SitePen, TIBCO800 Flowers, Abbott Labs, Accenture, Alcatel-Lucent, ADP, AOL, ASU, Bank of Montréal, Barclays, Blue Coat Systems, Bottomline Technologies, Bristol-Myers Squibb, Brocade, BMW, Calabrio, Cambridge Semantics, Carsoni$ed Treehouse, CGI, Chase, Chess.com, Chill.com, Cisco, Citi, Coventry Healthcare, Cox, Daimler, Digital Reasoning, Disney, Eclipse Orion, ESRI, Eye-Fi, Fidelity Investments, Field Aware, Fiserv, Google, ING, Intalio, KLP, Liberty Mutual, Lemonade, Lufthansa, Marriott, Mirapoint, Mozilla, Namesake, NASA, NOAA, OpenClass, Oracle, Orange, Pearson, Pershing, Premier, QBE, Reach Local, Sage, Serena Software, Shell, Thomson Reuters, TIBCO, UK, Uniface, USA, uxebu, Verizon Wireless, Vidéotron, vmware (Spring), Vodafone, Vodori Pepper, Wall Street Journal, Williams-Sonoma, Zend, and 1000s more...
![Page 84: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/84.jpg)
© SitePen, Inc. All Rights Reserved
Significant Tutorial Series (55 and counting!)
http://dojotoolkit.org/documentation/
Documentation
![Page 85: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/85.jpg)
© SitePen, Inc. All Rights Reserved
Getting Started
Hello Dojo: http://dojotoolkit.org/documentation/tutorials/1.7/hello_dojo/
Start a Dojo project: http://www.sitepen.com/blog/2011/05/04/what-is-the-best-way-to-start-a-dojo-project/
Dojo Boilerplate: https://github.com/csnover/dojo-boilerplate
dgrid: http://www.sitepen.com/blog/2011/10/26/introducing-the-next-grid-dgrid/
![Page 86: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/86.jpg)
© SitePen, Inc. All Rights Reserved
Result: Modular Tools
Tools to mix and match to create your app
Separate data from UI logic simple and seamlessly
Modular enough for very simple projects, !exible and consistent enough to handle the most challenging, feature-rich web apps
![Page 87: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/87.jpg)
© SitePen, Inc. All Rights Reserved
![Page 88: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/88.jpg)
© SitePen, Inc. All Rights Reserved
SitePen: We Build Extraordinary Apps.
Desktop and Mobile Web App professional services
Creators and leaders of open source web software
![Page 89: Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554edd26b4c905911d8b497c/html5/thumbnails/89.jpg)
© SitePen, Inc. All Rights Reserved
Thanks! Q&A
SitePen sitepen.com
Dojo Toolkit dojotoolkit.org
Twitter: @dylans @sitepen @dojo