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

5,738 views

Published on

Make Beautiful Apps Faster Using the Dojo Mobile Toolkit

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

No Downloads
Views
Total views
5,738
On SlideShare
0
From Embeds
0
Number of Embeds
550
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \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

    1. 1. presents Make Beautiful Apps Faster Using the Dojo Mobile Toolkit© 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. © SitePen, Inc. All Rights Reserved
    4. 4. 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 ,
    5. 5. 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
    6. 6. 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
    7. 7. 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
    8. 8. Multifarious Experiences© SitePen, Inc. All Rights Reserved
    9. 9. 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
    10. 10. 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
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. Documentation TweetView Tutorial serieshttp://dojotoolkit.org/documentation/© SitePen, Inc. All Rights Reserved
    15. 15. Features© SitePen, Inc. All Rights Reserved
    16. 16. 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
    17. 17. 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
    18. 18. 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
    19. 19. 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
    20. 20. 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
    21. 21. 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
    22. 22. 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
    23. 23. Store Wrapper Takes a store, returns one with added functionality Cache, validate, etc. Like middleware for stores© SitePen, Inc. All Rights Reserved
    24. 24. 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
    25. 25. 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
    26. 26. Widgets and Components Wide variety of mobile widgets and UI elements© SitePen, Inc. All Rights Reserved
    27. 27. 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
    28. 28. 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
    29. 29. Transition Effects Dojo 1.7: 4 standard effects 16 new transition effects© SitePen, Inc. All Rights Reserved
    30. 30. 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
    31. 31. Vector Graphics, Charts, Gauges, Maps© SitePen, Inc. All Rights Reserved
    32. 32. 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
    33. 33. 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
    34. 34. Carousel Swipe to browse or change views© SitePen, Inc. All Rights Reserved
    35. 35. 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
    36. 36. OpenLayers Maps OpenLayers Map Integration for DojoGeo-referenced positioning of GFX Shapes and Widgets© SitePen, Inc. All Rights Reserved
    37. 37. Optional Desktop Compatibilitydojox.mobile.compat provides polyfill support for non- CSS3 desktop browsers, such IE8+ and Firefox5+© SitePen, Inc. All Rights Reserved
    38. 38. 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
    39. 39. 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
    40. 40. 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
    41. 41. 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
    42. 42. 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
    43. 43. The Dojo Foundation Open Home for the Open Web© SitePen, Inc. All Rights Reserved
    44. 44. Community© SitePen, Inc. All Rights Reserved
    45. 45. 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
    46. 46. Foundation Projects© SitePen, Inc. All Rights Reserved
    47. 47. 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
    48. 48. © SitePen, Inc. All Rights Reserved
    49. 49. 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
    50. 50. Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved

    ×