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
   

   View Slide

2. Oh hai, I’m @mdo.
   :heart:
   

   View Slide

3. B
   

   View Slide

4. Frameworks of Tomorrow
   And by tomorrow, I mean, like, tomorrow-ish.
   

   View Slide

5. What brought us to today
   Today’s frameworks bleed into tomorrow
   Where we’re heading after that
   Huh?
   

   View Slide

6. noun
   HTML, CSS, and/or JS for building awesome
   stuff on the Web faster and easier
   frame·work |ˈfrāmˌwərk|
   

   View Slide

7. Yesterday
   Earlier tools led to the larger frameworks of today.
   

   View Slide

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

   View Slide

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
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. Today
    Comprehensive frameworks doing all the things.
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. Do all the things—one stop shop
    Go beyond basic styling in many cases
    Usually provides components & behavior
    

    View Slide

19. How’d we get to “Today?”
    CSS, styleguides, and people changed our tools.
    

    View Slide

20. CSS evolved.
    Or at least, how we use it. And it will again.
    

    View Slide

21. Designers embraced CSS
    CSS moved beyond type, forms, and grids
    People got tired of creating the same stuff
    

    View Slide

22. Docs became styleguides.
    More content in a slightly different format.
    

    View Slide

23. Prominence of web inspector tools
    Live examples along with “docs”
    Frameworks coming from products
    

    View Slide

24. Moar people.
    Lots of folks trying to build on the Web.
    

    View Slide

25. Hella nerds working on the Web
    Folks from all different backgrounds
    Everyone wants that fast starting point
    

    View Slide

26. Tomorrow?
    Well, more like tonight, honestly.
    

    View Slide

27. Frameworks focusing on
    learning & customization
    Beginners and customization tools change things.
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. A renewed focus on
    simpler tools...
    One tool, one job. Endless opportunities.
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. ...leading to compilation
    frameworks
    “All your favorite tools from when you were young!”
    

    View Slide

38. Normalize
    Some typography
    Any grid system
    Handful of JavaScript plugins
    Compilation framework
    +
    +
    +
    =
    

    View Slide

39. 320 and up
    

    View Slide

40. Mobile Web frameworks
    are a’coming.
    Folks want the same tools on mobile.
    

    View Slide

41. View Slide

42. View Slide

43. Just HTML, CSS, and JS
    Style and behavior are standardizing
    Immense opportunity for advanced stuff
    

    View Slide

44. Preprocessors coming at
    you from every angle
    SASS, LESS, etc will continue to add real power.
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. Extend frameworks anyway you see fit
    Powerful variables and mixins
    Built-in error handling
    

    View Slide

50. People will write less
    JavaScript.
    Frameworks make it easy to use awesome behavior.
    

    View Slide

51. View Slide

52. View Slide

53. Data attributes instead of raw JavaScript
    Natural extension of HTML and CSS
    Abstracted behavior, just like style
    Honorable mention: CSS animations
    

    View Slide

54. Day after tomorrow?
    A few things to check out, like, next week or so.
    

    View Slide

55. More frameworks being
    built at work, by you
    Build design systems based on a real product.
    

    View Slide

56. View Slide

57. View Slide

58. In-house frameworks will be the norm
    More frameworks from products
    Learn from others, then do it yourself
    

    View Slide

59. Component-level
    media queries
    Responsive for components, instead of viewports.
    

    View Slide

60. View Slide

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
    

    View Slide

62. Could change how frameworks are built
    Make it about content, not devices
    Also practical outside frameworks
    

    View Slide

63. Designing native apps
    on the Web
    Design it interactively—using HTML, CSS, JS, etc.
    

    View Slide

64. We kinda already have the
    ultimate design tool.
    

    View Slide

65. It’s called Photoshop.
    

    View Slide

66. jk lol :p
    

    View Slide

67. It’s called the Web.
    

    View Slide

68. The toolbox of the web is
    browsers, frameworks,
    dev products, etc.
    

    View Slide

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
    

    View Slide

70. Let’s recap
    Time is a funny thing—and it creeps up on us.
    

    View Slide

71. We’re in a familiar place.
    Tools of old have led to the large frameworks today.
    

    View Slide

72. Our tools are changing.
    Better, faster, stronger development.
    

    View Slide

73. Flexibility is key.
    Responsive, modular, customizable, and focused.
    

    View Slide

74. The Web is a design tool.
    And frameworks et al enable that.
    

    View Slide

75. Thanks, nerds!
    :heart:
    

    View Slide