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

Front-end Architecture

Front-end Architecture

An early exploration of the value of investing more seriously in front-end web development as the world was transitioning from a table-centric approach to front-end development to following Web Standards and building more maintainable front-ends.

Garrett Dimon

July 21, 2006
Tweet

More Decks by Garrett Dimon

Other Decks in Programming

Transcript

  1. Front-End Architecture
    It’s an investment for the future.

    View full-size slide

  2. LOW
    Architectural Investment
    HIGH
    Short-Term Costs
    Long-Term Costs

    View full-size slide

  3. 5 Year Lifetime
    Short-Term Costs
    Long-Term Costs
    Low Investment

    View full-size slide

  4. 5 Year Lifetime
    Short-Term Costs
    Long-Term Costs
    High Investment

    View full-size slide

  5. Software Entropy &
    Total Cost of Ownership
    Maintenance, Morale, Updates, etc.

    View full-size slide

  6. Explore Your Options
    The first solution isn’t always the best.

    View full-size slide

  7. Be Proactive instead of reactive.
    Anticipating Impact and thinking ahead.

    View full-size slide

  8. Myth of Separation
    Loose coupling is a target, not a goal.

    View full-size slide

  9. Look for Simple solutions.
    Wow! This page prints beautifully!

    View full-size slide

  10. Typographic Choices
    (and ramifications)
    Initial Costs Content
    Maintenance
    Code
    Maintenance
    Accessibility User-Agent
    Consistency
    Design
    Control
    Separation
    CSS
    Image
    Replacement
    sIFR
    Image Tags
    Server-
    Generated
    Images

    View full-size slide

  11. In the Real World

    View full-size slide

  12. http://www.DallasNews.com

    View full-size slide

  13. http://www.NewYorkTimes.com

    View full-size slide

  14. http://www.MySpace.com

    View full-size slide

  15. http://www.MySpace.com/mikeindustries/

    View full-size slide

  16. The Ingredients.

    View full-size slide

  17. CSS
    IA
    DOM
    Scripting
    Accessibility
    Design AJAX
    Markup
    User
    Agents
    Flash
    Usability
    Content
    Back-End
    Project
    Mgmt.

    View full-size slide

  18. CSS
    DOM
    Scripting
    Accessibility
    AJAX
    Markup
    User
    Agents

    View full-size slide

  19. What you support influences
    how you construct your site.
    >
    how much sleep you’ll lose

    View full-size slide

  20. I, for one, welcome our
    browser overlords.
    They’re not leaving anytime soon.

    View full-size slide

  21. We’re making progress...
    Netscape 4, IE 5, IE 6?
    Firefox & IE 7

    View full-size slide

  22. CSS
    DOM
    Scripting
    Accessibility
    Design AJAX
    Markup
    User
    Agents
    Content
    Back-End

    View full-size slide

  23. Markup is the
    technical foundation.
    Myth of Separation
    http://www.garrettdimon.com/archives/front-end-architecture-markup-is-the-technical-foundation

    View full-size slide

  24. The tables have got to go.
    The first step is admitting you have a problem.
    http://www.stopdesign.com/articles/throwing_tables/

    View full-size slide

  25. Microformats
    Elegant & Semantic Simplicity
    http://www.Microformats.org

    View full-size slide

  26. Accessibility
    Markup is the root of accessible sites.

    View full-size slide

  27. CSS
    DOM
    Scripting
    Accessibility
    Design Markup
    User
    Agents
    Content
    Back-End

    View full-size slide

  28. Beware of Browser Hacks
    No Guarantees. They’re only a patch.
    http://www.thinkvitamin.com/features/css/stop-css-hacking

    View full-size slide

  29. Be Bulletproof.
    The only thing constant is change.

    View full-size slide

  30. Limitless options.
    Selectors, Shorthand, Redundancy vs.
    Dependency, Separate Files, etc.
    http://www.digital-web.com/articles/architecting_css/

    View full-size slide

  31. DOM Scripting
    (aka JavaScript)

    View full-size slide

  32. CSS
    DOM
    Scripting
    Accessibility
    Design AJAX
    Markup
    User
    Agents
    Usability

    View full-size slide

  33. The Dark Ages
    Browser Wars

    View full-size slide

  34. The Renaissance
    Progressive Enhancement & Standards
    http://domscripting.com/blog/

    View full-size slide

  35. DOM Scripting
    Scripting libraries
    and frameworks.
    Libraries & Frameworks

    View full-size slide

  36. Scripting is for “behavior”
    Styling forms and handling business logic = Red Flags

    View full-size slide

  37. Abusing DOM Manipulation
    this.style = font tags of DOM Scripting

    View full-size slide

  38. DOM
    Scripting
    Accessibility
    Design AJAX
    Markup
    User
    Agents
    Usability
    Content
    Back-End

    View full-size slide

  39. ...your scientists were so
    preoccupied with whether or
    not they could, they didn’t
    stop to think if they should.


    - Jurrassic Park, 1993

    View full-size slide

  40. The Traditional Model
    Full Page Loads
    Submit
    Business
    Logic

    View full-size slide

  41. The New Model
    Partial Page Loads
    Submit
    Business
    Logic

    View full-size slide

  42. Plan for AJAX from the
    beginning. Implement AJAX
    at the end.


    - Jeremy Keith

    View full-size slide

  43. The Hijax Model
    Request Interception
    Submit
    Submit Hijax
    Business
    Logic

    View full-size slide

  44. Response Format Options
    XML, HTML, or JSON?
    http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html

    View full-size slide

  45. Back-End & Bandwidth
    MacRumors used only 32 GB of bandwidth instead
    of an estimated 196 GB if they had a non-AJAX
    version of the live keynote.

    View full-size slide

  46. Accessibility & AJAX
    Can they play nicely?
    http://www.sitepoint.com/article/ajax-screenreaders-work

    View full-size slide

  47. Accessibility

    View full-size slide

  48. CSS
    IA
    DOM
    Scripting
    Accessibility
    Design AJAX
    Markup
    User
    Agents
    Flash
    Usability
    Content

    View full-size slide

  49. Vision isn’t the only “disability”
    Alternate Devices, Search Engines, Contrast,
    Color-Blind, Keyboard Navigation,
    Decreased Mobility

    View full-size slide

  50. No magic bullet.
    Perspective & Understanding

    View full-size slide

  51. Labels are just the beginning.

    View full-size slide

  52. Social Responsibility
    UK, Government, EU?, Target Lawsuit?
    >
    Legal

    View full-size slide

  53. Inherent Benefits
    Clean Semantic Markup
    Usability (Fitt’s Law)
    SEO

    View full-size slide

  54. CSS
    IA
    DOM
    Scripting
    Accessibility
    Design AJAX
    Markup
    Flash
    Usability
    Content

    View full-size slide

  55. Rise of Design
    The New User Experience Focus

    View full-size slide

  56. Engineers vs. Designers
    Left-Brain vs. Right-Brain

    View full-size slide

  57. The right design for the job.
    Undesign is the new black!

    View full-size slide

  58. IA
    DOM
    Scripting
    Accessibility
    Design AJAX
    Flash
    Usability

    View full-size slide

  59. User “Testing”.
    Understand people not results.

    View full-size slide

  60. Heat Maps & User Testing
    80% Common Sense?
    http://www.useit.com/alertbox/reading_pattern.html

    View full-size slide

  61. Jakob Nielsen.
    Visual Design? Information Architecture?

    View full-size slide

  62. Information Architecture

    View full-size slide

  63. IA
    Accessibility
    Design
    Usability
    Content
    Back-End
    Project
    Mgmt.

    View full-size slide

  64. Information Design
    Google News vs. Google Finance

    View full-size slide

  65. Prototyping Choices
    (and ramifications)
    Short-Term Costs Long-Term Costs Accuracy Flexibility
    Sketches
    PDD’s
    Wireframes
    HTML Prototypes
    Getting Real

    View full-size slide

  66. Tags for a bug tracker?
    Tags are loose and not precise.

    View full-size slide

  67. IA
    Accessibility
    Design Markup
    Content
    Back-End

    View full-size slide

  68. The red-headed stepchild.
    Clients as copywriters?

    View full-size slide

  69. Content Dominoes
    Don’t believe it matters?

    View full-size slide

  70. Content will change.
    Remember.
    The only thing constant is change.

    View full-size slide

  71. IA
    DOM
    Scripting
    Accessibility
    Design AJAX
    Flash
    Usability
    Markup

    View full-size slide

  72. sIFR
    Scalable Inman Flash Replacement
    DOM
    Scripting
    Accessibility
    Design
    Flash
    Markup

    View full-size slide

  73. IA
    AJAX
    Markup
    Content
    Back-End

    View full-size slide

  74. Presentation Layer
    ASPX, Rails Views, etc.

    View full-size slide

  75. Elegant Integration
    Make an engineer happy.

    View full-size slide

  76. Database
    Information Architecture & Content

    View full-size slide

  77. Web Services & API’s
    AJAX is no place for business logic.

    View full-size slide

  78. Project Management

    View full-size slide

  79. CSS
    IA
    DOM
    Scripting
    Accessibility
    Design AJAX
    Markup
    User
    Agents
    Flash
    Usability
    Content
    Back-End
    Project
    Mgmt.

    View full-size slide

  80. Managing change.
    (And the associated costs.)

    View full-size slide

  81. Managing specialists.
    (And their very special egos.)

    View full-size slide

  82. The whole is greater than
    the sum of its parts.

    View full-size slide

  83. Thank You
    http://www.garrettdimon.com/fea/

    View full-size slide