Skip to content

Commit

Permalink
added appendix c on IDE's
Browse files Browse the repository at this point in the history
  • Loading branch information
yfain committed Nov 22, 2013
1 parent cc91d88 commit 6c5d85a
Show file tree
Hide file tree
Showing 9 changed files with 155 additions and 132 deletions.
2 changes: 1 addition & 1 deletion Introduction.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ The short answer is yes. If you are planning to develop mainly for the mobile ma
Remember that, even if you rely on a framework that claims to offer cross-browser compatibility, you will still need to test your application in the browsers you intend to support to ensure it functions as intended. The chances are that you may
need to be fixing the framework's code here and there. Maintaining compatibility is a huge challenge for any framework's vendor, which in some cases can consist of just one developer. Spend some time working with the framework, and then work on your application code. If you can, submit your fixes back to the framework's code base - most of them are open source.

If you are planning to write pure JavaScript, add a tiny framework Modernizr (see Chapter 3) to your code base, which will detect if a certain feature is supported by the user's Web browser, and if not - provide an alternative solution. We like the analogy with TV sets. People with latest 3D HD TV sets and those who have 50-year old black and white televisions can watch the same movie even though the quality of the picture will be drastically different.
If you are planning to write pure JavaScript, add a tiny framework Modernizr (see Chapter 1) to your code base, which will detect if a certain feature is supported by the user's Web browser, and if not - provide an alternative solution. We like the analogy with TV sets. People with latest 3D HD TV sets and those who have 50-year old black and white televisions can watch the same movie even though the quality of the picture will be drastically different.

=== The Challenges

Expand Down
52 changes: 52 additions & 0 deletions appendix_c_ide.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
[[appendix_c]]
[appendix]

= Appendix C. Running Code Samples and IDE

The code samples used in this book are available on Github and are grouped by chapters. If a chapter has code samples look for the archive file with the respective name, for example chapter1.zip contains the code samples for Chapter 1. Technically, you don't have to use any Integrated Development Environment (IDE) to run code examples (except CDB example from Chapter 7) - just open the main file in a Web browser and off you go. But using an IDE will make you more productive.


== Which IDE to Use

Selecting an IDE that supports JavaScript is a matter of your personal preference. Since there is no compilation stage and most of your debugging will be done 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 http://www.sublimetext.com[Sublime Text 2]. Among many programming languages this editor understands the keywords of HTML, CSS, and JavaScript, and it offers not only syntax highlighting, context sensitive help, and auto-complete too.

If you are coming from the Java background, the chances are that you are familiar and comfortable with Eclipse IDE. In this case install the Eclipse plugin http://eclipse.org/vjet/[VJET] for JavaScript support.

Oracle's IDE http://wiki.netbeans.org/HTML5[NetBeans 7.3] and above support HTML5 and JavaScript development. NetBeans includes 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 http://aptana.com[Aptana Studio 3 IDE]. Aptana Studio comes with embedded Web Server so you can test your JavaScript code without the need to start any additional software.

The authors of this book like and recommend using the http://www.jetbrains.com/webstorm[IDE WebStorm] from JetBrains. In addition to smart context sensitive help, auto-complete, and syntax highlighting it offers HTML5 templates, and the code coverage feature that identifies the code fragment that haven't been tested.

== Running Code Samples in WebStorm IDE

WebStorm IDE is pretty intuitive to use. If you've never used it before, refer to its http://www.jetbrains.com/webstorm/quickstart/[Quick Start Guide].
When you first start WebStorm IDE, select the option _Open Directory_ in the Welcome screen. Then select the directory where you downloaded and unzipped the samples of a specific book chapter. For example, after opening code samples from Chapter 1 the WebStorm IDE will look as follows:

[[FIGc-11]]
.Code Samples from Chapter 1 in WebStorm
image::images/fig_c_1.png[]

Right-click on the HTML file you want to open (e.g. index.html) and select Open in Browser to test. If you want to serve your HTML5 project via a Web server, WebStorm IDE comes with a simple http://blog.jetbrains.com/webide/2013/03/built-in-server-in-webstorm-6/[internal Web server].You just need to open the URL http://localhost:63342 in your browser and append the name of your project. For example, if the WebStorm's project name is ssc, then http://localhost:63342/ssc will allow you to open the project in the Web browser.

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, but have to use Eclipse for some Java-related projects. In such cases we create a project in WebStorm pointing at the WebContent directory of your Eclipse project. This way we still enjoy a very smart context sensitive help offered by WebStorm, and all code modifications become immediately visible in the Eclipse project.

To open the content of Eclipse WebContent directory in WebStorm select its menu 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 Storm and open its menu Tools | Create Launcher Script. Agree with defaults offered by the popup window shown in <<FIG6-4-SSC>> or select other directory located in the PATH system variable of your computer. This will create a script named wstorm there, and you'll be able to start WebStorm from a command line.
+
[[FIG6-4-SSC]]
.Creating the launch script for WebStorm
image::images/fig_06_04_SSC.png[image]
+
2. Open a Terminal window and switch to the directory WebStorm of your Eclipse project. Type there the command _wstorm ._, and it'll open the WebStorm with the entire content of your WebContent project. So all JavaScript development you'll be doing in WebStorm, and the Java-related coding in Eclipse while using the same WebContent directory.

Such setup looks like an overkill, but we are talking about the enterprise development where you may jump through some hoops to create a convenient working environment for yourself.
4 changes: 3 additions & 1 deletion book.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,6 @@ include::ch14_hybrid.asciidoc[]

include::ch1_advancedjs.asciidoc[]

include::ch2_html.asciidoc[]
include::ch2_html.asciidoc[]

include::appendix_c_ide.asciidoc[]
14 changes: 0 additions & 14 deletions ch1_advancedjs.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -69,20 +69,6 @@ The variables `address` and `isMarried` are visible only inside the function `ad
The variable `isMarried` changes its type from `Boolean` to `String` during the execution of the above script, and JavaScript engine won't complain assuming that the programmer knows what she’s doing. So be ready for the run-time surprises and allocate a lot more time for testing than with programs written in compiled languages.


== Which IDE to Use

Selecting an Integrated Development Environment (IDE) that supports JavaScript is a matter of your personal preference. Since there is no compilation stage and most of your debugging will be done 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 commercial text editor http://www.sublimetext.com[Sublime Text 2]. Among many programming languages this editor understands the keywords of HTML, CSS, and JavaScript, and it offers not only syntax highlighting, context sensitive help, and auto-complete too.

If you are coming from the Java background, the chances are that you are familiar with free and open sourced Eclipse IDE. In this case install the Eclipse plugin http://eclipse.org/vjet/[VJET].

Oracle's IDE http://wiki.netbeans.org/HTML5[NetBeans 7.3] and above support HTML5 and JavaScript development and includes 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 http://aptana.com[Aptana Studio 3 IDE]. Aptana Studio comes with embedded Web Server so you can test your JavaScript code without the need to start any additional software.

For the real world development we recommend using commercial http://www.jetbrains.com/webstorm[IDE WebStorm] from JetBrains. In addition to smart context sensitive help, auto-complete, and syntax
highlighting it offers HTML5 templates, and the code coverage feature that identifies the code fragment that haven't been tested.


== Getting Familiar with Aptana IDE


Expand Down
Loading

0 comments on commit 6c5d85a

Please sign in to comment.