1. Copyright © IBM Corp., 2007-2008. Introducing the new Web Tools JavaScript™ Features Phil Berkland IBM Software Group berkland@us.ibm.com 9/26/2007

2. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Agenda Overview Brief History Functions Design Demonstrations Where to get JSDT

3. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Overview JavaScript Development Tools (JSDT) is the JavaScript component of WebTools  Replaces old JavaScript editor JSDT provides rich JavaScript editing capability  Based on the Best of Breed Java™ editing functions provided by Eclipse™ JSDT can be packaged in several different configurations  By itself  Only javascript editing for.js files  no HTML editing  As part of Web Tools  Both JavaScript files and JavaScript regions within HTML/JSP

4. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Brief History Eclipse ATF project started to provide AJAX tooling ATF realized JavaScript is the main component of AJAX, and current Eclipse JavaScript support was very lacking. Effort launched to create JavaScript editing on the par with Java Editing Since WebTools project owns JavaScript function, a new component (JSDT) was created under WebTools (WST) project JSDT will become the JavaScript Editor for WebTools 3.0

5. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Why Use JSDT? In a Word – Productivity Detect errors as you Type  Syntax errors, common programming error warnings displayed interactively  Don’t have to wait until Script is run to find errors Less Typing  Code completion  Templates  Refactoring Code comprehension  Tools to help understand script which is being developed  Search  Call analysis  Hover Help

6. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Functions  Most functions are available in both HTML and JavaScript editors  Some are not available in HTML because popup menu not there  Syntax highlighting (configurable)  Vars, functions, keywords, etc display has configurable color and font  Code folding  Can easily hide functions and block comments  Configurable formatting  Configurable indentation, whitespace, blank lines, new lines for all program elements  Configuration can be shared by multiple users  Code completion  Completion proposals are anything valid at cursor location  Templates (pre-defined or user defined)  Syntax checking/error display (severity level configurable for each error)  Quick fix  For common errors, a list of possible fixes is displayed, and the chosen fix is applied  Hover help/tips (uses JSDoc if available)

7. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Functions  Occurrences marking  All occurrences of selected function/var in file are highlighted  open selected item  The definition of the selected item is displayed  highlight matching parenthesis/brace/bracket  add/remove/generate comment  Typing helpers:  Automatically close strings, parentheses, brackets,etc as you type  Automatically insert semicolons, braces  automatic formatting

8. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Functions (continued) Refactoring  function- rename, move, delete, change signature, extract selected block to function  var - rename, move, delete Jsdoc support  Used in hover help  Code completion provided or JSDoc tags Class hierarchy view  JavaScript is analyzed, and class structure is inferred  Shows tree view of class structure, with functions/vars for each class Call hierarchy view  Displays list of callers of functions  Caller list can in turn be expanded to see who calls them, recursive

9. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Functions (continued) Script explorer view Search references/declarations  Search for references/declarations/read access/write access  Language level search (no matches in text or comments) Preferences:  Appearance  Templates  Formatting  Validation options  Error/Warning levels  Editor options APIs for reading/writing JavaScript (language model)  Many Extension points  See Brad Childs talk following this one

10. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Design  Very similar to design of JDT  Typical flow  JavaScript is parsed into Abstract Syntax Tree (AST)  AST is analyzed to infer class structure  Default inference based on common coding patterns (.i.e. “.prototype)  JSDoc information used if present  Extension points to add custom inference  All references are resolved (vars, function calls, etc)  Code flow is analyzed to determine unreferenced vars, dead code, etc  Libraries provided for definition of language and browser DOM functions/classes  API libraries for IE,Firefox, and Ecma spec  Libraries also provide hover help

11. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Post 3.0 possibilities These are only ideas, not commitments ECMAScript 4.0 support  Most of the internal model exists, main work is parser Interpreter Engine  Internal model is there, just need execution engine/context  Given Rhino, benefits of doing it are questionable

12. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Where to get JSDT www.eclipse.org/wtp  from downloads page Report bugs using the “Web Tools” product, “wst.jsdt” component Discussion groups:  news://eclipse.webtools/  wtp-dev@eclipse.org mailing list wtp-dev@eclipse.org

13. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Where to get JDST Source CVS Repository Locations  /cvsroot/webtools As Standalone JavaScript Editor  sourceediting/plugins/org.eclipse.wst.jsdt.core  org.eclipse.wst.jsdt.core  org.eclipse.wst.jsdt.manipulation  org.eclipse.wst.jsdt.ui Integrated with Web Tools  sourceediting/plugins/org.eclipse.wst.jsdt.core  org.eclipse.wst.jsdt.web.core  org.eclipse.wst.jsdt.web.ui See Wiki page for more information  http://http://wiki.eclipse.org/JSDT

14. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Legal Notices Copyright © IBM Corp., 2007-2008. All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Java and all Java-based marks, among others, are trademarks or registered trademarks of Sun Microsystems in the United States, other countries or both. Eclipse and the Eclipse logo are trademarks of Eclipse Foundation, Inc. IBM and the IBM logo are trademarks or registered trademarks of IBM Corporation, in the United States, other countries or both. Other company, product and service names may be trademarks or service marks of others. Mozilla Firefox® is a trademark of the Mozilla Foundation THE INFORMATION DISCUSSED IN THIS PRESENTATION IS PROVIDED FOR INFORMATIONAL PURPOSES ONLY. WHILE EFFORTS WERE MADE TO VERIFY THE COMPLETENESS AND ACCURACY OF THE INFORMATION, IT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, AND IBM SHALL NOT BE RESPONSIBLE FOR ANY DAMAGES ARISING OUT OF THE USE OF, OR OTHERWISE RELATED TO, SUCH INFORMATION. ANY INFORMATION CONCERNING IBM'S PRODUCT PLANS OR STRATEGY IS SUBJECT TO CHANGE BY IBM WITHOUT NOTICE.