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

  2. None
  3. None
  4. B

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

    where we're going—with an emphasis on designing and building.
  6. Specifically, front-end frameworks. HTML, CSS, & JavaScript for quickly building

    with common Web components.
  7. Yesterday  Tomorrow Next week   Today 

  8. None
  9. Yesterday Many developer tools paved the way for the larger

    frameworks we use today.
  10. And jQuery UI, Prototype, Scriptaculous, Mootools, etc.

  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
  12. None
  13. None
  14. None
  15. Today A handful (and growing) set of comprehensive frameworks that

    do all the things.
  16. None
  17. None
  18. None
  19. None
  20. None
  21. • One stop shop • Beyond basic styling • Components

    and behavior
  22. Getting to Today A few shifts led to this new

    breed of front-end frameworks.
  23. CSS evolved.

  24. • Designers • Increased scope • Repetition got old

  25. Documentation as style guides.

  26. • Web inspector tools • Live examples • Learning tools

  27. Moar people.

  28. • Hella nerds • Different backgrounds • That “turn key

    solution” • Community
  29. Tomorrow? Key changes to frameworks with the tools that make

    them up.
  30. Increased focus on customization.

  31. None
  32. None
  33. None
  34. A renewed focus on simpler tools...

  35. None
  36. None
  37. None
  38. None
  39. ...to help create more compilation frameworks.

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

    JavaScript plugins Compilation framework + + + + =
  41. 320 and up

  42. None
  43. Frameworks dedicated to the mobile Web.

  44. • Standardizing style and behavior • Separation from desktop •

    Opportunity for advanced stuff
  45. None
  46. None
  47. Preprocessors at every turn.

  48. None
  49. None
  50. None
  51. // Make a generic class .button { ... } //

    Use it everywhere else .call-to-action { .button(); } 1 2 3 4 5 6 7 8 9
  52. • Extending frameworks • Powerful variables and mixins • Built-in

    error handling
  53. People will write less JavaScript.

  54. • Data attributes • Just write HTML and CSS •

    Abstracted behavior
  55. None
  56. None
  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>
  58. Next week The super exciting stuff to check out, like,

    next week or so.
  59. More frameworks built in-house.

  60. None
  61. None
  62. • In-house frameworks as the norm • More frameworks from

    products • Learn from others first
  63. Media queries for components.

  64. None
  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
  66. • Changes the responsive game • All about content, not

    devices • Huge potential outside frameworks
  67. Designing native apps on the Web.

  68. Frameworks & the “ultimate design and dev tool.”

  69. None
  70. haha jk lol :p

  71. It’s called the Web.

  72. The Web is a fully loaded toolbox.

  73. Frameworks make designing in the browser practical.

  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
  75. Wait, what? Super quickly, let’s wrap this up!

  76. • Frameworks changed the Web • More tools = more

    frameworks • Responsive content • Designing & developing for native • Super exciting stuff!
  77. Thanks, nerds! :heart:

  78. Questions?