Over a million developers have joined DZone.

Building the PhoneGap Extension for Brackets

DZone's Guide to

Building the PhoneGap Extension for Brackets

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Over the past few months, I had the pleasure to work with a lot of smart people on a project to create an extension for working with PhoneGap from Brackets.  As both a Brackets and a PhoneGap Build user, I wanted to be able to work with PhoneGap Build projects from Brackets. It makes sense, Brackets is a lightweight but opinionated HTML/CSS/JS editor. PhoneGap Build is a tool that will simultaneously build mobile applications for 7 platforms from HTML/CSS/JS source code. Put them together and you have a lightweight tool that allows you to build mobile applications for 7 platforms.

Extending Brackets

Integrating something with Brackets is pretty easy. It’s written in HTML/CSS/JS and it includes an extension API that allows anyone conversant in those languages to hack their own editor. The process for extending Brackets is pretty straightforward:

  • Create a directory in the Brackets source code under Extensions -> User
  • Create a main.js file.
  • Make your extension do something
    • Call APIs
    • Manipulate strings
  • Wire up extension to Bracket’s menus and user interface
    • Use APIs for common UI items like menus
    • Roll your own interface for specific UIs.

This is documented in the Brackets Wiki.

Working with PhoneGap Build

The challenge is making your extension do something, because that’s all on you. In the course of building the prototype for the extension we figured a few things we absolutely wanted this extension to do:

  • Login to PhoneGap Build
  • Get list of PhoneGap Build Projects for an account
  • Associate a local directory with a PhoneGap Build Project
  • Push changes made to code in Brackets directly to PhoneGap Build
  • See the rebuild process in real time.

There are other things that it should do, but this is the bare minimum we need to have a successful tool. In the course of building the prototype, we got all of this working except one. The one thing we couldn’t get working was pushing files to PhoneGap Build. But we had a great proof of concept and it was time to turn it into something real. We turned things over to Christian Cantrell and Dmitry Baranovskiy, a pair of JavaScript experts who work on the Webplatform Team at Adobe.

Dmitry and Christian architected a solution based on eve, a lightweight JavaScript event framework. They created SVG graphics to use with Brackets to ensure that icons would look crisp and sharp on any screen. They made sure that events triggered SVG animations to give users feedback, while supporting a wide range of resolutions including the relatively recent Retina displays from Apple. The used the localization framework to ensure that the extension could be updated to work in whatever language a user needed support.


The biggest technical challenge was the gathering, zipping, and publishing to PhoneGap build of all of the project assets. Several days of work went into getting this process correct. Zipping libraries was considered, tried, and replaced. Ultimately this was the hardest part, and consumed the most time.

I think the big lessons we learned were:

  • Use SVG for resolution independent logos and graphics. Brackets supports them, they’re easy to create from Illustrator, and they scale perfectly.
  • Use the Localization framework to make your extension work for more than just one language.
  • Binary operations in JavaScript are tricky.
  • The Brackets IRC, Mailing List, and Twitter account are great ways of getting help with your vision.

More features are coming to the PhoneGap Extension for Brackets. In the next few weeks expect to be able to:

  • Manage projects on PhoneGap Build (create and delete)
  • Easily edit the configuration of your PhoneGap Build project


When all is said and done, we have a great looking, highly useful example of two of Adobe’s HTML tools working together. Now if you want to get started fooling around building a mobile application, there is nothing holding you back from experimenting with HTML/CSS/JS applications. Get a free PhoneGap Build account, download Brackets, install the Extension, and start building amazing HTML mobile applications.

And more than that, it’s an Open Source project.  Want to get involved? Jump in.




Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}