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

Frameworks of Tomorrow

Frameworks of Tomorrow

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

Originally presented at Future Insights Live 2013 in Las Vegas.

Mark Otto

May 02, 2013
Tweet

More Decks by Mark Otto

Other Decks in Technology

Transcript

  1. Oh hai, I’m @mdo.
    :heart:

    View full-size slide

  2. Frameworks of Tomorrow
    And by tomorrow, I mean, like, tomorrow-ish.

    View full-size slide

  3. What brought us to today
    Today’s frameworks bleed into tomorrow
    Where we’re heading after that
    Huh?

    View full-size slide

  4. noun
    HTML, CSS, and/or JS for building awesome
    stuff on the Web faster and easier
    frame·work |ˈfrāmˌwərk|

    View full-size slide

  5. Yesterday
    Earlier tools led to the larger frameworks of today.

    View full-size slide

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

    View full-size slide

  7. /* 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;
    }
    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

    View full-size slide

  8. Today
    Comprehensive frameworks doing all the things.

    View full-size slide

  9. Do all the things—one stop shop
    Go beyond basic styling in many cases
    Usually provides components & behavior

    View full-size slide

  10. How’d we get to “Today?”
    CSS, styleguides, and people changed our tools.

    View full-size slide

  11. CSS evolved.
    Or at least, how we use it. And it will again.

    View full-size slide

  12. Designers embraced CSS
    CSS moved beyond type, forms, and grids
    People got tired of creating the same stuff

    View full-size slide

  13. Docs became styleguides.
    More content in a slightly different format.

    View full-size slide

  14. Prominence of web inspector tools
    Live examples along with “docs”
    Frameworks coming from products

    View full-size slide

  15. Moar people.
    Lots of folks trying to build on the Web.

    View full-size slide

  16. Hella nerds working on the Web
    Folks from all different backgrounds
    Everyone wants that fast starting point

    View full-size slide

  17. Tomorrow?
    Well, more like tonight, honestly.

    View full-size slide

  18. Frameworks focusing on
    learning & customization
    Beginners and customization tools change things.

    View full-size slide

  19. A renewed focus on
    simpler tools...
    One tool, one job. Endless opportunities.

    View full-size slide

  20. ...leading to compilation
    frameworks
    “All your favorite tools from when you were young!”

    View full-size slide

  21. Normalize
    Some typography
    Any grid system
    Handful of JavaScript plugins
    Compilation framework
    +
    +
    +
    =

    View full-size slide

  22. Mobile Web frameworks
    are a’coming.
    Folks want the same tools on mobile.

    View full-size slide

  23. Just HTML, CSS, and JS
    Style and behavior are standardizing
    Immense opportunity for advanced stuff

    View full-size slide

  24. Preprocessors coming at
    you from every angle
    SASS, LESS, etc will continue to add real power.

    View full-size slide

  25. Extend frameworks anyway you see fit
    Powerful variables and mixins
    Built-in error handling

    View full-size slide

  26. People will write less
    JavaScript.
    Frameworks make it easy to use awesome behavior.

    View full-size slide

  27. Data attributes instead of raw JavaScript
    Natural extension of HTML and CSS
    Abstracted behavior, just like style
    Honorable mention: CSS animations

    View full-size slide

  28. Day after tomorrow?
    A few things to check out, like, next week or so.

    View full-size slide

  29. More frameworks being
    built at work, by you
    Build design systems based on a real product.

    View full-size slide

  30. In-house frameworks will be the norm
    More frameworks from products
    Learn from others, then do it yourself

    View full-size slide

  31. Component-level
    media queries
    Responsive for components, instead of viewports.

    View full-size slide

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

    View full-size slide

  33. Could change how frameworks are built
    Make it about content, not devices
    Also practical outside frameworks

    View full-size slide

  34. Designing native apps
    on the Web
    Design it interactively—using HTML, CSS, JS, etc.

    View full-size slide

  35. We kinda already have the
    ultimate design tool.

    View full-size slide

  36. It’s called Photoshop.

    View full-size slide

  37. It’s called the Web.

    View full-size slide

  38. The toolbox of the web is
    browsers, frameworks,
    dev products, etc.

    View full-size slide

  39. Designing with the Web by Steve Smith
    Power of CSS3 and designing in WebKit
    Use final assets in your CSS
    Ability to use real data in complete flows

    View full-size slide

  40. Let’s recap
    Time is a funny thing—and it creeps up on us.

    View full-size slide

  41. We’re in a familiar place.
    Tools of old have led to the large frameworks today.

    View full-size slide

  42. Our tools are changing.
    Better, faster, stronger development.

    View full-size slide

  43. Flexibility is key.
    Responsive, modular, customizable, and focused.

    View full-size slide

  44. The Web is a design tool.
    And frameworks et al enable that.

    View full-size slide

  45. Thanks, nerds!
    :heart:

    View full-size slide