{"id":11142,"date":"2014-03-14T15:39:14","date_gmt":"2014-03-14T19:39:14","guid":{"rendered":"http:\/\/webmakerblog.wpengine.com\/?p=11142"},"modified":"2019-02-26T12:42:10","modified_gmt":"2019-02-26T20:42:10","slug":"webmaker-experiments-with-brackets","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/foundation-archive\/mozilla-learning\/webmaker-experiments-with-brackets\/","title":{"rendered":"Webmaker Experiments with Brackets"},"content":{"rendered":"

One of the research projects underway in Webmaker is an effort to leverage Adobe’s open source web editor, Brackets<\/a>, within our tools. We’ve written previously about this in the context of Thimble (codenamed Nimble<\/a>), and similar work is being explored by Simon Wex within AppMaker<\/a>.
\nBrackets is currently a web app you install as a desktop app.\u00a0 It doesn’t work fully (yet) in web browsers; however, the Brackets’ community has been slowly picking away at this<\/a>.\u00a0 Recently things have gotten to a much better place. For our Webmaker uses, “works in modern browsers” is a must.
\nOne 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<\/a>. Filer re-creates the node.js fs module<\/a>, and makes it possible to have persistent filesystems for web apps in modern browsers.
\nThe 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.
\nWe 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.\u00a0 You can try it yourself here:
\nhttp:\/\/humphd.github.io\/brackets\/src\/<\/a> (source is here<\/a>)
\nHere’s a screencast of the demo in action:<\/p>\n

In this screencast we’re doing a number of things:<\/p>\n

    \n
  1. Demonstrating Brackets loading statically in Firefox, with no remote filesystem.\u00a0 Just HTML, CSS, and JS in a browser.<\/li>\n
  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.<\/li>\n
  3. Having Brackets open the folder of JavaScript modules that were cached in step 1<\/li>\n
  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<\/a>.<\/li>\n
  5. Live editing Brackets in Brackets (meta enough for ya?) and then testing those changes with a Refresh.\u00a0 The second, third, etc. loads come from the shared filesystem vs. the server.<\/li>\n<\/ol>\n

    And it works well!\u00a0 Here it is running in Firefox, Chrome, and Safari:
    \n    \"Brackets<\/a>
    \nAnd the inevitable “does it work on mobile?” proof:
    \n    \"brackets-iphone\"<\/a>
    \nUPDATE<\/strong>: with another fix it works in IE10+ :)
    \n    \"Brackets<\/a>
    \nThis is very much a tech demo to show what’s possible vs. a product we’re shipping.\u00a0 However we’re excited by the possibilities it showcases.\u00a0 We hope to have more updates to share in subsequent posts.\u00a0 If you want to talk to us about the work, stop by the #filer channel on irc.mozilla.org.
    \nNOTES:<\/strong><\/em>
    \nIf 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<\/code> to your url:
    \n    http:\/\/humphd.github.io\/brackets\/src\/?refreshCache=1<\/a>
    \nIf you want to completely delete the files from the filesystem, use ?deleteCache=1<\/code>
    \n    http:\/\/humphd.github.io\/brackets\/src\/?deleteCache=1<\/a>
    \nNo 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).\u00a0 Making Brackets load fast(er) is another task.
    \nWe 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.
    \nWe’ve been working on adding File Open\/Save As… dialogs in Brackets, but this demo doesn’t have that work yet.
    \nIf you’re running in Safari, and get prompted to allow the page to use storage, it may mean you timeout the requirejs loading.\u00a0 Hit refresh to get it going again.<\/p>\n","protected":false},"excerpt":{"rendered":"

    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 … Continue reading<\/a><\/p>\n","protected":false},"author":144,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[378228],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/posts\/11142"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/users\/144"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/comments?post=11142"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/posts\/11142\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/media?parent=11142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/categories?post=11142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/tags?post=11142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}