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. Oh hai, I’m @mdo. :heart:

  3. B

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

  5. What brought us to today Today’s frameworks bleed into tomorrow

    Where we’re heading after that Huh?
  6. noun HTML, CSS, and/or JS for building awesome stuff on

    the Web faster and easier frame·work |ˈfrāmˌwərk|
  7. Yesterday Earlier tools led to the larger frameworks of today.

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

  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
  10. None
  11. None
  12. None
  13. Today Comprehensive frameworks doing all the things.

  14. None
  15. None
  16. None
  17. None
  18. Do all the things—one stop shop Go beyond basic styling

    in many cases Usually provides components & behavior
  19. How’d we get to “Today?” CSS, styleguides, and people changed

    our tools.
  20. CSS evolved. Or at least, how we use it. And

    it will again.
  21. Designers embraced CSS CSS moved beyond type, forms, and grids

    People got tired of creating the same stuff
  22. Docs became styleguides. More content in a slightly different format.

  23. Prominence of web inspector tools Live examples along with “docs”

    Frameworks coming from products
  24. Moar people. Lots of folks trying to build on the

  25. Hella nerds working on the Web Folks from all different

    backgrounds Everyone wants that fast starting point
  26. Tomorrow? Well, more like tonight, honestly.

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

    change things.
  28. None
  29. None
  30. None
  31. None
  32. A renewed focus on simpler tools... One tool, one job.

    Endless opportunities.
  33. None
  34. None
  35. None
  36. None
  37. ...leading to compilation frameworks “All your favorite tools from when

    you were young!”
  38. Normalize Some typography Any grid system Handful of JavaScript plugins

    Compilation framework + + + =
  39. 320 and up

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

    on mobile.
  41. None
  42. None
  43. Just HTML, CSS, and JS Style and behavior are standardizing

    Immense opportunity for advanced stuff
  44. Preprocessors coming at you from every angle SASS, LESS, etc

    will continue to add real power.
  45. None
  46. None
  47. None
  48. None
  49. Extend frameworks anyway you see fit Powerful variables and mixins

    Built-in error handling
  50. People will write less JavaScript. Frameworks make it easy to

    use awesome behavior.
  51. None
  52. None
  53. Data attributes instead of raw JavaScript Natural extension of HTML

    and CSS Abstracted behavior, just like style Honorable mention: CSS animations
  54. Day after tomorrow? A few things to check out, like,

    next week or so.
  55. More frameworks being built at work, by you Build design

    systems based on a real product.
  56. None
  57. None
  58. In-house frameworks will be the norm More frameworks from products

    Learn from others, then do it yourself
  59. Component-level media queries Responsive for components, instead of viewports.

  60. None
  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
  62. Could change how frameworks are built Make it about content,

    not devices Also practical outside frameworks
  63. Designing native apps on the Web Design it interactively—using HTML,

    CSS, JS, etc.
  64. We kinda already have the ultimate design tool.

  65. It’s called Photoshop.

  66. jk lol :p

  67. It’s called the Web.

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

  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
  70. Let’s recap Time is a funny thing—and it creeps up

    on us.
  71. We’re in a familiar place. Tools of old have led

    to the large frameworks today.
  72. Our tools are changing. Better, faster, stronger development.

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

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

    enable that.
  75. Thanks, nerds! :heart: