$30 off During Our Annual Pro Sale. View Details »

Frontend Doesn't Suck Anymore

mplewis
September 26, 2017

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!

mplewis

September 26, 2017
Tweet

More Decks by mplewis

Other Decks in Programming

Transcript

  1. Frontend Doesn’t
    Suck Anymore
    Matt Lewis
    Denver Startup Week 2017
    Full-Stack Engineer at Gusto
    [email protected]

    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!
    [email protected]
    mplewis.com/talks/fdse

    View Slide