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

More Decks by Mark Otto

Other Decks in Technology


  1. <3

  2. B

  3. noun HTML, CSS, and/or JS for building awesome stuff on

    the Web faster and easier frame·work |ˈfrāmˌwərk|
  4. /* 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
  5. Do all the things—one stop shop Go beyond basic styling

    in many cases Usually provides components & behavior
  6. Designers embraced CSS CSS moved beyond type, forms, and grids

    People got tired of creating the same stuff
  7. Hella nerds working on the Web Folks from all different

    backgrounds Everyone wants that fast starting point
  8. Just HTML, CSS, and JS Style and behavior are standardizing

    Immense opportunity for advanced stuff
  9. Data attributes instead of raw JavaScript Natural extension of HTML

    and CSS Abstracted behavior, just like style Honorable mention: CSS animations
  10. // 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
  11. Could change how frameworks are built Make it about content,

    not devices Also practical outside frameworks
  12. 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