Webmaker Experiments with Brackets

One of the research projects underway in Webmaker is an effort to leverage Adobe’s open source web editor, Brackets, within our tools. We’ve written previously about this in the context of Thimble (codenamed Nimble), and similar work is being explored by Simon Wex within AppMaker.
Brackets is currently a web app you install as a desktop app.  It doesn’t work fully (yet) in web browsers; however, the Brackets’ community has been slowly picking away at this.  Recently things have gotten to a much better place. For our Webmaker uses, “works in modern browsers” is a must.
One of the hardest problems has been how to replace the native filesystem Brackets uses. A few of us have been tackling this problem head-on with Filer. Filer re-creates the node.js fs module, and makes it possible to have persistent filesystems for web apps in modern browsers.
The Filer code has matured in the past few months to the point where doing a full demo of Brackets in a Browser is now possible. Using Brackets+Filer we’ve successfully been able to explore in-browser editing of Webmaker projects.
We still have more work to do, but we’re happy to be able to demo some of the work. For this demo we’ve created a version of Brackets that runs via web server (gh-pages with no special server for the filesystem), and allows for live editing of the same source code being run.  You can try it yourself here:
http://humphd.github.io/brackets/src/ (source is here)
Here’s a screencast of the demo in action:

In this screencast we’re doing a number of things:

  1. Demonstrating Brackets loading statically in Firefox, with no remote filesystem.  Just HTML, CSS, and JS in a browser.
  2. Modifying RequireJS–the module loading system used by Brackets (and most of Webmaker)–in order to load-and-cache all JavaScript into a browser filesystem using Filer. On Chrome/Firefox that uses IndexedDB behind the scenes, and WebSQL in Safari. In essence, we’ve created a way to install a web app by loading it once. We have larger plans for this technique within Filer.
  3. Having Brackets open the folder of JavaScript modules that were cached in step 1
  4. Opening multiple versions of the app at once in different browser windows, and syncing changes across the shared filesystem. We do this using node’s Watch API in Filer.
  5. Live editing Brackets in Brackets (meta enough for ya?) and then testing those changes with a Refresh.  The second, third, etc. loads come from the shared filesystem vs. the server.

And it works well!  Here it is running in Firefox, Chrome, and Safari:
Brackets in Browsers
And the inevitable “does it work on mobile?” proof:
UPDATE: with another fix it works in IE10+ :)
Brackets in IE10
This is very much a tech demo to show what’s possible vs. a product we’re shipping.  However we’re excited by the possibilities it showcases.  We hope to have more updates to share in subsequent posts.  If you want to talk to us about the work, stop by the #filer channel on irc.mozilla.org.
If you edit the source, and break your editor, you can force the files to re-download into your fs (overwriting your changes) by adding ?refreshCache=1 to your url:
If you want to completely delete the files from the filesystem, use ?deleteCache=1
No attempt to optimize load times, files, etc was done due to the nature of this demo (i.e., we want to be able to edit the exploded source).  Making Brackets load fast(er) is another task.
We haven’t modified the Brackets Extension loader to use the shared filesystem yet, so not all the extensions will work. Unifying Brackets’ notion of the filesystem (so data and app are in the same fs) is something we’re considering.
We’ve been working on adding File Open/Save As… dialogs in Brackets, but this demo doesn’t have that work yet.
If you’re running in Safari, and get prompted to allow the page to use storage, it may mean you timeout the requirejs loading.  Hit refresh to get it going again.

1 response

  1. Narciso Jaramillo wrote on :

    This is awesome!
    Aside from all the filesystem stuff, did you have to do any tweaks to get it running well in Firefox specifically? I know we probably have a fair number of WebKit/Chrome-isms in the CSS. If you made any small tweaks for bugs like that, it would be great if you could make a PR with fixes.
    Thanks for working on this!