fb-flo
About
fb-flo is a Chrome extension that lets you modify running apps without reloading. It's easy to integrate with your build system, dev environment, and can be used with your favorite editor.
- Live edit JavaScript, CSS, Images and basically any static resource.
- 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.
Why another live edit tool?
Live editing is awesome, it tightens the feedback loop between writing code and seeing the results, and makes it easy to get into flow and iterate faster on code. When we set out to bring live coding to web development at Facebook we couldn't find anything that works with our set of constraints:
- We developed on remote machines
- We had a complex build step
- Everyone used a different editor
Here is how fb-flo compares to some of the most popular live editing tools:
| Feature | fb-flo | Chrome Workspaces | Emmet Livestyle | Live Reload |
|---|---|---|---|---|
| Live edit JS code | ✓ | ✓ | ✗ | ✗ |
| Live edit CSS code | ✓ | ✓ | ✓ | ✗ |
| Live edit images | ✓ | ✗ | ✗ | ✗ |
| Can reload | ✓ | ✗ | ✓ | ✓ |
| Build step support | ✓ | limited* | ✗ | ✓ |
| Remote filesystem | ✓ | ✗ | ✗ | ✗ |
| Editor choice | ✓ | limited* | ✗ | ✓ |
| Browser support | Chrome | Chrome | Chrome, Safari | All |
- Workspaces limited editor support: need to be on the sources tab and on the same file being edited externally for it to work.
- Workspaces limited support for build step: If sourcemaps are enabled then it will update the file on the file system but not recompile it.
How does it work?
fb-flo is made up of a server and a client component.
Server
The server watches the source files for changes that are mapped into resources and sent to the client to update the running app. This gives fb-flo the flexiblity to work with complex build systems. For example, say you use browserify to package JavaScript source files into a single bundle, and you also transform ES6 classes into ES5. In that case, when a JavaScript source file changes, you can compile and build your bundle and send it down to the client to update the running app. The server library is just an npm package that can be required and hacked however you like. Head over to the Github project to learn more.
Client
The client is currently a Chrome extension, and we do that to be able to recompile resources without reloading the page. So fb-flo will actually live-patch the running code within the JavaScript VM. Same goes for CSS, and other resources. It connects to the fb-flo server via a websocket connection. You can easily configure your server and port number, and can even have different addresses for each development site (web server hostname/port pairs).