Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frameworks of Tomorrow UDE 2013

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.

Mark Otto

November 21, 2013
Tweet

More Decks by Mark Otto

Other Decks in Programming

Transcript

  1. :heart:

    View Slide

  2. Oh hai.
    I’m @mdo.

    View Slide

  3. View Slide

  4. View Slide

  5. B

    View Slide

  6. Frameworks
    Tomorrow
    of

    View Slide

  7. HTML, CSS, and JS frameworks

    View Slide

  8. A brief reflection on time

    View Slide

  9. View Slide

  10. Noodle on that

    View Slide

  11. Se
    !
    ing the stage

    View Slide

  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

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. Code snippets
    Grid systems
    Styled native web elements

    View Slide

  17. Today

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. Code snippets
    Grid systems
    Styled native web elements

    View Slide

  23. Common components
    JavaScript behavior
    Code snippets
    Grid systems
    Styled native web elements

    View Slide

  24. Ge
    !
    ing here

    View Slide

  25. CSS, and its use, evolved

    View Slide

  26. Documentation as style guides

    View Slide

  27. Hella nerds

    View Slide

  28. Tomorrow

    View Slide

  29. A renewed focus on simpler tools

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Mobile front-end frameworks

    View Slide

  34. View Slide

  35. View Slide

  36. Preprocessors and build tools

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. Writing less JavaScript

    View Slide

  42. View Slide

  43. View Slide

  44. // Dismiss a modal

    ×


    !
    // Or an alert

    Dismiss


    1
    2
    3
    4
    5
    6
    7
    8

    View Slide

  45. And the future?

    View Slide

  46. More frameworks from in-house

    View Slide

  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

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. Component level media queries

    View Slide

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

    View Slide

  55. View Slide

  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

    View Slide

  57. True designing in the browser

    View Slide

  58. View Slide

  59. View Slide

  60. Designing with the Web
    CSS3 and WebKit
    Real data from GitHub API

    View Slide

  61. Web framework for Mac apps

    View Slide

  62. Web framework for mobile apps

    View Slide

  63. Web framework for ____________

    View Slide

  64. Thanks, nerds!

    View Slide