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.
   

   View Slide

2. View Slide

3. View Slide

4. B
   

   View Slide

5. Frameworks of
   Tomorrow
   Where we've been, where we are, and where
   we're going—with an emphasis on designing
   and building.
   

   View Slide

6. Specifically, front-end frameworks.
   HTML, CSS, & JavaScript for quickly
   building with common Web components.
   

   View Slide

7. Yesterday
   
   Tomorrow Next week
   
   
   Today
   
   

   View Slide

8. View Slide

9. Yesterday
   Many developer tools paved the way for the
   larger frameworks we use today.
   

   View Slide

10. And jQuery UI, Prototype, Scriptaculous, Mootools, etc.
    

    View Slide

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
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. Today
    A handful (and growing) set of
    comprehensive frameworks that
    do all the things.
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. • One stop shop
    • Beyond basic styling
    • Components and behavior
    

    View Slide

22. Getting to
    Today
    A few shifts led to this new breed
    of front-end frameworks.
    

    View Slide

23. CSS evolved.
    

    View Slide

24. • Designers
    • Increased scope
    • Repetition got old
    

    View Slide

25. Documentation as
    style guides.
    

    View Slide

26. • Web inspector tools
    • Live examples
    • Learning tools
    

    View Slide

27. Moar people.
    

    View Slide

28. • Hella nerds
    • Different backgrounds
    • That “turn key solution”
    • Community
    

    View Slide

29. Tomorrow?
    Key changes to frameworks with the tools that
    make them up.
    

    View Slide

30. Increased focus on
    customization.
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. A renewed focus
    on simpler tools...
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. ...to help create
    more compilation
    frameworks.
    

    View Slide

40. Normalize.css
    Some typography
    Any grid system
    CSS preprocessor
    Handful of JavaScript plugins
    Compilation framework
    +
    +
    +
    +
    =
    

    View Slide

41. 320 and up
    

    View Slide

42. View Slide

43. Frameworks
    dedicated to the
    mobile Web.
    

    View Slide

44. • Standardizing style and behavior
    • Separation from desktop
    • Opportunity for advanced stuff
    

    View Slide

45. View Slide

46. View Slide

47. Preprocessors at
    every turn.
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. // Make a generic class
    .button {
    ...
    }
    // Use it everywhere else
    .call-to-action {
    .button();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    

    View Slide

52. • Extending frameworks
    • Powerful variables and mixins
    • Built-in error handling
    

    View Slide

53. People will write
    less JavaScript.
    

    View Slide

54. • Data attributes
    • Just write HTML and CSS
    • Abstracted behavior
    

    View Slide

55. View Slide

56. View Slide

57. 1
    2
    3
    4
    5
    6
    7
    8
    // Dismiss a modal
    
    ×
    
    // Or an alert
    
    ×
    
    

    View Slide

58. Next week
    The super exciting stuff to check out, like, next
    week or so.
    

    View Slide

59. More frameworks
    built in-house.
    

    View Slide

60. View Slide

61. View Slide

62. • In-house frameworks as the norm
    • More frameworks from products
    • Learn from others first
    

    View Slide

63. Media queries for
    components.
    

    View Slide

64. View Slide

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
    

    View Slide

66. • Changes the responsive game
    • All about content, not devices
    • Huge potential outside frameworks
    

    View Slide

67. Designing native
    apps on the Web.
    

    View Slide

68. Frameworks & the
    “ultimate design
    and dev tool.”
    

    View Slide

69. View Slide

70. haha jk lol :p
    

    View Slide

71. It’s called the Web.
    

    View Slide

72. The Web is a fully
    loaded toolbox.
    

    View Slide

73. Frameworks make
    designing in the
    browser practical.
    

    View Slide

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
    

    View Slide

75. Wait, what?
    Super quickly, let’s wrap this up!
    

    View Slide

76. • Frameworks changed the Web
    • More tools = more frameworks
    • Responsive content
    • Designing & developing for native
    • Super exciting stuff!
    

    View Slide

77. Thanks, nerds!
    :heart:
    

    View Slide

78. Questions?
    

    View Slide