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. <3

    View Slide

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

    View Slide

  3. B

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. /* 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 Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. Today
    Comprehensive frameworks doing all the things.

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

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

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

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

    View Slide

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

    View Slide

  39. 320 and up

    View Slide

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

    View Slide

  41. View Slide

  42. View Slide

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

    View Slide

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

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

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

    View Slide

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

    View Slide

  51. View Slide

  52. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  56. View Slide

  57. View Slide

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

    View Slide

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

    View Slide

  60. View Slide

  61. // 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 Slide

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

    View Slide

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

    View Slide

  64. We kinda already have the
    ultimate design tool.

    View Slide

  65. It’s called Photoshop.

    View Slide

  66. jk lol :p

    View Slide

  67. It’s called the Web.

    View Slide

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

    View Slide

  69. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  75. Thanks, nerds!
    :heart:

    View Slide