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.

Transcript

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
13. Today Comprehensive frameworks doing all the things.
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 Web.
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.
32. A renewed focus on simpler tools... One tool, one job. Endless opportunities.
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.
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.
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.
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.
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.
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, etc.
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: