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
2. Who am I?
3. Matt Lewis Developer since 2013 Stuff-breaker since 1998
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
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
16. source: http://webdev.ccac.edu/talkin/owa2003.htm
17. source: https://www.google.com/inbox/
18. Social networks are data manipulation
21. source: https://techcrunch.com/2014/12/08/facebook-keyword-search/
22. Payroll is
 data manipulation
25. Can we guide?
27. Can we inform?
29. Can we delight?
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?
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
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
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?
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