Frameworks of Tomorrow UDE 2013

Bc4ab438f7a4ce1c406aadc688427f2c?s=47 Mark Otto
November 21, 2013

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.

Bc4ab438f7a4ce1c406aadc688427f2c?s=128

Mark Otto

November 21, 2013
Tweet

Transcript

  1. :heart:

  2. Oh hai. I’m @mdo.

  3. None
  4. None
  5. B

  6. Frameworks Tomorrow of

  7. HTML, CSS, and JS frameworks

  8. A brief reflection on time

  9. None
  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
  13. None
  14. None
  15. None
  16. Code snippets Grid systems Styled native web elements

  17. Today

  18. None
  19. None
  20. None
  21. None
  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

  30. None
  31. None
  32. None
  33. Mobile front-end frameworks

  34. None
  35. None
  36. Preprocessors and build tools

  37. None
  38. None
  39. None
  40. None
  41. Writing less JavaScript

  42. None
  43. None
  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
  48. None
  49. None
  50. None
  51. None
  52. None
  53. Component level media queries

  54. Android iOS http://opensignal.com/reports/fragmentation-2013/

  55. None
  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

  58. None
  59. None
  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!