• Like
  • Save

dgrid: Next Generation Dojo Grid- September 2011

  • 4,322 views
Uploaded on

April 23, 2012- SitePen announces dgrid Beta! …

April 23, 2012- SitePen announces dgrid Beta!
Check it out here! http://dgrid.io/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,322
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • Introduce self, background, “how I got into JavaScript” current roles\nGo around room and get intros from students\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
  • 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

Transcript

  • 1. presents dgrid: Next Generation Dojo Grid Nano © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 2. Nice to Meet You Kris Zyp Sr. Software Engineer @SitePen Founder of Persevere Dojo Toolkit Core Committer JSON Schema author OpenAjax alliance steering committee member © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 3. Mobile-Ready, Desktop-Friendly Native-style scrolling Baseless, lightweight Works everywhere, not just mobile Firefox 4+ Safari 5+ Chrome stable Opera 11.50+ IE 6+ iOS 4+, Android 2.3+, Blackberry 6+ © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 4. Lightweight <30KB minified <80KB minified with all dependencies less than Dojo Base, can go baseless (nano) Easy to grok © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 5. Object Store Driven Fast, lightweight stores Correct query observation events Uses the new HTML5-inspired object store API directly © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 6. Modular, Composable Pluggable design Different grid components combined as mixins Column components can be used per-column © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 7. 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 ReservedMonday, October 10, 2011
  • 8. 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 ReservedMonday, October 10, 2011
  • 9. CSS-Driven Almost no inline styles Easy customization via CSS No coding necessary for styling Further improves performance © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 10. CSS Modularity Proper skin vs structure separation Easing skinning with generic classes Utilizes XStyle (see Track B talk) Framework for shimming and extending CSS Handles loading CSS Parsing CSS Uses CSS plugins to handle specific shims and extensions © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 11. Features! Start with basics... Tabular view of data Headers with scrolling body Virtual paging/scrolling Sorting Keyboard Navigation © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 12. 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 ReservedMonday, October 10, 2011
  • 13. 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 ReservedMonday, October 10, 2011
  • 14. Editing An HTML input or Dijit form widget radio, checkbox, textbox, etc. Event triggered editor or always on © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 15. Tree Hierarchical data view Maintain column alignment Lightweight, easy to extend © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 16. 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 ReservedMonday, October 10, 2011
  • 17. Selection: Example © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 18. 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 ReservedMonday, October 10, 2011
  • 19. Themes: Examples © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 20. 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 ReservedMonday, October 10, 2011
  • 21. Complex Layout: Example © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 22. Complex Layout: More Examples © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 23. Complex Layout: dTunes © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 24. Drag n’ Drop Drag n’ Drop rows Within a grid To other grids To/from other sources/targets © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 25. Store Integration Fully Object store driven Correct result set notifications, highlighted changes Auto-save or queued saves © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 26. 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 ReservedMonday, October 10, 2011
  • 27. Pushes on New Technologies AMD Package Repository XStyle put-selector (template-free) dojo/on © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 28. SitePen: We Help Our Clients Build Great Apps. Desktop and Mobile Web App Development, Design, Advice Support & Training Strong advocates and contributors of FOSS (Dojo, Persevere) Work with some amazing companies and organizations: © SitePen, Inc. All Rights ReservedMonday, October 10, 2011
  • 29. © SitePen, Inc. All Rights ReservedMonday, October 10, 2011