SlideShare a Scribd company logo
AutoComplete

    Solving Real World
  Problems with YUI 3
hi.
“real world”
“solving”
“not very much effort”
      = he’s lazy.
The Problem
Solving Real World Problems with YUI 3: AutoComplete
Solving Real World Problems with YUI 3: AutoComplete
Solving Real World Problems with YUI 3: AutoComplete
Solving Real World Problems with YUI 3: AutoComplete
Solving Real World Problems with YUI 3: AutoComplete
Solving Real World Problems with YUI 3: AutoComplete
Solving Real World Problems with YUI 3: AutoComplete
Shopping List
Shopping List
• a way to find out when the user types
  something into the form element
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
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
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
invention is harder
  than assembly
Like the man said,
    very lazy.
“good lazy”
= i can haz paychek?
The Requirements
Solving Real World Problems with YUI 3: AutoComplete
small
accessible
these ones?
these ones?
omg, this all sounds
    like work!
you can solve your
problems like this, too

              (and get props for it)
Solving Real World Problems with YUI 3: AutoComplete
A brief survey
 of our tools
Node: The API
 that the DOM
Should Have Been
Browser DOM API
Browser DOM API
// If you're LUCKY!
var foos = document.getElementsByClassName("foo");
for (var i = 0, l = foos.length; i < l; i ++) {

 foos[i].addEventListener("click", fn);
}
// 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.
Node API
Y.all(".foo").on("click", fn);
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
Data Source:
because data is weird
Data Source:
because data is weird
Caching, data normalization, and this
      thing is TINY in YUI 3!
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
Not so similar…
Not so similar…
Not so similar…
Not so similar…
Not so similar…
Not so similar…
Not so similar…
Display
Display
• Bounding box - need to manage position,
  even when the window changes height
Display
• Bounding box - need to manage position,
  even when the window changes height
• Must support many different looks
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)
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
Widget
with Widget you can:
with Widget you can:
• Fix the position of the box
with Widget you can:
• Fix the position of the box
• Skin it and change the contents easily
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
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.
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
Plugins:
Form like Voltron
Plugins:
Form like Voltron
Decorator Pattern
Decorator Pattern


               GoF FTW!
Y.one("#foo")
 .plug(Y.Plugins.Foo)
 .foo.doSomeFoo();
Y.one("#foo")
 .plug(Y.Plugins.Foo)
 .foo.doSomeFoo();

    so, not quite Voltron, but still, pretty cool.
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
So... AutoComplete,
 remember? You were
gonna talk about that?
AutoComplete:
               AutoComplete    AutoComplete
                Node Plugin   Renderer Widget
DOM YUI Node
node Wrapper

                Data Source
Oh, wait, there’s a
    problem.
“user presses a key”
         !==
  “data has been
      entered”
onchange is too late
 for our purposes
DOM
Events
keydown   DOM
          Events
keydown    DOM
   keyup   Events
keydown          DOM
   keyup         Events
      keypress
keydown            DOM
   keyup           Events
      keypress
          change
keydown            DOM
   keyup           Events
      keypress
          change

 something is missing!
Custom Events:
Implement the
   Missing
myThing.on("click", function (e) {
  doSomething();
  e.stopPropagation();
  e.preventDefault()
  // etc.
})
myThing.on("myEvent", function (e) {
  doSomething();
  e.stopPropagation();
  e.preventDefault()
  // etc.
})
Making a New
  Node Event:
it’s like creating
your own DOM
Try not to let the
power go to your head.
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.
Signs you should add a
   new Node event:
Signs you should add a
   new Node event:
• It’s a very generic need related to a single
  DOM element
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
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
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.
AutoComplete:
               AutoComplete    AutoComplete
                Node Plugin   Renderer Widget
DOM YUI Node
node Wrapper

                Data Source
AutoComplete:
                      AutoComplete    AutoComplete
        valueChange
                       Node Plugin   Renderer Widget
DOM YUI Node
node Wrapper

                       Data Source
AutoComplete:
 valueChange
AutoComplete:
           valueChange


Listen to key events
AutoComplete:
           valueChange


Listen to key events
Use setTimeout to defer value check.
AutoComplete:
           valueChange


Listen to key events
Use setTimeout to defer value check.
See if the value has changed
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”
AutoComplete:
     AutoComplete
      Node Plugin
AutoComplete:
               AutoComplete
                Node Plugin


Plug into a Node object
AutoComplete:
               AutoComplete
                Node Plugin


Plug into a Node object
It gets some settings
AutoComplete:
               AutoComplete
                Node Plugin


Plug into a Node object
It gets some settings
Listens to the valueChange event
AutoComplete:
               AutoComplete
                Node Plugin


Plug into a Node object
It gets some settings
Listens to the valueChange event
Fires “ac:query” event when appropriate
AutoComplete:
     AutoComplete
      Node Plugin




      Data Source
AutoComplete:
                   AutoComplete
                    Node Plugin
“ac:query” has
default behavior
                    Data Source
AutoComplete:
                   AutoComplete
                    Node Plugin
                                    If not canceled, it
“ac:query” has
                                  tells the data source
default behavior
                                     to get some data.
                    Data Source
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.
AutoComplete:
            AutoComplete
           Renderer Widget
AutoComplete:
  Extends the Widget class    AutoComplete
                             Renderer Widget
AutoComplete:
          Extends the Widget class       AutoComplete
When the user clicks on an item, call   Renderer Widget
AutoComplete:
           Extends the Widget class       AutoComplete
When the user clicks on an item, call    Renderer Widget
myNode.ac.set("queryValue", selection)
AutoComplete:
 Widget gives it a bounding      AutoComplete
  box, an easy way to mange     Renderer Widget

    position, and a render()
 function to make it visible.
AutoComplete:
                      AutoComplete    AutoComplete
        valueChange
                       Node Plugin   Renderer Widget
DOM YUI Node
node Wrapper

                       Data Source
Loose Coupling
Loose Coupling
Loose Coupling
• Pieces should provide enough value to be
  used alone or in other contexts
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
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
AutoComplete:
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/
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);

 });
});
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
defaults === win
Roll-up
Roll-up
Roll-up
• YUI 2 was a modular system - If you want
  any part of a module, you get the whole
  thing.
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-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.
AutoComplete:
                      AutoComplete    AutoComplete
        valueChange
                       Node Plugin   Renderer Widget
DOM YUI Node
node Wrapper

                       Data Source
AutoComplete:
                        AutoComplete          AutoComplete
        valueChange
                         Node Plugin         Renderer Widget
DOM YUI Node          AutoComplete roll-up
node Wrapper

                         Data Source
AutoComplete:
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/
AutoComplete:
YUI().use("autocomplete", function (Y) {

 var myAC = new Y.AutoComplete({

 
 node : "#ac",

 
 dataSource : new Y.DataSource(...)

 });
});
In the final tally...
In the final tally...

• Less than 4kb of new code, mostly for the
  custom DOM event. (< 2kb over the wire)
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
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
AutoComplete:
 Coming soon to a
  YUI Library
  NEAR YOU!
AutoComplete:

 http://github.com/yui/yui3
http://github.com/isaacs/yui3
fin
( questions )

More Related Content

What's hot

Getting the Most Out of jQuery Widgets
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgets
velveeta_512
 
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh MyOverlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Steve McMahon
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
manugoel2003
 
Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
Nathan Smith
 
Javascript in Plone
Javascript in PloneJavascript in Plone
Javascript in Plone
Steve McMahon
 
The quest for global design principles (SymfonyLive Berlin 2015)
The quest for global design principles (SymfonyLive Berlin 2015)The quest for global design principles (SymfonyLive Berlin 2015)
The quest for global design principles (SymfonyLive Berlin 2015)
Matthias Noback
 
React.js & Om: A hands-on walkthrough of better ways to build web UIs
React.js & Om: A hands-on walkthrough of better ways to build web UIsReact.js & Om: A hands-on walkthrough of better ways to build web UIs
React.js & Om: A hands-on walkthrough of better ways to build web UIs
Adam Solove
 
Tips and tricks for building api heavy ruby on rails applications
Tips and tricks for building api heavy ruby on rails applicationsTips and tricks for building api heavy ruby on rails applications
Tips and tricks for building api heavy ruby on rails applications
Tim Cull
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
Remy Sharp
 
Eugene Andruszczenko: jQuery
Eugene Andruszczenko: jQueryEugene Andruszczenko: jQuery
Eugene Andruszczenko: jQuery
Refresh Events
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
Dominic Arrojado
 
ApacheCon 2005
ApacheCon 2005ApacheCon 2005
ApacheCon 2005
Adam Trachtenberg
 
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.createRemote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Peter Lehto
 
Me and my importers
Me and my importersMe and my importers
Me and my importers
Donny Wals
 
Using FakeIteasy
Using FakeIteasyUsing FakeIteasy
Using FakeIteasy
Dror Helper
 
Bowtie: Interactive Dashboards
Bowtie: Interactive DashboardsBowtie: Interactive Dashboards
Bowtie: Interactive Dashboards
Jacques Kvam
 
Element
ElementElement
Element
mussawir20
 
Crafting Quality PHP Applications (PHP Benelux 2018)
Crafting Quality PHP Applications (PHP Benelux 2018)Crafting Quality PHP Applications (PHP Benelux 2018)
Crafting Quality PHP Applications (PHP Benelux 2018)
James Titcumb
 
Twig: Friendly Curly Braces Invade Your Templates!
Twig: Friendly Curly Braces Invade Your Templates!Twig: Friendly Curly Braces Invade Your Templates!
Twig: Friendly Curly Braces Invade Your Templates!
Ryan Weaver
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
 

What's hot (20)

Getting the Most Out of jQuery Widgets
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgets
 
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh MyOverlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
 
Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
Javascript in Plone
Javascript in PloneJavascript in Plone
Javascript in Plone
 
The quest for global design principles (SymfonyLive Berlin 2015)
The quest for global design principles (SymfonyLive Berlin 2015)The quest for global design principles (SymfonyLive Berlin 2015)
The quest for global design principles (SymfonyLive Berlin 2015)
 
React.js & Om: A hands-on walkthrough of better ways to build web UIs
React.js & Om: A hands-on walkthrough of better ways to build web UIsReact.js & Om: A hands-on walkthrough of better ways to build web UIs
React.js & Om: A hands-on walkthrough of better ways to build web UIs
 
Tips and tricks for building api heavy ruby on rails applications
Tips and tricks for building api heavy ruby on rails applicationsTips and tricks for building api heavy ruby on rails applications
Tips and tricks for building api heavy ruby on rails applications
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
Eugene Andruszczenko: jQuery
Eugene Andruszczenko: jQueryEugene Andruszczenko: jQuery
Eugene Andruszczenko: jQuery
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
ApacheCon 2005
ApacheCon 2005ApacheCon 2005
ApacheCon 2005
 
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.createRemote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
 
Me and my importers
Me and my importersMe and my importers
Me and my importers
 
Using FakeIteasy
Using FakeIteasyUsing FakeIteasy
Using FakeIteasy
 
Bowtie: Interactive Dashboards
Bowtie: Interactive DashboardsBowtie: Interactive Dashboards
Bowtie: Interactive Dashboards
 
Element
ElementElement
Element
 
Crafting Quality PHP Applications (PHP Benelux 2018)
Crafting Quality PHP Applications (PHP Benelux 2018)Crafting Quality PHP Applications (PHP Benelux 2018)
Crafting Quality PHP Applications (PHP Benelux 2018)
 
Twig: Friendly Curly Braces Invade Your Templates!
Twig: Friendly Curly Braces Invade Your Templates!Twig: Friendly Curly Braces Invade Your Templates!
Twig: Friendly Curly Braces Invade Your Templates!
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
 

Viewers also liked

Solr 4
Solr 4Solr 4
Solr 4
Abhey Gupta
 
Faceted search using Solr and Ontopia
Faceted search using Solr and OntopiaFaceted search using Solr and Ontopia
Faceted search using Solr and Ontopia
Geir Ove Grønmo
 
Solr in Drupal
Solr in DrupalSolr in Drupal
Solr in Drupal
Péter Király
 
Groovy to gradle
Groovy to gradleGroovy to gradle
Groovy to gradle
Geng-Dian Huang
 
Node.js code tracing
Node.js code tracingNode.js code tracing
Node.js code tracing
Geng-Dian Huang
 
Cloud Endpoints _Polymer_ Material design by Martin Görner
Cloud Endpoints_Polymer_Material design by Martin GörnerCloud Endpoints_Polymer_Material design by Martin Görner
Cloud Endpoints _Polymer_ Material design by Martin Görner
European Innovation Academy
 
Mashing Up The Guardian
Mashing Up The GuardianMashing Up The Guardian
Mashing Up The Guardian
Michael Brunton-Spall
 
Introduction to Addressy - address verification made easy
Introduction to Addressy - address verification made easyIntroduction to Addressy - address verification made easy
Introduction to Addressy - address verification made easy
Addressy
 
Introduction to mobile reversing
Introduction to mobile reversingIntroduction to mobile reversing
Introduction to mobile reversing
zynamics GmbH
 
Implement Dependency Injection in Java
Implement Dependency Injection in JavaImplement Dependency Injection in Java
Implement Dependency Injection in Java
Geng-Dian Huang
 
Magento ajax search autocomplete and suggest mage.club
Magento ajax search autocomplete and suggest mage.clubMagento ajax search autocomplete and suggest mage.club
Magento ajax search autocomplete and suggest mage.club
Magento Club
 
Dealing with Diverse Data
Dealing with Diverse DataDealing with Diverse Data
Dealing with Diverse Data
Tyler Tate
 
'I need help and FAST!': Immediate Guided Search with the assignFAST Gadget
'I need help and FAST!': Immediate Guided Search with the assignFAST Gadget'I need help and FAST!': Immediate Guided Search with the assignFAST Gadget
'I need help and FAST!': Immediate Guided Search with the assignFAST Gadget
Allison Jai O'Dell
 
Magento ajax search autocomplete and suggest
Magento ajax search autocomplete and suggestMagento ajax search autocomplete and suggest
Magento ajax search autocomplete and suggest
Oliviafeehily
 
Prosecuting Cybercrime and Regulating the Web
Prosecuting Cybercrime and Regulating the WebProsecuting Cybercrime and Regulating the Web
Prosecuting Cybercrime and Regulating the Web
Darius Whelan
 
Crafting APIs for Mobile Apps - Everything You Need to Know
Crafting APIs for Mobile Apps - Everything You Need to KnowCrafting APIs for Mobile Apps - Everything You Need to Know
Crafting APIs for Mobile Apps - Everything You Need to Know
Apigee | Google Cloud
 
vectorStar-2010
vectorStar-2010vectorStar-2010
vectorStar-2010
Hernan Cuevas
 
Backing Up Presentation
Backing Up PresentationBacking Up Presentation
Backing Up Presentation
backing-up.eu
 
D2-ETao-show
D2-ETao-showD2-ETao-show
D2-ETao-show
leneli
 
阅读类 Web 应用前端技术探索
阅读类 Web 应用前端技术探索阅读类 Web 应用前端技术探索
阅读类 Web 应用前端技术探索
Yan Shi
 

Viewers also liked (20)

Solr 4
Solr 4Solr 4
Solr 4
 
Faceted search using Solr and Ontopia
Faceted search using Solr and OntopiaFaceted search using Solr and Ontopia
Faceted search using Solr and Ontopia
 
Solr in Drupal
Solr in DrupalSolr in Drupal
Solr in Drupal
 
Groovy to gradle
Groovy to gradleGroovy to gradle
Groovy to gradle
 
Node.js code tracing
Node.js code tracingNode.js code tracing
Node.js code tracing
 
Cloud Endpoints _Polymer_ Material design by Martin Görner
Cloud Endpoints_Polymer_Material design by Martin GörnerCloud Endpoints_Polymer_Material design by Martin Görner
Cloud Endpoints _Polymer_ Material design by Martin Görner
 
Mashing Up The Guardian
Mashing Up The GuardianMashing Up The Guardian
Mashing Up The Guardian
 
Introduction to Addressy - address verification made easy
Introduction to Addressy - address verification made easyIntroduction to Addressy - address verification made easy
Introduction to Addressy - address verification made easy
 
Introduction to mobile reversing
Introduction to mobile reversingIntroduction to mobile reversing
Introduction to mobile reversing
 
Implement Dependency Injection in Java
Implement Dependency Injection in JavaImplement Dependency Injection in Java
Implement Dependency Injection in Java
 
Magento ajax search autocomplete and suggest mage.club
Magento ajax search autocomplete and suggest mage.clubMagento ajax search autocomplete and suggest mage.club
Magento ajax search autocomplete and suggest mage.club
 
Dealing with Diverse Data
Dealing with Diverse DataDealing with Diverse Data
Dealing with Diverse Data
 
'I need help and FAST!': Immediate Guided Search with the assignFAST Gadget
'I need help and FAST!': Immediate Guided Search with the assignFAST Gadget'I need help and FAST!': Immediate Guided Search with the assignFAST Gadget
'I need help and FAST!': Immediate Guided Search with the assignFAST Gadget
 
Magento ajax search autocomplete and suggest
Magento ajax search autocomplete and suggestMagento ajax search autocomplete and suggest
Magento ajax search autocomplete and suggest
 
Prosecuting Cybercrime and Regulating the Web
Prosecuting Cybercrime and Regulating the WebProsecuting Cybercrime and Regulating the Web
Prosecuting Cybercrime and Regulating the Web
 
Crafting APIs for Mobile Apps - Everything You Need to Know
Crafting APIs for Mobile Apps - Everything You Need to KnowCrafting APIs for Mobile Apps - Everything You Need to Know
Crafting APIs for Mobile Apps - Everything You Need to Know
 
vectorStar-2010
vectorStar-2010vectorStar-2010
vectorStar-2010
 
Backing Up Presentation
Backing Up PresentationBacking Up Presentation
Backing Up Presentation
 
D2-ETao-show
D2-ETao-showD2-ETao-show
D2-ETao-show
 
阅读类 Web 应用前端技术探索
阅读类 Web 应用前端技术探索阅读类 Web 应用前端技术探索
阅读类 Web 应用前端技术探索
 

Similar to Solving Real World Problems with YUI 3: AutoComplete

A First Date With Scala
A First Date With ScalaA First Date With Scala
A First Date With Scala
Franco Lombardo
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
Jeff Durta
 
Developing for LinkedIn's Application Platform
Developing for LinkedIn's Application PlatformDeveloping for LinkedIn's Application Platform
Developing for LinkedIn's Application Platform
Taylor Singletary
 
Oracle MAF real life OOW.pptx
Oracle MAF real life OOW.pptxOracle MAF real life OOW.pptx
Oracle MAF real life OOW.pptx
Luc Bors
 
jQuery and the W3C
jQuery and the W3CjQuery and the W3C
jQuery and the W3C
jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
jeresig
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
Manvendra Singh
 
Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28
Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28
Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28
Frédéric Harper
 
Dancing with websocket
Dancing with websocketDancing with websocket
Dancing with websocket
Damien Krotkine
 
Understanding Framework Architecture using Eclipse
Understanding Framework Architecture using EclipseUnderstanding Framework Architecture using Eclipse
Understanding Framework Architecture using Eclipse
anshunjain
 
Building React Applications with Redux
Building React Applications with ReduxBuilding React Applications with Redux
Building React Applications with Redux
FITC
 
NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05
lrdesign
 
Cross-platform logging and analytics
Cross-platform logging and analyticsCross-platform logging and analytics
Cross-platform logging and analytics
Drew Crawford
 
Mojolicious
MojoliciousMojolicious
Mojolicious
Marcus Ramberg
 
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry GervinWill your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Barry Gervin
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
colinbdclark
 
Zend server 6 using zf2, 2013 webinar
Zend server 6 using zf2, 2013 webinarZend server 6 using zf2, 2013 webinar
Zend server 6 using zf2, 2013 webinar
Yonni Mendes
 
fuser interface-development-using-jquery
fuser interface-development-using-jqueryfuser interface-development-using-jquery
fuser interface-development-using-jquery
Kostas Mavridis
 
Introduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKIntroduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDK
Brendan Lim
 
Introduction To Developing Custom Actions Within SharePoint
Introduction To Developing Custom Actions Within SharePointIntroduction To Developing Custom Actions Within SharePoint
Introduction To Developing Custom Actions Within SharePoint
Geoff Varosky
 

Similar to Solving Real World Problems with YUI 3: AutoComplete (20)

A First Date With Scala
A First Date With ScalaA First Date With Scala
A First Date With Scala
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
 
Developing for LinkedIn's Application Platform
Developing for LinkedIn's Application PlatformDeveloping for LinkedIn's Application Platform
Developing for LinkedIn's Application Platform
 
Oracle MAF real life OOW.pptx
Oracle MAF real life OOW.pptxOracle MAF real life OOW.pptx
Oracle MAF real life OOW.pptx
 
jQuery and the W3C
jQuery and the W3CjQuery and the W3C
jQuery and the W3C
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
 
Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28
Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28
Firefox OS, fixing the mobile web - FITC Toronto - 2014-04-28
 
Dancing with websocket
Dancing with websocketDancing with websocket
Dancing with websocket
 
Understanding Framework Architecture using Eclipse
Understanding Framework Architecture using EclipseUnderstanding Framework Architecture using Eclipse
Understanding Framework Architecture using Eclipse
 
Building React Applications with Redux
Building React Applications with ReduxBuilding React Applications with Redux
Building React Applications with Redux
 
NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05
 
Cross-platform logging and analytics
Cross-platform logging and analyticsCross-platform logging and analytics
Cross-platform logging and analytics
 
Mojolicious
MojoliciousMojolicious
Mojolicious
 
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry GervinWill your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
Zend server 6 using zf2, 2013 webinar
Zend server 6 using zf2, 2013 webinarZend server 6 using zf2, 2013 webinar
Zend server 6 using zf2, 2013 webinar
 
fuser interface-development-using-jquery
fuser interface-development-using-jqueryfuser interface-development-using-jquery
fuser interface-development-using-jquery
 
Introduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKIntroduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDK
 
Introduction To Developing Custom Actions Within SharePoint
Introduction To Developing Custom Actions Within SharePointIntroduction To Developing Custom Actions Within SharePoint
Introduction To Developing Custom Actions Within SharePoint
 

Recently uploaded

Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
chetankumar9855
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
CEPTES Software Inc
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 

Recently uploaded (20)

Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 

Solving Real World Problems with YUI 3: AutoComplete

Editor's Notes

  1. I&amp;#x2019;m Isaac Schlueter, from the YUI team. I&amp;#x2019;m here to talk to you today about something I&amp;#x2019;m working on for YUI3, an Autocomplete module, and what goes into solving real world problems with YUI 3.
  2. When I say &quot;real-world&quot; problem, I mean something that&apos;s an actual use case that real users are going to use. This talk isn&apos;t about a quick hack, or a proof of concept. Those things are great, and important, but this is about actually getting something done.
  3. When I say &quot;solve&quot;, I mean, I shouldn&apos;t ever have to deal with this problem again, and if anyone else uses YUI, they shouldn&amp;#x2019;t either. I&apos;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.
  4. So, yeah, I AM pretty lazy. But that&apos;s why I don&apos;t want to write the same thing over and over again. Cost matters, and that&apos;s the real value proposition with YUI.
  5. 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&apos;ll need a way to abstract that stuff all out.
  6. 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&apos;ll need a way to abstract that stuff all out.
  7. 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&apos;ll need a way to abstract that stuff all out.
  8. 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&apos;ll need a way to abstract that stuff all out.
  9. 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&apos;ll need a way to abstract that stuff all out.
  10. 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&apos;ll need a way to abstract that stuff all out.
  11. So, yeah, I really don&apos;t want to worry about all that stuff. I just want to make this thing work.
  12. So, yeah, I really don&apos;t want to worry about all that stuff. I just want to make this thing work.
  13. So, yeah, I really don&apos;t want to worry about all that stuff. I just want to make this thing work.
  14. So, yeah, I really don&apos;t want to worry about all that stuff. I just want to make this thing work.
  15. Doing things the first time, or creating a whole new way of doing things, that&amp;#x2019;s pretty hard. I mean, it&amp;#x2019;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&amp;#x2019;ll spend a lot less effort for a better result.
  16. This is definitely a case of good laziness. That is, cost matters, so doing things with the grain is cheaper.
  17. So, did I mention the site that this module is going on? It&apos;s fairly popular, maybe you&apos;ve seen it before.
  18. 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.
  19. At this scale, every byte matters. By reusing as much off-the-shelf components from YUI as we can, we&amp;#x2019;re going to save a lot of bytes.
  20. It&apos;s gotta work with keyboards, or with screen readers, or with mice, or whatever else users decide to use. But accessibility isn&amp;#x2019;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?
  21. yeah, those So, if you look closely, you&apos;ll notice that sometimes it&apos;s a list of selections, and sometimes it&apos;s a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it&apos;s something completely ridiculous. This little widget has to accommodate all of those.
  22. yeah, those So, if you look closely, you&apos;ll notice that sometimes it&apos;s a list of selections, and sometimes it&apos;s a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it&apos;s something completely ridiculous. This little widget has to accommodate all of those.
  23. yeah, those So, if you look closely, you&apos;ll notice that sometimes it&apos;s a list of selections, and sometimes it&apos;s a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it&apos;s something completely ridiculous. This little widget has to accommodate all of those.
  24. yeah, those So, if you look closely, you&apos;ll notice that sometimes it&apos;s a list of selections, and sometimes it&apos;s a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it&apos;s something completely ridiculous. This little widget has to accommodate all of those.
  25. yeah, those So, if you look closely, you&apos;ll notice that sometimes it&apos;s a list of selections, and sometimes it&apos;s a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it&apos;s something completely ridiculous. This little widget has to accommodate all of those.
  26. yeah, those So, if you look closely, you&apos;ll notice that sometimes it&apos;s a list of selections, and sometimes it&apos;s a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it&apos;s something completely ridiculous. This little widget has to accommodate all of those.
  27. 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.
  28. For now, you can push code to github. People are doing this today.
  29. Getting feedback from people using your stuff is addictive. Definitely watch for more collaborative features from YUI in the near future.
  30. 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&amp;#x2019;ll go over some of the pieces that are relevant in this case.
  31. Node is like candy for the DOM. It does everything you think it should do, and it does it in consistent and predictable ways.
  32. This is the browser DOM API. Generally friendly, tries to do the right thing, but... a bit slow, mild stuttering problem, and... well... he&amp;#x2019;s got no pants. And, if you&amp;#x2019;re in the unlucky majority that gets to support MSIE...
  33. I&amp;#x2019;m guessing everyone in the room has written this garbage at least once.
  34. 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.
  35. Surprisingly straightforward. Use selectors to get things, then do stuff to the things, and it all just works.
  36. Well, I don&apos;t really want to worry about having to interface with a jillion different kinds of web services, and I *definitely* don&apos;t want to have to worry about caching and all that craziness. Data is strange, and I don&amp;#x2019;t want to have to deal with it.
  37. (yui 2 ds vs yui3)
  38. 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.
  39. 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.
  40. 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.
  41. 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.
  42. 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.
  43. 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.
  44. 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&amp;#x2019;t have to worry about what it&amp;#x2019;s sitting on top of, because it&amp;#x2019;s all tidied up for you.
  45. 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.
  46. 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.
  47. 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.
  48. 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.
  49. 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&apos;s detached, and in between there, you can add whatever you want.
  50. 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&amp;#x2019;s plugged into something, and another that&amp;#x2019;s called when it gets unplugged (in case you have to do any cleanup)
  51. Here&amp;#x2019;s what it looks like when you&amp;#x2019;re done.
  52. Right. So, here&apos;s a pretty picture of the AC architecture. [ad lib] So, as you can see, it&apos;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
  53. In some languages, a single keypress event is not the same as a single character being entered. Unfortunately, there isn&amp;#x2019;t any DOM event for &amp;#x201C;onCharacterEntered&amp;#x201D; Also, if you&amp;#x2019;ve ever tried to do much of anything on keydown or keypress, you quickly find that it&amp;#x2019;s easy to bog down the UI and users get annoyed because they type and this thing freezes up as they&amp;#x2019;re doing it. What about onchange?
  54. well, onchange doesn&amp;#x2019;t happen until the user blurs the field.
  55. Wouldn&apos;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&apos;t get all laggy and awful? Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  56. Wouldn&apos;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&apos;t get all laggy and awful? Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  57. Wouldn&apos;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&apos;t get all laggy and awful? Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  58. Wouldn&apos;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&apos;t get all laggy and awful? Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  59. Wouldn&apos;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&apos;t get all laggy and awful? Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  60. In fact, if you use the focusIn and focusOut events exposed by the Node API, you&amp;#x2019;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&amp;#x2019;s not available, you can sort of roll your own based on other events that do exist.
  61. There&amp;#x2019;s just a very slight change that you have to make to your code if you&amp;#x2019;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.
  62. And, here&amp;#x2019;s the same Node object listening to a custom event.
  63. Oh, I can see the blog posts going out now &amp;#x201C;Much Hyped AutoComplete Module Doesn&amp;#x2019;t Even Work&amp;#x201D;. So, I put this scary warning here for a reason. There&amp;#x2019;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&amp;#x2019;ll be more documentation than you can shake a stick at once it&amp;#x2019;s done.
  64. So, if we just pull in the AutoComplete node plugin, and attach it to a dataSource, we&amp;#x2019;ve got a way to very explicitly decide what happens at each point. Of course, the &amp;#x201C;doSomething&amp;#x201D; function here would be connecting up to our ACWidget. But while it&amp;#x2019;s good to be able to use AC however you want, it&amp;#x2019;s also a bit of a pain to have to do all this for just the simple/common use cases.
  65. 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&amp;#x2019;t need to know how autocomplete works in order to have it work for you.
  66. Chances are that this will be part of the YUI 3.1 which if I&amp;#x2019;m not mistaken will be out in Q1 of 2010.
  67. If you really can&amp;#x2019;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.