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. Frontend Doesn’t Suck Anymore Matt Lewis Denver Startup Week 2017

    Full-Stack Engineer at Gusto matt@mplewis.com
  2. Who am I?

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

  4. None
  5. I ❤ these things a lot: – Bicycles – Airplanes

    – Motorcycles – Open source – Cryptocurrency – Hardware maker stuff Let’s chat later!
  6. Outline – Why frontend matters – A brief history of

    frontend – What approach should you take? – 10m break
  7. Outline – Modern JavaScript – Modern stylesheets – Modern bundling

    – How do I get started? – Q&A #$
  8. 2013: Backend 2014: iOS 2015: Android 2017: Frontend

  9. Gusto engineers
 are full-stack

  10. None
  11. What does
 frontend mean?
 (what’s a client-side app?) (or a

    single-page app?)
  12. Why do we need frontend?

  13. Every app is
 data manipulation

  14. Email is
 data manipulation

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

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

  18. Social networks are data manipulation

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

  22. Payroll is
 data manipulation

  23. None
  24. None
  25. Can we guide?

  26. None
  27. Can we inform?

  28. None
  29. Can we delight?

  30. None
  31. Frontend lets us iterate rapidly

  32. Frontend lets us customize deeply

  33. Frontend lets us build for humans

  34. A Brief History of Frontend 
 (why?)

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

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

    use – Not much available
  37. 1995 source: http://www.bentarnoff.com/blog/the-privatization-of-the-internet,43/

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

    10 days – First introduced in
 Netscape 2.0
  39. 1995: Netscape 2.0 source: http://www.webbasedprogramming.com/Java-Unleashed/ch10.htm

  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
  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
  42. 1997 source: http://blogoscoped.com/archive/2006-04-21-n63.html

  43. 1997: ECMAScript – Standard to define the JavaScript language –

    V1 based on Navigator 4.0 – Still lots of cross-browser issues everywhere
  44. 1999 source: https://en.wikipedia.org/wiki/AltaVista

  45. 1999: ECMAScript 3 – AJAX via XMLHttpRequest – Regex –

    Try/Catch exceptions – Better error messages
  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
  47. 1999: AJAX – Building block of the modern web –

    “Asynchronous JavaScript and XML” – Update page data without a refresh!
  48. 2001 source: https://howitusedtolook.com/ebay

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

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

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

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

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

  54. – Simplifies common, repetitive tasks – Simplified DOM manipulation –

    Friendlier AJAX 2006:
  55. Vanilla JS: DOM

  56. : DOM

  57. Vanilla JS: AJAX

  58. : AJAX

  59. – Provides cross-browser compatibility – Extensible with plugins! – Makes

    it much easier to build a client-side app 2006:
  60. 2007 source: https://twirpz.wordpress.com/2015/06/03/the-history-of-twitter-in-profile-pages-2006-to-2015/

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

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

  63. 2009: ES5 – Native JSON support – Strict mode –

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

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

    – Apps become a mess of spaghetti code 2010:
  66. 2010: Backbone supplies structure to JavaScript-heavy applications. - Jeremy Ashkenas

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

    Models and collections with AJAX data sync 2010:
  68. – Still very minimal – e.g. no built-in view/ template

    solution – “Roll your own” for the missing bits 2010:
  69. 2012 source: https://le.unimelb.edu.au/news/coursera-first-impressions/

  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/

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

    for building web-apps. - Angular Team
  72. – Structure for large teams with large client-side apps –

    Declarative XML bindings – Components made of smart HTML templates 2012:
  73. : Template

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

    : Template
  75. [(Two-way binding)]
 to variables on the associated model : Template

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

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

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

    Team
  79. – View-only composable components – Declarative one-way data flow –

    Virtual DOM is so fast! 2014:
  80. 2014:

  81. 2014:

  82. 2014:

  83. Todo Item Component

  84. Todo Item Render methods return JSX that gets turned into

    HTML Components take props as input Component
  85. Todo Item “value”: JSX literal string
 {value}: JSX evaluates JS

    code Component
  86. New Item Form Component

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

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

    state Component
  89. 2017:
 What should
 you choose?

  90. Pick something
 modern with a
 large community

  91. Starter kit
 or DIY?

  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/

  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
  94. What do starter kits come with? – Babel: ES6 support

    – Webpack: Modern dependency bundling – Better HTML/CSS:
 JSX, Sass, Less, Stylus
  95. Some good starter kits – Create React App – Vuepack

    – Angular Starter
  96. Consider
 doing it 
 yourself source: http://thelegomovie.wikia.com/wiki/Emmet_Brickowski

  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
  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!
  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
  100. Try building with both approaches!

  101. Break time!

  102. Let’s talk about

  103. ES6: Modern JS – ES6 is incredible – Feels like

    a modern programming language – Feature list
  104. ES6: Modern JS – Import/export – Arrow functions – Classes

    – Generators and
 async/await
  105. ES6: Modern JS – Template string literals – Destructuring –

    Default, rest, spread – Native promises!
  106. Before: ES5

  107. After: ES6

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

    features. – How do we start using ES6?
  109. None
  110. – Converts modern JS to compatible legacy JS – Adds

    support for whichever browsers you want to target
  111. env preset

  112. Let’s talk about stylesheets

  113. None
  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
  115. : What’s good about it? – Flexbox and Grid! –

    Media queries! – Animation! – Sane box sizing!
  116. : We’re stuck with it – All modern browsers support

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

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

    to build reusable, versatile styles!
  119. & – Calculation: column sizes, color palettes – Shared variables:

    use your brand standards across all your apps – Auto-prefixing and polyfills for legacy browsers
  120. – Wide adoption - Bootstrap uses it! – Two different

    syntaxes: CSS-like, Python-like – Requires Ruby to use
  121. – Extremely terse syntax – Slightly better “transparent mixins” –

    Runs directly on Node.js
  122. None
  123. None
  124. None
  125. Let’s talk about build tools

  126. Let’s talk about
 the pain that
 build tools
 solve

  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
  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?
  129. None
  130. – Compiles your ES6 code into ES5 using Babel –

    Compiles your Sass and Stylus into CSS – Transparently and automatically!
  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
  132. – Hot Module Reloading! – In-memory dev server – Same

    app, different config : Dev
  133. : Loaders – Bring in whatever resources you need –

    Use them directly in your code – No more fragile URLs to images and data files
  134. : Loaders

  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
  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!)
  137. How do I
 get started?

  138. Incremental progress

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

    Make it work 4. Make something else work 5. Throw it away
  140. 1. Setup a bare HTML page 2. Add React 3.

    Render a component 4. Render a subcomponent 5. Throw it away
  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
  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
  143. Don’t throw it away! GitHub loves your code!
 (Even if

    you don’t.)
  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!
  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