Programming for the browser is significantly different from other programming environments like a desktop OS, or even server side code. Cappuccino is largely aimed at minimizing these differences, but to be most productive you’ll need to be familiar with the right set of tools. This tutorial is aimed at identifying the most useful tools for developing Cappuccino applications. If you’re already ready to start programming your first Cappuccino application, skip ahead.
The browser is the most important part of the development cycle. Cappuccino apps target the browser just like Cocoa apps target Mac OS X. Choosing the right browser for your development cycle is a crucial step in the process.
There’s no one right answer to the question of which browser you should be using. There are four obvious contenders: Safari, Chrome, Firefox and Internet Explorer.
Google’s Chrome is the most popular choice, especially because the shipping version has a great set of developer tools. There is a full featured debugger, profiler, and HTTP monitor.
Safari is a fast, modern browser for the Mac.
While its developer tools have recently been falling behind Chrome’s and can be frustrating to use due to slowness, they are still fairly complete. To access the inspector, you’ll need to check the “Show Develop menu in the menu bar” checkbox in the Advanced section of the preferences.
That being said, since you should and will need to use IE from time to time, it’s useful to know that there are tools out there to make your experience better. One is Companion.js, a tool that provides an interactive DOM inspector and JS console. Another is the MS Script Debugger, which is required for parts of Companion.js to function properly, but is useful in its own right.
The following table shows some popular editor choices:
|SubEthaEdit||Mac OS X||Yes||No|
|TextMate||Mac OS X||Yes||Yes (not live)|
If you use another text editor, and have written or would like to write an add-on for it to support Objective-J, we strongly encourage it and will list it here. Get in touch with us on the mailing list.
Xcode is the Apple’s IDE to build Cocoa application. Thanks to Cappuccino’s affinity with Cocoa, you can build your user interfaces in Xcode and convert the output files to Cappuccino ready UI archives. For that you’ll require these tools:
XIB(native Cocoa UI file) to
CIB(native Cappuccino UI file)
Xcode is not required to build great Cappuccino apps. It is however a very valuable tool that could save you hundreds of hours of work and drastically reduce the total amount of code for you to write, debug and manage.
Logging is an important part of the development process, especially when a debugger isn’t available. Over the years, people have adapted various methods of logging in web applications. All of those methods will still work, and you should use them if you have a favorite.
Cappuccino does come with its own built in logger.
CPLog is modeled
after Apache’s log4j, and is easy to use. Anywhere in your code, you can
CPLog("a message") to print that log. You can also use
CPLog.debug("a debug message"), and others.
Logs are displayed in a popup log window, but they’re turned off by
default. To enable them, load
index-debug.html instead of
So, if I’m developing at:
I would instead go to:
to enable the debug console. This debug version of
un-minified versions of the frameworks, which can make debugging easier.
The console can also be enabled by calling
It’s important to run your code often to make sure it still works. You don’t want to end up with 300 new lines of code and no clue where the error has occurred. This is somewhat exacerbated by the fact that Objective-J has difficulty reporting the actual line number of errors. So remember to run your code often, and make use of the error console and the other tools you have available when you encounter trouble.
If you have suggestions for improvements to this guide, or if you have questions that haven’t been answered here, please let us know on gitter.