Frameworks of Tomorrow 2

Bc4ab438f7a4ce1c406aadc688427f2c?s=47 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

Bc4ab438f7a4ce1c406aadc688427f2c?s=128

Mark Otto

August 29, 2013
Tweet

Transcript

  1. 2.
  2. 3.
  3. 4.

    B

  4. 5.

    Frameworks of Tomorrow Where we've been, where we are, and

    where we're going—with an emphasis on designing and building.
  5. 8.
  6. 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
  7. 12.
  8. 13.
  9. 14.
  10. 16.
  11. 17.
  12. 18.
  13. 19.
  14. 20.
  15. 22.

    Getting to Today A few shifts led to this new

    breed of front-end frameworks.
  16. 31.
  17. 32.
  18. 33.
  19. 35.
  20. 36.
  21. 37.
  22. 38.
  23. 40.

    Normalize.css Some typography Any grid system CSS preprocessor Handful of

    JavaScript plugins Compilation framework + + + + =
  24. 42.
  25. 45.
  26. 46.
  27. 48.
  28. 49.
  29. 50.
  30. 51.

    // Make a generic class .button { ... } //

    Use it everywhere else .call-to-action { .button(); } 1 2 3 4 5 6 7 8 9
  31. 55.
  32. 56.
  33. 57.

    1 2 3 4 5 6 7 8 // Dismiss

    a modal <button class=”close” data-dismiss=”modal”> &times; </button> // Or an alert <button class=”close” data-dismiss=”alert”> &times; </button>
  34. 60.
  35. 61.
  36. 62.

    • In-house frameworks as the norm • More frameworks from

    products • Learn from others first
  37. 64.
  38. 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
  39. 66.

    • Changes the responsive game • All about content, not

    devices • Huge potential outside frameworks
  40. 69.
  41. 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
  42. 76.

    • Frameworks changed the Web • More tools = more

    frameworks • Responsive content • Designing & developing for native • Super exciting stuff!