Frameworks of Tomorrow UDE 2013

A look back at how we got to the large comprehensive frameworks today through simple tools of five years ago, and more importantly, where those tools are leading us again for frameworks.

Transcript

1. :heart:
2. Oh hai. I’m @mdo.
5. B
6. Frameworks Tomorrow of
7. HTML, CSS, and JS frameworks
8. A brief reflection on time
10. Noodle on that
11. Se ! ing the stage
12. /* 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
16. Code snippets Grid systems Styled native web elements
17. Today
22. Code snippets Grid systems Styled native web elements
23. Common components JavaScript behavior Code snippets Grid systems Styled native web elements
24. Ge ! ing here
25. CSS, and its use, evolved
26. Documentation as style guides
27. Hella nerds
28. Tomorrow
29. A renewed focus on simpler tools
33. Mobile front-end frameworks
36. Preprocessors and build tools
41. Writing less JavaScript
44. // Dismiss a modal <button class=“close” data-dismiss=“modal”>
 &times;
 </button> ! // Or an alert <button class=“close” data-dismiss=“alert”>
 Dismiss
 </button> 1 2 3 4 5 6 7 8
45. And the future?
46. More frameworks from in-house
47. Breaking interfaces down into patterns has been immensely helpful in learning and re- evaluating the best possible code to implement them. — Dan Cedarholm, on Pears https://github.com/simplebits/Pears
53. Component level media queries
54. Android iOS http://opensignal.com/reports/fragmentation-2013/
56. // Media query on individual components // as envisioned by @jon_neal. // // github.com/jonathantneal/MediaClass ! .widget:media(max-width: 300px) { font-size: 14px; background-color: red; } ! .widget:media(max-width: 728px) { font-size: 12px; background-color: blue; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14
57. True designing in the browser
60. Designing with the Web CSS3 and WebKit Real data from GitHub API
61. Web framework for Mac apps
62. Web framework for mobile apps
63. Web framework for ____________
64. Thanks, nerds!