#FFF⚡️

Fast Frontend Feedback

fe-summit 🏔 2019

 

 

Cameron Yick (Team Mango / Dataviz)

The Problem

How long does it take to see whether your code changes work?

a) Less than 1 sec

b) 1 - 10 sec

c) 10+ sec

If your word editor had this lag, would that change what/how you write?

 - Bret Victor (@worrydream)

Interface designer / electrical engineer

 Dynamicland

The Dream: Livecode

From Bret Victor's "Inventing on Principle"

Yesterday

  • Hot Module Reloading (Hotdog)
  • Styleguideist
  • Commit Hooks
    • Eslint, tslint
  • Typing (Proptypes / Typescript)
  • REPLs

 

shoutout to the people who set up + maintain this tooling!

TODO

  • Link to existing resources

Today

Add superpowers to Devtools

  • Everything you already like in Chrome Devtools
    • Breakpoints
    • Data-value-on-hover
    • Step in/over/out
    • Conditional breakpoints
  • VSCode Benefits
    • Familiar Environment (Shortcuts, search)
    • Avoid turning your head / switching windows
    • Logpoints

Debugger Demo

Make testing fun again!

 

 

1. Run unit tests without you thinking about it

2. Inline overlay shows which tests failed

3. Incorrect output is displayed inline

 

 

 

 

 

Testing Demo

I'm in! Where should I start?

1. CTRL + SHIFT + P > Install Extensions

2. Search {Chrome Debugger|Jest}, install first result

3. Add some config (Frontend Development > VSCode wiki)

Future: Seeking Contributions 

  • Run minimal set of Jest tests rather than everything
  • Runnable documentation (more styleguideist / storybook)
  • Share more #FFF tools in the channel

Pursue faster feedback via tools

 

#FFF⚡️

(Fast Frontend Feedback)

 

Cameron Yick / Dataviz

GH / Twitter: @hydrosquall

Frontend Summit

By Cameron Yick

Frontend Summit

A lightning talk about why and how to use 2 recommended VSCode extensions for frontend javascript development

  • 552