SlickGrid TouchMaking a complex JavaScript table widget work            on mobile devices     Lightning talk, Plone Confer...
Base• Your website has to work on mobile.• Older javascript widgets do not work on touch  devices.• How can we make it fee...
Introducing SlickGrid• https://github.com/mleibman/SlickGrid• fast,• configurable,• compatible,• no touch support•   client...
Wait, there is more.   • What do we mean by touch support?           Lorem Ipsum... select/      follow link   menu       ...
Demo• The “fastbreak” application is written by Paul  Everitt @paulweveritt• It is Pyramid based and uses Bootstrap in the...
Technology• Keep the same features, add touch support.• Styling. • out with jquery-ui, in with bootstrap • some responsive...
Summary• http://github.com/reebalazs/SlickGrid-touch   https://github.com/pauleveritt/fastbreak• Touch compatibility is fe...
Upcoming SlideShare
Loading in …5
×

SlickGrid Touch: Making complex JavaScript widgets work on mobile devices

3,522 views
3,279 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,522
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • This talk has nothing to do with Plone. But also, it is a client side thing, and it could be used in Plone.\n
  • old widgets: (for example a simple jquery-ui dropdown.) “Have you seen a dropdown that did not work?”\nMost of the times, a change in discipline is needed. (for example use native inputs)\nThe best implementation that explores this new discipline is the Twitter Bootstrap.\nSame interface: we do not work to work double, but also do not want that the user has to learn 2 ways.\n\n\n
  • \n
  • “things should work”, but how?\nlook and feel of mobile.\npinch... (transform) still here.\n\nThis is close to what we are doing.\n
  • \n
  • keep the same features. For example the ajax, or the cell formatting, or the inline editing.\nBUT: \nstyling. Slickgrid does not rely so heavily on jquery-ui, so we could remove it completely.\nresponsiveness problems: for example, row height also would be nice to be responsive.\nhammer.js: ... the touch-punch approach would be the opposite to this and they won’t mix.\nour code:... very minimal changes would be needed to SlickGrid core.\n
  • .. it is possible but needs a new disciplinary approach in UI design\n
  • SlickGrid Touch: Making complex JavaScript widgets work on mobile devices

    1. 1. SlickGrid TouchMaking a complex JavaScript table widget work on mobile devices Lightning talk, Plone Conference, Arnhem 2012-10-11 Balázs Reé @reebalazs
    2. 2. Base• Your website has to work on mobile.• Older javascript widgets do not work on touch devices.• How can we make it feel like a touch application?• Looking at an application being ported: • the biggest lack is a functional grid table. • How hard would it be to fix it?
    3. 3. Introducing SlickGrid• https://github.com/mleibman/SlickGrid• fast,• configurable,• compatible,• no touch support• client or server side data• cell formatting• inline editing• sorting and filtering• column resize and reorder• ... and more.
    4. 4. Wait, there is more. • What do we mean by touch support? Lorem Ipsum... select/ follow link menu delete rowunselect row scroll reorder rows select row
    5. 5. Demo• The “fastbreak” application is written by Paul Everitt @paulweveritt• It is Pyramid based and uses Bootstrap in the front-end• .... tables, tables everywhere!• Look at the screencast of the demo: https://vimeo.com/channels/greenfinity/ 51291141
    6. 6. Technology• Keep the same features, add touch support.• Styling. • out with jquery-ui, in with bootstrap • some responsiveness problems• Events. • hammer.js: desktop events translated to touch events (hold tap doubletap transformstart transform transformend dragstart drag dragend swipe release)• SlickGrid: our code is in plugins.
    7. 7. Summary• http://github.com/reebalazs/SlickGrid-touch https://github.com/pauleveritt/fastbreak• Touch compatibility is feasible to reach, even with complex widgets• Thank you! @reebalazs @paulweveritt• Yes, we will use it in production. No, it is not released, not finished, and it still has bugs.• Questions?

    ×