Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Powerful UX, not just for desktops anymore
Upcoming SlideShare
Loading in …5
×

Powerful UX, not just for desktops anymore

1,348 views

Published on

How to build your own custom UI controls, powered by jQuery, and integrate them in your Rails application.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,348
On SlideShare
0
From Embeds
0
Number of Embeds
272
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide


  • Warning! There will be Canadian content. You will get a lesson in Canadian geography, and there WILL be hockey references. It’s required!
  • So, how’d we get here?
  • Actually, I have a confession to make. I was a Java developer for over 8 years, as was my coworker at the time, 5 years ago.
  • As we were about to embark on a new project, we attended the No Fluff Just Stuff Java Symposium.
  • All the presenters could talk about was Ruby and Ruby on Rails, and how EASY and FAST it was to develop web applications.
  • So, we figured what the heck, lets put on these Ruby slippers and see where they take us. It’s been 5 years. I haven’t even touched any Java code for the last 3 years.
  • So, UX. The user interface of your application is a conversation between you, the developer, and the people who use your application.
    The question I have for you is this: Exactly What kind of conversation do you want to have?
    If you don’t think about it in advance, In my experience, the conversation will develop in one of two directions.
  • Baby talk.

    Too many web applications attempt to provide a good UX, and end up here. It may be a good experience, but I wouldn’t call it a powerful one.
  • At the other end of the spectrum is the application that looks more like this. This is no longer a conversation, it begins to resemble a “maze of twisty little passages, all alike”.
    Sadly, most applications tend to look more like this, after they’re been around a while.
    Back in my Java days, because of my history of UI work, I spent a lot of time helping developers optimize the UX of their desktop applications.
    Given all that it’s not too surprising that I started to bring some of the knowledge and work from my desktop development years onto the web. The web browser of today is much more powerful than the browser of 10 yrs ago, and can handle more complex user interactions, but mostly... it doesn’t.

    CC - http://www.flickr.com/photos/hoyvinmayvin/4906678960/sizes/l/
  • So, why don’t we bring more powerful user experiences to the browser?

  • So, why don’t we bring more powerful user experiences to the browser?

  • So, why don’t we bring more powerful user experiences to the browser?

  • The building blocks of many powerful libraries are available to you, so make use of them
  • The building blocks of many powerful libraries are available to you, so make use of them
  • The building blocks of many powerful libraries are available to you, so make use of them
  • So, let’s start with an example. I had a problem.

  • don’t forget your routes.rb
  • It’s never that simple. We took a working version to our users and What if...

    Would it surprise you to discover that the average user doesn’t understand how to use these multiple selection lists?
  • It’s never that simple. We took a working version to our users and What if...

    Would it surprise you to discover that the average user doesn’t understand how to use these multiple selection lists?
  • It’s never that simple. We took a working version to our users and What if...

    Would it surprise you to discover that the average user doesn’t understand how to use these multiple selection lists?
  • It’s never that simple. We took a working version to our users and What if...

    Would it surprise you to discover that the average user doesn’t understand how to use these multiple selection lists?
  • Reference: Java Look & Feel Design Guidelines. Familiar idiom for desktop users (like alert, login, etc) They see it and immediately know what to do.
    Google : user interface idiom
  • Reference: Java Look & Feel Design Guidelines. Familiar idiom for desktop users (like alert, login, etc) They see it and immediately know what to do.
    Google : user interface idiom
  • Reference: Java Look & Feel Design Guidelines. Familiar idiom for desktop users (like alert, login, etc) They see it and immediately know what to do.
    Google : user interface idiom

  • Ok, let’s see what it takes to build such a control, by... exploring it into existence.
  • Non-autocomplete version

    Javascript improved by:
    http://alexyz78.blogspot.com/2009/05/addremove-options-from-select-list-with.html
    and this for sorting:
    http://ppolyzos.com/2010/07/how-to-sort-a-drop-down-list-select-using-jquery/
  • Non-autocomplete - team select
  • Hey, wait a minute, that sounds like....
  • Hey, wait a minute, that sounds like....


  • autocomplete version
    - look at the autocomplete examples
    - they override some internal functions
    - make use of one of the internal functions (_response), to get the behaviour I want

    http://railstips.org/blog/archives/2010/10/14/stop-googling/
    Don't be afraid to look at the code
    http://dev.jqueryui.com/browser/ui/jquery.ui.autocomplete.js?rev=abfdb2a8b6f93607c0791ba91ab616aed6b04772

  • Autocomplete version of the demo - player select


  • Of the plugin/gem working in an app. /birds/select

  • Example code, with plugin embedded in an app
    Plugin will be uploaded shortly

  • ×