WebApp Development Environment Setup on Mac OS X

I’m a noob when it comes to using the Mac for development of any kind, so here I am looking for a nice environment to for making Javascript Web Applications. These are my notes regarding what I think is a high-quality tool chain with broad support.

The Programming Tools

The MacBook Pro I’m using is working as both the webserver and webclient. On the web server side of things is NodeJS and its package manager NPM, installed on MacOS through the HomeBrew package manager. This also includes the Git distributed source control program. NPM was then used to install tools for quickly building web app skeletons through Yeoman, which includes Bower (a client-side javascript package manager) and Grunt (a compile, test, and build tool). The source files for the web application are all in an organized folder hierarchy, with places for the client-side scripts, html, css, and other asset.

When possible, I want to choose tools that are available on Mac, Windows, and Linux. Right now, what I have seems a little clunky with the number of windows I have to keep open: a browser, a terminal window, and an editor. This seems like a step back from using an Integrated Development Environment (IDE), but I’m thinking that I will find out ways to be more efficient after I use these for a while.

Source File Editing

Once the basic javascript dependencies and folder structure are set up, writing code consists of putting javascript module source files in the right place and using the RequireJS conventions for defining and using them. At least, that is the case for the client-side web development. On the server side, we would be writing NodeJS programs (also in Javascript). I’m looking for a decent project-based programmers editor. Currently, I’m using Sublime Text 2, which does the job somewhat OK though I dislike how it manages projects. I have also tried Panic Software’s Coda (not Coda 2) and didn’t really like it. I think what bothers me about these environments is that they aren’t ready-to-go in the way that Visual Studio on Windows is. On the other hand, I really haven’t pushed the existing tools as hard as I should yet to know what I should want. So I’ll stick with Sublime Text 2 for now (it is already paid for).

Terminal / Command Line Interface

The build tools are all on the command line, mostly using grunt to compile and test. MacOS has a perfectly fine terminal built-in, but I also picked up Cathode 2 because it’s just sexy looking.

Browser

Because I’m developing an app that will require good interactive performance, that pretty much means using the Chrome Browser and its fast V8 Javascript engine. Also, Chrome has a whole slew of debugging conveniences built-into its Developer Tools, such as breakpoints and being able to live-edit source code and save it back to the file system. I’ve seen some videos of it and it’s pretty cool. Have yet to really battle any bugs yet!

Source Control

While I have been using Mercurial for most of my web projects, I probably can’t avoid Git any longer. I had chosen Mercurial originally because it seemed slightly easier to understand, but I have since gotten a quick lesson in using Git with “pull-requests” and see it now as a better option. Plus, Git is already installed as part of the installed tool chain.

I’m using Atlassian’s SourceTree program to manage my web projects, but I am going to use Git from the command line to get into the habit of its use rather than rely on a GUI. At least for now.

Moving Forward

After looking through a few “best of” articles like this one comparing Mac programmer editors, I’ve come to the conclusion that I need to live with the tools I have for a bit before I can make a more informed decision. I don’t like having a bunch of windows open, but I haven’t really experienced the workflow in a way to have an informed opinion about what’s good and bad. Time to write some fancy code and see!