Frontend Doesn't Suck Anymore

1beb46acb5d3842ed79d2448721b951c?s=47 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!

1beb46acb5d3842ed79d2448721b951c?s=128

mplewis

September 26, 2017
Tweet

Transcript

  1. 1.

    Frontend Doesn’t Suck Anymore Matt Lewis Denver Startup Week 2017

    Full-Stack Engineer at Gusto matt@mplewis.com
  2. 4.
  3. 5.

    I ❤ these things a lot: – Bicycles – Airplanes

    – Motorcycles – Open source – Cryptocurrency – Hardware maker stuff Let’s chat later!
  4. 6.

    Outline – Why frontend matters – A brief history of

    frontend – What approach should you take? – 10m break
  5. 10.
  6. 15.
  7. 19.
  8. 20.
  9. 23.
  10. 24.
  11. 26.
  12. 28.
  13. 30.
  14. 36.
  15. 38.

    1995: The First JS – Brendan Eich creates JavaScript in

    10 days – First introduced in
 Netscape 2.0
  16. 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
  17. 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
  18. 43.

    1997: ECMAScript – Standard to define the JavaScript language –

    V1 based on Navigator 4.0 – Still lots of cross-browser issues everywhere
  19. 45.

    1999: ECMAScript 3 – AJAX via XMLHttpRequest – Regex –

    Try/Catch exceptions – Better error messages
  20. 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
  21. 47.

    1999: AJAX – Building block of the modern web –

    “Asynchronous JavaScript and XML” – Update page data without a refresh!
  22. 56.
  23. 58.
  24. 59.
  25. 65.

    – Isn’t a total solution – Doesn’t provide app structure

    – Apps become a mess of spaghetti code 2010:
  26. 67.

    – Router! – Structure and tooling for client-side apps –

    Models and collections with AJAX data sync 2010:
  27. 68.

    – Still very minimal – e.g. no built-in view/ template

    solution – “Roll your own” for the missing bits 2010:
  28. 71.

    2012: What HTML would have been, had it been designed

    for building web-apps. - Angular Team
  29. 72.

    – Structure for large teams with large client-side apps –

    Declarative XML bindings – Components made of smart HTML templates 2012:
  30. 80.
  31. 81.
  32. 82.
  33. 84.

    Todo Item Render methods return JSX that gets turned into

    HTML Components take props as input Component
  34. 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
  35. 94.

    What do starter kits come with? – Babel: ES6 support

    – Webpack: Modern dependency bundling – Better HTML/CSS:
 JSX, Sass, Less, Stylus
  36. 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
  37. 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!
  38. 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
  39. 103.

    ES6: Modern JS – ES6 is incredible – Feels like

    a modern programming language – Feature list
  40. 105.

    ES6: Modern JS – Template string literals – Destructuring –

    Default, rest, spread – Native promises!
  41. 107.
  42. 108.

    ES6: Modern JS – Most browsers don’t support all ES6

    features. – How do we start using ES6?
  43. 109.
  44. 110.

    – Converts modern JS to compatible legacy JS – Adds

    support for whichever browsers you want to target
  45. 111.
  46. 113.
  47. 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
  48. 115.

    : What’s good about it? – Flexbox and Grid! –

    Media queries! – Animation! – Sane box sizing!
  49. 116.

    : We’re stuck with it – All modern browsers support

    modern CSS – CSS still sucks to write – Most people hate it
  50. 117.

    and

  51. 118.

    & – Compile-to-CSS languages – Makes it a lot easier

    to build reusable, versatile styles!
  52. 119.

    & – Calculation: column sizes, color palettes – Shared variables:

    use your brand standards across all your apps – Auto-prefixing and polyfills for legacy browsers
  53. 120.

    – Wide adoption - Bootstrap uses it! – Two different

    syntaxes: CSS-like, Python-like – Requires Ruby to use
  54. 122.
  55. 123.
  56. 124.
  57. 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
  58. 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?
  59. 129.
  60. 130.

    – Compiles your ES6 code into ES5 using Babel –

    Compiles your Sass and Stylus into CSS – Transparently and automatically!
  61. 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
  62. 133.

    : Loaders – Bring in whatever resources you need –

    Use them directly in your code – No more fragile URLs to images and data files
  63. 134.
  64. 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
  65. 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!)
  66. 139.

    1. Setup a working base 2. Add something small 3.

    Make it work 4. Make something else work 5. Throw it away
  67. 140.

    1. Setup a bare HTML page 2. Add React 3.

    Render a component 4. Render a subcomponent 5. Throw it away
  68. 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
  69. 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
  70. 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!
  71. 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