Brackets-shell: Native Desktop Apps With HTML+JS+CSS
Recently, when I was starting a new project to develop a native desktop application, I reached for my tried-and-trusted tech of choice: Objective-C and the AppKit libraries. When I thought a moment about the intended audience for the app, it gave me reason to pause: if ever I wanted to reach a wider audience, I’d have to think cross-platform.
There exists many libraries to accomplish this, and they all suck in one way or another. Gtk/wxWidgets/Swing/Mono all have major problems and the level of code reuse leaves a lot to be desired. They have extremely clunky APIs (wx, Gtk), don’t integrate well into the desktop anyway (Gtk, Swing, Mono), or come with bloated runtimes that make them impractical to redistribute (Swing). Not to mention, none of those libraries mentioned can get close to reaching the number of devices as the standard web technologies.
By this point, we all know: if it can run in a web browser, it can work virtually anywhere. On the other hand, it’s still desirable to have native (desktop/mobile) apps. They tend to “just work.” Download a package and double click it. The workflow for such applications is well established and understood by most computer users, and integrate nicely into the target platform.
Accomplishing native applications with web technologies has been tried many times, and typically rely on frameworks like Adobe Air or a custom built WebKit wrapper. Air applications never turn out well, and Adobe seems to realize it. One of their new projects, Brackets, is a code editor, like Sublime Text, built entirely HTML/JS/CSS. They accomplish this by utilizing a project of their own creation, brackets-shell which is itself a cross-platform wrapper of CEF-3 with an included runtime library.
Brackets-shell is [importantly] more than just a “shell.” It comes with the key functionality required in developing cross-platform desktop apps: a build process. Using brackets it’s possible to create completely self-contained apps and their installers by executing a single command on the target platform.
Brackets-shell offers OS-level integration such as integration with the file system, menu systems and some native drawing functionality (think Windows GUI shell), as well as an embedded Node.JS process, which we’ll learn more about later.
Currently, developing with brackets-shell apps seems to be easiest on Mac OS X, presumably because most of the developers are using Mac OS X, however support exists for Windows Vista/7/8 and Ubuntu/Debian Linux as well. Here’s how to get things started on Mac OS X (assuming you already have homebrew and Xcode installed):
# you need node.js and grunt
brew install nodejs
npm install grunt-cli
# make a directory for your project
mkdir myproject && cd myproject
# clone the project into the directory
git clone email@example.com:adobe/brackets-shell.git
# make a project for your code
mkdir app && cd app && mkdir src
# add some content to it
cat << 'EOF' > src/index.html
# the build process requires this directory to be a git repo
git add .
git commit -m "initial commit"
# go back to brackets and build
By following the script above, what we’ve done is install system-level dependencies, create a directory to hold our project, cloned brackets, created a neighboring directory for our app with minimal content and installed bracket-shell dependencies. Next, update the config file to point at our app directory so that brackets-shell knows where to pull the content from. Open up
Gruntfile.js and change
../app. It should look something like this:
"repo" : "../app", // TODO user configurable?
"branch" : grunt.option("www-branch") || ""
Now, in the brackets-shell repo, run the following commands. The build process will probably complain about not having a
config.json file, but that is safely ignored until later.
# build the app
# launch it!
So there you have it. I’m sure you’ll want to take it from here and start developing your app. This post can be thought of as Part 1 of a multi-part (length TBD) series on developing native apps with Brackets, including development/deployment on the web, using the built-in Node.JS server, package and dependency management and more. Stay tuned!