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

Transcript

1. Oh hai. I’m @mdo.
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 
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
15. Today A handful (and growing) set of comprehensive frameworks that do all the things.
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.
34. A renewed focus on simpler tools...
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
43. Frameworks dedicated to the mobile Web.
44. • Standardizing style and behavior • Separation from desktop • Opportunity for advanced stuff
47. Preprocessors at every turn.
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
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.
62. • In-house frameworks as the norm • More frameworks from products • Learn from others first
63. Media queries for components.
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.”
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?