fb-flo Amjad Masad @amasad ! Facebook 

Thank You Brooklyn J S 

HISTORY OF LIVE CODING 

HISTORY OF LIVE CODING 

WHY • LAZY • IMPATIENT • SLOPPY CODER 

No content

WHAT • Edit code in my favorite editor and have it reflect on the live web page • CSS & JS • Flexible and hackable enough • Remote File Systems • Build Step (We write in ES6) • Many Many source files 

OTHER TOOLS • live reload and livestyle are not actually live editing • Chrome Workspaces • Doesn’t support build step • No support for remote file systems • Can’t use your favorite editor 

ENTER FB-FLO • Live edit any static resource • Live reload is also supported • Works with your editor of your choice • Easily integrates with your build step, no matter how complex • Easily integrates with your dev environment • Configurable and hackable 

HOW • Server npm module • watches source files • sends changes via websocket • user-defined resolver function • Client is chrome extension • Uses chrome devtools API to live edit code • Fires event on code change 

SHORTCOMINGS • Hard to get started (need good gulp, grunt integration) • Limited to Chrome now. Firefox is in the works • Adds UI to DevTools • Live editing code is inherently limited 

CODE CHANGE != STATE CHANGE 

PROVIDE HOOKS FOR PLUGINS TO UPDATE STATE