presents             Top Ways that Dojo Can             Improve Your Mapping                     Apps© SitePen, Inc. All R...
Nice to Meet you      Dylan Schiemann                                      Co-Founder of Dojo Toolkit                     ...
Interactive Drawing© SitePen, Inc. All Rights Reserved
© SitePen, Inc. All Rights Reserved
Shipping Routes© SitePen, Inc. All Rights Reserved
© SitePen, Inc. All Rights Reserved
Dojo History and Roadmap      Code here  Dojo Foundation                     Dojo 0.1     Dojo 0.4     Dojo 1.0      Dojo ...
Dojo Toolkit: Project Goals              Unified JavaScript toolkit for              superior web and mobile              a...
Philosophy               Push the limits (vector               graphics/WebGL, offline,               HTML5, ...)         ...
Whats Driving Us?               Less is more               uxebu experiments and embedJS               Microtoolkits      ...
Major Changes and Additions (1.6)               Dojo Object Store               Feature detection/has.js               LES...
Major Changes and Additions (1.7)               Query, events refactor (including delegation)               AMD refactor c...
Application                      Challenges and© SitePen, Inc. All Rights Reserved
1. Challenge: Performance and  Modularity               Difficult to mix and match code from different               proje...
Solution: Dojo Nano and AMD               "Base-less" Dojo                      Only using the parts of Dojo you really ne...
Squeezing Performance           • Automated build          Dojo Nano           with dependency                            ...
Creating a widget with AMD and  declare      // Creating a widget with AMD      define(          ["dojo/_base/declare",   ...
2. Challenge: User Interface Widgets             Even with HTML5,             form controls are             limited and   ...
Solution: Dijit and Dojo Extensions© SitePen, Inc. All Rights Reserved
Dijit Slider Example      <body class="claro">          <input id="hslider" value="3" type="range"              data-dojo-...
3. Challenge: Mobile Heterogeneity               Native requires learning many new languages for               many new de...
Solution: Dojo and Dojo Mobile                                      Cross Platform Mobile WebApps               Started in...
Mobile Key Paradigms               Lightweight Dojo-based widgets for mobile web               apps               Native a...
Side-by-side Tablet Layout vs. Phones                                      Independently scrollable content               ...
Mobile Widget Example      <div id="about" data-dojo-type="dojox.mobile.View">          <h1 data-dojo-type="dojox.mobile.H...
4. Challenge: Separate Data from UX               Separate UI from data handling               Independent evolution of UI...
Revolution: Separation of Data and UX                                                                           Users want...
Solution: Data Access via Dojo Object  Store               Work on HTML5 IndexedDB recommendation                      key...
Dojo Store Architecture                                      Tree        Grid        ComboBox                             ...
Connect Store to Widgets      An HTML input or Dijit form widget           radio, checkbox, textbox, etc.      Event trigg...
Data Store Example      require(["dojox/charting/Chart", "dojox/charting/StoreSeries" /*,      other deps */,"dojox/charti...
5. Challenge: Real-Time               Competing Protocols (web sockets, long-polling)               Reconnection          ...
Solution: Dojo Socket                                                   Connect to                                        ...
Dojo Socket Example    require(["dojox/socket"], function(socket){        // Create dojox/socket instance        var socke...
Sockets and Stores Together      // Create Object Store      define("my-module", function(require){          var JsonRest ...
Documentation                 Significant Tutorial Series (55 and counting!)http://dojotoolkit.org/documentation/© SitePen,...
Getting Started               Hello Dojo: http://dojotoolkit.org/documentation/               tutorials/1.7/hello_dojo/   ...
Result: Modular Tools          Tools to mix and match to                Modular enough for very          create your app  ...
© SitePen, Inc. All Rights Reserved
SitePen: We Build Extraordinary Apps.               Desktop and Mobile Web App professional services               Creator...
Thanks! Q&A     SitePen sitepen.com     Dojo Toolkit dojotoolkit.org     Twitter: @dylans @sitepen @dojo© SitePen, Inc. Al...
Upcoming SlideShare
Loading in...5
×

Top Ways Dojo Can Improve Your Mapping App

2,618

Published on

Top Ways Dojo Can Improve Your Mapping App
Presented at 2012 ESRI Developer Summit

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

No Downloads
Views
Total Views
2,618
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 1.7 is the API alpha for 2.0\nNano (baseless release)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Point out the plugin to replace dojo.cache\nAlso point out that we don&apos;t have to give an explicit name, though this has potential issue if we&apos;re trying to use this widget declaratively\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Basic example of dojox.socket usage\n
  • \n
  • \n
  • \n
  • \n
  • Introduce SitePen; more details are on the next slide.\n
  • \n\n\n
  • \n
  • Top Ways Dojo Can Improve Your Mapping App

    1. 1. presents Top Ways that Dojo Can Improve Your Mapping Apps© 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. Interactive Drawing© SitePen, Inc. All Rights Reserved
    4. 4. © SitePen, Inc. All Rights Reserved
    5. 5. Shipping Routes© SitePen, Inc. All Rights Reserved
    6. 6. © SitePen, Inc. All Rights Reserved
    7. 7. 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
    8. 8. 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
    9. 9. 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
    10. 10. 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
    11. 11. Major Changes and Additions (1.6) Dojo Object Store Feature detection/has.js LESS CSS framework HTML5 data attributes AMD (Asynchronous module definition) Android, IE9, FF4+ support dojox.socket, Stateful Dojo Web Builder Tutorials, Docs© SitePen, Inc. All Rights Reserved
    12. 12. 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
    13. 13. Application Challenges and© SitePen, Inc. All Rights Reserved
    14. 14. 1. Challenge: Performance and Modularity Difficult to mix and match code from different projects without risk of name collisions or dependency conflicts Loading and executing dependencies Cross-domain loading Multiple versions of the same package, or load two different packages with the same name, or patching a single module with another module© SitePen, Inc. All Rights Reserved
    15. 15. Solution: Dojo Nano and AMD "Base-less" Dojo Only using the parts of Dojo you really need, on a much more granular level Dojo 1.7 AMD loader <4K gzip/minified Asynchronous Module Definition (AMD) A grassroots standard for interoperable code modules Client and Server Plugin framework for additional extensibility Default module system for Dojo 1.7+ Works with jQuery, MooTools (2.0), and hundreds of© SitePen, Inc. All Rights Reserved
    16. 16. 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
    17. 17. Creating a widget with AMD and declare // Creating a widget with AMD define( ["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/TemplatedWidget.html"], function(declare, _WidgetBase, _TemplatedMixin, template){ return declare([_WidgetBase, _TemplatedMixin], { templateString: template }); } ); // Note how the dependencies map into the function call!© SitePen, Inc. All Rights Reserved
    18. 18. 2. Challenge: User Interface Widgets Even with HTML5, form controls are limited and inconsistent in their styling and capabilities.© SitePen, Inc. All Rights Reserved
    19. 19. Solution: Dijit and Dojo Extensions© SitePen, Inc. All Rights Reserved
    20. 20. Dijit Slider Example <body class="claro">     <input id="hslider" value="3" type="range"         data-dojo-type="dijit.form.HorizontalSlider"         data-dojo-props="             minimum: 0,             maximum: 10,             discreteValues: 11">       <script>             // Require parser since we are performing declarative instantiation             // Also require the slider class             require(["dijit/form/HorizontalSlider", "dojo/ parser", "dojo/domReady!"]);     </script> </body>© SitePen, Inc. All Rights Reserved
    21. 21. 3. Challenge: Mobile Heterogeneity Native requires learning many new languages for many new devices Web has challenges to overcome.© SitePen, Inc. All Rights Reserved
    22. 22. Solution: Dojo and Dojo Mobile Cross Platform Mobile WebApps Started in Dojo 1.5 Open source (BSD) Support for many Simple mobile UI HTML5 features and paradigms, same data beyond interactions© SitePen, Inc. All Rights Reserved
    23. 23. Mobile Key Paradigms Lightweight Dojo-based widgets for mobile web apps 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 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
    24. 24. 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
    25. 25. Mobile Widget Example <div id="about" data-dojo-type="dojox.mobile.View">     <h1 data-dojo-type="dojox.mobile.Heading" data-dojo- props="back:General, moveTo:general">About</h1>     <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Generic Mobile Device</h2>     <ul data-dojo-type="dojox.mobile.RoundRectList">         <li data-dojo-type="dojox.mobile.ListItem" data-dojo- props="rightText:AcmePhone">             Network                                                    </li>                                                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo- props="rightText:AcmePhone">             Line         </li>     </ul> </div>© SitePen, Inc. All Rights Reserved
    26. 26. 4. Challenge: Separate Data from UX Separate UI from data handling Independent evolution of UI components and data components© SitePen, Inc. All Rights Reserved
    27. 27. 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/
    28. 28. Solution: Data Access via Dojo Object Store Work on HTML5 IndexedDB recommendation key/value approach to data access local storage but useful in other contexts accessing data stores (JSON, XML, REST, etc.) matches nicely with NoSQL implemented in Persevere (middleware for SSJS, Node or Narwhal+Jack) very clean approach to getting and setting data modular layering of functionality like notifications© SitePen, Inc. All Rights Reserved
    29. 29. Dojo Store Architecture Tree Grid ComboBox Dojo Store API Memory JsonRest CustomStore© SitePen, Inc. All Rights Reserved
    30. 30. Connect Store to Widgets An HTML input or Dijit form widget radio, checkbox, textbox, etc. Event triggered editor or always on© SitePen, Inc. All Rights Reserved
    31. 31. Data Store Example require(["dojox/charting/Chart", "dojox/charting/StoreSeries" /*, other deps */,"dojox/charting/plot2d/Default"], function(Chart, StoreSeries, /*, other deps */){ // create stockStore here... new Chart("lines").            /* any other config of chart */            // now use a data series from my store            addSeries("Price", new StoreSeries(                 stockStore, {query: {sector:"technology"}}, "price")).             render();         });© SitePen, Inc. All Rights Reserved
    32. 32. 5. Challenge: Real-Time Competing Protocols (web sockets, long-polling) Reconnection Integration with data stores, local storage, events© SitePen, Inc. All Rights Reserved
    33. 33. Solution: Dojo Socket Connect to WebSocket Receive Yes server message Check for WebSocket support Connection failure message event (due to proxy) No Make XHR Receive request response Very lightweight socket Fallback to XHR if not communication available WebSocket if available© SitePen, Inc. All Rights Reserved
    34. 34. Dojo Socket Example require(["dojox/socket"], function(socket){ // Create dojox/socket instance var socket1 = new socket("/comet"); // Create open event listener socket1.on("open",function(event){ console.log("Socket opened successfully!"); }); // Create message event listener socket1.on("message",function(event){ console.log("Message received!", event, event.data); // Send a message back! socket1.send("Received your message!"); }); // Customized headers var socket2 = new socket({ url: "/comet", headers: { "Accept": "application/json", "Content-Type": "application/json" } }); );© SitePen, Inc. All Rights Reserved
    35. 35. Sockets and Stores Together // Create Object Store define("my-module", function(require){ var JsonRest = require("dojo/store/JsonRest"); var Observable = require("dojo/store/Observable"); var store = new JsonRest({data:myData}); store = Observable(store); }); // Inform store of message received socket.on("message", function(event){ var existingId = event.data.id; var object = event.data.object; store.notify(object, existingId); });© SitePen, Inc. All Rights Reserved
    36. 36. Documentation Significant Tutorial Series (55 and counting!)http://dojotoolkit.org/documentation/© SitePen, Inc. All Rights Reserved
    37. 37. 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
    38. 38. Result: Modular Tools Tools to mix and match to Modular enough for very create your app simple projects, flexible Separate data from UI and consistent enough to logic simple and handle the most seamlessly challenging, feature-rich© SitePen, Inc. All Rights Reserved web apps
    39. 39. © SitePen, Inc. All Rights Reserved
    40. 40. 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
    41. 41. Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved

    ×