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

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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Gusto engineers

    are full-stack

    View full-size slide

  8. What does

    frontend mean?

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

    View full-size slide

  9. Why do we
    need frontend?

    View full-size slide

  10. Every app is

    data manipulation

    View full-size slide

  11. Email is

    data manipulation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Social networks are
    data manipulation

    View full-size slide

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

    View full-size slide

  16. Payroll is

    data manipulation

    View full-size slide

  17. Can we guide?

    View full-size slide

  18. Can we inform?

    View full-size slide

  19. Can we delight?

    View full-size slide

  20. Frontend lets us
    iterate rapidly

    View full-size slide

  21. Frontend lets us
    customize deeply

    View full-size slide

  22. Frontend lets us
    build for humans

    View full-size slide

  23. A Brief History
    of Frontend

    (why?)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Netscape 2.0

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. Vanilla JS: DOM

    View full-size slide

  45. Vanilla JS: AJAX

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. [(Two-way binding)]

    to variables on the
    associated model
    : Template

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. Todo Item
    Component

    View full-size slide

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

    View full-size slide

  68. Todo Item
    “value”: JSX literal string

    {value}: JSX evaluates JS code
    Component

    View full-size slide

  69. New Item Form
    Component

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. 2017:

    What should

    you choose?

    View full-size slide

  73. Pick something

    modern with a

    large community

    View full-size slide

  74. Starter kit

    or DIY?

    View full-size slide

  75. 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 full-size slide

  76. 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 full-size slide

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

    JSX, Sass, Less, Stylus

    View full-size slide

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

    View full-size slide

  79. Consider

    doing it 

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

    View full-size slide

  80. 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 full-size slide

  81. 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 full-size slide

  82. 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 full-size slide

  83. Try building with
    both approaches!

    View full-size slide

  84. Let’s talk about

    View full-size slide

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

    View full-size slide

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

    async/await

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  90. Let’s talk about
    stylesheets

    View full-size slide

  91. : 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  98. Let’s talk about
    build tools

    View full-size slide

  99. Let’s talk about

    the pain that

    build tools

    solve

    View full-size slide

  100. 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 full-size slide

  101. – 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 full-size slide

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

    View full-size slide

  103. : 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  106. – 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 full-size slide

  107. – 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 full-size slide

  108. How do I

    get started?

    View full-size slide

  109. Incremental
    progress

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  112. 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 full-size slide

  113. 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 full-size slide

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

    (Even if you don’t.)

    View full-size slide

  115. 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 full-size slide

  116. 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 full-size slide