Sail

Sometimes, it makes sense to use an existing third-party solution. Other times, it makes sense to chart your own course. Presented at CascadiaJS 2012.

Transcript

1. Sail
   Navigating the DOM APIs
   Kit Cambridge
   Voxer
   

   View Slide

2. Sometimes, it makes sense to use
   an existing third-party solution.
   Other times, it makes sense to
   chart your own course.
   

   View Slide

3. CSS Selectors
   Attributes
   Properties
   Traversal
   Manipulation
   Styles
   Positioning
   Storage
   Wrappers
   Effects
   Plug-ins
   

   View Slide

4. Simplify
   Find problems in disguise
   

   View Slide

5. Element Storage
   Associate arbitrary
   metadata with an element
   MooTools
   Prototype
   jQuery
   store, retrieve,
   eliminate
   store, retrieve, purge,
   getStorage
   data, removeData, hasData
   

   View Slide

6. function isSupported() {
   var element = document.createElement("div");
   return typeof element.uniqueNumber == "number" &&
   typeof document.documentElement.uniqueNumber == "number" &&
   element.uniqueNumber != document.documentElement.uniqueNumber;
   }
   var Storage = {};
   Index data by unique element identi er
   

   View Slide

7. var UID = 2;
   function identify(element) {
   if (element == window) {
   return 0;
   } else if (element.nodeType == 9) {
   return 1;
   } else if (element.nodeType == 1) {
   if (!/^(?:embed|object|applet)$/i.test(element.nodeName)) {
   var property = (isSupported() ? "unique" :
   "sail") + "Number";
   return element[property] || (element[property] = UID++);
   }
   }
   return null;
   }
   

   View Slide

8. The Perils of
   Generality
   Tailored solutions are the answer
   Attributes
   

   View Slide

9. style
   href
   src
   width
   height
   enctype
   contenteditable
   type
   checked
   selected
   compact
   declare
   defer
   disabled
   ismap
   multiple
   nohref
   noresize
   noshade
   nowrap
   readonly
   allowtransparency
   truespeed
   Buggy
   Attributes
   

   View Slide

10. maxLength
    selected
    tabIndex
    enctype
    rows
    cols
    size
    value
    contentEditable
    profile
    classid
    url
    vrml
    dynsrc
    lowsrc
    pluginspage
    background
    cite
    codeBase
    data
    longDesc profile
    useMap
    action
    classid
    Buggy
    Properties
    

    View Slide

11. Many of these attributes and properties
    are deprecated...but browsers still support
    them.
    If you’re writing a general solution, you’ve
    committed yourself to supporting them
    as well.
    

    View Slide

12. Considerations
    Opportunity cost
    

    View Slide

13. File size
    Complexity
    Performance
    Micro-Libraries
    General solutions
    Edge cases
    

    View Slide

14. Targeted, low-level utility libraries
    Stop writing library plug-ins
    General libraries are abstraction layers with a different syntax
    Don’t aim for identical experiences
    across every browser
    Learn and target DOM APIs instead
    Save cross-browser consistency for
    low-level methods
    

    View Slide

15. “Any change to a low-level abstraction
    propagates to its dependencies.”
    “Before attempting to x any bug, the
    author must rst get an
    understanding of the problems
    caused by their code.”
    — Garrett Smith
    

    View Slide

16. Accept constraints
    Think about what you need
    Reduce abstractions
    Write only what you need
    

    View Slide

17. Thank you!
    @kitcambridge
    git.io/kit
    

    View Slide