Meet the JavaScript Development Toolkit

A JavaScript Eclipse plug-in wants to hold your hand; it won't be long before you're productive with JavaScript

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.

Bradley Childs, Software Engineer, IBM

Bradley ChildsBradley 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.



27 May 2008

Also available in Japanese

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
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
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
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
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
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. 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
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.

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Open source on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Open source
ArticleID=309525
ArticleTitle=Meet the JavaScript Development Toolkit
publish-date=05272008