Flyweight jquery select_presentation


Published on

This plugin implements a flyweight design pattern for jQuery custom select controls. By only holding one visible control element in memory at one time, it aims to reduce the number of DOM accesses and event binding operations. This can result in significantly reduced page render times on larger forms. It borrows accessibility design patterns from the Filament Group's jQuery UI Selectmenu keyboard navigable ARIA plugin, currently included with JQuery-UI. It requires jQuery 1.4+ and jQuery UI 1.8.7+ Core to run.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Client: Compare the Market
  • Flyweight jquery select_presentation

    1. 1. Custom select element rage Or, how I learned to stop worrying and love the DOM Ray Brooks August 2011
    2. 2. Custom select element rage
    3. 3. INPUTS! Y U NO STYLE? <ul><li>INPUT, BUTTON, TEXTAREA, SELECT </li></ul><ul><li>Levels of CSS support for these vary </li></ul><ul><li>It’s fiddly </li></ul><ul><li>It’s boring </li></ul><ul><li>You achieve inconsistent results </li></ul><ul><li>Multipart file inputs are a unique form (sic) of EVIL </li></ul><ul><li>But worst of all… </li></ul><ul><li>Microsoft’s TRIDENT rendering engine (IE 6,7,8) uses O/S controls as opposed to browser objects and the two are different beasts. C++ doesn’t understand CSS. </li></ul><ul><li>WE CAN’T STYLE THEM AT ALL </li></ul>
    4. 4. A wild solution appears! <ul><li>Felix Nagel has forked & extended Filament’s jQuery UI </li></ul><ul><li>His solution requires jQuery & Javascript </li></ul><ul><li>It’s styleable </li></ul><ul><li>It’s accessible </li></ul><ul><li>It supports ARIA </li></ul><ul><li>Seems to work well even in IE6+! </li></ul>Check out the repo: *le jQuery UI SelectMenu
    5. 5. Felix Nagel’s fork of jQuery UI, I choose you!
    6. 6. LBi uses Very Big Form
    7. 7. It’s not very effective! Number of SELECT elements Load time (ms) ONE SELECT ELEMENT TAKES ~800ms TO RENDER IN IE8 problem?
    8. 8. OH NOES! <ul><li>Complex elements such as SELECT have been simulated in full using much markup and many event bindings </li></ul><ul><li>The SELECT replacement code in particular makes many DOM accesses via jQuery, which is slow </li></ul><ul><li>It’s not such a big problem with browsers that can optimise Javascript, however… </li></ul><ul><li>This is a very big page, and </li></ul><ul><li>Not all browsers can optimise Javascript </li></ul><ul><li>OH, SWEET IRONY! They’re also the browsers we are most interested in supporting! </li></ul>
    9. 9. The Challenge Client’s page load time is 90s in IE8, 170s in IE7 + IE6! Reduce page load time to under 10 seconds for all level 1 and 2 browsers (Chrome 10+, FF 3+, IE7+, Safari 3+)
    10. 11. Flyweight pattern “ The intent of this pattern is to use sharing to support a large number of objects that have part of their internal state in common where the other part of state can vary.”
    11. 12. Our solution <ul><li>Delay as much as possible until after page load completes </li></ul><ul><li>Construct only one anchor to replace one SELECT element </li></ul><ul><li>Share one drop down menu between all SELECT elements </li></ul><ul><li>Construct markup as strings, which is fast </li></ul><ul><ul><li>Convert strings to objects as late as possible </li></ul></ul><ul><li>Cache SELECT values in memory for fast retrieval </li></ul><ul><li>Bind events only to top level elements and use bubbling </li></ul><ul><li>Optimise all loops </li></ul><ul><li>For speed, use as much pure Javascript as possible </li></ul>
    12. 13. Notwithstanding… <ul><li>Behaviourally identical to SELECT </li></ul><ul><li>Accessible </li></ul><ul><li>Semantic </li></ul><ul><li>Graceful </li></ul>And of course…
    13. 15. Right, this shouldn’t take me very long
    14. 17. Hm. I obviously need to get better at estimating this kind of shit
    16. 19. IE6 XPSP2 VM 60 SELECTS 312ms ~5ms/SELECT
    17. 20. IE8 XPSP2 VM 60 SELECTS 219ms <4ms/SELECT
    18. 21. Chrome 13 native 60 SELECTS 97ms <2ms/SELECT
    19. 22. HALLELUJAH
    20. 23. flyweight-jquery-custom-select <ul><li>Lightweight </li></ul><ul><li>Extremely fast </li></ul><ul><li>Semantic markup </li></ul><ul><li>Fully customisable keyboard navigation </li></ul><ul><li>Fully customisable class names </li></ul><ul><li>Intelligent typeahead </li></ul><ul><li>Option group support </li></ul><ul><li>Enable/disable </li></ul><ul><li>Graceful destroy, original select maintains state </li></ul><ul><li>Supports CSS3 </li></ul><ul><li>Supports for IE6/7/8 CSS3 emulation </li></ul><ul><li>Toggle hide first option element (for Please Select, etc) </li></ul><ul><li>Binds to original select change event </li></ul><ul><li>Auto scroll </li></ul><ul><li>Only 8KB compressed </li></ul><ul><li>Works in all tested major browsers </li></ul><ul><ul><li>FF 3.6/5.1, Chrome 11/12, Safari 5, IE 6/7/8 </li></ul></ul>
    21. 24. Examples of usage default $(&quot;select&quot;).flyweightCustomSelect(); with options $(&quot;select&quot;).flyweightCustomSelect( { optionfilter:'option,optgroup', pleaseselect:true } );
    22. 25. And that’s why we can now begin to use custom selects on very big forms Thanks for listening!