Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival

3,640 views

Published on

AMD: The Definitive Source
http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/

Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival

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

  • Be the first to like this

No Downloads
Views
Total views
3,640
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival

  1. 1. presents Modular, Mobile, and Reinventing Web App Development Phoenix Mobile Festival April 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. Evolution of Web App Development https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/© SitePen, Inc. All Rights Reserved
  4. 4. 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/
  5. 5. 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
  6. 6. We Want Morehttps://secure.flickr.com/photos/dylans/5206483166/ © SitePen, Inc. All Rights Reserved
  7. 7. 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.flickr.com/photos/dylans/5916167025/
  8. 8. Anatomy of Apps© SitePen, Inc. All Rights Reserved
  9. 9. 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
  10. 10. User Interface Widgets Even with HTML5, form controls are limited and inconsistent in their styling and capabilities. Native vector graphics, audio, video Drag-n-Drop, Multi-file upload, grids, charts, gauges, and more... Themes© SitePen, Inc. All Rights Reserved
  11. 11. Mobile Heterogeneity Native requires learning many new languages for many new devices Web has challenges to overcome.© SitePen, Inc. All Rights Reserved
  12. 12. Separate Data from UX Separate UI from data handling Independent evolution of UI components and data components Separation of concerns (MVC, MVP, etc.) Inversion of Control (IOC)© SitePen, Inc. All Rights Reserved
  13. 13. Real-Time Competing Protocols (web sockets, long-polling) Reconnection Integration with data stores, local storage, events© SitePen, Inc. All Rights Reserved
  14. 14. Distribution Web Native Hybrid© SitePen, Inc. All Rights Reserved
  15. 15. © SitePen, Inc. All Rights Reserved
  16. 16. 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
  17. 17. http://dojotoolkit.org/ © SitePen, Inc. All Rights Reserved
  18. 18. 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
  19. 19. Philosophy Push the limits (vector graphics/WebGL, offline, HTML5, ...) Define and adopt defacto standards (AMD, JSON Schema) Developer productivity and JSON tools Open, free, & liberally licensed with clear IP© SitePen, Inc. All Rights Reserved
  20. 20. HTML5 & CSS3 Native <audio> and <video> CSS animations More new elements Mobile-specific CSS New <input> types Flexible layouts© SitePen, Inc. All Rights Reserved
  21. 21. 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
  22. 22. 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
  23. 23. 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 notifications© SitePen, Inc. All Rights Reserved
  24. 24. Modern Web Features Native vector graphics: GFX Audio and Video DnD, multi-file upload Data attributes Widgets Web Sockets Local storage ...© SitePen, Inc. All Rights Reserved
  25. 25. Application Controllers and Patterns 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
  26. 26. Maqetta Open Source Visual Tools for Dojo and HTML5http://maqetta.org/© SitePen, Inc. All Rights Reserved
  27. 27. Dojo Mobile Cross-platform mobile Web apps Started in Dojo 1.5 Simple mobile UI paradigms, Support for many HTML5 same data interactions features Native or general themes Open source (BSD) Grids, charts, maps, gauges© SitePen, Inc. All Rights Reserved
  28. 28. 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 Server technology agnostic© SitePen, Inc. All Rights Reserved
  29. 29. 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
  30. 30. © SitePen, Inc. All Rights Reserved
  31. 31. 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
  32. 32. 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
  33. 33. Transition Effects Dojo 1.7: 4 standard effects 16 new transition effects© SitePen, Inc. All Rights Reserved
  34. 34. 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
  35. 35. Vector Graphics, Charts, Gauges, Maps© SitePen, Inc. All Rights Reserved
  36. 36. 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
  37. 37. Gauges Mobile enablement and optimization of Dojo gauges! (Webkit mobile) Several new high-quality gauge styles Touch support for changing gauge values© SitePen, Inc. All Rights Reserved
  38. 38. Carousel Swipe to browse or change views© SitePen, Inc. All Rights Reserved
  39. 39. Geo Charting Vector map component Desktop and Mobile enabled with touch/zoom Connect to a Dojo store for coloring map elements Tooltips Legend© SitePen, Inc. All Rights Reserved
  40. 40. OpenLayers Maps OpenLayers Map Integration for DojoGeo-referenced positioning of GFX Shapes and Widgets© SitePen, Inc. All Rights Reserved
  41. 41. wire.js Inversion of control container DOM management Lazy-load application Pub / Sub dependencies AOP Manage component lifecycle© SitePen, Inc. All Rights Reserved
  42. 42. PhoneGap/Cordova Build mobile apps with HTML, Works with many devices CSS, and JavaScript Build service for easy compiles Doesn’t compile into native Easy to learn code Free© SitePen, Inc. All Rights Reserved
  43. 43. 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
  44. 44. AMD© SitePen, Inc. All Rights Reserved
  45. 45. 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
  46. 46. The Benefits 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: define and require Create modules that are easily distributed© SitePen, Inc. All Rights Reserved
  47. 47. 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
  48. 48. 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
  49. 49. Objects Stores and IndexedDB© SitePen, Inc. All Rights Reserved
  50. 50. 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
  51. 51. 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
  52. 52. Dojo Store Architecture Tree dgrid ComboBox Dojo Store API Memory JsonRest CustomStore© SitePen, Inc. All Rights Reserved
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. Dojo Object Store API© SitePen, Inc. All Rights Reserved
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. Core Stores Concrete Stores Memory - In memory JsonRest - Connected to store through HTTP/REST DataStore - Adapter for old Dojo Data stores Store Wrappers Observable© SitePen, Inc. All Rights Reserved
  63. 63. 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
  64. 64. 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
  65. 65. dojox.socket and Comet Servers dojox.socket works with CometD, Socket.IO, Tunguska, Hookbox, Orbited, etc. http://www.sitepen.com/blog/2010/10/31/dojo-websocket/© SitePen, Inc. All Rights Reserved
  66. 66. dojox.socket Sample require(["dojox/socket"], function (Socket) { // Create socket instance var socket = new 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 Socket({ url: "/comet", headers: { "Accept": "application/json", "Content-Type": "application/json" } }); });© SitePen, Inc. All Rights Reserved
  67. 67. 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
  68. 68. Lightweight <12KB minified <32KB minified with all dependencies less than Dojo Base, can go baseless (nano) Easy to grok https://github.com/sitepen/ dgrid© SitePen, Inc. All Rights Reserved
  69. 69. Object Store Driven Fast, lightweight stores Correct query observation events Uses the new HTML5-inspired object store API directly© SitePen, Inc. All Rights Reserved
  70. 70. Modular, Composable Pluggable design Different grid components combined as mixins Column components can be used per-column© SitePen, Inc. All Rights Reserved
  71. 71. 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
  72. 72. 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
  73. 73. CSS-Driven Almost no inline styles Easy customization via CSS No coding necessary for styling Further improves performance© SitePen, Inc. All Rights Reserved
  74. 74. 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 specific shims and extensions© SitePen, Inc. All Rights Reserved
  75. 75. Features! Start with basics... Tabular view of data Headers with scrolling body Virtual paging/scrolling Sorting Keyboard Navigation© SitePen, Inc. All Rights Reserved
  76. 76. Feature Comparison© SitePen, Inc. All Rights Reserved
  77. 77. Complex Layout: dTunes© SitePen, Inc. All Rights Reserved
  78. 78. The Dojo Foundation Open Home for the Open Web© SitePen, Inc. All Rights Reserved
  79. 79. Community© SitePen, Inc. All Rights Reserved
  80. 80. Community Apphttp://vepi-2k3208aja.acs.cnet-caen.fr/df/© SitePen, Inc. All Rights Reserved
  81. 81. 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 Projects are very autonomous All code contributed through CLAs© SitePen, Inc. All Rights Reserved
  82. 82. Foundation Projects© SitePen, Inc. All Rights Reserved
  83. 83. 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 Pepper, Wall Street Journal, Williams-Sonoma, Zend, and 1000s more...© SitePen, Inc. All Rights Reserved
  84. 84. Documentation Significant Tutorial Series (55 and counting!)http://dojotoolkit.org/documentation/© SitePen, Inc. All Rights Reserved
  85. 85. 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
  86. 86. Result: Modular Tools Tools to mix and match to Modular enough for very create your app simple projects, flexible 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
  87. 87. © SitePen, Inc. All Rights Reserved
  88. 88. 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
  89. 89. Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved

×