Make Beautiful Apps Faster Using the Dojo Mobile Toolkit- October 2011

Fir 2004 st c od e Do jo© SitePen, Inc. All Rights Reserved 2005 rel Fou eas nd e 0 atio .1, I 0.2 n 2006 rel BM, A eas e 0 OL .3, rel 0.4 eas e1 .0 2007 2008 rel eas e1 .2 rel 2009 rel ease 1 eas e 1 .3 .4 rel Dojo History and Roadmap eas 2010 mo e 1.5 bile 1.7 relea 2011 (N se 1. an 6, o), rel 1.8 eas 2012 2.0 e 1.9 , 2. 1 ,

Project Goals Uni ed JavaScript toolkit for superior web and mobile apps Fill the Gaps (browsers, platforms) Fast, Powerful, Eﬃcient, Modular, Extensible, Professional 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, oﬄine, HTML5, ...) De ne and adopt defacto standards (AMD, JSON Schema) Developer productivity and tools Open, free, & liberally licensed© SitePen, Inc. All Rights Reserved

Whats Driving Us? Less is more uxebu experiments and embedJS microtoolkits splitting things out, bringing them back together mobile evolution of loaders evolution of browsers/HTML5© SitePen, Inc. All Rights Reserved

Evolution Web 1.0 Dumb client, smart server Focus on HTML & CSS, "separation of markup and presentation" Web 2.0 Smarter client, smart server, con ict 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

Revolution: Separation of Data and UX You want access to your data, and information in a variety of experiences relevant to your 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

Dojo Mobile Cross Platform Mobile WebApps Started in Dojo 1.5 Simple mobile UI paradigms, Support for many HTML5 same data interactions features and beyond 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-speci c 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

From Basics to Rich Widgets Resource Loading with CommonJS AMD Themes (including LESS) Widgets/components (mobile optimized, and Dijits) Data/object store Touch Events and Scroll Application controller and Device detection Layout, scenes, animations Vector graphics, charts, gauges, maps Web or native (PhoneGap) deployment© SitePen, Inc. All Rights Reserved

Resource Loading Package Management Modularity of code as well as ease of cross-project sharing while reducing side eﬀects and testing complexity Optimization Reduced size balanced with number of requests Feature Detection vs. User-agent optimized builds has.js vs. optimized builds for common user agents CommonJS Modules and AMD© SitePen, Inc. All Rights Reserved

AMD - Asynchronous Module De nition CommonJS modules arent optimized for browser use (possible to use them, but non optimal) AMD de nes an API to call to register a module Allows modules to execute in a <script> Loader can generate script tags Bene ts of script tag based: speed - <script> tags are fast debuggability - real stack traces, named scripts in all debuggers x-domain - No extra work for x-domain, works the same Dojo 1.7 AMD loader <4K gzip/mini ed© 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 noti cations© SitePen, Inc. All Rights Reserved

Dojo Object Store 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 foodStore = new dojo.store.JsonRest({ target: "/Food/" }); foodStore.get("cherry").then(function(cherry){ cherry.color = "red"; foodStore.put(cherry); }); foodStore.remove("pickle"); foodStore = dojo.store.Observable(foodStore); var query = foodStore.query({color:"red"}); query.forEach(function(food){...}); query.observe(function(object, oldIndex, newIndex){...});© 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 diﬀerent ways (Flippable View, Scrollable View) Touch events are synchronized in mobile and desktop environments for more eﬃcient development© SitePen, Inc. All Rights Reserved

Application Controller: dojox.app We don’t just build websites, we build web applications, so why just build mobile websites? dojox.app is a full mobile web application controller. Manages scenes Asynchronously 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

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

View Navigation & Transition Eﬀects <body> <View id=ViewA> <Heading>ViewA</Heading> <RoundRectList> <ListItem moveTo=ViewB>Item 1</ListItem> <ListItem moveTo=ViewB>Item 2</ListItem> <ListItem moveTo=ViewB>Item 3</ListItem> <View id=ViewB> Slide <Heading moveTo="ViewA">ViewB</Heading> <RoundRectList> <ListItem>Video</ListItem> <ListItem>Maps</ListItem> <ListItem>Phone</ListItem>© 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

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

Optional Desktop Compatibility dojox.mobile.compat provides poly ll support for non-CSS3 desktop browsers, such IE8+ and Firefox5+. Compat is not necessary for webkit-based browsers. Typical usage would be to do conditional loading with require(): require(["dojox/mobile/compat"]); Directly replaces some methods instead of subclassing. Uses: images for buttons, gradient colors, etc. dojo.fx for animations.© SitePen, Inc. All Rights Reserved

Dojo 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

Dojo and WebWorks Example define("sitepen/mobile/addressbook", ["dojo/_base/kernel"], function(d){ createContact: function(){ if (has("addressbook") && blackberry){ var contact = new blackberry.pim.Contact(); contact.firstName = Nick; contact.lastName = Scott; var args = new blackberry.invoke.AddressBookArguments(contact); args.view = 0; blackberry.invoke.invoke( blackberry.invoke.APP_ADDRESSBOOK, args); } })();© SitePen, Inc. All Rights Reserved

Quick Dojo + BlackBerry Tips Dojo Builds, either command line or http:// build.dojotoolkit.org/ BlackBerry themes are Dojo 1.7+ Dojo Store wrapping Blackberry APIs, WebWorks is planned for 1.8© 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-pro t 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

Major Contributors & Users AOL, IBM, SitePen, TIBCO Alcatel-Lucent, ADP, Cisco, Google, Intalio (WebTide), Mozilla, Oracle (Sun), Orange Labs, Research In Motion, Thomson Reuters, uxebu, vmware (Spring), Zend, and many thousands more.© SitePen, Inc. All Rights Reserved

SitePen: We help our clients build great apps. Desktop and Mobile Web App Development, Design, Advice Support & Training Strong advocates and contributors of FOSS Works with some amazing companies and organizations© SitePen, Inc. All Rights Reserved

Make Beautiful Apps Faster Using the Dojo Mobile Toolkit- October 2011

by SitePen

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 545

Statistics