• Save
Web-5 2012: Reinventing Web App Development
 

Web-5 2012: Reinventing Web App Development

on

  • 4,227 views

Reinventing web app development

Reinventing web app development

Statistics

Views

Total Views
4,227
Views on SlideShare
4,220
Embed Views
7

Actions

Likes
2
Downloads
0
Comments
0

2 Embeds 7

http://speakerrate.com 6
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 1.7 is the API alpha for 2.0\nNano (baseless release)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • tlmSiblingOfDojo: Top-level Module Sibling of Dojo\n
  • \n
  • Point out that in this case, both dojo and app are now locals, not globals, much faster lookups\n
  • Explicitly identifying your modules makes it harder to relocate your modules for other apps and can cause name collisions.\n
  • \n
  • Point out the plugin to replace dojo.cache\nAlso point out that we don't have to give an explicit name, though this has potential issue if we're trying to use this widget declaratively\n
  • \n
  • \n
  • \n
  • \n
  • Point out "require" in the deps. Emphasize that it works like normal require, except that it work with relative module IDs in this scenario\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Point out that eventHandlers will be *either* the w3cHandlers OR the ieHandlers, dependent on the has check\n
  • \n
  • \n
  • \n
  • Aside: The dojo.data API hasn't gone away and as of 1.6 is still implemented by all the dojo and dojox data stores and consumed by most/all dijit and dojox widgets. By 2.0, all data consumers (e.g. widgets) will migrate to use the Store API. There are adapters to allow Dojo Data consumers to use Store API providers, and Store API consumers to use Dojo Data API providers. \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Graphic later details the -1 return values.\nSteps: Query executed, Iterate over results, rendering them, Listen for changes, Get the total count (sync or async), Wait for rendering to finish (sync or async)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • This adapter implements the dojo.data API, and allows you to access a new object store through the dojo.data API. This is very useful if you implement or use a new object store, but need to access through an existing widget that expects a dojo.data store.\n
  • Note that here we're showing a more AMD-like example, where we're not having to fully qualify the names like dojo.store.Memory or dijit.Tree etc.\n
  • \n
  • \n
  • \n
  • \n
  • The Observable store wrapper adds the ability to monitor or observe a result set, and get notified when data changes. This plays a similar role as dojo data’s notification API, but is more useful since it is within the context of a specific query. The observe() callback gets called anytime a data change takes place.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Introduce SitePen; more details are on the next slide.\n
  • \n\n\n
  • \n

Web-5 2012: Reinventing Web App Development Web-5 2012: Reinventing Web App Development Presentation Transcript

  • presents Web-5 2012 Modular, Mobile, and Reinventing Web App Development: Dojo 1.7 and 2.0© SitePen, Inc. All Rights Reserved
  • Nice to Meet you Dylan Schiemann Co-Founder of Dojo Toolkit CEO, SitePen, Inc. President, Dojo Foundation @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved
  • Evolution of Web App Development https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/© SitePen, Inc. All Rights Reserved
  • Evolution of Web App Development Web 1.0 Dumb client, smart server Focus on HTML & CSS, "separation of markup and presentation"© SitePen, Inc. All Rights Reserved https://secure.flickr.com/photos/dylans/3439037456/
  • Evolution of Web App Development Web 2.0 Smarter client, smart server, conflict Initial break of many paradigms Search indexing, history, navigation Didnt really account for mobile DOM-centric Ajax: sort of real-time© SitePen, Inc. All Rights Reserved
  • We Want Morehttps://secure.flickr.com/photos/dylans/5206483166/ © 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© SitePen, Inc. All Rights Reserved https://secure.flickr.com/photos/dylans/5916167025/
  • Multifarious Experiences© SitePen, Inc. All Rights Reserved
  • © SitePen, Inc. All Rights Reserved
  • Dojo History and Roadmap Code here Dojo Foundation Dojo 0.1 Dojo 0.4 Dojo 1.0 Dojo 1.3 Dojo 1.5 Dojo 1.7 First Code Dojo 0.2 Dojo 0.9 Dojo 1.2 Dojo 1.4 Dojo 1.6 Dojo 1.8, 2.0 2004 2005 2006 2007 2008 2009 2010 2011 2012© SitePen, Inc. All Rights Reserved
  • http://dojotoolkit.org/ © SitePen, Inc. All Rights Reserved
  • Dojo Toolkit: Project Goals Unified 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)© SitePen, Inc. All Rights Reserved
  • Philosophy Push the limits (vector graphics/WebGL, offline, HTML5, ...) Define and adopt defacto standards (AMD, JSON Schema) Developer productivity JSON and tools Open, free, & liberally licensed with clear IP© SitePen, Inc. All Rights Reserved
  • Whats Driving Us? Less is more uxebu experiments and embedJS Microtoolkits Splitting things out, bringing them back together Mobile Evolution of loaders/modules Evolution of browsers/HTML5© SitePen, Inc. All Rights Reserved
  • Major Changes and Additions (1.6) Dojo Object Store Feature detection/has.js LESS CSS framework HTML5 data attributes AMD (Asynchronous module definition) Android, IE9, FF4+ support dojox.socket, Stateful Dojo Web Builder Tutorials, Docs© SitePen, Inc. All Rights Reserved
  • Major Changes and Additions (1.7) Query, events refactor (including delegation) AMD refactor complete (async loader) Mobile Blackberry 6+ Touch events in Dijit dojox/app, dojox/mvc Dojo Foundation Packages dgrid, CPM, NPM Tutorials, docs, Maqetta© 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 contexts accessing 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 notifications© SitePen, Inc. All Rights Reserved
  • Application Controller: dojox/app 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.© SitePen, Inc. All Rights Reserved
  • Maqetta Open Source Visual Tools for Dojo and HTML5http://maqetta.org/© SitePen, Inc. All Rights Reserved
  • dgrid Lightweight, fast, performant, highly flexible List and Grid plug-in© 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/minified Asynchronous Module Definition (AMD) A grassroots standard for interoperable code modules Client and Server Plugin framework for additional extensibility Default module system for Dojo 1.7+ Works with jQuery, MooTools (2.0), and hundreds of© SitePen, Inc. All Rights Reserved
  • Squeezing Performance • Automated build Dojo Nano with dependency Dojo Base resolution, AMD & dojo/store (Model) has.js optimized builds. • All from one place with full licensing and Dijit (View) support. dojox Grid© SitePen, Inc. All Rights Reserved
  • Dojo Mobile Cross Platform Mobile WebApps Started in Dojo 1.5 Open source (BSD) Support for many Simple mobile UI HTML5 features and paradigms, same data beyond interactions© 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-specific 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© SitePen, Inc. All Rights Reserved
  • TweetView and Feature Explorerhttp://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/intro_tweetview/http://dojotoolkit.org/features/mobile_showcase.php© SitePen, Inc. All Rights Reserved
  • © SitePen, Inc. All Rights Reserved
  • Touch/Scroll, Layouts, Scenes, Animations© SitePen, Inc. All Rights Reserved
  • Charts, Gauges, and Maps© SitePen, Inc. All Rights Reserved
  • AMD© SitePen, Inc. All Rights Reserved
  • What is AMD? Asynchronous Module Definition A grassroots standard for interoperable code modules Client and Server Plugin framework for additional extensibility Default module system for Dojo 1.7+© SitePen, Inc. All Rights Reserved
  • AMD Basics Creates two global functions, require and define define.amd is used to indicate that define is actually an AMD-compatible loader and not some random function Modules are grouped into collections called packages; dojo, dijit, and dojox are all examples of packages Modules normally have a 1:1 mapping to files (except when built)© SitePen, Inc. All Rights Reserved
  • Why AMD is Awesome Easy to mix and match code from different projects without risk of name collisions or dependency conflicts Loads and executes dependencies asynchronously and in parallel; much faster during development Supports cross-domain loading out of the box, no special builds required Supports all debuggers out of the box, no need for hacks like debugAtAllCosts or forcing xdomain loading Trivial to load multiple versions of the same package, or load two different packages with the same name, or patch a single module with another module© SitePen, Inc. All Rights Reserved
  • AMD in the wild BBC iPlayer© SitePen, Inc. All Rights Reserved
  • AMD in the wild© SitePen, Inc. All Rights Reserved
  • AMD in the wild Firebug 1.8+, Cordova (PhoneGap), Shipyard© SitePen, Inc. All Rights Reserved
  • AMD Module Identifiers Look like path fragments; e.g. dijit/form/Button Work a lot like paths, too; relative path fragments like "./" and "../" can be used to refer to other modules within the same package  Necessary for fully portable packages Can be aliased/overridden to point to different code Loaders currently differ on how to do this© SitePen, Inc. All Rights Reserved
  • Loading non-AMD code Special module identifiers can be used to load arbitrary, non-AMD scripts as dependencies, in which case the modules returned value will be undefined: Any identifier starting with "/" Any identifier starting with a protocol (e.g. "http:", "https:") Any identifier ending with ".js" curl.js and perhaps others use js! prefix (e.g. "js!https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/ mootools-yui-compressed.js© SitePen, Inc. All Rights Reserved
  • AMD Modules Defined with the define function Not actually resolved until they they are required (lazy instantiation) Factory is only called once; the return value is cached by the loader and shared between all modules Special plugin modules exist to extend loader functionality© SitePen, Inc. All Rights Reserved
  • Configuring AMD Loaders Given this directory structure, the configuration would look like so: require({   baseUrl: "js/",   packages: [     { name: "dojo", location: "lib/dojo" },     { name: "dijit", location: "lib/dijit" },     { name: "dojox", location: "lib/dojox" },     { name: "my", location: "my" },     { name: "util", location: "util" },     { name: "external", location: "http://foo.com/external" }   ] });© SitePen, Inc. All Rights Reserved
  • Configuring AMD Loaders baseUrl: defines the base path for all modules; can be relative or absolute Relative values are relative to the HTML file in browsers and relative to the current working directory on servers packages: defines all of the packages registered for the application  name is the name of the package location is the location of the package; relative paths are relative to baseUrl main is the name of the module that will be loaded if someone tries to require the package itself; this defaults to "main" (e.g. requiring "dojo" will load the "dojo/main" module)© SitePen, Inc. All Rights Reserved
  • Configuring AMD Loaders Many other configuration options exist; only packages is really necessary for a working application If baseUrl and tlmSiblingOfDojo are both not set, Dojo 1.7s loader uses the directory above the dojo/ directory as baseUrl© SitePen, Inc. All Rights Reserved
  • require() require takes three arguments: configuration: Optional, a configuration object for the loader dependencies: Optional, an array of strings as a list of module identifiers to load before calling the callback callback: Optional, a function to call when dependencies are loaded What does it do? Reconfigures the loader at runtime Loads modules and executes an optional callback when they are loaded, passing loaded modules into the© SitePen, Inc. All Rights Reserved
  • require() // Were not using the configuration object here, // just an array of requirements and a callback require(["dojo", "populizr/app"], function(dojo, app){ // Do something with dojo and app }); // The same code in the legacy system dojo.require("populizr.app"); dojo.ready(function(){ // Do something with dojo and populizr.app })© SitePen, Inc. All Rights Reserved
  • define() define takes three arguments: moduleId: Optional, a string to explicitly identify the module dependencies: Optional, an array of strings as a list of module identifiers to load before calling the factory factory: The value of the module, or a function that returns the value of the module What does it do? Defines the value of a module Typically the moduleId is reserved for the build system - dont explicitly identify your modules!© SitePen, Inc. All Rights Reserved
  • Creating a widget before // Creating a widget old style dojo.provide("populizr.TemplatedWidget"); dojo.require("dijit._WidgetBase"); dojo.require("dijit._TemplatedMixin"); dojo.declare("populizr.TemplatedWidget", [dijit._WidgetBase, dijit._TemplatedMixin], { templateString: dojo.cache("populizr","templates/ TemplatedWidget.html"); });© SitePen, Inc. All Rights Reserved
  • Creating a widget with AMD and declare // Creating a widget with AMD define( ["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!© SitePen, Inc. All Rights Reserved
  • define() The value given for a module can also be just a plain object In this case, the dependencies will still be resolved as normal, but obviously will not be passed to the factory, since it is not a function // In populizr/config.js define(["populizr/app"], { enabled: true, animDelay: 500 });© SitePen, Inc. All Rights Reserved
  • define() Differences between these two methods: AMD is less verbose AMD is fully self-encapsulated; no references to global variables or the modules own package name Faster scope lookups Better minification Impossible to forget a dependency and still have working code Zero global namespace pollution Completely portable© SitePen, Inc. All Rights Reserved
  • Conditional requires Use cases for conditional requirements: Dependencies that cannot be determined until runtime dojox/gfx uses this concept to decide which rendering engine to use (VML, SVG, canvas, etc) Modules that you only want to load when a certain condition occurs (configuration, event, etc)© SitePen, Inc. All Rights Reserved
  • Special Module Names require Context sensitive require Relative module lookups dont work with global require exports An object that is the initial value of the module If you are returning an object with functions defined on it, use this instead of creating and returning a new object© SitePen, Inc. All Rights Reserved
  • Special Module Names define(["dojo/dom-construct", "dojo/on", "require", "dojo/_base/ window", "dojo/domReady!" ], function (domConstruct, on, require, win) { var debugButton = domConstruct.create(input, { type: button, value: Debug }, win); on(debugButton, "click", function () { require([ "./debugger/console" ], function (console) { console.open(); }); }); });© SitePen, Inc. All Rights Reserved
  • dgrid and Dojo Store require(["dgrid/List", "dgrid/OnDemandGrid","dgrid/Selection", "dgrid/editor", "dgrid/Keyboard", "dgrid/tree", "dojo/_base/declare", "dojo/store/JsonRest", "dojo/ store/Observable", "dojo/store/Cache", "dojo/store/Memory", "dojo/domReady!"], function(List, Grid, Selection, editor, Keyboard, tree, declare, JsonRest, Observable, Cache, Memory){ var testStore = Observable(Cache(JsonRest({ target:"./data/rest.php?", idProperty: "id", query: function(query, options){ return JsonRest.prototype.query.call(this, query, options); } }), Memory())); testStore.getChildren = function(parent, options){ return testStore.query({parent: parent.id}, options); }; // ...© SitePen, Inc. All Rights Reserved
  • dgrid and Dojo Store (continued) // ... var columns = [ tree({label:Name, field:name, sortable: false}), {label:Id, field:id, sortable: false}, editor({label:Comment, field:comment, sortable: false}, "text"), editor({label:Boolean, field:boo, sortable: false, autoSave: true}, "checkbox") ]; window.grid = new (declare([Grid, Selection, Keyboard]))({ store: testStore, getBeforePut: false, columns: columns }, "grid"); });© SitePen, Inc. All Rights Reserved
  • https://github.com/SitePen/dgrid/blob/master/test/JsonRest.html© SitePen, Inc. All Rights Reserved
  • Plugins Extend AMD loaders in lots of useful ways Common plugins available with most loaders are "text", "i18n", and "domReady" Plugin dependencies are identified by the exclamation point in the module identifier: "dojo/ text!", "dojo/i18n!", "dojo/domReady!" Data to the left of the "!" identifies the plugin to load; data to the right of the "!" is passed to the plugin for processing© SitePen, Inc. All Rights Reserved
  • dojo/text Loads a string from a file Replaces dojo.cache Used mostly for loading template strings, but can load any string Build system interns strings loaded using dojo/text, just like dojo.cache // in populizr/quoteLogger.js text plugin Compatible with RequireJSs define([ "dojo/text!./quotes.txt" ], function (quotes) { // quotes will simply be the content of the file, // so well split on newlines var quotes = quotes.split("n"); // Write out a random quote to the console console.log(quotes[Math.floor(quotes.length * Math.random())]); });© SitePen, Inc. All Rights Reserved
  • dojo/i18n Loads an internationalization bundle Replaces dojo.requireLocalization and dojo.getLocalization Compatible with RequireJSs i18n plugin define( [ "dojo/i18n!dijit/nls/common", "dojo/i18n!dijit/nls/common/it" ], function (common, commonIT) { console.log(common.buttonCancel); // "Cancel" console.log(commonIT.buttonCancel); // "Annula" } );© SitePen, Inc. All Rights Reserved
  • dojo/domReady and dojo/ready Ensures the module does not resolve until the DOM is ready Replaces dojo.ready Compatible with RequireJSs domReady plugin dojo/ready implements a priority queue, so applications can register which callbacks fire first by setting a priority for each callback require([ "dojo/domReady!" ], function () { console.log("DOM is ready!"); }); require(["dojo/ready", "dojo/parser", "dijit/registry", "dijit/Dialog"], function(ready, parser, registry){ ready(function(){ // This wont run until the DOM has loaded, the parser has run, and other // modules like dijit/hccss have also run. var dialog = registry.byId("myDialog"); ... }); });© SitePen, Inc. All Rights Reserved
  • dojo/has Allows modules to be conditionally loaded, using has.js features Replaces dojo.requireIf // in populizr/configureEvents.js define( [ "dojo/has!dom-attachEventListener?./events/w3cHandlers:./ events/ieHandlers" ], function (eventHandlers) { // Do something with eventHandlers } );© SitePen, Inc. All Rights Reserved
  • Module Templatehttps://github.com/kriszyp/commonjs-package-template/blob/master/component.js© SitePen, Inc. All Rights Reserved
  • Dojo Foundation Packageshttp://packages.dojofoundation.org/ 60 Packages and growing© SitePen, Inc. All Rights Reserved
  • Objects Stores and IndexedDB© 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© 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© SitePen, Inc. All Rights Reserved
  • Dojo Store Architecture Tree dgrid ComboBox Dojo Store API Memory JsonRest CustomStore© SitePen, Inc. All Rights Reserved
  • What it Provides Uniform data access layer Primarily an API specification, but Dojo and DojoX include several implementations of various stores Variable feature set, with feature discovery Data is represented as JavaScript objects© SitePen, Inc. All Rights Reserved
  • Responsibility of Stores Associate Items w/ Identifiers Handle Queries Sort Data Save Data Changes Trigger Notifications Stores may delegate responsibilities to the server© SitePen, Inc. All Rights Reserved
  • Design Philosophy Simple Core API Easy to Implement Feature Detection Layer No Separate Interfaces; Implement What is Needed Object Property Mutation Use Plain JS Objects, Directly Access & Mutate Properties (instead of data items)© 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© 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 Notifications built around query results© SitePen, Inc. All Rights Reserved
  • Dojo Object Store API© 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© SitePen, Inc. All Rights Reserved
  • Simple Example 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){ //... }); });© SitePen, Inc. All Rights Reserved
  • Query Results Query results object includes methods: forEach map filter 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© SitePen, Inc. All Rights Reserved
  • Using Query Results in a Widget require(["dojo/store/JsonRest", "dojo/store/Observable", "dojo/_base/Deferred"], function(JsonStore, Observable, Deferred){ var foodStore = new store({ target: "/Food/"}); var query = foodStore.query({color:"red"}); var renderedNodes = [], i = 0; query.forEach(function(food){ renderedNodes[i++] = renderFood(food); }); query.observe(function(food, oldIndex, newIndex){ // on a data change if(oldIndex > -1){ var oldNode = renderedNodes.splice(oldIndex, 1); dojo.destroy(oldNode); } if(newIndex > -1){ renderedNodes.splice(newIndex, 0, renderFood(food)); } }); Deferred.when(query.total, function(total){ renderTotal(total + " total foods"); }); Deferred.when(query, renderDone); });© SitePen, Inc. All Rights Reserved
  • Query Engines Pluggable engine Used by client-side store (Memory) for filtering Default is provided (dojo/store/util/ SimpleQueryEngine), you can override with custom or alternate engine RQL makes a good alternate engine https://github.com/kriszyp/rql© SitePen, Inc. All Rights Reserved
  • Provided Object Stores© 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© SitePen, Inc. All Rights Reserved
  • dojo/store/Memory store Similar to ItemFileReadStore/ItemFileWriteStore Provide a set of data with the data argument Uses client-side filtering/querying Very simple and lightweight© SitePen, Inc. All Rights Reserved
  • dojo/store/JsonRest Server-side store Similar to old JsonRestStore Follows HTTP/REST interface GET, PUT, POST, DELETE Lightweight, little work done on client-side© SitePen, Inc. All Rights Reserved
  • dojo/store/DataStore Adapter for legacy Dojo Data stores Provide a Dojo Data store, returns an object store Can be used by new widgets with older stores© SitePen, Inc. All Rights Reserved
  • dojo/data/ObjectStore Adapter for legacy Dojo Data widgets Provide an object store, returns an Dojo Data store Can be used by legacy widgets with newer stores© SitePen, Inc. All Rights Reserved
  • Example: Using Object Store with Adapter require(["dojo/dom/", "dojo/store/Memory", "dojo/data/ObjectStore", "dijit/Tree"], function(dom, Memory, ObjectStore, Tree){ // Create the memory-based object store var memoryStore = new MemoryStore({ data: data // data is a reference to an in-memory data set }); // Create the dojo.data adapter dataStore = new ObjectStore({ objectStore: memoryStore, labelProperty: "author" }); // Pass it to a new tree tree = new Tree({ store: dataStore, onDblClick: function(item){ console.log(item.content); } }, dom.byId("tree")); });© SitePen, Inc. All Rights Reserved
  • Store Wrappers© SitePen, Inc. All Rights Reserved
  • Store Wrapper Takes a store, returns one with added functionality Cache, validate, etc. Like middleware for stores© SitePen, Inc. All Rights Reserved
  • dojo/store/Cache Provides caching of a master store to a cache store Typical config: dojo/store/JsonRest is master dojo/store/Memory is caching store Useful when data to be remotely retrieved, but frequently locally accessed© SitePen, Inc. All Rights Reserved
  • dojo/store/Observable Designed to notify listeners of how data changes affect rendered query results, rather than just notifying. Preserves sort order Omits new objects that dont match filter Adds changed objects that do match filter now Widgets can observe() a result set and properly update UI© SitePen, Inc. All Rights Reserved
  • dojo/store/Observable Store wrapper for notifications, can wrap any store Adds observe() method to query results require(["dojo/store/Observable"], function(Observable){ // First wrap the store store = new Observable(store); // Now we can query var results = store.query({name:"value"}, {start:0, count:10}); // And observe the results results.observe(function(changedObject, removedFromIndex, insertedIntoIndex){ // Notified of changes }); });© SitePen, Inc. All Rights Reserved
  • Handle Observed Events Store Event Observed removedFromIndex insertedIntoIndex -1 -1 Wasn’t in result set before Removed from result set Both Whole Both Equal Both -1 Item was moved Updated, not moved Positions not known If no query engine (JsonRest by default), index wont be provided (not known)© SitePen, Inc. All Rights Reserved
  • Comet Notifications with Observable Observable also adds notify() method Call notify() to notify of changes from server socket.on("message", function(event){ store.notify(event.object, event.existingId); });© SitePen, Inc. All Rights Reserved
  • Hierarchy Implement getChildren for hierarchical stores, to get the children Two hierarchy strategies: Objects have a children array Preserves/indicates order of children Useful for smaller lists of children Objects have a parent reference Query by parent to get children Useful for large lists of unordered children© SitePen, Inc. All Rights Reserved
  • Plans for Dojo 1.8+ API Clean-up, Further Split of Features Compose (improved declare), xstyle, put-selector, Dijit/ Widget Remove weight of deprecated APIs DojoX completely moved to foundation packages Releases Performance test suite across entire toolkit, and eventd Independent releases of packages, roll out package release sets Support major HTML5, mobile, modern browser features Web Builder and Dojo Foundation Packages© SitePen, Inc. All Rights Reserved
  • Dojo Mobile 1.8 Under Development Accordion Grid Grid Layout Icon container Form panel and Badge Cube transition Menu Dialog Tree map Editable List Audio player Swap transition Video player© SitePen, Inc. All Rights Reserved
  • The Dojo FoundationOpen Home for the Open Web© SitePen, Inc. All Rights Reserved
  • Community© SitePen, Inc. All Rights Reserved
  • Community Apphttp://vepi-2k3208aja.acs.cnet-caen.fr/df/© 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-profit foundation just 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© SitePen, Inc. All Rights Reserved
  • Foundation Projects© SitePen, Inc. All Rights Reserved
  • Major Contributors & Users IBM, Orange, SitePen, TIBCO 800 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, Carsonified 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© SitePen, Inc. All Rights Reserved
  • Documentation Significant Tutorial Series (55 and counting!)http://dojotoolkit.org/documentation/© 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/© SitePen, Inc. All Rights Reserved
  • Result: Modular Tools Tools to mix and match to Modular enough for very create your app simple projects, flexible Separate data from UI and consistent enough to logic simple and handle the most seamlesslyhttp://landmarks.sitepen.com/ challenging, feature-rich© SitePen, Inc. All Rights Reserved web apps
  • © 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© SitePen, Inc. All Rights Reserved
  • Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved