Solving Real World Problems with YUI 3: AutoComplete

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    I’m Isaac Schlueter, from the YUI team. I’m here to talk to you today about something I’m working on for YUI3, an Autocomplete module, and what goes into solving real world problems with YUI 3.

    When I say "real-world" problem, I mean something that's an actual use case that real users are going to use. This talk isn't about a quick hack, or a proof of concept. Those things are great, and important, but this is about actually getting something done.

    When I say "solve", I mean, I shouldn't ever have to deal with this problem again, and if anyone else uses YUI, they shouldn’t either. I'm going to show that YUI 3 gives you the tools to do things in a way that is flexible, extensible, and extremely reusable, with not very much effort on your part.

    So, yeah, I AM pretty lazy. But that's why I don't want to write the same thing over and over again. Cost matters, and that's the real value proposition with YUI.

    You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.

    You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.

    You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.

    You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.

    You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.

    You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.

    So, yeah, I really don't want to worry about all that stuff. I just want to make this thing work.

    So, yeah, I really don't want to worry about all that stuff. I just want to make this thing work.

    So, yeah, I really don't want to worry about all that stuff. I just want to make this thing work.

    So, yeah, I really don't want to worry about all that stuff. I just want to make this thing work.

    Doing things the first time, or creating a whole new way of doing things, that’s pretty hard. I mean, it’s hard if you want to do a good job of it. In this case, when we do things with the grain of YUI, we’ll spend a lot less effort for a better result.

    This is definitely a case of good laziness. That is, cost matters, so doing things with the grain is cheaper.

    So, did I mention the site that this module is going on? It's fairly popular, maybe you've seen it before.

    This is going on the yahoo home page, and in the search page, and the header that sits at the top of all Yahoo sites.



    Between these three modules, about 7 trillion people view these pages every 4 seconds, so it has to work reliably, it has to load fast, it has to put almost no extra code on the page.

    At this scale, every byte matters. By reusing as much off-the-shelf components from YUI as we can, we’re going to save a lot of bytes.

    It's gotta work with keyboards, or with screen readers, or with mice, or whatever else users decide to use.



    But accessibility isn’t just about blind people and devices. It has to work in all languages everywhere, because this is Yahoo, so just supporting America is not really an option.



    Oh, also, remember those examples I showed before?

    yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.

    yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.

    yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.

    yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.

    yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.

    yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.

    Thankfully, most of the hard stuff is already done. The main task here is figuring out how to use what YUI offers to assemble the thing we want.



    The other advantage is that, by doing it this way, the little bit of code that we do end up having to write can be submitted back to the library.

    For now, you can push code to github. People are doing this today.

    Getting feedback from people using your stuff is addictive. Definitely watch for more collaborative features from YUI in the near future.

    A lot of you have probably heard about some of these things already, and if not, I recommend going onto YUI Theater and watching the other talks, because most people who talk about YUI are way smarter than me.



    But just in case, I’ll go over some of the pieces that are relevant in this case.

    Node is like candy for the DOM. It does everything you think it should do, and it does it in consistent and predictable ways.

    This is the browser DOM API. Generally friendly, tries to do the right thing, but... a bit slow, mild stuttering problem, and... well... he’s got no pants.



    And, if you’re in the unlucky majority that gets to support MSIE...

    I’m guessing everyone in the room has written this garbage at least once.

    By contrast, the node API gets in there, does the dirty work that has to be done, and you never have to worry about it.

    Surprisingly straightforward. Use selectors to get things, then do stuff to the things, and it all just works.

    Well, I don't really want to worry about having to interface with a jillion different kinds of web services, and I *definitely* don't want to have to worry about caching and all that craziness. Data is strange, and I don’t want to have to deal with it.

    (yui 2 ds vs yui3)

    So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.

    So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.

    So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.

    So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.

    So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.

    So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.

    A widget is just a box. You put stuff in the box, and you can easily move it around, or put it somewhere, or whatever you like. You don’t have to worry about what it’s sitting on top of, because it’s all tidied up for you.

    The thing about putting stuff in a box is that it makes it a lot easier to manage, and a lot easier to move around.

    The thing about putting stuff in a box is that it makes it a lot easier to manage, and a lot easier to move around.

    The thing about putting stuff in a box is that it makes it a lot easier to manage, and a lot easier to move around.

    The thing about putting stuff in a box is that it makes it a lot easier to manage, and a lot easier to move around.

    Plugins in YUI 3 let you add almost any functionality you can think of to almost any object in the library. You can set up functions that get called when the plugin is attached, and the another function for when it's detached, and in between there, you can add whatever you want.

    If you want to take an existing API, and extend it with some additional functionality, you can use a plugin to do that. Specifically, plugins are useful when you want to add on the features in a way that lets them be taken off again later.



    Creating a plugin is easy. You expose one function that gets called when it’s plugged into something, and another that’s called when it gets unplugged (in case you have to do any cleanup)

    Here’s what it looks like when you’re done.

    Right. So, here's a pretty picture of the AC architecture.



    [ad lib]



    So, as you can see, it's very extremely straightforward, with no problems whatsoever. When the plugin gets plugged into a node, it attaches to the keydown event, and when the user presses a key, we know that something has been entered, so

    In some languages, a single keypress event is not the same as a single character being entered. Unfortunately, there isn’t any DOM event for “onCharacterEntered”



    Also, if you’ve ever tried to do much of anything on keydown or keypress, you quickly find that it’s easy to bog down the UI and users get annoyed because they type and this thing freezes up as they’re doing it.



    What about onchange?

    well, onchange doesn’t happen until the user blurs the field.

    Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.

    Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.

    Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.

    Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.

    Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.

    In fact, if you use the focusIn and focusOut events exposed by the Node API, you’re already using custom events. The really nice thing is that, when an event can be done natively, you can do it that way, and when it’s not available, you can sort of roll your own based on other events that do exist.

    There’s just a very slight change that you have to make to your code if you’re using a custom event vs a regular DOM event.



    Here we see a click handler being attached to a YUI Node object. Notice the stopPropagation and preventDefault that you know and love from the DOM.

    And, here’s the same Node object listening to a custom event.

    Oh, I can see the blog posts going out now “Much Hyped AutoComplete Module Doesn’t Even Work”. So, I put this scary warning here for a reason. There’s a good chance that this is pretty close to what the final code will look like, but this is a slide deck, not an API doc. You can be sure that, this being YUI, there’ll be more documentation than you can shake a stick at once it’s done.

    So, if we just pull in the AutoComplete node plugin, and attach it to a dataSource, we’ve got a way to very explicitly decide what happens at each point. Of course, the “doSomething” function here would be connecting up to our ACWidget.



    But while it’s good to be able to use AC however you want, it’s also a bit of a pain to have to do all this for just the simple/common use cases.

    What if there was a way to take the common use cases, and make them simple?



    Set some defaults, package it up nice, and then when I just want the basic/common autocomplete, I can instantiate it without all the hassle. That means that you don’t need to know how autocomplete works in order to have it work for you.

    Chances are that this will be part of the YUI 3.1 which if I’m not mistaken will be out in Q1 of 2010.

    If you really can’t wait, then you can always fork yui3 and follow the progress there. Also, YUI 2 has a great AutoComplete widget that works, and is in use all over the place. I highly recommend it.

    2 Favorites & 1 Event

    Solving Real World Problems with YUI 3: AutoComplete - Presentation Transcript

    1. AutoComplete Solving Real World Problems with YUI 3
    2. hi.
    3. “real world”
    4. “solving”
    5. “not very much effort” = he’s lazy.
    6. The Problem
    7. Shopping List
    8. Shopping List • a way to find out when the user types something into the form element
    9. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere
    10. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items
    11. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    12. invention is harder than assembly
    13. Like the man said, very lazy.
    14. “good lazy” = i can haz paychek?
    15. The Requirements
    16. small
    17. accessible
    18. these ones?
    19. these ones?
    20. omg, this all sounds like work!
    21. you can solve your problems like this, too (and get props for it)
    22. A brief survey of our tools
    23. Node: The API that the DOM Should Have Been
    24. Browser DOM API
    25. Browser DOM API
    26. // If you're LUCKY! var foos = document.getElementsByClassName("foo"); for (var i = 0, l = foos.length; i < l; i ++) { foos[i].addEventListener("click", fn); }
    27. // If you're LUCKY! var foos = document.getElementsByClassName("foo"); for (var i = 0, l = foos.length; i < l; i ++) { foos[i].addEventListener("click", fn); } // oh wait, that doesn't work in ie... fml.
    28. Node API
    29. Y.all(".foo").on("click", fn);
    30. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    31. Data Source: because data is weird
    32. Data Source: because data is weird
    33. Caching, data normalization, and this thing is TINY in YUI 3!
    34. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    35. Not so similar…
    36. Not so similar…
    37. Not so similar…
    38. Not so similar…
    39. Not so similar…
    40. Not so similar…
    41. Not so similar…
    42. Display
    43. Display • Bounding box - need to manage position, even when the window changes height
    44. Display • Bounding box - need to manage position, even when the window changes height • Must support many different looks
    45. Display • Bounding box - need to manage position, even when the window changes height • Must support many different looks • Overlapping anything (iframes, scrollbars, select elements, other nasty creatures)
    46. Display • Bounding box - need to manage position, even when the window changes height • Must support many different looks • Overlapping anything (iframes, scrollbars, select elements, other nasty creatures) • Keyboard navigation
    47. Widget
    48. with Widget you can:
    49. with Widget you can: • Fix the position of the box
    50. with Widget you can: • Fix the position of the box • Skin it and change the contents easily
    51. with Widget you can: • Fix the position of the box • Skin it and change the contents easily • Overlap iframes and select elements without any hassles
    52. with Widget you can: • Fix the position of the box • Skin it and change the contents easily • Overlap iframes and select elements without any hassles • Easily extend to support keyboard and focus events.
    53. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    54. Plugins: Form like Voltron
    55. Plugins: Form like Voltron
    56. Decorator Pattern
    57. Decorator Pattern GoF FTW!
    58. Y.one("#foo") .plug(Y.Plugins.Foo) .foo.doSomeFoo();
    59. Y.one("#foo") .plug(Y.Plugins.Foo) .foo.doSomeFoo(); so, not quite Voltron, but still, pretty cool.
    60. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    61. So... AutoComplete, remember? You were gonna talk about that?
    62. AutoComplete: AutoComplete AutoComplete Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    63. Oh, wait, there’s a problem.
    64. “user presses a key” !== “data has been entered”
    65. onchange is too late for our purposes
    66. DOM Events
    67. keydown DOM Events
    68. keydown DOM keyup Events
    69. keydown DOM keyup Events keypress
    70. keydown DOM keyup Events keypress change
    71. keydown DOM keyup Events keypress change something is missing!
    72. Custom Events: Implement the Missing
    73. myThing.on("click", function (e) { doSomething(); e.stopPropagation(); e.preventDefault() // etc. })
    74. myThing.on("myEvent", function (e) { doSomething(); e.stopPropagation(); e.preventDefault() // etc. })
    75. Making a New Node Event: it’s like creating your own DOM
    76. Try not to let the power go to your head.
    77. myEvent = { on : function () { ... }, detach : function () { ... } }; Y.Env.evt.plugins.myEvent = myEvent; Y.Node.DOM_EVENTS.myEvent = myEvent; // function bodies removed, of course. // but that’s really the whole thing.
    78. Signs you should add a new Node event:
    79. Signs you should add a new Node event: • It’s a very generic need related to a single DOM element
    80. Signs you should add a new Node event: • It’s a very generic need related to a single DOM element • The DOM implements something like what you want, but not quite
    81. Signs you should add a new Node event: • It’s a very generic need related to a single DOM element • The DOM implements something like what you want, but not quite • It “fills a hole” in the DOM API
    82. Signs you should add a new Node event: • It’s a very generic need related to a single DOM element • The DOM implements something like what you want, but not quite • It “fills a hole” in the DOM API • In other words, please don’t create your own “click” event.
    83. AutoComplete: AutoComplete AutoComplete Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    84. AutoComplete: AutoComplete AutoComplete valueChange Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    85. AutoComplete: valueChange
    86. AutoComplete: valueChange Listen to key events
    87. AutoComplete: valueChange Listen to key events Use setTimeout to defer value check.
    88. AutoComplete: valueChange Listen to key events Use setTimeout to defer value check. See if the value has changed
    89. AutoComplete: valueChange Listen to key events Use setTimeout to defer value check. See if the value has changed If the value is different than last time, fire “valueChange”
    90. AutoComplete: AutoComplete Node Plugin
    91. AutoComplete: AutoComplete Node Plugin Plug into a Node object
    92. AutoComplete: AutoComplete Node Plugin Plug into a Node object It gets some settings
    93. AutoComplete: AutoComplete Node Plugin Plug into a Node object It gets some settings Listens to the valueChange event
    94. AutoComplete: AutoComplete Node Plugin Plug into a Node object It gets some settings Listens to the valueChange event Fires “ac:query” event when appropriate
    95. AutoComplete: AutoComplete Node Plugin Data Source
    96. AutoComplete: AutoComplete Node Plugin “ac:query” has default behavior Data Source
    97. AutoComplete: AutoComplete Node Plugin If not canceled, it “ac:query” has tells the data source default behavior to get some data. Data Source
    98. AutoComplete: AutoComplete Node Plugin If not canceled, it “ac:query” has tells the data source default behavior to get some data. Data Source When/if the data returns, it fires the “ac:load” event.
    99. AutoComplete: AutoComplete Renderer Widget
    100. AutoComplete: Extends the Widget class AutoComplete Renderer Widget
    101. AutoComplete: Extends the Widget class AutoComplete When the user clicks on an item, call Renderer Widget
    102. AutoComplete: Extends the Widget class AutoComplete When the user clicks on an item, call Renderer Widget myNode.ac.set("queryValue", selection)
    103. AutoComplete: Widget gives it a bounding AutoComplete box, an easy way to mange Renderer Widget position, and a render() function to make it visible.
    104. AutoComplete: AutoComplete AutoComplete valueChange Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    105. Loose Coupling
    106. Loose Coupling
    107. Loose Coupling • Pieces should provide enough value to be used alone or in other contexts
    108. Loose Coupling • Pieces should provide enough value to be used alone or in other contexts • Pieces should work with any other piece that exposes the expected API
    109. Loose Coupling • Pieces should provide enough value to be used alone or in other contexts • Pieces should work with any other piece that exposes the expected API • “Don’t call me, I’ll call you” events > method calls
    110. AutoComplete:
    111. AutoComplete: Preview What you are about to see is not even beta yet. This is a slide deck, not an API doc. Stay tuned at http://yuilibrary.com/yui3/ and http://developer.yahoo.com/yui/3/
    112. AutoComplete: YUI().use("ac-plugin", function (Y) { var myAC = Y.one("#ac"), myDS = new Y.DataSource(...); myAC.plug(Y.Plugins.ACPlugin, { dataSource : myDS }).ac.on("ac:load", function (results) { doSomething(results); }); });
    113. AutoComplete: YUI().use("ac-plugin", function (Y) { var myAC = Y.one("#ac"), myDS = new Y.DataSource(...); myAC.plug(Y.Plugins.ACPlugin, { dataSource : myDS }).ac.on("ac:load", function (results) { doSomething(results); }); }); // wow, that’s a mouthful
    114. defaults === win
    115. Roll-up
    116. Roll-up
    117. Roll-up • YUI 2 was a modular system - If you want any part of a module, you get the whole thing.
    118. Roll-up • YUI 2 was a modular system - If you want any part of a module, you get the whole thing. • YUI 3 is sub-modular - Modules are composed of sub-modules that can be mixed and matched.
    119. Roll-up • YUI 2 was a modular system - If you want any part of a module, you get the whole thing. • YUI 3 is sub-modular - Modules are composed of sub-modules that can be mixed and matched. • Roll-ups provide convenience of YUI 2 modules, without sacrificing customizability of YUI 3 submodules.
    120. AutoComplete: AutoComplete AutoComplete valueChange Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    121. AutoComplete: AutoComplete AutoComplete valueChange Node Plugin Renderer Widget DOM YUI Node AutoComplete roll-up node Wrapper Data Source
    122. AutoComplete:
    123. AutoComplete: Preview What you are about to see is not even beta yet. This is a slide deck, not an API doc. Stay tuned at http://yuilibrary.com/yui3/ and http://developer.yahoo.com/yui/3/
    124. AutoComplete: YUI().use("autocomplete", function (Y) { var myAC = new Y.AutoComplete({ node : "#ac", dataSource : new Y.DataSource(...) }); });
    125. In the final tally...
    126. In the final tally... • Less than 4kb of new code, mostly for the custom DOM event. (< 2kb over the wire)
    127. In the final tally... • Less than 4kb of new code, mostly for the custom DOM event. (< 2kb over the wire) • Most of the work consisted of arranging and assembling
    128. In the final tally... • Less than 4kb of new code, mostly for the custom DOM event. (< 2kb over the wire) • Most of the work consisted of arranging and assembling • Good solutions don’t have to be hard
    129. AutoComplete: Coming soon to a YUI Library NEAR YOU!
    130. AutoComplete: http://github.com/yui/yui3 http://github.com/isaacs/yui3
    131. fin
    132. ( questions )
    SlideShare Zeitgeist 2009

    + IsaacSchlueterIsaacSchlueter Nominate

    custom

    742 views, 2 favs, 0 embeds more stats

    A case study in building a real world component wit more

    More info about this document

    CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

    Go to text version

    • Total Views 742
      • 742 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 7
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    Groups / Events

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.