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

Frameworks of Tomorrow 2

Mark Otto
August 29, 2013

Frameworks of Tomorrow 2

This is the second time I've given this talk (the first was at Future Insights Live 2013 in Las Vegas). That presentation can be found at https://speakerdeck.com/mdo/frameworks-of-tomorrow.

It's been reworked for content, style, and flow for a slightly more unique presentation for the Frontend Conference (http://2013.frontendconf.ch/) in Zürich, Switzerland.

Original excerpt:

Nearly two years ago, the type of frameworks we use dramatically changed, and they’ll do the same again in the near future given the trajectory of today's tools. We’ll take a brief look back through not only the evolution of front-end frameworks, but where they may be heading in the next couple years—and how to prepare yourself for them today

Mark Otto

August 29, 2013
Tweet

More Decks by Mark Otto

Other Decks in Programming

Transcript

  1. Oh hai.
    I’m @mdo.

    View Slide

  2. View Slide

  3. View Slide

  4. B

    View Slide

  5. Frameworks of
    Tomorrow
    Where we've been, where we are, and where
    we're going—with an emphasis on designing
    and building.

    View Slide

  6. Specifically, front-end frameworks.
    HTML, CSS, & JavaScript for quickly
    building with common Web components.

    View Slide

  7. Yesterday

    Tomorrow Next week


    Today

    View Slide

  8. View Slide

  9. Yesterday
    Many developer tools paved the way for the
    larger frameworks we use today.

    View Slide

  10. And jQuery UI, Prototype, Scriptaculous, Mootools, etc.

    View Slide

  11. /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. Today
    A handful (and growing) set of
    comprehensive frameworks that
    do all the things.

    View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. • One stop shop
    • Beyond basic styling
    • Components and behavior

    View Slide

  22. Getting to
    Today
    A few shifts led to this new breed
    of front-end frameworks.

    View Slide

  23. CSS evolved.

    View Slide

  24. • Designers
    • Increased scope
    • Repetition got old

    View Slide

  25. Documentation as
    style guides.

    View Slide

  26. • Web inspector tools
    • Live examples
    • Learning tools

    View Slide

  27. Moar people.

    View Slide

  28. • Hella nerds
    • Different backgrounds
    • That “turn key solution”
    • Community

    View Slide

  29. Tomorrow?
    Key changes to frameworks with the tools that
    make them up.

    View Slide

  30. Increased focus on
    customization.

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. A renewed focus
    on simpler tools...

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. ...to help create
    more compilation
    frameworks.

    View Slide

  40. Normalize.css
    Some typography
    Any grid system
    CSS preprocessor
    Handful of JavaScript plugins
    Compilation framework
    +
    +
    +
    +
    =

    View Slide

  41. 320 and up

    View Slide

  42. View Slide

  43. Frameworks
    dedicated to the
    mobile Web.

    View Slide

  44. • Standardizing style and behavior
    • Separation from desktop
    • Opportunity for advanced stuff

    View Slide

  45. View Slide

  46. View Slide

  47. Preprocessors at
    every turn.

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. // Make a generic class
    .button {
    ...
    }
    // Use it everywhere else
    .call-to-action {
    .button();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9

    View Slide

  52. • Extending frameworks
    • Powerful variables and mixins
    • Built-in error handling

    View Slide

  53. People will write
    less JavaScript.

    View Slide

  54. • Data attributes
    • Just write HTML and CSS
    • Abstracted behavior

    View Slide

  55. View Slide

  56. View Slide

  57. 1
    2
    3
    4
    5
    6
    7
    8
    // Dismiss a modal

    ×

    // Or an alert

    ×

    View Slide

  58. Next week
    The super exciting stuff to check out, like, next
    week or so.

    View Slide

  59. More frameworks
    built in-house.

    View Slide

  60. View Slide

  61. View Slide

  62. • In-house frameworks as the norm
    • More frameworks from products
    • Learn from others first

    View Slide

  63. Media queries for
    components.

    View Slide

  64. View Slide

  65. // Media query on individual components
    // as envisioned by @jon_neal.
    //
    // github.com/jonathantneal/MediaClass
    .widget:media(max-width: 300px) {
    font-size: 14px;
    }
    1
    2
    3
    4
    5
    6
    7
    8

    View Slide

  66. • Changes the responsive game
    • All about content, not devices
    • Huge potential outside frameworks

    View Slide

  67. Designing native
    apps on the Web.

    View Slide

  68. Frameworks & the
    “ultimate design
    and dev tool.”

    View Slide

  69. View Slide

  70. haha jk lol :p

    View Slide

  71. It’s called the Web.

    View Slide

  72. The Web is a fully
    loaded toolbox.

    View Slide

  73. Frameworks make
    designing in the
    browser practical.

    View Slide

  74. • Steve Smith: Designing with the Web
    • Made his own compilation
    framework
    • CSS3 and WebKit
    • Use your final assets (bitmaps)
    • Real data from an API

    View Slide

  75. Wait, what?
    Super quickly, let’s wrap this up!

    View Slide

  76. • Frameworks changed the Web
    • More tools = more frameworks
    • Responsive content
    • Designing & developing for native
    • Super exciting stuff!

    View Slide

  77. Thanks, nerds!
    :heart:

    View Slide

  78. Questions?

    View Slide