• Share
  • Email
  • Embed
  • Like
  • Private Content
Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival
 

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

on

  • 2,398 views

AMD: The Definitive Source

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

Statistics

Views

Total Views
2,398
Views on SlideShare
2,397
Embed Views
1

Actions

Likes
0
Downloads
24
Comments
0

1 Embed 1

https://ecportalsitc.verizon.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

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

    • presents Modular, Mobile, and Reinventing Web App Development Phoenix Mobile Festival April 2012© SitePen, Inc. All Rights Reserved
    • 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
    • Evolution of Web App Development https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/© SitePen, Inc. All Rights Reserved
    • 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/
    • 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
    • We Want Morehttps://secure.flickr.com/photos/dylans/5206483166/ © 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 presentation" control and federation of data© SitePen, Inc. All Rights Reserved https://secure.flickr.com/photos/dylans/5916167025/
    • Anatomy of Apps© SitePen, Inc. All Rights Reserved
    • 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
    • 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
    • Mobile Heterogeneity Native requires learning many new languages for many new devices Web has challenges to overcome.© SitePen, Inc. All Rights Reserved
    • 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
    • Real-Time Competing Protocols (web sockets, long-polling) Reconnection Integration with data stores, local storage, events© SitePen, Inc. All Rights Reserved
    • Distribution Web Native Hybrid© 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 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
    • http://dojotoolkit.org/ © SitePen, Inc. All Rights Reserved
    • 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
    • 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
    • HTML5 & CSS3 Native <audio> and <video> CSS animations More new elements Mobile-specific CSS New <input> types Flexible layouts© 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/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
    • 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 notifications© SitePen, Inc. All Rights Reserved
    • 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
    • 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
    • Maqetta Open Source Visual Tools for Dojo and HTML5http://maqetta.org/© SitePen, Inc. All Rights Reserved
    • 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
    • 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
    • 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
    • © 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
    • Transition Effects Dojo 1.7: 4 standard effects 16 new transition effects© 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
    • Vector Graphics, Charts, Gauges, Maps© 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
    • 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
    • Carousel Swipe to browse or change views© SitePen, Inc. All Rights Reserved
    • 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
    • OpenLayers Maps OpenLayers Map Integration for DojoGeo-referenced positioning of GFX Shapes and Widgets© SitePen, Inc. All Rights Reserved
    • wire.js Inversion of control container DOM management Lazy-load application Pub / Sub dependencies AOP Manage component lifecycle© SitePen, Inc. All Rights Reserved
    • 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
    • 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
    • AMD© 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 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
    • 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 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
    • Objects Stores and IndexedDB© 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
    • 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
    • Dojo Store Architecture Tree dgrid ComboBox Dojo Store API Memory JsonRest CustomStore© SitePen, Inc. All Rights Reserved
    • 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
    • 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
    • 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 Notifications built around query results© SitePen, Inc. All Rights Reserved
    • Dojo Object Store API© 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 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Object Store Driven Fast, lightweight stores Correct query observation events Uses the new HTML5-inspired object store API directly© SitePen, Inc. All Rights Reserved
    • Modular, Composable Pluggable design Different grid components combined as mixins Column components can be used per-column© SitePen, Inc. All Rights Reserved
    • 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
    • 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-Driven Almost no inline styles Easy customization via CSS No coding necessary for styling Further improves performance© 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 specific shims and extensions© SitePen, Inc. All Rights Reserved
    • Features! Start with basics... Tabular view of data Headers with scrolling body Virtual paging/scrolling Sorting Keyboard Navigation© SitePen, Inc. All Rights Reserved
    • Feature Comparison© SitePen, Inc. All Rights Reserved
    • Complex Layout: dTunes© SitePen, Inc. All Rights Reserved
    • The Dojo Foundation Open Home for the Open Web© SitePen, Inc. All Rights Reserved
    • Community© SitePen, Inc. All Rights Reserved
    • Community Apphttp://vepi-2k3208aja.acs.cnet-caen.fr/df/© 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-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
    • Foundation Projects© 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, 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
    • Documentation Significant Tutorial Series (55 and counting!)http://dojotoolkit.org/documentation/© 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, 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
    • © SitePen, Inc. All Rights Reserved
    • 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
    • Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved