2012: The Year of Dojo

1. Mobile Start with the obvious... Many new APIs, development tools, capabilities in place to build (and install) most any app as a web app rather than using native tech© SitePen, Inc. All Rights Reserved

2. AMD 2010 and 2011 saw the emergence of microtoolkits and plug-ins In 2012, everything becomes an AMD module to make things easier to use together Dojo, jQuery, MooTools many others Dojo Nano in 1.7 is <4KB© SitePen, Inc. All Rights Reserved

3. Builders & Loaders With many modules, you need to optimize performance, loading, and building Dojo Backdraft RequireJS curl.js Package Management ( e.g. npm, cpm, packages.dojofoundation.org )© SitePen, Inc. All Rights Reserved

4. WebSockets With IE10, will be turned on in every major browser. Beyond server push to client, opens door for video streaming, and streaming from device to server e.g. video and audio livecasting from web app© SitePen, Inc. All Rights Reserved

5. WebGL, Canvas, SVG dojo gfx/charts/gauges raphael, three.js, others Native hardware accelerationhttps://www.readwriteweb.com/hack/2012/01/pushing-the-3d-boundaries-in-w.php© 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.ﬂickr.com/photos/dylans/3439037456/

Evolution of Web App Development Web 2.0 Smarter client, smart server, con ict 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

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© SitePen, Inc. All Rights Reserved https://secure.ﬂickr.com/photos/dylans/5916167025/

Fir 2004 st c od e© SitePen, Inc. All Rights Reserved Do jo 2005 rel Fou eas nd e 0 atio . 1, I 0.2 n 2006 rel BM, A eas e 0 OL .3, rel 0.4 eas e1 .0 2007 2008 rel eas e1 .2 rel 2009 rel ease 1 eas e 1 .3 .4 Dojo History and Roadmap rel eas 2010 mo e 1. 5 bi l e 1.7 relea 2011 (N se 1. an 6, o), rel 1.8 eas 2012 2.0 e 1.9 , 2. 1 ,

Dojo Toolkit: Project Goals Uni ed JavaScript toolkit for superior web and mobile apps Fill the Gaps (browsers, platforms) Awesome, Fast, Powerful, Eﬃcient, Modular, Extensible Business-friendly: grids, charts, forms, & data Rich UI widgets (calendars, 3D carousel, etc) Professional© SitePen, Inc. All Rights Reserved

Philosophy Push the limits (vector graphics/WebGL, oﬄine, HTML5, ...) De ne and adopt defacto standards (AMD, JSON Schema) Developer productivity and tools Open, free, & liberally licensed with clear IP http://demos.dojotoolkit.org/© 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 de nition) 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 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 noti cations© 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

Squeezing Performance Dojo Nano dojo/store Dojo Base (Model) Automated build with dependency resolution, AMD & has.js optimized builds, all from one place with full Dijit (View) licensing and support. dojox Grid© SitePen, Inc. All Rights Reserved

Dojo Mobile Cross Platform Mobile WebApps Started in Dojo 1.5 Simple mobile UI paradigms, Support for many HTML5 same data interactions features and beyond Native or general themes Open source (BSD) Grids, charts, maps, gauges© 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© 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 diﬀerent ways (Flippable View, Scrollable View) Touch events are synchronized in mobile and desktop environments for more eﬃcient development© 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.© SitePen, Inc. All Rights Reserved

Side-by-side Tablet Layout vs. Phones Independently scrollable content Fixed Position HeaderSingle application can automatically adjust to side-by-side layout based on detection of screen dimensions© 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© SitePen, Inc. All Rights Reserved

What is AMD? Asynchronous Module De nition 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 Replaces dojo.provide, dojo.require, dojo.requireIf, dojo.requireAfterIf, dojo.platformRequire, and dojo.requireLocalization 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 les (except when built)© SitePen, Inc. All Rights Reserved

Why AMD is Awesome Easy to mix and match code from diﬀerent projects without risk of name collisions or dependency con icts 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 diﬀerent packages with the same name, or patch a single module with another module© SitePen, Inc. All Rights Reserved

AMD Module Identi ers 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 diﬀerent code Loaders currently diﬀer on how to do this© SitePen, Inc. All Rights Reserved

Loading non-AMD code Special module identi ers can be used to load arbitrary, non-AMD scripts as dependencies, in which case the modules returned value will be unde ned: Any identi er starting with "/" Any identi er starting with a protocol (e.g. "http:", "https:") Any identi er ending with ".js"© SitePen, Inc. All Rights Reserved

AMD Modules De ned 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

Con guring AMD Loaders Given this directory structure, the con guration 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

Con guring AMD Loaders baseUrl: de nes the base path for all modules; can be relative or absolute Relative values are relative to the HTML le in browsers and relative to the current working directory on servers packages: de nes 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

Con guring AMD Loaders Many other con guration 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 con guration object for the loader dependencies: Optional, an array of strings as a list of module identi ers to load before calling the callback callback: Optional, a function to call when dependencies are loaded What does it do? Recon gures the loader at runtime Loads modules and executes an optional callback when they are loaded, passing loaded modules into the callback as arguments© 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

de ne() define takes three arguments: moduleId: Optional, a string to explicitly identify the module dependencies: Optional, an array of strings as a list of module identi ers 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? De nes 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 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

de ne() 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

de ne() Diﬀerences 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 mini cation 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 (con guration, 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 de ned on it, use this instead of creating and returning a new object© SitePen, Inc. All Rights Reserved

Special Module Names define(["dojo", "require", "dojo/domReady!" ], function (dojo, require) { var debugButton = dojo.create(input, { type: button, value: Debug }, dojo.body()); dojo.connect(debugButton, "click", function () { require([ "./debugger/console" ], function (console) { console.open(); }); }); });© 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 identi ed by the exclamation point in the module identi er: "dojo/text!", "dojo/ i18n!", "dojo/domReady!" Data to the left of the "!" identi es 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 le 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 Compatible with RequireJSs text plugin // in populizr/quoteLogger.js 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 Ensures the module does not resolve until the DOM is ready Replaces dojo.ready Compatible with RequireJSs domReady plugin define([ "dojo/domReady!" ], function () { console.log("DOM is ready!"); });© 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

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

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© SitePen, Inc. All Rights Reserved

Responsibility of Stores Associate Items w/ Identiﬁers Handle Queries Sort Data Save Data Changes Trigger Notiﬁcations 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 Noti cations built around query results© 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 foodStore = new dojo.store.JsonRest({ target: "/Food/" }); foodStore.get("cherry").then(function(cherry){ cherry.color = "red"; foodStore.put(cherry); }); foodStore.remove("pickle"); foodStore = dojo.store.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 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© SitePen, Inc. All Rights Reserved

Using Query Results in a Widget 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)); } }); dojo.when(query.total, function(total){ renderTotal(total + " total foods"); }); dojo.when(query, renderDone);© SitePen, Inc. All Rights Reserved

Query Engines Pluggable engine Used by client-side store (Memory) for ltering 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

dojo/store/Memory store Similar to ItemFileReadStore/ItemFileWriteStore Provide a set of data with the data argument Uses client-side ltering/querying Very simple and lightweight© SitePen, Inc. All Rights Reserved

Example: Using Object Store with Adapter // Create the memory-based object store memoryStore = new MemoryStore({ data: data }); // Create the dojo.data adapter dataStore = new ObjectStore({ objectStore: memoryStore, labelProperty: "author" }); // Pass it to the new tree tree = new Tree({ store: dataStore, onDblClick: function(item){ alert(item.content); } }, dojo.byId("tree"));© SitePen, Inc. All Rights Reserved

dojo/store/Cache Provides caching of a master store to a cache store Typical con g: 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 aﬀect rendered query results, rather than just notifying. Preserves sort order Omits new objects that dont match lter Adds changed objects that do match lter now Widgets can observe() a result set and properly update UI© SitePen, Inc. All Rights Reserved

dojo/store/Observable Store wrapper for noti cations, can wrap any store Adds observe() method to query results // First wrap a store store = new dojo.store.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 Noti cations 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

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!© 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© SitePen, Inc. All Rights Reserved

Feature Comparison dGrid dojox.grid.DataGrid dojox.grid.EnhancedGrid jqGrid extJS Grid Panel COLUMN RESIZE Yes Buggy Buggy Yes Yes COLUMN SORT Yes Yes Yes Yes Yes COLUMN HIDEABLE No Yes Yes Yes Yes FOLLOWS AMD FORMAT Yes Yes (1.7+) Yes (1.7+) No No SUPPORTS DECLARATIVE INSTANTIATION / Yes - IP Yes Yes No No STRUCTURE NATIVE DOJO.DATA SUPPORT No Yes Yes N/A N/A NATIVE DOJO.STORE SUPPORT Yes No No N/A N/A SUPPORT FOR POPULATING DIRECTLY FROM Yes No No Yes Yes ARRAY STRUCTURE FROM HTML Yes Yes Yes Yes Yes COMPLEX STRUCTURE (SUBROWS, Yes Yes Yes (Subgrids) Yes COLUMNSETS/VIEWS) ROW GROUPING No No ? Yes Yes DND - ROW Yes - IP No Yes Yes Yes DND - CELL ? No Yes Yes Yes DND - COLUMN Yes - IP No Yes Yes Yes DND - MULTIPLE SELECT Yes No Yes (contiguous only) ? ? DND - TREE ? No ? ? Yes CELL EDIT Yes Yes Yes Yes Yes© SitePen, Inc. All Rights Reserved

Feature Comparison (Continued) dGrid dojox.grid.DataGrid dojox.grid.EnhancedGrid jqGrid extJS Grid Panel CELL WIDGETS Yes Yes Yes Yes Yes INDIRECT SELECTION Yes Yes Yes Yes Yes PAGINATION No Not OOTB Yes (plugin) Yes Yes CELL FORMATTING Yes Yes Yes Yes Yes(Renderers) TREE SUPPORT Yes Yes (TreeGrid) ? Yes Yes MOBILE SUPPORT Yes ? ? ? ? FILTER UI No No Yes (plugin) Yes Yes PRINT EXPORT No No Yes (plugin) No Yes (plugin) SEARCH No No Yes (plugin) Yes Yes (plugin) DECLARATIVE CONTEXT MENUS No No Yes (plugin) Yes(Row) Yes NESTED SORTING No No Yes (plugin) No Yes A11Y Yes Yes Yes Yes Yes I18N Yes Yes Yes Yes Yes COMPOUND EDITORS (2 OR MORE IN ONE No No No No No CELL) EXCEL STYLE FORMULA EDITOR No No No No No MICRO-TEMPLATES VIRTUAL PAGING Yes Yes Yes LICENSE AFL/BSD AFL/BSD AFL/BSD MIT/GPL GPLv3© SitePen, Inc. All Rights Reserved

Selection Select rows via keyboard, mouse, or touch. Selection modes: extended (standard default), single, multiple, none Fires DOM events for selections to easily listen for selection changes Row or cell level selection Selectors - editor driven selection© SitePen, Inc. All Rights Reserved

Themes Claro, Tundra, Soria, Nihilo, Squid, Sage, Slate Compatible with jQuery Themeroller for generic styling ui-widget-content, ui-widget-header, ui-state-default, ui-state- active, ui-state-highlight© SitePen, Inc. All Rights Reserved

dojox/socket.js Connect to WebSocket Receive server message Yes Check for WebSocket support message Connection failure (due to proxy) event No Make XHR Receive request response Very lightweight socket Fallback to XHR if not communication available WebSocket if available© 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© SitePen, Inc. All Rights Reserved

dojox.socket Sample // Create dojox.socket instance var socket = new dojox.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 dojox.socket({ url: "/comet", headers: { "Accept": "application/json", "Content-Type": "application/json" } });© SitePen, Inc. All Rights Reserved

Side-by-side var socket = new WebSocket("ws:// var socket = new dojox.socket("/ localhost:8080/services/ comet"); infoPusher"); socket.on("open",function(event){ socket.onopen = function(e) console.log("Socket opened { console.log("Socket opened successfully!"); successfully!"); } }); socket.onmessage = function(event) socket.on("message",function(event) { { console.log("Message console.log("Message received!", event.data); received!", event, event.data); } socket.send("Received your socket.onclose = function(e) message!"); { console.log("Socket closed!"); } }); socket.onerror = function(e) { console.log("Ooops! Error!",e); } socket.send("This is my message!"); socket.close();© SitePen, Inc. All Rights Reserved

dojox.socket.Reconnect Sample // Create dojox.socket instance var socket = new dojox.socket("/comet"); // Make the socket reconnect if necessary socket = dojox.socket.Reconnect(socket);© SitePen, Inc. All Rights Reserved

Promising Async Thinking asynchronously is challenging at rst Promises/A CommonJS proposal: http://wiki.commonjs.org/wiki/Promises/A A promise is something that represents a value returned from an asynchronous operation© SitePen, Inc. All Rights Reserved

The result of then The return of promise.then(someCallback) is a new promise for the return value of someCallback When creating our own APIs we can leverage this functionality, returning the returned promise from .then // Make a request that returns metadata and an array of users var def = dojo.xhrGet({url: "/users", /*...*/}); // Create a new promise for just the users var users = def.then(function(data){ return data.users; }); // Hand back our users return users;© SitePen, Inc. All Rights Reserved

dojo.when (Deferred.when) Handles either promises or values First two arguments promiseOrValue callback When given a promise, it returns a promise for the return of the callback, like .then does© SitePen, Inc. All Rights Reserved

OpenCoWeb Features Open web technologies such as Dojo, cometD, Bayeux, and WebSocket. The framework includes: JavaScript operation engine using operational transformation to resolve con icting, simultaneous changes JavaScript API for sending and receiving coweb events Python coweb server built on the Tornado web server Java coweb server built on cometd-java API documentation, tutorials, and examples Started by IBM, part of the Dojo Foundation© 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 integration Tools support improvements© 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

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 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 Projects are very autonomous All code contributed through CLAs© SitePen, Inc. All Rights Reserved

Major Contributors & Users AOL, IBM, SitePen, TIBCO 800 Flowers, Abbott Labs, Alcatel-Lucent, ADP, ASU, Bank of Montréal, 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, Intalio (WebTide), KLP, Lemonade, Lufthansa, Marriott, Mirapoint, Mozilla, Namesake, NASA, NOAA, OpenClass, Oracle (Sun), Orange, Pearson, Pershing, Premier, QBE, Reach Local, Sage, Serena Software, Shell, Thomson Reuters, UK, Uniface, USA, uxebu, Verizon Wireless, Vidéotron, vmware (Spring), Vodafone, Vodori Pepper, Wall Street Journal, Williams-Sonoma, Zend, and thousands more...© SitePen, Inc. All Rights Reserved

Getting Started Hello Dojo: http://dojotoolkit.org/documentation/tutorials/ 1.7/hello_dojo/ Quick Start Guide: http://www.sitepen.com/blog/series/ dojo-quick-start-guide/ 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, exible and Separate data from UI logic consistent enough to handle simple and seamlessly the most challenging, feature- rich web apps© SitePen, Inc. All Rights Reserved

SitePen: We help our clients build great apps. Web App Development, Design, Advice Support & Training Strong advocates and contributors of FOSS Works with some amazing companies and organizations:© SitePen, Inc. All Rights Reserved

http://a0.twimg.com	3
http://paper.li	1
https://twimg0-a.akamaihd.net	1
http://www.docshut.com	1

2012: The Year of Dojo

by SitePen

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 6

Statistics

2012: The Year of Dojo Presentation Transcript