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.
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.
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.
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 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.
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.
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.
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."
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.
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.
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
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.
Learn
-
Read more about the ECMA-3 standard at the ECMA Web site.
-
Read more about the JavaScript Development Toolkit at the Eclipse JSDT wiki.
-
Read more about the Eclipse ATF Project.
-
Check out the "Recommended Eclipse reading list."
-
Browse all the Eclipse content on developerWorks.
-
New to Eclipse? Read the developerWorks article "Get started with Eclipse Platform" to learn its origin and architecture, and how to extend Eclipse with plug-ins.
-
Expand your Eclipse skills by checking out IBM developerWorks' Eclipse project resources.
-
To listen to interesting interviews and discussions for software developers, check out developerWorks podcasts.
-
Stay current with developerWorks' Technical events and webcasts.
-
Watch and learn about IBM and open source technologies and product functions with the no-cost developerWorks On demand demos.
-
Check out upcoming conferences, trade shows, webcasts, and other Events around the world that are of interest to IBM open source developers.
-
Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products.
Get products and technologies
-
Check out the latest Eclipse technology downloads at IBM alphaWorks.
-
Download Eclipse Platform and other projects from the Eclipse Foundation.
-
Download IBM product evaluation versions, and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
-
Innovate your next open source development project with IBM trial software, available for download or on DVD.
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 (Undergoing maintenance)
Next steps from IBM
Spring, JRuby, and Ajax development is easier with WebSphere Application Server - a smart Java 5 and J2EE Web services-based application server.
- Try: The no-charge WebSphere Application Server Community Edition is a pre-integrated, lightweight Java 5 application server built on Apache Tomcat and other best-of-breed open source software such as OpenEJB, Apache Axis, and Apache Derby.
- Article: The article leverage the Spring Framework and the WebSphere Application Server to improve your J2EE project productivity.
- Tutorial: See how the free WebSphere Application Server and XML can improve the efficiency of your JRuby on Rails and Ajax development.
- Buy: WebSphere Application Server - Express
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
