The Road to Dojo 2.0

15,401 views
15,287 views

Published on

Learn more about the current progress of the Dojo Toolkit

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,401
On SlideShare
0
From Embeds
0
Number of Embeds
100
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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
  • Dojo Mobile allows developers to create advanced mobile applications with HTML and CSS. These mobile apps look and function just like the native device does.\n
  • \n
  • wire.js manages the entire lifecycle of your mobile application\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Point out that in this case, domConstruct is now local, not global, much faster lookups\n
  • \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
  • Sample module with lots of dependenciesCommon bug new users run into and complain about....\n
  • Mis-match between factory arguments and dependencies list, “array” available via “xhr” and vice-versa. Usually not caught until runtime, can be frustrating.\n
  • We can skip factory arguments and use require when needed.Module already loaded so result is returned second time round.Less likely to require wrong module at the expense of more code...\n
  • Loader even supports not providing explicit dependencies Automatically scan module source for “require” calls and loadNot really recommended....\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Point out "require" in the deps. Emphasize that it works like normal require, except that it can work with relative module IDs in this scenario\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • uses XHR so doesn't work cross-domain without a build\n
  • \n
  • \n
  • Point out that eventHandlers will be *either* the w3cHandlers OR the ieHandlers, dependent on the has check\n
  • \n
  • \n
  • \n
  • \n
  • tlmSiblingOfDojo: Top-level Module Sibling of Dojo\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • dojoBuild property indicates a javascript file that contains extra information as a logical extension of package.json for metadata that aren't possible to express with json. used by dojo's build tool.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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
  • \n
  • \n
  • \n
  • \n
  • \n
  • Provide value control via gestures; much easier and more elegant than using form fields\n
  • \n
  • \n
  • \n
  • Since dgrid was created with mobile in mind, even advanced features like column resizing works on mobile\n
  • Jump out to the mobileGallery and show attendees each of the advanced examples; there’s nothing like seeing them work\n
  • \n
  • \n
  • PhoneGap is a very popular product, allowing developers to create applications with web technologies and that may be distributed in App Stores.\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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Introduce SitePen; more details are on the next slide.\n
  • \n\n\n
  • \n
  • The Road to Dojo 2.0

    1. 1. presents The Road to Dojo 2.0 Dylan Schiemann, CEO, SitePen October, 2012© SitePen, Inc. All Rights Reserved
    2. 2. 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
    3. 3. 1996Topology and Rheology of Quasi Two-Dimensional Foam http://arxiv.org/pdf/cond-mat/9904101 © SitePen, Inc. All Rights Reserved
    4. 4. Evolution of Web App Development https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/© SitePen, Inc. All Rights Reserved
    5. 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.flickr.com/photos/dylans/3439037456/
    6. 6. 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
    7. 7. We Want Morehttps://secure.flickr.com/photos/dylans/5206483166/ © SitePen, Inc. All Rights Reserved
    8. 8. 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/
    9. 9. Multifarious Experiences Native requires learning many new languages for many new devices Web has challenges to overcome, making rapid progress.© SitePen, Inc. All Rights Reserved
    10. 10. © SitePen, Inc. All Rights Reserved
    11. 11. http://dojotoolkit.org/ © SitePen, Inc. All Rights Reserved
    12. 12. 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
    13. 13. 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
    14. 14. Whats Driving Us? Less is more Microtoolkits Mobile Evolution of loaders/modules Evolution of browsers/HTML5/ES5© SitePen, Inc. All Rights Reserved
    15. 15. 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.7 1.8 2004 2005 2006 2007 2008 2009 2010 2011 2012© SitePen, Inc. All Rights Reserved
    16. 16. Major Changes and Additions 1.6 1.7 (Nano) 1.8 Object Store on request has.js feature detection query lite router LESS CSS preprocessor Dijit touch events Calendar AMD Full AMD conversion Deferreds & Promises HTML5 data-* dgrid Dijit MID Stateful app and mvc app and mvc Socket (Web Sockets) Dijit touch events Auto-require Android, IE9, FF4+, Blackberry 6 Blackberry 7, Node Web Builder Maqetta 28 new mobile widgets Tutorials Package Manager/cpm Ref guide/API viewer refactor© SitePen, Inc. All Rights Reserved
    17. 17. Plans for Dojo 2.0 GitHub master API Clean-up, Further Split of Features Compose (improved declare), 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, ES5, modern features© SitePen, Inc. All Rights Reserved
    18. 18. 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+© SitePen, Inc. All Rights Reserved
    19. 19. Data Access: Dojo Object Store Based 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
    20. 20. Native Vector Graphics: GFX© SitePen, Inc. All Rights Reserved
    21. 21. Maqetta Open Source Visual Tools for Dojo and HTML5http://maqetta.org/© SitePen, Inc. All Rights Reserved
    22. 22. 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
    23. 23. 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
    24. 24. wire.js and TwineJS Inversion of control Manage component containers lifecycle Lazy-load application DOM management dependencies Pub / Sub© SitePen, Inc. All Rights Reserved
    25. 25. AMD© SitePen, Inc. All Rights Reserved
    26. 26. Toolkits with built-in AMD support Dojo 1.7+ jQuery Mobile 1.1+ Wink Toolkit 1.4+ Lightstreamer 5+ EmbedJS Firebug 1.8+ OpenCoWeb Zazl Persevere Pintura Perstore Tunguska DWR PhoneGap/Cordova© SitePen, Inc. All Rights Reserved
    27. 27. Packages with AMD support dgrid XStyle and put- selector Twine Wire.js Esprima money.js humanize has.js es5shim Backbone Aura© SitePen, Inc. All Rights Reserved
    28. 28. Editors with AMD support Orion Cloud9 Brackets Styler VisualStudio https://github.com/jrburke/requirejs-intellisense© SitePen, Inc. All Rights Reserved
    29. 29. AMD-Compatible With some finagling MooTools 2.0+ Shipyard Backbone.js jQuery Node.js Pretty much any JS toolkit or module set, with some work© SitePen, Inc. All Rights Reserved
    30. 30. Key Components© SitePen, Inc. All Rights Reserved
    31. 31. Modules and Packages Organized JavaScript source code AMD creates two global functions, require and define Replaces dojo.provide, dojo.require, dojo.requireIf, dojo.requireAfterIf, dojo.platformRequire, & dojo.requireLocalization Modules are grouped into collections called packages Examples: dojo, dijit, and dojox Modules normally have a 1:1 mapping to files Except when production-optimized through a build© SitePen, Inc. All Rights Reserved
    32. 32. Loaders The source code that can load AMD modules efficiently Dojo Loader RequireJS curl.js Almond Inject Others© SitePen, Inc. All Rights Reserved
    33. 33. Builder/Optimizer Code that combines modules into optimized resources to improve production performance Dojo builder (plus Dojo ShrinkSafe or Closure Compiler) Uglify RequireJS - r.js Zazl© SitePen, Inc. All Rights Reserved
    34. 34. Package Manager Listing/registry of available packages, and tools to download them cpm and Dojo Foundation Packages volo npm (for Node, not really AMD) ender© SitePen, Inc. All Rights Reserved
    35. 35. Dojo Foundation Packages Provides one-stop 60 Packages and growing navigation to a variety of Will continue to grow useful JavaScript once advertised packages© SitePen, Inc. All Rights Reserved
    36. 36. Creating and Distributing Modules© SitePen, Inc. All Rights Reserved
    37. 37. Module Identifiers Look like path fragments; e.g. dijit/form/Button Work a lot like paths 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© SitePen, Inc. All Rights Reserved
    38. 38. 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
    39. 39. 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
    40. 40. Defining Modules Use the define function Code contained within is not resolved until 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
    41. 41. 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
    42. 42. Creating a widget with define + 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
    43. 43. define() The value given for a module can also be just a plain object Modules defined as plain objects typically have no dependencies since there is no factory function that can use the references to those dependencies // an AMD module as a plain object define({ enabled: true, delay: 500 });© SitePen, Inc. All Rights Reserved
    44. 44. Key differences between define, dojo.provide 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
    45. 45. Plugins© SitePen, Inc. All Rights Reserved
    46. 46. 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
    47. 47. dojo/text Loads string from file (XHR if not built-in, cross-domain care is needed) 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 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
    48. 48. 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/it/common" ], function (common, commonIT) { console.log(common.buttonCancel); // "Cancel" console.log(commonIT.buttonCancel); // "Annula" } );© SitePen, Inc. All Rights Reserved
    49. 49. dojo/domReady and dojo/ready Ensures the module does not resolve until the DOM is ready Replaces dojo.ready Compatible with RequireJSs domReady plugin 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 loaded. var dialog = registry.byId("myDialog"); ... }); });© SitePen, Inc. All Rights Reserved
    50. 50. dojo/has Allows modules to be conditionally loaded, using has.js features Replaces dojo.requireIf require([ "dojo/has!dom-addeventlistener?./events/w3cHandlers:./events/ ieHandlers" ], function (eventHandlers) { // Do something with eventHandlers });© SitePen, Inc. All Rights Reserved
    51. 51. 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
    52. 52. Object Stores and IndexedDB© SitePen, Inc. All Rights Reserved
    53. 53. 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
    54. 54. 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
    55. 55. Dojo Store Architecture Tree dgrid ComboBox Dojo Store API Memory JsonRest CustomStore© SitePen, Inc. All Rights Reserved
    56. 56. 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
    57. 57. 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
    58. 58. 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
    59. 59. 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
    60. 60. 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
    61. 61. Dojo Object Store API© SitePen, Inc. All Rights Reserved
    62. 62. 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
    63. 63. 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
    64. 64. 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
    65. 65. 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
    66. 66. 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
    67. 67. Dojo Mobile© SitePen, Inc. All Rights Reserved
    68. 68. 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
    69. 69. 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
    70. 70. © SitePen, Inc. All Rights Reserved
    71. 71. 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
    72. 72. 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
    73. 73. Transition Effects Dojo 1.7: 4 standard effects 16 new transition effects© SitePen, Inc. All Rights Reserved
    74. 74. Mobile themes iPhone (includes iPad) Custom Android BlackBerry© SitePen, Inc. All Rights Reserved
    75. 75. Dojo Mobile: More than just basic widgets! Gauges Grids Maps More! Charts© SitePen, Inc. All Rights Reserved
    76. 76. Gauges dojox/gauges dojox/dgauges Many to choose from: More to choose from: Analog, bar, glossy Circular, rectangular, linear© SitePen, Inc. All Rights Reserved
    77. 77. Maps May add immense value Google Maps, to your mobile application OpenLayers, ESRI, and others can be used Works as efficiently as the© SitePen, Inc. All Rights Reserved
    78. 78. Charts and Geocharts Same dojox/charting Integrates seamlessly technology that’s used on on mobile desktop! Use basic dojox/mobile widgets to manipulate© SitePen, Inc. All Rights Reserved
    79. 79. 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
    80. 80. Grids SitePens dgrid was Advanced dgrid features created with mobile in like column resizing and mind cell editing work dojox/grid/* is not a flawlessly good option on mobile!© SitePen, Inc. All Rights Reserved
    81. 81. Dojo Showcase http://demos.dojotoolkit.org/demos/mobileGallery/ Mobile controls Maps Form widgets Lists Switches Charts Layout widgets Effects© SitePen, Inc. All Rights Reserved
    82. 82. Carousel Swipe to browse or change views© SitePen, Inc. All Rights Reserved
    83. 83. Dojo Mobile 1.8 (28 new widgets!) 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
    84. 84. 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
    85. 85. PhoneGap/Cordova Integration Feature-testing module for PhoneGap/Cordova features for usage within Dojo Toolkit http://bugs.dojotoolkit.org/ticket/15219© SitePen, Inc. All Rights Reserved
    86. 86. dgrid© SitePen, Inc. All Rights Reserved
    87. 87. http://dgrid.io/© SitePen, Inc. All Rights Reserved
    88. 88. dgrid Created by SitePen Several plugins and Available on GitHub enhancements available github.com/SitePen/dgrid Easy to skin; several Mobile-ready Grid widget included© SitePen, Inc. All Rights Reserved Quick and efficient
    89. 89. Lightweight <12KB minified/gzipped <32KB minified/gzipped with all dependencies less than Dojo Base itself; can go baseless (nano) Easy to grok© SitePen, Inc. All Rights Reserved
    90. 90. Object Store Driven Fast, lightweight stores Correct query observation events Uses the new HTML5- inspired object store API directly© SitePen, Inc. All Rights Reserved
    91. 91. Modular, Composable Pluggable design Different grid components combined as mixins Column plugins can be specified per-column© SitePen, Inc. All Rights Reserved
    92. 92. Performance Fast. Very Fast. Loads much faster, being smaller Renders results about 6-10x faster than the DataGrid! Optimized for modern platforms (like mobile)© SitePen, Inc. All Rights Reserved
    93. 93. DOM-based Element Creation Direct DOM creation makes easy to reference, connect, modify elements at every step in rendering Greatly simplifies plugin/ mixin creation Tree is 1/7th the size of DojoX TreeGrid!© SitePen, Inc. All Rights Reserved
    94. 94. CSS-Driven Minimal use of inline styles Easy customization via CSS No coding necessary for styling Further improves performance as well as maintainability© SitePen, Inc. All Rights Reserved
    95. 95. CSS Modularity Proper skin vs structure separation Easing skinning with generic classes Utilizes XStyle Framework for shimming and extending CSS Handles loading CSS as module dependencies Parsing CSS Uses CSS plugins to handle specific shims and extensions© SitePen, Inc. All Rights Reserved
    96. 96. Features! Start with basics... Tabular view of data Headers with scrolling body Virtual paging/scrolling Sorting Keyboard Navigation© SitePen, Inc. All Rights Reserved
    97. 97. Feature Comparison http://dgrid.io/#features© SitePen, Inc. All Rights Reserved
    98. 98. Editing An HTML input or Dijit form widget radio, checkbox, textbox, etc. Event triggered editor or always on© SitePen, Inc. All Rights Reserved
    99. 99. Tree Hierarchical data view Maintain column alignment Lightweight, easy to extend© SitePen, Inc. All Rights Reserved
    100. 100. Selection Select rows via keyboard, mouse, or touch Selection modes: extended (standard default), single, multiple, none Fires batched DOM events for selections to easily listen for selection changes Row- or cell-level selection Selector column: check- or radio-driven selection© SitePen, Inc. All Rights Reserved
    101. 101. Selection: Example© SitePen, Inc. All Rights Reserved
    102. 102. Skins Several included out of the box: Dijit-inspired: Claro, Tundra, Soria, Nihilo Additional custom skins: Cactus, Sage, Slate, Squid 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
    103. 103. Skins: Examples© SitePen, Inc. All Rights Reserved
    104. 104. Complex Layout Multiple “subrows” per object colSpans and rowSpans Freeze columns (other columns horizontally scroll) Handled as continuous rows, making it much simpler© SitePen, Inc. All Rights Reserved
    105. 105. Complex Layout: Example© SitePen, Inc. All Rights Reserved
    106. 106. dgrid Inside Dijit Layout Widgets: Example© SitePen, Inc. All Rights Reserved
    107. 107. Demo of dgrid in Advanced Layout: dTuned© SitePen, Inc. All Rights Reserved
    108. 108. Drag n’ Drop Drag n’ Drop rows Within a grid To other grids To/from other sources/targets© SitePen, Inc. All Rights Reserved
    109. 109. Store Integration Fully Object store driven Correct result set notifications, highlighted changes Auto-save via editor plugin, or queued saves© SitePen, Inc. All Rights Reserved
    110. 110. More... Keyboard navigation per row or per cell Column Resizing Discrete pagination Mixin and plugin approaches make it easy to add many new features!© SitePen, Inc. All Rights Reserved
    111. 111. Leverages and Promotes New Technologies AMD Package Repository XStyle put-selector (template-free) dojo/on dojo/aspect© SitePen, Inc. All Rights Reserved
    112. 112. PerformanceUsing Dojo Build, reduced to 6 HTTP requests and 31.6KB gzippeddgrid/test/performance.html© SitePen, Inc. All Rights Reserved
    113. 113. The Dojo FoundationOpen Home for the Open Web© SitePen, Inc. All Rights Reserved
    114. 114. Community© SitePen, Inc. All Rights Reserved
    115. 115. Community Apphttp://vepi-2k3208aja.acs.cnet-caen.fr/df/© SitePen, Inc. All Rights Reserved
    116. 116. 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
    117. 117. Foundation Projects Jed© SitePen, Inc. All Rights Reserved
    118. 118. 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
    119. 119. Documentation Significant Tutorial Series (55 and counting!)http://dojotoolkit.org/documentation/© SitePen, Inc. All Rights Reserved
    120. 120. Getting Started Hello Dojo: http://dojotoolkit.org/documentation/ tutorials/1.8/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 SlideShare: http://slideshare.net/sitepen/ dgrid: http://dgrid.io/© SitePen, Inc. All Rights Reserved
    121. 121. © SitePen, Inc. All Rights Reserved
    122. 122. 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
    123. 123. Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved

    ×