fb-flo

A talk describing fb-flo, the motivation behind and how it works

Transcript

1. fb-flo Amjad Masad @amasad ! Facebook
2. Thank You Brooklyn J S
3. HISTORY OF LIVE CODING
4. HISTORY OF LIVE CODING
5. WHY • LAZY • IMPATIENT • SLOPPY CODER
7. 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
8. 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
9. 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
10. 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
11. 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
12. CODE CHANGE != STATE CHANGE
13. PROVIDE HOOKS FOR PLUGINS TO UPDATE STATE