Enterprise Web Development (2014)
Appendix B. Running Code Samples and IDE
The code samples used in this book are available on GitHub—they are grouped by chapters. If a chapter has code samples, look for the directory with the respective name.
Technically, you don’t have to use any integrated development environment (IDE) to run code examples (except the CDB example from Chapter 5). Just open the main file in a web browser, and off you go. But using an IDE will make you more productive.
Choosing an IDE
Selecting an IDE that supports JavaScript is a matter of personal preference. Because there is no compilation stage and most of your debugging will be done by using the web browser tools, picking a text editor that supports syntax highlighting is all that most developers need. For example, there is an excellent text editor called Sublime Text 2. Among many programming languages, this editor understands the keywords of HTML, CSS, and JavaScript, and it offers not only syntax highlighting, but also context-sensitive help, and autocomplete.
If you are coming from a Java background, the chances are that you are familiar and comfortable with the Eclipse IDE. In this case, install the Eclipse plug-in VJET for JavaScript support.
Oracle’s IDE NetBeans 7.3 and above support HTML5 and JavaScript development. NetBeans includes a JavaScript debugger that allows your code to connect to the web browser while debugging inside the IDE.
If you prefer Microsoft technologies, they offer excellent JavaScript support in Visual Studio 2012.
Appcelerator offers a free Eclipse-based Aptana Studio 3 IDE. Aptana Studio comes with an embedded web server so that you can test your JavaScript code without the need to start any additional software.
The authors of this book like and recommend using the WebStorm IDE from JetBrains. In addition to smart context-sensitive help, autocomplete, and syntax highlighting, WebStorm offers HTML5 templates, and a code coverage feature that identifies code fragments that haven’t been tested.
Running Code Samples in WebStorm
The WebStorm IDE is pretty intuitive to use. If you’ve never used it before, refer to its Quick Start Guide. When you first start WebStorm, on the Welcome screen, select the option Open Directory. Then, select the directory where you downloaded the samples of a specific book chapter. For example, after opening code samples from Chapter 1, the WebStorm IDE might look as shown in Figure B-1.
Figure B-1. Code samples from Chapter 1 displayed in WebStorm
If you want to create a new HTML or JavaScript file in WebStorm, just select the appropriate menu option under File→New. For example, selecting the menu File→New→HTML File creates the following file with the basic markup:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
WebStorm comes with a simple internal web server. Right-click the HTML file that you want to open (for example, index.html) and choose Open in Browser. WebStorm’s internal server will serve the file to the browser.
For example, if WebStorm opens the directory chapter1, as in Figure B-1, you’ll see the following URL in your web browser: http://localhost:63342/chapter1/project-01-get-started.
TIP
You can configure in WebStorm the port number of the internal web server via Preferences→Debugger→JavaScript→Built-in server port.
Using Two IDEs: WebStorm and Eclipse
Although we prefer using WebStorm for JavaScript development, we have to use Eclipse for some Java-related projects. In such cases, we create a project in WebStorm pointing at the WebContent directory of our Eclipse project. This way, we still enjoy very smart context-sensitive help offered by WebStorm, and all code modifications become immediately visible in the Eclipse project.
To open the content of the Eclipse WebContent directory in WebStorm, choose File→Open Directory and point it at the WebContent directory of your Eclipse project.
Mac users can also do it another way:
1. Create a script to launch WebStorm from the command line. To do this, start WebStorm and choose Tools→Create Launcher Script. Agree with defaults offered by the pop-up window shown in Figure B-2 or select another directory located in the PATH system variable of your computer. This creates a script named wstorm, and you’ll be able to start WebStorm from a command line.
Figure B-2. Creating the launch script for WebStorm
2. Open a terminal window and switch to the directory WebStorm of your Eclipse project. Type the command wstorm . to open WebStorm with the entire content of your WebContent project. So you’ll be doing all JavaScript development in WebStorm, and the Java-related coding in Eclipse while using the same WebContent directory.
Such a complex setup looks like overkill, but we are talking about enterprise development, for which you might have to jump through some hoops to create a convenient working environment for yourself. Besides, you do it only once.