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.
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.
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.
- 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.