Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sail

Kit Cambridge
November 08, 2012

 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.

Kit Cambridge

November 08, 2012
Tweet

More Decks by Kit Cambridge

Other Decks in Technology

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