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

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

on

  • 5,328 views

Make Beautiful Apps Faster Using the Dojo Mobile Toolkit

Make Beautiful Apps Faster Using the Dojo Mobile Toolkit

Statistics

Views

Total Views
5,328
Views on SlideShare
4,781
Embed Views
547

Actions

Likes
4
Downloads
0
Comments
0

1 Embed 547

http://www.zarazaga.net 547

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
  • 1.7 is the API alpha for 2.0\nNano (baseless release)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Introduce SitePen; more details are on the next slide.\n
  • SitePen CEO Dylan Schiemann is a Dojo Toolkit co-founder. Many other SitePen employees are core contributors to the Dojo Toolkit and other popular JavaScript projects.\nFOSS = Free Open Source Software\n\n\n
  • \n

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

  • presents Make Beautiful Apps Faster Using the Dojo Mobile Toolkit© 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
  • © SitePen, Inc. All Rights Reserved
  • 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, Efficient, 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, offline, 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
  • Multifarious Experiences© 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
  • ThemesDojo 1.7 has BlackBerry 6, iPhone, iPad, Android 2.x, and device neutral theme.Manual or Automatic device detection to apply themes.© SitePen, Inc. All Rights Reserved
  • Documentation TweetView Tutorial serieshttp://dojotoolkit.org/documentation/© SitePen, Inc. All Rights Reserved
  • Features© 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 effects 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
  • 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
  • Store Wrapper Takes a store, returns one with added functionality Cache, validate, etc. Like middleware for stores© 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
  • 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
  • Widgets and Components Wide variety of mobile widgets and UI elements© 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 Effects <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
  • 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
  • Optional Desktop Compatibilitydojox.mobile.compat provides polyfill support for non- CSS3 desktop browsers, such IE8+ and Firefox5+© 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
  • 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
  • The Dojo Foundation Open Home for the Open Web© SitePen, Inc. All Rights Reserved
  • Community© 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
  • Foundation Projects© 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, 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
  • Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved