ptg7799847 make code easier to read, but it tends to minimize errors, as syntax highlighting
is implicitly a syntax validator: invalid keywords and syntax will not be formatted properly (Figure 3.2).
Higher-end support for a language includes code intelligence, a broad category of features that will literally do some of the work for you. For example, if the soft-ware performs simple balancing of quotation marks, parentheses, brackets, and braces, when you create, say, an opening parenthesis, the application will create the closing one immediately. Not only does this automatic insertion save you a keystroke, but it makes it less likely that you will fail to properly balance such characters, a common cause of syntax errors. As another example, software used for Web development will normally create the closing HTML tag when you enter an opening tag.
Another type of code intelligence is code completion, where the application offers up specific suggestions of variables or functions that you can select (Figure 3.3).
With a suggestion selected, pressing Enter/Return or Tab inserts that item into your code. Code completion is based upon both the language or technology in use and the actual code you’ve written, meaning the variables you’ve created will be present in the list of options. Even higher-end code intelligence includes refactoring: you change, for example, the name of a variable, function, or file, and the application will automatically update all references to that item.
fiGURe 3 .2 The miscapitaliza-tion of Document on line 9 (it should be document) means it’s not colored as a recognized keyword.
fiGURe 3 .3 Code completion provides suggestions, such as a function to call or variable to reference.
the great deBate: teXt editor or ide? 61
ptg7799847 Another way that a text editor or IDE can “support” a language or technology
is by being able to execute code within the application itself. Although this can be nice, many applications choose to run JavaScript and HTML by invoking external browsers, as how the page looks and works in the browser is the goal.
You’ll appreciate it if the software you choose has a good way of managing files and projects. With some applications, creating a new document is done the same way as you would when using, say, Microsoft Word (you walk through some variation on File >
New, navigate to where the file should be saved on the computer, and then provide a name for the file). With other programs, you can create new files entirely within the application itself, immediately adding it to the current project (Figure 3.4). This may seem like a minor distinction, but it’s the little things that add up to big differences.
Some applications can recognize different projects, letting you readily access any file in that project. Some software also support workspaces, which is a destination for a group of projects (you might have one workspace for client projects and another for personal ones). Next, if the output is destined for the Web, having built-in FTP capability is great, saving you that trip to the separate FTP application. And if you’re using version control software, such as Git (http://git-scm.com/) or Subversion (http://subversion .apache.org/), see if your particular version control package is supported, too.
fiGURe 3 .4 Aptana Studio allows you to create new files directly within existing projects.
NOTE: Code intelligence is probably the biggest difference between ides, which normally do have it, and text editors, which normally don’t.
ptg7799847 Next up is debugging. No matter how smart, thorough, or careful you are,
pro-gram in any language and you’ll spend a good amount of time debugging. If an application has a built-in debugger (which would be language-specific), you can execute code in either standard or debugging mode. In debugging mode, you can set breakpoints to stop the code’s execution at certain spots. By doing so, you can perhaps see the logic that is, or is not, being followed, and examine the values of variables and crucial points. You’ll see examples of this in action during the discus-sion of Firebug, toward the end of the chapter. More sophisticated debuggers allow you to change the values of variables on the fly to see what happens, or to otherwise execute new bits of code in the hope that doing so will illuminate the problem.
Some applications have built-in support for unit testing, which is a programming approach in which you write tests to verify that specific bits of code are working as they should. Then you run your code against those tests. As you modify the code, continue to run the tests to confirm that nothing has broken as a result of the latest changes. Taken further, Test Driven Development (TDD) begins with the unit tests and then writes code that passes those tests.
Another handy debugging feature is a network monitor: a tool that displays the network requests being made, including the data being sent and the response received (Figure 3.5). When working with something like Ajax, having a network monitor is a great asset.
fiGURe 3 .5 A network moni-tor—this one in Safari—shows network activity, including Ajax requests.
the great deBate: teXt editor or ide? 63
ptg7799847 Finally, I’ll add that with Web development in particular, selecting an
applica-tion that can render HTML and CSS (i.e., What You See Is What You Get, WYSIWYG, functionality) is beneficial, as is a DOM viewer and manipulator. With any applica-tion, regardless of the language you’re using it for, a good help system, manual, and other documentation is a must. I also like my software to have top-notch search and replace features, including support for regular expressions (but you have to know regular expressions in order for that to be useful).
CoMParing the tWo
With a sense of what features matter the most, let’s look at the primary differences between text editors and IDEs. After that, I’ll highlight a handful of specific applica-tions in both categories. First, though, I should say that the decision between a text editor or an IDE, let alone a specific application within each group, is a surprisingly personal thing, with virtual online wars being waged over the virtues of application X versus application Y. My intent isn’t to advocate for one application type, let alone a specific program, but to present a guidebook to help you in making your decision.
Text editors, also called plain text editors, are simpler than IDEs, and are often much cheaper. A cheap commercial text editor may only run you around $20 or
$40, with an expensive text editor nearing $100. Conversely, a cheap commercial IDE probably starts around $70, with expensive ones costing several hundred.
Text editors require fewer hardware resources to run—disk space, memory, and processor activity, meaning they are better choices if you have an older computer.
In fact, the most basic text editors such as vi and emacs have no graphical interface at all and can be used to edit text when connected to a remote server (e.g., using SSH, Figure 3.6).
fiGURe 3 .6 The nongraphical vi editor, being used to edit a text file on a remote server.
NOTE: Chapter 12, error Management, introduces unit testing.
ptg7799847 The focus in a text editor is the text itself. The benefit of this approach, and
the reason why I generally prefer text editors, is that it means you can master a single application and then use it for many different technologies and languages.
Just because text editors tend to be simpler than IDEs does not mean they are simple. The best text editors have a slew of features built in, are easily extended (to add features or support for other languages), and can execute code without leaving the application. While text editors are easy to begin using, you should plan on spending some time reading the application’s documentation in order to learn how to make the most of the software.
When it comes to features, though, a text editor should provide syntax highlight-ing, but often won’t do much in terms of code intelligence. File management can vary: For example, TextMate supports version control but not FTP, and TextMate allows you to open a folder of files at once, but has no formal sense of projects.
Built-in debugging is more rare with text editors, but some do have the ability to execute the code you write from the application, either internally or via a connec-tion to an external executable.
And then there are the IDEs. IDEs are going to have all of the bells and whistles, which is great once you’ve mastered the program, but this is a hurdle to overcome when you’re first starting. If you need code intelligence, project management, top-of-the-line debugging, and more, you’ll want to find a good IDE. If you do so, plan on doing more research to select the right IDE for you, and after that, spend some time reading the application’s documentation, or watching online screencasts, to learn how best to use it. Frankly, even properly installing and configuring an IDE can be a challenge (for some IDEs).
With IDEs, you’ll also probably need a bigger budget and a more robust computer, as an IDE requires more disk space, memory, and a faster processor than a text edi-tor requires. But if you want code completion, you’ll probably need an IDE. Built-in debugging? An IDE. Built-in executable? An IDE. WYSIWYG editor? You guessed it: an IDE. And, to be fair, the same IDE can often support multiple technologies.
the great deBate: teXt editor or ide? 65
ptg7799847 When it comes to choosing between a text editor and an IDE, you obviously
need to decide what’s right for you, based upon:
J The hardware you’re using
J The other languages and technologies you regularly work with
J What features you need
J How much time you’re willing to spend to get going
J Your budget
In many ways, this decision is also about short-term vs. long-term goals and benefits. You can select, download, install, start, and begin using a text editor in a fraction of the time it will take you to do all that with an IDE. But once you’re comfortable with the IDE, you’ll probably be able to write and debug the same code in less time than it would take you with a text editor.
Instead of choosing between the two, you may want to consider selecting one of each. Clearly, there are merits to both application types; by mastering a text editor and an IDE, you can then decide which to use for any particular task or project.
a handFul oF text editors
If you think that a text editor may suit you, the following applications are worth your consideration:
J Komodo Edit (www.activestate.com/komodo-edit): runs on Windows, Mac OS X, and Linux; free.
J UltraEdit (www.ultraedit.com): Windows, Mac OS X, and Linux; $60.
J Notepad++ (http://notepad-plus-plus.org/): Windows; free.
J EditPlus (www.editplus.com): Windows, $35.
J TextMate (http://macromates.com): Mac OS X; approximately $57.
TextWrangler (www.barebones.com): Mac OS X; free.
TIP: Most commercial applications have a free trial available.
ptg7799847
J BBEdit (www.barebones.com): Mac OS X; $100.
J Emacs (www.gnu.org/software/emacs/emacs.html): most operating sys-tems; free.
J Vim (www.vim.org): most operating systems; free.
I will say that I don’t regularly use Windows and certainly not for development purposes, so I can’t provide an educated recommendation as to a good Windows text editor. That being said, those listed here are the ones I see most frequently recommended, and this book’s technical editor loves Notepad++. For Mac OS X, I’ve used the ones listed here and can wholeheartedly recommend them all.
a CouPle oF ides
If you think an IDE is more appropriate for you, there are again several to choose from. In all likelihood, though, you’re not going to find an IDE dedicated to just JavaScript, but rather an IDE oriented toward another language, that also supports JavaScript. To start, here are two commercial and one open source IDE:
J Adobe Dreamweaver (www.adobe.com/go/dreamweaver/): Windows and Mac OS X; $400.
Dreamweaver (often represented as DW) is a Web development applica-tion, not a programming IDE. This means it does WYSIWYG rendering of HTML and CSS, and recognizes JavaScript. DW has even been extended to support PHP, allowing you to write both client-side and server-side code in one application.
J Komodo IDE (www.activestate.com/komodo-ide): Windows, Mac OS X, and Linux; $295.
ActiveState makes both the free Komodo Edit and the commercial Komodo IDE. The IDE has code intelligence, FTP support, an integrated debugger, version control, and more. Komodo IDE can also be used for PHP, Ruby, Python, Perl, and other languages. Komodo IDE recognizes many common JavaScript frameworks, and has a network monitoring tool.
NOTE: all prices are in u.s. dollars and accurate at the time of this writing.
the great deBate: teXt editor or ide? 67
ptg7799847
J Aptana Studio (www.aptana.com): Windows, Mac OS X,and Linux; free.
Aptana Studio is an excellent, free IDE, based upon Eclipse (more on Eclipse in a moment, but this means you can install Aptana Studio as a standalone application or as a plug-in for the Eclipse you’re already using). Aptana Stu-dio features code intelligence, FTP support, an integrated debugger, version control, and more. Aptana Studio can also be used for PHP, Ruby, and Python.
For what it’s worth, many Web developers are already using Dreamweaver, which makes it a reasonable choice, although it’s not much of a programmer’s application.
I’ve heard great things about Komodo IDE, but haven’t used it personally. Aptana Studio is my IDE of choice for JavaScript development (it’s good and the fact that it’s free fits in nicely with my frugality).
Finally, I’ll mention three pillars of the IDE community. The first two are both long-standing, open source projects, but they can be less approachable for beginners.
The third company has a handful of commercial applications for you to choose from.
Eclipse (www.eclipse.org) is such a powerful IDE that many other IDEs are just technology-specific implementations of it, including Aptana Studio and Adobe Flash Builder. Eclipse runs on Windows, Mac OS X, and Linux, and is free.
NetBeans (www.netbeans.com) is a common alternative to Eclipse, runs on Windows, Mac OS X, and Linux, and is also free. NetBeans is primarily a Java IDE (not JavaScript), but supports other languages, too.
The company JetBrains (www.jetbrains.com) makes a series of excellent IDEs, starting with IntelliJ IDEA (their Java IDE). Their Web development IDE, WebStorm, starts at $70 for a personal license. Their PhpStorm application adds PHP support to WebStorm, and starts at $100. The JetBrains applications run on Windows, Mac OS X, and Linux, and have a range of features depending upon the exact model you choose.
ptg7799847