Difference between revisions of "JSDT"

From Eclipsepedia

Jump to: navigation, search
m (Spelling "embeded" -> "embedded", "Occurance" -> "Occurrence")
(Features)
Line 73: Line 73:
 
* Library Image Support  
 
* Library Image Support  
 
* Breakpoint and ATF Project Support for easy AJAX Integration and debug
 
* Breakpoint and ATF Project Support for easy AJAX Integration and debug
 +
 +
'''Future UI Direction and use Cases:''' [[JSDT Use Cases]]
  
 
== Design ==
 
== Design ==

Revision as of 15:44, 6 December 2007

Contents

JavaScript Development Tools

Introduction

The JavaScript Development Toolkit (JSDT) is a JavaScript development framework for Eclipse based on the Java Development Toolkit (JDT). The JSDT differs from other JavaScript IDEs as it accurately models JavaScript in real-time. This allows smart error detection and correction, flow analysis and content completion that's actually relevant to the user.

Not only is the JSDT more accurate then other JavaScript IDEs but in most instances its much faster too. And since the JSDT's foundation is in the JDT many of the rich editing features of the JDT carry over. The end result is a fast, feature packed JavaScript IDE and framework that's well suited for AJAX and other JavaScript development needs.

The JSDT is still establishing its place in the Eclipse project space but currently exists closely with the WST and ATF project. The next release of ATF is expected to include tight JSDT integration for a truly unbeatable AJAX development experience.

Description

With the advent of Web 2.0, JavaScript have become central in the creation of a richer user experience on the Web. Its use has shifted from the creation of simple functions and handlers to events, to the creation of complex Web Application frameworks. Such complexity makes it crucial that more sophisticated set of tool become available on Eclipse.

The JavaScript Development Tools's goal is to develop a framework for development of JavaScript applications, with full support for editing, refactoring, and searching. The JavaScript editor is designed such that is can be plugged in to the Web Tools. The JavaScript Development Tools is also be extensible such that new language features can easily be added.

The functionality of the JavaScript Development Tools is heavily based on the functionality of the JDT. Because JavaScript is not a fully typed or class-based language, it is not possible to provide 100% of the JDT functionality. An inference engine is used to infer type and class structure from the JavaScript code, so as much JDT functionality as possible is available.

Features

Pure JavaScript Source

  • Syntax Highlighting
  • Folding / Line Numbers
  • Full Outlining showing Classes, Functions and Fields
  • Highlight and check of matching bracket / parenthesis
  • Auto-complete of brackets, parenthesies and indentation
  • Mark Occurance
  • Comment Toggle (line and block)
  • Generate Element JsDoc
  • Smart Code Completion based on real-time Javascript Model
  • Hover Help that display element declaration and JsDoc or Error message
  • Configurable Error/Warning checking includes full language syntax and type/class structure resolution
  • Flow analysis shows unreachable code, unused variables and variable hiding.
  • Quick-fix for unresolved fields and types.
  • Surround with do, for, try/catch, while
  • Completion Templates
  • Extract Function/Change function signature
  • Indentation Correction
  • Open Declaration
  • Open Type Hierarchy
  • Open Call Hierarchy
  • Extensibly customizable Code Formating
  • Full Search
  • Refactor/Rename/Move
  • Breakpoint Support
  • Browswer libraries with JsDoc for FireFox, Internet Explorer and ECMA 3
  • Support for user defined libraries using JsDoc + Javascript prototype structure definitions
  • Full extension support for Library UI and core
  • Library Image Support
  • Breakpoint and ATF Project Support for easy AJAX Integration and debug

HTML/JSP Embedded JavaScript

  • Syntax Highlighting
  • Folding / Line Numbers
  • Full Outlining showing Classes, Functions and Fields
  • Highlight and check of matching bracket / parenthesis
  • Auto-complete of brackets, parenthesies and indentation
  • Mark Occurrence
  • Generate Element JsDoc (From outline)
  • Smart Code Completion based on real-time Javascript Model
  • Hover Help that display element declaration and JsDoc or Error message
  • Configurable Error/Warning checking includes full language syntax and type/class structure resolution
  • Flow analysis shows unreachable code, unused variables and variable hiding.
  • Completion Templates
  • Indentation Correction
  • Open Declaration (From outline)
  • Open Type Hierarchy (From outline)
  • Open Call Hierarchy (From outline)
  • Extensibly customizable Code Formating
  • Full Search
  • Breakpoint Support
  • Browswer libraries with JsDoc for FireFox, Internet Explorer and ECMA 3
  • Support for user defined libraries using JsDoc + Javascript prototype structure definitions
  • Full extension support for Library UI and core
  • Library Image Support
  • Breakpoint and ATF Project Support for easy AJAX Integration and debug

Future UI Direction and use Cases: JSDT Use Cases

Design

The JavaScript Development Tools design would use the JDT design with the necessary adjustments made for JavaScript.

As far as the JavaScript Development Tools design is concerned, the major differences between Java and JavaScript are:

  • Javascript has no explicit typing support, whereas in Java everything is typed.
  • At the top level, a JavaScript file can contain any program statement, whereas a Java file only contains a class.
  • JavaScript has no classpath/jar file concept.

Other areas where the java/JavaScript differences will necessitate changes:

  • syntax differences - parse definitions
  • additional program elements with no correspondence in java
    • object literal
    • for (var in collection)

Inferred Types

In order for some JDT functionality (such as code completion) to work correctly, class type information needs to be available. This information is not available in JavaScript, but it can be inferred in many cases. A type inferring framework will be put in place to support this functionality. The type inferring will examine the JavaScript abstract syntax tree (AST), and generate "virtual" class information.

The type inferring will run off of a configuration will provide many options for how to infer the types/classes. The type inferring will also be extensible, so the unique conventions among various JavaScript toolkits can be handled. The type inferring will be configurable on a project basis, and possible on a file by file basis.

The type inferring configuration will also be used by the refactoring function.

Javascript file handling

Java files have a very top down structure, where files only contain classes, which only contain fields, methods, and classes, and program statements only contained within methods. Because of this, some JDT functionality will not work for JavaScript, because a program statement can be directly at the top of a JavaScript file. This will be handled by refactoring the relevant JDT code.

Variable/function resolution

In Java, everything is resolvable because of the classpath, package structure, and import statements. This has no correspondence in JavaScript.

Libraries

The JSDT changed the classpath and classpath container mechanism to offer JavaScript library support. JSDT libraries are collections of JavaScript source files that have prototyped object/class definitions and JsDoc. The inference engine then models these libraries and places each object/field/function in the projects Global Scope. Then every JavaScript file in the project has access to these objects/fields/functions.

To illustrate-- the JSDT contains a FireFox library plugin with about 150k of JavaScript and JsDoc. This library represents the class structure within the FireFox browser that is accessible to a web page's JavaScript. If a user wishes to target their JavaScript source to FireFox they would add the FireFox library to their project and achieve content completion and hoverhelp for the FireFox objects. Users may limit the objects/functions/fields visible in the project by adding or removing libraries.

Libraries aren't limited to browser objects. AJAX runtimes fit nicely in libraries as do a websites standard set of utility functions. Really the possibilities are limitless. And the library mechanism is extremely easy to expand both by the end-user or through extension points.

Functionality mapping

This table shows how the JDT functionality corresponds to the JavaScript functionality. It does not include anything where there is a direct one to one correspondence.

JDT function JSDT function
Build path Libraries + Global Scope
JDK level (1.4 vs 1.5) ECMA script level 3 vs 4 (v. 3 supported now)
Compile validation & flow analysis

Extension Points

The JSDT functionality is embedded. This means, for instance, that the JavaScript editing capabilities is embeddable within HTML and JSP Editors, both within script tags, and script attribute values. The JSDT is flexible so script support in other languages is possible.

The following JSDT extension points are supported :

  • Global Scope variable initializer
  • Global Scope container initializer core
  • Code formatter
  • Validation participant

In addition, the JavaScript syntax tree will be presented as an XML dom (future), so that various XML processors can be run against it for a variety of reasons, for instance, a Schematron processor could be used to do validation. Currently the JSDT is represented in an AST.

The following jsdt.ui extension points will be supported :

  • Global Scope container initializer ui (Wizzard, content assist images and type/text naming)
  • javascript element filter
  • javaScriptEditorTextHovers
  • javadocCompletionProcessor
  • quickFixProcessors
  • quickAssistProcessors
  • foldingStructureProviders
  • queryParticipants
  • javaScriptCompletionProposalComputer
  • javaScriptCompletionProposalSorters

Development

Current Progress

  • Copied the 3.3 level JDT code.
  • Refactored java -> JavaScript , org.eclipse.jdt -> org.eclipse.wst.jsdt, etc .
  • Updated syntax definitions, parsing, etc to JavaScript
  • Created type/class inference engine
  • Update/refactor jdt junit tests to JavaScript and make work [partial]
  • Updated ui
  • Disabled functions not applicable to a generic JavaScript model
  • Added usage for non standard (but common) use cases in the inference engine
  • Created extensions plugins for WST HTML/JSP editor to support JSDT features
  • Changed buildpath/classpath mechanism to define and manage the projects Global Scope (libraries).
  • Created library for FireFox by using a reflection script to dump all visible objects/properties inside a FireFox browser. (Library is partial and needs some manual updates).
  • Created library for IE by scraping MSDN JScript docs (Library is partial and needs some manual updates)
  • Created web plugins for integration into WST.

Continuing Work

The continued plan is as follows:

  • Determine what code is unchanged from JDT and figure out how to share with JDT
  • Support for one or two popular toolkits such as dojo ((currently partial but non-specific))
  • Expose AST as XML DOM
  • Refactoring
  • Remove non applicable possibilities
  • Enhanced the inference support for 'conglomerate types' and type mixins. ((Types existing in the Global Scope should better track method/field origination and inheritance from libraries.))
  • Add more JavaScript specific error/warning/flow scenarios.
  • Enhance HTML integration to provide HTML name/ID'ed element specific completions where applicable.
  • Some UI cleanup (hide library paths/use names provided by library plugins, better use of library images)

Obtaining JSDT

We are working as fast as possible to make builds available and should be ready very soon. The source is available now on the Eclipse CVS. Please note that we are an incubation project.

Contributing to JSDT

The JSDT is driven by a very small development group with limited resources. We do hold open meetings and conform to the Eclipse process. But our resources are limited. ANY serious developers or contributors will be enthusiastically welcomed. For more information follow the standard Eclipse process for becoming a project committer (see New Committer Election). For more information contact Bradley Childs or Phil Berkland.

Reporting Bugs

Report bugs through Eclipse Bugzilla under Webtools and select component wst.jsdt.