• Save
Top Ways Dojo Can Improve Your Mapping App
 

Like this? Share it with your network

Share

Top Ways Dojo Can Improve Your Mapping App

on

  • 3,128 views

Top Ways Dojo Can Improve Your Mapping App

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

Statistics

Views

Total Views
3,128
Views on SlideShare
3,128
Embed Views
0

Actions

Likes
3
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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't have to give an explicit name, though this has potential issue if we're trying to use this widget declaratively\n
  • \n
  • \n
  • \n
  • \n
  • \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 Presentation Transcript

  • 1. presents Top Ways that Dojo Can Improve Your Mapping Apps© SitePen, Inc. All Rights Reserved
  • 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. Interactive Drawing© SitePen, Inc. All Rights Reserved
  • 4. © SitePen, Inc. All Rights Reserved
  • 5. Shipping Routes© SitePen, Inc. All Rights Reserved
  • 6. © SitePen, Inc. All Rights Reserved
  • 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. 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. 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. 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. 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. 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. Application Challenges and© SitePen, Inc. All Rights Reserved
  • 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. 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. 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. 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. 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. Solution: Dijit and Dojo Extensions© SitePen, Inc. All Rights Reserved
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Dojo Store Architecture Tree Grid ComboBox Dojo Store API Memory JsonRest CustomStore© SitePen, Inc. All Rights Reserved
  • 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. 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. 5. Challenge: Real-Time Competing Protocols (web sockets, long-polling) Reconnection Integration with data stores, local storage, events© SitePen, Inc. All Rights Reserved
  • 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. 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. 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. Documentation Significant Tutorial Series (55 and counting!)http://dojotoolkit.org/documentation/© SitePen, Inc. All Rights Reserved
  • 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. 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. © SitePen, Inc. All Rights Reserved
  • 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. Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved