• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Dojo 2.0: Modular, Mobile, and Reinventing Web App Development
 

Dojo 2.0: Modular, Mobile, and Reinventing Web App Development

on

  • 12,179 views

Dojo 2.0: Modular, Mobile, and Reinventing Web App Development - Rich Web Experience 2011

Dojo 2.0: Modular, Mobile, and Reinventing Web App Development - Rich Web Experience 2011

Statistics

Views

Total Views
12,179
Views on SlideShare
12,178
Embed Views
1

Actions

Likes
12
Downloads
0
Comments
0

1 Embed 1

http://a0.twimg.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

    Dojo 2.0: Modular, Mobile, and Reinventing Web App Development Dojo 2.0: Modular, Mobile, and Reinventing Web App Development Presentation Transcript

    • presents Dojo 1.7 and 2.0: Modular, Mobile, and Reinventing Web App Development© SitePen, Inc. All Rights Reserved
    • © 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
    • Fir 2004 st c od e© SitePen, Inc. All Rights Reserved Do jo 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 Dojo History and Roadmap rel eas 2010 mo e 1. 5 bi l e 1.7 relea 2011 (N se 1. an 6, o), rel 1.8 eas 2012 2.0 e 1.9 , 2. 1 ,
    • http://dojotoolkit.org/ © SitePen, Inc. All Rights Reserved
    • Dojo Toolkit: 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) 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
    • 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/modules Evolution of browsers/HTML5© 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, 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
    • 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/
    • Multifarious Experiences© SitePen, Inc. All Rights Reserved
    • Major Changes and Additions (1.6) Dojo Object Store Feature detection/has.js LESS CSS framework HTML5 data attributes AMD (Asynchronous module de nition) Android, IE9, FF4+ support dojox.socket, Stateful Dojo Web Builder Tutorials, Docs© 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
    • Layout Widgets Made up of containers and panes Dijit Panes t inside of the containers Containers add controls for how panes are viewed Excellent for dealing with height-related design issues© SitePen, Inc. All Rights Reserved
    • Dialogs and Tooltips Modal Dialog Fixes iframe/Flash/Java/etc bleed through problem Dialogs can launch dialogs Tooltips can self-size and display where there’s a best t Great for in-place content detail© SitePen, Inc. All Rights Reserved
    • Form Widgets Build on top of the very limited set of built-ins Can remove constraints e.g. a list of 1,000,000 items Adds a layer for validation© SitePen, Inc. All Rights Reserved
    • Rich Text Editor WYSIWYG Rich text editing Customizable toolbar with plugins© SitePen, Inc. All Rights Reserved
    • Dijit Tree Efficient method of accessing large, hierarchical data sets Powered by the dojo.data API Powerful data stores can create rich interactions© SitePen, Inc. All Rights Reserved
    • Dojo Charting© SitePen, Inc. All Rights Reserved
    • Dojo, Dijit, DojoX, and HTML Forms Forms are an essential component to most websites Form validation can be tedious, time-consuming Dojo, Dijit, and DojoX enhance forms by: providing an expansive set of form widgets to make form elements more usable and attractive providing a validation library to allow developers to work more efficiently and avoid writing common validation functions and regular expressions providing a form manager to manage widget life cycle providing a framework by which developers may create their custom widgets© SitePen, Inc. All Rights Reserved
    • Dijit Form Widgets Button RadioButton CheckBox Select ComboBox Textarea CurrencyTextBox TextBox DateTextBox TimeTextBox DropDownButton FilteringSelect ...and more! MultiSelect NumberSpinner© SitePen, Inc. All Rights Reserved
    • DojoX Enhanced Form Widgets BusyButton RadioStack CheckedMultiSelect Rating FileInput TimeSpinner FileUploader VerticalRangeSlider HorizontalRangeSlider Manager ..and more! MultiComboBox PasswordValidator© SitePen, Inc. All Rights Reserved
    • Form Validation with dojox.validate Contains numerous regular expressions to validate common input formats, including: E-mail URL Phone Number Credit Card Validation regular expressions may be locale-speci c Highly extendable; add your own validations! Allows you to quickly implement validation; no need to start from scratch. Displays error icon and tooltip for invalid elds© 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 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
    • Major Changes and Additions (1.7) Query, events refactor (including delegation) AMD refactor complete (async loader) Mobile Blackberry 6+ Touch events in Dijit dojox.app Dojo Foundation Packages dgrid, CPM, NPM Tutorials, docs, Maqetta© SitePen, Inc. All Rights Reserved
    • Maqetta Open Source Visual Tools for Dojo and HTML5http://maqetta.org/© SitePen, Inc. All Rights Reserved
    • Dojo Nano "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/mini ed© SitePen, Inc. All Rights Reserved
    • Beyond Dojo Base Dojo Nano Dojo Base© SitePen, Inc. All Rights Reserved
    • Squeezing Performance Dojo Nano dojo/store Dojo Base (Model) Automated build with dependency resolution, AMD & has.js optimized builds, all from one place with full Dijit (View) licensing and support. dojox Grid© 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
    • 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
    • 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
    • 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
    • dgrid© SitePen, Inc. All Rights Reserved
    • Lightweight <30KB mini ed <80KB mini ed 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 speci c 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 dGrid dojox.grid.DataGrid dojox.grid.EnhancedGrid jqGrid extJS Grid Panel COLUMN RESIZE Yes Buggy Buggy Yes Yes COLUMN SORT Yes Yes Yes Yes Yes COLUMN HIDEABLE No Yes Yes Yes Yes FOLLOWS AMD FORMAT Yes Yes (1.7+) Yes (1.7+) No No SUPPORTS DECLARATIVE INSTANTIATION / Yes - IP Yes Yes No No STRUCTURE NATIVE DOJO.DATA SUPPORT No Yes Yes N/A N/A NATIVE DOJO.STORE SUPPORT Yes No No N/A N/A SUPPORT FOR POPULATING DIRECTLY FROM Yes No No Yes Yes ARRAY STRUCTURE FROM HTML Yes Yes Yes Yes Yes COMPLEX STRUCTURE (SUBROWS, Yes Yes Yes (Subgrids) Yes COLUMNSETS/VIEWS) ROW GROUPING No No ? Yes Yes DND - ROW Yes - IP No Yes Yes Yes DND - CELL ? No Yes Yes Yes DND - COLUMN Yes - IP No Yes Yes Yes DND - MULTIPLE SELECT Yes No Yes (contiguous only) ? ? DND - TREE ? No ? ? Yes CELL EDIT Yes Yes Yes Yes Yes© SitePen, Inc. All Rights Reserved
    • Feature Comparison (Continued) dGrid dojox.grid.DataGrid dojox.grid.EnhancedGrid jqGrid extJS Grid Panel CELL WIDGETS Yes Yes Yes Yes Yes INDIRECT SELECTION Yes Yes Yes Yes Yes PAGINATION No Not OOTB Yes (plugin) Yes Yes CELL FORMATTING Yes Yes Yes Yes Yes(Renderers) TREE SUPPORT Yes Yes (TreeGrid) ? Yes Yes MOBILE SUPPORT Yes ? ? ? ? FILTER UI No No Yes (plugin) Yes Yes PRINT EXPORT No No Yes (plugin) No Yes (plugin) SEARCH No No Yes (plugin) Yes Yes (plugin) DECLARATIVE CONTEXT MENUS No No Yes (plugin) Yes(Row) Yes NESTED SORTING No No Yes (plugin) No Yes A11Y Yes Yes Yes Yes Yes I18N Yes Yes Yes Yes Yes COMPOUND EDITORS (2 OR MORE IN ONE No No No No No CELL) EXCEL STYLE FORMULA EDITOR No No No No No MICRO-TEMPLATES VIRTUAL PAGING Yes Yes Yes LICENSE AFL/BSD AFL/BSD AFL/BSD MIT/GPL GPLv3© SitePen, Inc. All Rights Reserved
    • Editing An HTML input or Dijit form widget radio, checkbox, textbox, etc. Event triggered editor or always on© SitePen, Inc. All Rights Reserved
    • Tree Hierarchical data view Maintain column alignment Lightweight, easy to extend© SitePen, Inc. All Rights Reserved
    • Selection Select rows via keyboard, mouse, or touch. Selection modes: extended (standard default), single, multiple, none Fires DOM events for selections to easily listen for selection changes Row or cell level selection Selectors - editor driven selection© SitePen, Inc. All Rights Reserved
    • Selection: Example© SitePen, Inc. All Rights Reserved
    • Themes Claro, Tundra, Soria, Nihilo, Squid, Sage, Slate Compatible with jQuery Themeroller for generic styling ui-widget-content, ui-widget-header, ui-state-default, ui-state- active, ui-state-highlight© SitePen, Inc. All Rights Reserved
    • Themes: Examples© SitePen, Inc. All Rights Reserved
    • Complex Layout Multiple rows per object colSpans and rowSpans Freeze columns (other columns horizontally scroll) Handled as continuous rows, making it much simpler© SitePen, Inc. All Rights Reserved
    • Complex Layout: Example© SitePen, Inc. All Rights Reserved
    • Complex Layout: More Examples© SitePen, Inc. All Rights Reserved
    • Complex Layout: dTunes© SitePen, Inc. All Rights Reserved
    • Drag n’ Drop Drag n’ Drop rows Within a grid To other grids To/from other sources/targets© SitePen, Inc. All Rights Reserved
    • Store Integration Fully Object store driven Correct result set noti cations, highlighted changes Auto-save or queued saves© SitePen, Inc. All Rights Reserved
    • More... Column Resizing Keyboard navigation per row or per cell Plug-in approaches makes it easy to add many new features!© SitePen, Inc. All Rights Reserved
    • Pushes on New Technologies AMD Package Repository XStyle put-selector (template-free) dojo/on© SitePen, Inc. All Rights Reserved
    • Plans for Dojo 1.8+ API Clean-up, Further Split of Features Compose (improved declare), xstyle, put-selector, Dijit/Widget Remove weight of deprecated APIs DojoX completely moved to foundation packages Releases Performance test suite across entire toolkit, and eventd Independent releases of packages, roll out package release sets Support major HTML5, mobile, modern browser features Web Builder and Dojo Foundation Packages integration Tools support improvements© 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-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 800 Flowers, Abbott Labs, Alcatel-Lucent, ADP, ASU, Bank of Montréal, Blue Coat Systems, Bottomline Technologies, Bristol-Myers Squibb, Brocade, BMW, Calabrio, Cambridge Semantics, Carsoni ed Treehouse, CGI, Chase, Cheesecake Factory, Chess.com, Chill.com, Cisco, Citi, Coventry Healthcare, Cox, Daimler, Disney, Eclipse Orion, ESRI, Eye-Fi, Fidelity Investments, Field Aware, Fiserv, Google, Intalio (WebTide), KLP, Lemonade, Lufthansa, Marriott, Mirapoint, Mozilla, Namesake, Napster, NASA, NOAA, OpenClass, Oracle (Sun), Orange, Pearson, Pershing, Premier, QBE, Serena Software, Shell, Thomson Reuters, UK, Uniface, USA, uxebu, Verizon Wireless, Vidéotron, vmware (Spring), Vodafone, Vodori Pepper, Wall Street Journal, Williams-Sonoma, Zend, and thousands more...© SitePen, Inc. All Rights Reserved
    • Documentation Significant Tutorial Series (54 and counting!)http://dojotoolkit.org/documentation/© SitePen, Inc. All Rights Reserved
    • Getting Started Hello Dojo: http://dojotoolkit.org/documentation/tutorials/ 1.6/hello_dojo Quick Start Guide: http://www.sitepen.com/blog/series/ dojo-quick-start-guide/ 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, exible 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 help our clients build great apps. 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