Star Search: Dojo 2 and HTML 5

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

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

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)© 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 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 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, dojox/mvc Dojo Foundation Packages dgrid, CPM, NPM Tutorials, docs, Maqetta© 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+© 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

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 Controllers and Patterns We don’t just build websites, we build web applications 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

Dojo Mobile Cross-platform mobile Web apps Started in Dojo 1.5 Simple mobile UI Support for many paradigms, same data HTML5 features interactions Open source (BSD) Native or general© 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© SitePen, Inc. All Rights Reserved

dgrid Created by SitePen Several plugins and Available on GitHub enhancements available github.com/sitepen/dgrid Native or general themes Mobile-ready Grid widget Quick and efficient© SitePen, Inc. All Rights Reserved

PhoneGap/Cordova Build mobile apps with Works with many devices HTML, CSS, and JavaScript Build service for easy Doesn’t compile into compiles native code Easy to learn© 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/config files, basic ".js" files) dojo/domReady! dojo/text! Works via script tag injection (or XHR) and onload events© 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: deﬁne and require© SitePen, Inc. All Rights Reserved

require() // Were 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"); })© SitePen, Inc. All Rights Reserved

Creating a widget with deﬁne + 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

Learn AMD in Depth at IBM Impact Beyond Dojo: The Rise of Asynchronous Module Deﬁnition (AMD) Thursday May 3rd, 08:45 AM - 10:00 AM Venetian - Marcello 4403 Dylan Schiemann and James Thomas© 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 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 ﬁ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 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 ﬁ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 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

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 affect 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 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 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

2004 SVG Viewer dead, except in Adobe Acrobat Adobe acquired an obscure vector graphics format Preventing the death of SVG http://dylanschiemann.com/2004/09/12/preventing- the-death-of-svg/ Dojo Toolkit development started© SitePen, Inc. All Rights Reserved

2005 Dojo 0.1 and 0.2 SVG Viewer Not ideal Mozilla SVG through special builds "One of the very ﬁrst design decisions of which I was a proponent was that the Dojo Toolkit not be HTML-centric. After working on several SVG-based intranet applications, I was highly motivated to see Dojo work well with SVG and other namespaces that could become relevant in the future."© SitePen, Inc. All Rights Reserved

2006 "Before this project is launched, dojo’s developers have made signiﬁcant progress to explore how to integrate SVG support. Another candidate for the back-end render engine is VML. There are two projects in dojo SoC 2006, dojo-svg & dojo-vml, a universal interface is developed to glue the Gfx API and various back-end rendering engine. I prefer dojo-svg, since VML is only rendered within Microsoft Internet Explorer, while SVG is supported natively by Mozilla Firefox 1.5+, or any browsers with Adobe SVG plugin." - Kun Xi© SitePen, Inc. All Rights Reserved

2006 dojox.gfx (Thanks in part to Mozilla!) Bubbles, 10 years later! (Thanks Gavin Doughtie) SVG and VML supporthttp://thinkvitamin.com/code/create-cross-browser-vector-graphics/© SitePen, Inc. All Rights Reserved

2007-2012 Add support for <canvas>, Silverlight, SVGWeb Base vector graphics APIs, desktop and mobile Charting & real-time capabilities Data and object store bindings Drawing APIs© SitePen, Inc. All Rights Reserved

What is DojoX GFX? JavaScript cross-browser graphics package Support for SVG, Canvas, VML, Silverlight, and SVGWeb Loosely based on SVG vocabulary Geometry, shapes, transformation matrices Stroke, ﬁll, fonts, other visuals Surfaces and groups Interactive (events) Optional SVG to JSON converter© SitePen, Inc. All Rights Reserved

DojoX Charting Library Dojo’s primary charting library is within DojoX Can use DojoX’s gfx library to create animated effects Dozens of themes included, supports custom theming and gradation themes Zooming, panning, and scrolling capabilities Supports chart events Support for SVG, VML, Canvas, Silverlight, and other technologies Support for 2D and 3D charts Integration with Dojo data stores Turns boring, static data into something readable and visually appealing.© SitePen, Inc. All Rights Reserved

Chart Pieces “Chart” - the object which will house the other pieces of the chart Theme - the series of colors and/or gradation information for the chart’s pieces, lines, and markers Plots - describe how data is to be visualized Axes - the dimensions of data that are being visualized and includes things like specifying labels Series - describes the Data itself that the chart will visualize Markers - shapes placed at key points within data Extras - additional “plugin” functionalities for the chart© SitePen, Inc. All Rights Reserved

Chart Plugins and Effects Tooltip - Shows a tooltip when a chart piece is hovered over Highlight - A hover color effect when hovering over a chart piece Magnify - Magniﬁes a marker when hovered over MoveSlice - Animates a pie slice when hovered over Shake - Shakes a given chart piece when hovered over© SitePen, Inc. All Rights Reserved

Create a Basic Pie Chart - Declaratively <script> require([ "dojo/parser", "dojox/charting/Chart", "dojox/charting/plot2d/Pie", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/MoveSlice", "dojox/charting/themes/PlotKit/green" ], function(parser) { parser.parse(); }); // Sample data pieData = [{ x:0, y:9420 }, { x:1, y:10126 }, { x:2, y:10000 }]; </script>  <div data-dojo-type="dojox.charting.widget.Chart" id="viewsChart" data-dojo-props="theme: dojox.charting.themes.PlotKit.green" style="width: 550px; height: 550px;"> <div class="plot" name="default" type="Pie" radius="200" fontColor="black" labelOffset="-20"></div> <div class="series" name="January" array="pieData"></div> <div class="action" type="Tooltip"></div> <div class="action" type="MoveSlice" shift="2"></div> </div>© SitePen, Inc. All Rights Reserved

Create a Basic Column Chart - Programmatically <script> // Require appropriate charting classes require([ "dojox/charting/Chart", "dojox/charting/plot2d/Columns", "dojox/charting/themes/Tom", "dojox/charting/axis2d/Default" ], function(Chart, Columns, theme) { var barChart = new Chart("barChart"); barChart.setTheme(theme); barChart.addAxis("x",{fixUpper: "major",includeZero: false,max:10}); barChart.addAxis("y",{vertical: true,fixLower: "major",fixUpper: "major"}); barChart.addPlot("default",{type: Columns, gap:5}); // Add a series of data to the chart barChart.addSeries("My Chart Info", columnData, {}); barChart.render(); }); </script> <div id="barChart" style="width:500px;height:300px;"></div>© SitePen, Inc. All Rights Reserved

dojox/form/uploader Multi-file upload A widget that creates a stylable file-input button, with optional multi-file selection, using only HTML elements. Non-HTML5 browsers have fallback options of Flash or an iframe. Currently need to manage your own connect to the native DnD of files from desktop to browser© SitePen, Inc. All Rights Reserved

dojo/dnd/ and dojox/mdnd In-page DnD Source, Target, Avatar, Mover A complete framework to easily extend to suit your approach to DnD http://www.sitepen.com/blog/2011/12/05/dojo-drag- n-drop-redux/ Draggable regions and areas iGoogle style regions and layouts© SitePen, Inc. All Rights Reserved

dojox/app Still in experimental state Promises "to allow simple conﬁguration of nested scenes and views and to facilitate the transitioning between these views." Made to work with both mobile and desktop web applications Provides history (via the hash) and environment support Utilitizes dojox/mvc for view creation Planned to stabilize for Dojo 2.0 release© SitePen, Inc. All Rights Reserved

dojox/mvc Provides data binding for Dijit widgets Form factor independent; may be used with dijit as well as dojox/mobile. Comprised of Output, Group, Repeat, and Generate utilities Visit http://dojotoolkit.org/reference-guide/1.7/ dojox/mvc.html for more information Signiﬁcantly different approach in Dojo 1.8 that deprecates many approaches in Dojo 1.7© SitePen, Inc. All Rights Reserved

wire.js Created by Brian Cavalier (MIT License) https://github.com/cujojs/wire Provides: Component lifecycle management Dependency Inversion via constructor and setter Dependency Injection Automatic dependency ordering Connectors Service locator pattern and reference resolution Well use this for our app controller in future activities© 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© 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

Grids SitePens dgrid was Advanced dgrid features created with mobile in like column resizing and mind cell editing work dojox/grid/* is not a ﬂawlessly good option on mobile!© 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

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

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

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

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

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© 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, 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© 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, ﬂexible 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

Star Search: Dojo 2 and HTML 5

by SitePen

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 7

Statistics

Star Search: Dojo 2 and HTML 5 Presentation Transcript

https://si0.twimg.com	5
https://twitter.com	2