Level: Intermediate Bradley Childs (childsb@us.ibm.com), Software Engineer, IBM
27 May 2008 The JavaScript Development Toolkit (JSDT) is an open source plug-in that brings
robust JavaScript programming tools to the Eclipse platform. JSDT streamlines
development, simplifies code, and increases productivity for pure JavaScript source
files and JavaScript embedded in HTML.
JavaScript development isn't easy. Uneven Web browser compatibility, disappointing
documentation, and weak tools compound the problem. Fortunately, the tools situation
brightened with the latest release of the JavaScript Development Toolkit (JSDT), a plug-in set for Eclipse.
Eclipse is an open source IDE framework with an architecture designed for expansion and
flexibility. JSDT runs in Eclipse and is added as a plug-in. JavaScript
on Eclipse isn't a new concept, since there is HTML and some JavaScript support
available from other plug-ins, but what distinguishes JSDT is the richness and
complexity of the tools it offers that greatly enhance Web development productivity.
JSDT offers many of the same features and core design found in the Java Development
Toolkit (JDT). JSDT is slated to replace the current JavaScript editor in the Web
Tools Platform V3.0 release.
IDEs and JavaScript
You may wonder why JavaScript IDEs aren't more common. It would seem with the
popularity of Web 2.0 and a larger number of developers clamoring to use JavaScript in
their blogs and community pages, we would notice a flood of new JavaScript tools.
Nevertheless, Notepad and the browser's Refresh button remain the No. 1
JavaScript development environment for most programmers.
The problem lies in the interpretation of the JavaScript language. Unlike
Java™ or the C languages, JavaScript is loosely typed and difficult to
model accurately. In more formal languages, efficiency of compiled code is a priority,
and a limit is placed on language flexibility. JavaScript's goal is different. Various
attempts to polarize developers toward a platform have led to language inconsistencies.
These inconsistencies complicate things from a tooling standpoint and a development standpoint.
Browsers aren't the only villain. Object-oriented JavaScript is more of an afterthought
than a focus. Ajax toolkits take it upon themselves to make JavaScript object-oriented
— but they all do it differently. This makes generically identifying object and
class structures difficult, if not impossible. To make things worse — or
better, depending on who you ask — the language has a couple of powerful
holes programmers use to perform clever tricks that are otherwise difficult. One
example of this is wrapping major chunks of code in an evalf(..) function, making it only valid at runtime. It's an issue
we're still struggling to model accurately in JSDT.
Present JavaScript IDEs
There is some partial JavaScript tooling available now. But many of the popular tools
can't provide true context-aware content assistance because they lack a true JavaScript
language-modeling mechanism. In model-less IDEs, content completion and tooling is
accomplished through the use of static flat files listing available types. These types are
pruned on the fly based on partial characters typed, and they typically do not pick up
object members defined in the code. Content completion isn't context-sensitive because
without a model, you're pretty limited on what can be done.
Without a language model, it's difficult or impossible to place code in context. Since
many programming elements depend on the context of code, it's essential for tooling to
establish context. IDEs that lack a model and code context also miss out on full
type-resolution and validation, scope, visibility, or any of the other good validation essential for easy development.
JSDT design
Figure 1. JSDT language abstraction stack
JSDT models the JavaScript language and implied class structure in real time, which it
accomplishes with a new approach. First, the basic language elements are constructed.
Second, the inference engine or engines help fill in any class structure and language gaps.
The basic language model
The inference and modeling process can be thought of as an operation stack. The root of
the model is the JavaScript source code. The source code is transformed into a private
language model using a similar engine as the JDT for
Eclipse. This pure model of the language conforms to the ECMA-3 standard.
Type and class inference
Once the JavaScript language is modeled, the next step is managing type and class
inference. Many JavaScript-based toolkits (for example, Dojo, Rico, Prototype) use
their own techniques to facilitate object-oriented programming in JavaScript. JSDT
uses custom toolkit-aware inference engines to recognize class and type structure
within toolkits. These classes and types then can be added to the language model.
Exposing the model
Finally, the private model and its inferred parts are transformed into a public
language model. This public language model is available for source, refactoring, and
as-you-type tools. If one of the tools wishes to change some of the JavaScript source,
the change is made at the public model and translated down to the JavaScript source code.
Managing variable and member scope
Even though the language model provides the basics for describing JavaScript source and
context, another important piece is necessary: environment context. JSDT must establish
variables and types available in the running of JavaScript's global scope. These variables
and types are different, depending on the JavaScript's runtime environment. When
JavaScript is running in the Web browser context, objects, types, and fields
representing screen data and browser objects are available in the global scope. If the
code is destined for something other than a browser, the whole object set may change.
Figure 2. JSDT library configuration
JSDT uses a library mechanism to manage common objects, variables, and types in a
project. Libraries can be added to a project to provide object and variable sets
specific to the users' target runtime environment. If two libraries exist that define
conflicting members, the members are aggregated and noted in the user interface where
relevant. This helps establish methods common across browsers or environments.
Prepackaging libraries for popular browsers is simple. The library is bundled in a
plug-in that contains JavaScript source files that define objects and types. When JSDT
is modeling a file that is open in the source editor, it starts by modeling the file's
source code, then adding each source file in the project's library set to the model.
Library source files are never validated and are used only to define object structures
and attach the JsDoc visible in hover help and content completion.
While the libraries' primary function is managing the runtime context of JavaScript, it
also serves another important feature — handling cross-source file references.
Pure JavaScript doesn't have an explicit include function. Developers have a nasty
habit of spreading functions across source files. The library configuration page helps
manage inter-project visibility between source files. If a project folder is marked as a
source folder, all of the JavaScript in that folder is included in the global scope.
Limits may be placed on folders using exclude patterns.
Tools
With the high-level design points out of the way, let's take a closer look at the
features. A few of JSDT's less-visual — but essential — features include
same-word highlighting, auto-closing of braces, parentheses, quotes, and auto-indention
to name a few. It may suffice to say, "If a good IDE should have it, then JSDT supports it."
Content assistance
Figure 3. Content assistance
Content completion is invoked anywhere with Ctrl+Space. Figure 3 shows content
assist invoked on the document object. Content completion is context-aware and based on
the global scope and JavaScript model. Completion entries show the field name, field
type, and the field's declaring type.
Error detection and correction
An IDE is most useful when it can actively determine code errors. The JSDT detects
three major types of errors: grammar/language errors, types/fields/method visibility,
and flow or logic errors. All error warning levels are individually configurable by way of the preference pages.
Figure 4. Unresolved method
JSDT attempts to resolve all fields and methods for an object. When a method can't be
resolved, it's marked in error.
Figure 5. Syntax error
Syntax errors are also found and marked. Here, the for()
statement is missing a semicolon.
Figure 6. Flow analysis
Figure 6 demonstrates the flow analysis. Since any code after the return statement is unreachable, it's marked in error.
Figure 7. Quick fix
Some errors have quick-fix options. In Figure 7, when the user clicked the error marker
next to the unresolved variable formyValue, JSDT comes up with some options to correct the error.
Code formating
Source gets messy at times. It's easy-to-read, well-structured, and well-formatted
code. The problem is keeping code formatted while you develop and debug. JSDT supports
many as-you-type formatting features, such as configurable auto-indent and character
pair-matching. These are helpful for speed of development and readability.
What can you do when the code you receive is already messy? The JSDT code formatter can
go through and reformat all the messy JavaScript you encounter with a click of the
mouse. The formatting engine is extensively configurable, and the configuration can be
exported to share with your team.
Other JSDT features
The items above aren't the only features JSDT supports. Here's a full list of the
self-explanatory (but must-have) JSDT features:
- Syntax highlighting
- Folding/line numbers
- Full outlining, showing classes, functions, and fields
- Highlight and check of matching brackets/parentheses
- Auto-complete of brackets, parentheses, and indentation
- Mark occurrence
- Comment toggle (line and block)
- Generate element JsDoc
- Surround with do, for, try/catch, while
- User-configurable completion templates
- Extract function/change function signature
- Indentation correction
- Open declaration
- Open-type hierarchy
- Open-call hierarchy
- Customizable code formating
- Full search
- Refactor/rename/move
- Breakpoint support
- Defined browser libraries with JsDoc for Firefox, Internet Explorer, and ECMA-3
- Support for user defined libraries using JsDoc + JavaScript prototype definitions
- Library image support
- Debugging support provided through the ATF Project
Conclusion
If you need a free Web development environment, look no further than Eclipse. With the
recent addition of the JSDT, the JavaScript abilities in
Eclipse surpass everything else on the market. Thanks to the rapid growth allowed by
the open source project, JSDT will continue to evolve as rapidly as JavaScript.
Resources Learn
Get products and technologies
Discuss
-
The Eclipse Platform newsgroups should be your first stop to discuss questions regarding Eclipse. (Selecting this will launch your default Usenet news reader application and open eclipse.platform.)
-
The Eclipse newsgroups has many resources for people interested in using and extending Eclipse.
-
Participate in developerWorks blogs and get involved in the developerWorks community.
About the author  | 
| | Bradley Childs graduated from Texas A&M University in 2004. He took a job at IBM in middleware development and later moved to emerging technologies. He works closely with Phil Berkland developing JSDT. He's also an active community participant for the Ajax Tooling Framework project. |
Rate this page
| 
