Frontend Doesn't Suck Anymore

Are you a backend engineer afraid of frontend work? The JavaScript ecosystem can be daunting – new frameworks and tools pop up every day. But it's actually easier than ever to get started writing client-side code. No frontend experience required!

Discover how building tiny webapps can vastly improve your user experience and make your customers happier. Find out about modern languages, advanced tooling, and test-first development for the browser. Learn how to get started right away with ready-made project starter packs.

It's 2017 and the browser is fun again!

Transcript

1. Frontend Doesn’t
   Suck Anymore
   Matt Lewis
   Denver Startup Week 2017
   Full-Stack Engineer at Gusto
   matt@mplewis.com
   

   View Slide

2. Who am I?
   

   View Slide

3. Matt Lewis
   Developer since 2013
   Stuff-breaker since 1998
   

   View Slide

4. View Slide

5. I ❤ these things a lot:
   – Bicycles
   – Airplanes
   – Motorcycles
   – Open source
   – Cryptocurrency
   – Hardware maker stuff
   Let’s chat later!
   

   View Slide

6. Outline
   – Why frontend matters
   – A brief history of frontend
   – What approach should
   you take?
   – 10m break
   

   View Slide

7. Outline
   – Modern JavaScript
   – Modern stylesheets
   – Modern bundling
   – How do I get started?
   – Q&A #$
   

   View Slide

8. 2013: Backend
   2014: iOS
   2015: Android
   2017: Frontend
   

   View Slide

9. Gusto engineers

   are full-stack
   

   View Slide

10. View Slide

11. What does

    frontend mean?

    (what’s a client-side app?)
    (or a single-page app?)
    

    View Slide

12. Why do we
    need frontend?
    

    View Slide

13. Every app is

    data manipulation
    

    View Slide

14. Email is

    data manipulation
    

    View Slide

15. View Slide

16. source: http://webdev.ccac.edu/talkin/owa2003.htm
    

    View Slide

17. source: https://www.google.com/inbox/
    

    View Slide

18. Social networks are
    data manipulation
    

    View Slide

19. View Slide

20. View Slide

21. source: https://techcrunch.com/2014/12/08/facebook-keyword-search/
    

    View Slide

22. Payroll is

    data manipulation
    

    View Slide

23. View Slide

24. View Slide

25. Can we guide?
    

    View Slide

26. View Slide

27. Can we inform?
    

    View Slide

28. View Slide

29. Can we delight?
    

    View Slide

30. View Slide

31. Frontend lets us
    iterate rapidly
    

    View Slide

32. Frontend lets us
    customize deeply
    

    View Slide

33. Frontend lets us
    build for humans
    

    View Slide

34. A Brief History
    of Frontend
    

    (why?)
    

    View Slide

35. 1993
    source: https://www.pickmore.com/which-is-the-first-web-browser-596
    

    View Slide

36. 1993
    – HTML
    – CSS (maybe)
    – Not easy to use
    – Not much available
    

    View Slide

37. 1995
    source: http://www.bentarnoff.com/blog/the-privatization-of-the-internet,43/
    

    View Slide

38. 1995: The First JS
    – Brendan Eich creates
    JavaScript in 10 days
    – First introduced in

    Netscape 2.0
    

    View Slide

39. 1995: Netscape 2.0
    source: http://www.webbasedprogramming.com/Java-Unleashed/ch10.htm
    

    View Slide

40. 1995: JavaScript
    We aimed to provide a “glue
    language” for the… programmers
    who were building Web content
    from components such as images,
    plugins, and Java applets.
    - Brendan Eich
    

    View Slide

41. 1995: User-Agent Hell
    – IE 3.0 falls behind Netscape
    in JS support
    – Devs just start checking for
    the Netscape user-agent
    – Everyone suffers for a very
    long time
    

    View Slide

42. 1997
    source: http://blogoscoped.com/archive/2006-04-21-n63.html
    

    View Slide

43. 1997: ECMAScript
    – Standard to define the
    JavaScript language
    – V1 based on Navigator 4.0
    – Still lots of cross-browser
    issues everywhere
    

    View Slide

44. 1999
    source: https://en.wikipedia.org/wiki/AltaVista
    

    View Slide

45. 1999: ECMAScript 3
    – AJAX via XMLHttpRequest
    – Regex
    – Try/Catch exceptions
    – Better error messages
    

    View Slide

46. 1999: AJAX
    Before XMLHttpRequest, people used
    a trick of not closing the connection
    to the server. The server would keep
    adding more and more to the page,
    never saying it had finished
    downloading.
    - Aaron Swartz
    

    View Slide

47. 1999: AJAX
    – Building block of the
    modern web
    – “Asynchronous JavaScript
    and XML”
    – Update page data without
    a refresh!
    

    View Slide

48. 2001
    source: https://howitusedtolook.com/ebay
    

    View Slide

49. 2003
    source: https://ourstory.linkedin.com/
    

    View Slide

50. 2003
    source: http://webdev.ccac.edu/talkin/owa2003.htm
    

    View Slide

51. 2006
    source: https://web.archive.org/web/20060928052923/http://www.amazon.com/
    

    View Slide

52. 2006
    source: http://forevertwentysomethings.com/2013/01/04/flashback-friday-myspace/
    

    View Slide

53. 2006:
    Writing JavaScript code
    should be fun.
    - John Resig
    

    View Slide

54. – Simplifies common,
    repetitive tasks
    – Simplified DOM
    manipulation
    – Friendlier AJAX
    2006:
    

    View Slide

55. Vanilla JS: DOM
    

    View Slide

56. : DOM
    

    View Slide

57. Vanilla JS: AJAX
    

    View Slide

58. : AJAX
    

    View Slide

59. – Provides cross-browser
    compatibility
    – Extensible with plugins!
    – Makes it much easier to
    build a client-side app
    2006:
    

    View Slide

60. 2007
    source: https://twirpz.wordpress.com/2015/06/03/the-history-of-twitter-in-profile-pages-2006-to-2015/
    

    View Slide

61. 2008
    source: http://www.telegraph.co.uk/technology/2016/02/04/what-facebook-used-to-look-like-in-pictures/
    

    View Slide

62. 2009
    source: http://uxtimeline.com/netflix.html
    

    View Slide

63. 2009: ES5
    – Native JSON support
    – Strict mode
    – Getters and setters
    

    View Slide

64. 2010
    source: http://robdkelly.com/blog/hot-startups/etsy/
    

    View Slide

65. – Isn’t a total solution
    – Doesn’t provide app
    structure
    – Apps become a mess of
    spaghetti code
    2010:
    

    View Slide

66. 2010:
    Backbone supplies structure
    to JavaScript-heavy
    applications.
    - Jeremy Ashkenas
    

    View Slide

67. – Router!
    – Structure and tooling for
    client-side apps
    – Models and collections
    with AJAX data sync
    2010:
    

    View Slide

68. – Still very minimal
    – e.g. no built-in view/
    template solution
    – “Roll your own” for the
    missing bits
    2010:
    

    View Slide

69. 2012
    source: https://le.unimelb.edu.au/news/coursera-first-impressions/
    

    View Slide

70. 2012
    source: https://thenextweb.com/media/2013/01/08/aereo-tv-is-set-to-expand-into-22-more-us-cities-from-late-spring-following-38m-funding/
    

    View Slide

71. 2012:
    What HTML would have been,
    had it been designed for
    building web-apps.
    - Angular Team
    

    View Slide

72. – Structure for large teams
    with large client-side apps
    – Declarative XML bindings
    – Components made of
    smart HTML templates
    2012:
    

    View Slide

73. : Template
    

    View Slide

74. (Bind an event) to a method
    on the associated model
    : Template
    

    View Slide

75. [(Two-way binding)]

    to variables on the
    associated model
    : Template
    

    View Slide

76. 2014
    source: https://thenextweb.com/socialmedia/2014/09/25/everything-need-know-ello-latest-trendy-social-network/
    

    View Slide

77. 2014
    source: https://blogs.voanews.com/digital-frontiers/2013/06/11/rap-genius-and-tomorrows-education/
    

    View Slide

78. 2014:
    Makes it painless to
    create interactive UIs.
    - React Team
    

    View Slide

79. – View-only composable
    components
    – Declarative one-way
    data flow
    – Virtual DOM is so fast!
    2014:
    

    View Slide

80. 2014:
    

    View Slide

81. 2014:
    

    View Slide

82. 2014:
    

    View Slide

83. Todo Item
    Component
    

    View Slide

84. Todo Item
    Render methods return JSX that
    gets turned into HTML
    Components take props as input
    Component
    

    View Slide

85. Todo Item
    “value”: JSX literal string

    {value}: JSX evaluates JS code
    Component
    

    View Slide

86. New Item Form
    Component
    

    View Slide

87. New Item Form
    Components can call their
    own methods
    Component
    

    View Slide

88. New Item Form
    Components can read and
    write their own state
    Component
    

    View Slide

89. 2017:

    What should

    you choose?
    

    View Slide

90. Pick something

    modern with a

    large community
    

    View Slide

91. Starter kit

    or DIY?
    

    View Slide

92. Consider a

    starter kit
    sources: https://smile.amazon.com/Hallmark-Toy-Story-Favor-Boxes/dp/B003SP6NZA/
    
    http://www.photonlight.com/batteries-chargers/powerex-pro-aa-batteries-4-pack-2700mah-nimh-rechargeable/
    

    View Slide

93. Use a starter kit
    – Batteries included:

    It Just Works out of the box!
    – Provides initial project
    structure
    – Supports modern JS,

    JSX, Sass, and others
    

    View Slide

94. What do starter kits
    come with?
    – Babel: ES6 support
    – Webpack: Modern
    dependency bundling
    – Better HTML/CSS:

    JSX, Sass, Less, Stylus
    

    View Slide

95. Some good
    starter kits
    – Create React App
    – Vuepack
    – Angular Starter
    

    View Slide

96. Consider

    doing it 

    yourself
    source: http://thelegomovie.wikia.com/wiki/Emmet_Brickowski
    

    View Slide

97. Start from scratch
    – You get to pick which parts
    you need
    – Helps you learn how
    different packages interact
    – Doesn’t force you to use

    a specific project layout
    

    View Slide

98. Start from scratch
    – Writing your first Webpack
    config is frustrating
    – You spend a lot of time
    learning tools before you
    get to build anything
    – So many decisions!
    

    View Slide

99. A good DIY approach
    – Pick some tool - it doesn’t
    matter what tool
    – Build with just that tool
    – Once you like it, add
    another tool
    

    View Slide

100. Try building with
     both approaches!
     

     View Slide

101. Break time!
     

     View Slide

102. Let’s talk about
     

     View Slide

103. ES6: Modern JS
     – ES6 is incredible
     – Feels like a modern
     programming language
     – Feature list
     

     View Slide

104. ES6: Modern JS
     – Import/export
     – Arrow functions
     – Classes
     – Generators and

     async/await
     

     View Slide

105. ES6: Modern JS
     – Template string literals
     – Destructuring
     – Default, rest, spread
     – Native promises!
     

     View Slide

106. Before: ES5
     

     View Slide

107. After: ES6
     

     View Slide

108. ES6: Modern JS
     – Most browsers don’t
     support all ES6 features.
     – How do we start using
     ES6?
     

     View Slide

109. View Slide

110. – Converts modern JS to
     compatible legacy JS
     – Adds support for
     whichever browsers you
     want to target
     

     View Slide

111. env preset
     

     View Slide

112. Let’s talk about
     stylesheets
     
     

     View Slide

113. View Slide

114. : What’s wrong with it?
     – Cascading style specificity
     is still painful
     – Writing scoped and nested
     styles is still painful
     – Only recent support for
     variables and calculation
     

     View Slide

115. : What’s good about it?
     – Flexbox and Grid!
     – Media queries!
     – Animation!
     – Sane box sizing!
     

     View Slide

116. : We’re stuck with it
     – All modern browsers
     support modern CSS
     – CSS still sucks to write
     – Most people hate it
     

     View Slide

117. and
     

     View Slide

118. &
     – Compile-to-CSS
     languages
     – Makes it a lot easier to
     build reusable, versatile
     styles!
     

     View Slide

119. &
     – Calculation: column sizes, color
     palettes
     – Shared variables: use your
     brand standards across all
     your apps
     – Auto-prefixing and polyfills for
     legacy browsers
     

     View Slide

120. – Wide adoption -
     Bootstrap uses it!
     – Two different syntaxes:
     CSS-like, Python-like
     – Requires Ruby to use
     

     View Slide

121. – Extremely terse syntax
     – Slightly better
     “transparent mixins”
     – Runs directly on Node.js
     

     View Slide

122. View Slide

123. View Slide

124. View Slide

125. Let’s talk about
     build tools
     

     View Slide

126. Let’s talk about

     the pain that

     build tools

     solve
     

     View Slide

127. Why is frontend painful?
     – Our code depends on many
     outside resources
     – Our project is made of
     hundreds of individual files
     – None of them are minified
     – We have to write the URLs for
     each resource by hand
     

     View Slide

128. – We love our modern tools:
     ES6, Babel, Sass, Stylus
     – Users don’t update their
     browsers
     – Old browsers don’t support
     the hot new stuff
     Why use a build tool?
     

     View Slide

129. View Slide

130. – Compiles your ES6 code
     into ES5 using Babel
     – Compiles your Sass and
     Stylus into CSS
     – Transparently and
     automatically!
     

     View Slide

131. : Prod
     – Bundles images and styles
     into easy-to-ship JS blobs
     – Includes dependencies in
     the proper order
     – Minifies your stuff to keep
     your bundle small
     

     View Slide

132. – Hot Module Reloading!
     – In-memory dev server
     – Same app, different
     config
     : Dev
     

     View Slide

133. : Loaders
     – Bring in whatever resources
     you need
     – Use them directly in your
     code
     – No more fragile URLs to
     images and data files
     

     View Slide

134. : Loaders
     

     View Slide

135. – Add entire features to any app.
     For example:
     – Split your app into smaller
     chunks, downloaded on
     demand
     – Use Service Workers to enable
     offline use
     : Plugins
     

     View Slide

136. – Webpack is confusing
     – It’s why I gave up on frontend
     years ago
     – Just get something working,
     then fix it later
     – (Starter kits are great!)
     

     View Slide

137. How do I

     get started?
     

     View Slide

138. Incremental
     progress
     

     View Slide

139. 1. Setup a working base
     2. Add something small
     3. Make it work
     4. Make something else
     work
     5. Throw it away
     

     View Slide

140. 1. Setup a bare HTML page
     2. Add React
     3. Render a component
     4. Render a subcomponent
     5. Throw it away
     

     View Slide

141. 1. Setup a Vue project
     2. Add Webpack
     3. Get your dev server up
     and running
     4. Add ES6 support via
     Babel
     5. Throw it away
     

     View Slide

142. 1. Setup a vanilla JS app
     2. Add jQuery
     3. Use jQuery for CSS
     selectors
     4. Use jQuery for AJAX
     5. Throw it away
     

     View Slide

143. Don’t throw it away!
     GitHub loves your code!

     (Even if you don’t.)
     

     View Slide

144. Save your work
     – Create a git repo for every
     project you start
     – GitHub lets you create
     unlimited public projects
     – This is your knowledge

     base for future

     frontend work!
     

     View Slide

145. Let’s keep talking:
     – Testing
     – Deployment
     – API design
     – Data flow
     – Anything else you want to learn
     more about
     Thanks for coming!
     matt@mplewis.com
     mplewis.com/talks/fdse
     

     View Slide