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

Reducing complexity with a Component API

Ianfeather
April 25, 2014
150

Reducing complexity with a Component API

Ianfeather

April 25, 2014
Tweet

Transcript

  1. HTML CSS JS SHARED SPECIFIC High Reuse Strong Caching Low

    Reuse Weak Caching HOTELS The rebuild
  2. HTML CSS JS SHARED SPECIFIC High Reuse Strong Caching High

    Risk Low Reuse Weak Caching Low Risk HOTELS The rebuild
  3. HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High

    Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild
  4. HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High

    Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild
  5. HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High

    Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild
  6. <form action="/search"> <label class="accessibility" for="search-q">Search</label> <input id="search-q" name="q" tabindex="1" type=“search"/>

    <button name="search-q-submit" type="submit">Search</button> </form> = component(“form/search”, {
 label: search
 })

  7. <form action="/search"> <label class="accessibility" for="search-q">Search</label> <input class="js-autocomplete" id="search-q" name=“q" />

    <button name="search-q-submit" type="submit">Search</button>
 <div class="js-autocomplete-container"></div> </form> component(“input/search”, {
 label: search, autocomplete: true
 })
  8. SPECIFIC Low Risk
 Low Reuse HOTELS PLACES SEARCH THEME HTML

    CSS JS SHARED High Risk High Reuse Low Risk
 High Reuse Component Layer & API