ClientSideWebAppDevProposal

Client Side Web Application Development - Project Proposal - DRAFT

Preliminary document - subject to change


Contents


Background

Web 2.0 applications are increasingly diverse with respect to their structure and underlying technologies. Although Java EE applications are still widely developed and deployed, there is an increasing trend toward richer, interactive client side applications that may or may not involve a server side component. JavaScript is the standard technology for programming web pages and is therefore particularly relevant in the context of developing Web 2.0 applications. AJAX provides a methodology for combining JavaScript and XML for producing highly interactive web pages, but also adds a level of complexity that can get quickly out of hand without the ability to inspect and debug the runtime behavior of these applications. This proposal is all about adding first class support for client-side web application development with a particular focus on the ability to view and debug the markup and JavaScript code interpreted by the browser.

It is important to note that the use cases and functionality proposed here are part of a larger system of features that could be coined as "JavaScript Support" or the "AJAX IDE". In particular, editing, refactoring, and code navigation support for JavaScript, CSS, XML, and (X)HTML is assumed to be available in the IDE and is in fact a key part of the overall user experience, but is outside the scope of this document.

NOTE: This document discusses he long term vision with the NetBeans 7.0 time frame in mind. Some parts of the document identify and discuss about the short term i.e. JavaOne 2008 time frame tasks. They are clearly identified with the JAVAONE2008 tag.

Primary Use Cases

  1. Client-Side Project: Develop a new client-side web application from scratch or from existing sources. Primary tasks include editing, execution, testing, debugging, and profiling of application source files contained in a project. Execution, testing, and debugging is defined in the context of a web browser such as FireFox or Internet Explorer. This proposal addresses the project creation, execution, testing, and debugging tasks. Editing of web artifacts such as HTML/XHTML, CSS, and JavaScript are outside the scope of this document. (UC1)
  2. Server-Side Project: Observe and debug the client-side execution of a traditional deployed web application for which sources are available as a project in the IDE. Primary tasks include editing, execution, deploying, testing, and debugging of application source files contained in a project. With this type of project, execution, testing, and debugging tasks occur both in the context of the application server executing server-side code as well as a web browser such as FireFox or Internet Explorer executing generated client-side code. This proposal addresses the debugging of the generated client-side code only. All tasks related to the server-side application code are outside the scope of this document. (UC2)
  3. Client-Side URL: Observe the client-side execution of a remotely deployed web application for which no sources are available. Primary tasks include viewing and debugging of the generated markup, CSS, and JavaScript code within the context of a web browser such as FireFox or Internet Explorer. The main use case here is the invocation of the URL from within the NetBeans IDE. (UC3)
    1. Browser initiated Client-Side URL: In this sub usecase the user is already visiting the URL and wants to initiate the NetBeans IDE support. In such a scenario the configured NetBeans IDE is launched if not already running and the support in the IDE is accessed. (UC3.1)
  4. FrameWork Developer: Develop a new plugin module for the IDE that extends the capabilities of the built-in client-side development tools by providing support that is specific to a particular JavaScript/AJAX framework or toolkit. Tasks include creation of the NetBeans module w/ build scripts, framework library management, palette management of components and/or code clips, integration of online help, and NBM generation.

Tasks

Project

  • Client-side Project Creation
  • The user will be able to create a project from scratch for developing client side web applications
  • While creating such projects the user will be offered a choice of popular JavaScript libraries to be included in the project
  • The user will be offered a set of templates for initial page to choose from
  • If multiple local web servers are configured the user will be able to select web server to use for local testing and debugging. The term Web Server refers to servers such as Apache Web Server.
  • The user will be able to manage (create, modify, delete) multiple local web server configurations.
  • The user will be able to create a project from an existing set of directories in which the sources for existing client side web applications reside
  • The user will be able to create a project from a remotely deployed client side web application
  • The sources will be downloaded to a local disk (using FTP, SFTP, WEBDAV(?)). The user will be able to synchronize the local sources with the remote server (using the FTP, SFTP, WEBDAV).
  • Server-side Project Creation

The term Server-side Web Project is used to projects that involve server side technologies such as Java Servlets, JSP, JSF, Facelets, Struts, Ruby, PHP and Server-side JavaScript such as Phobos. In NetBeans we currently have or by NetBeans 7.0 will have support for all the above mentioned server side technologies. Such project are associated with some Web Application Server that support the respective server-side technology. Such projects have their own mechanism for configuring the Web Applications Server. However such projects will also benefit from the inspection and debugging of client-side artifacts such as DOM/CSS and JavaScript execution. To that end configuring the broswer for testing an debugging is essential. The support manage the browser configurations and consume them in the server side project will added to the server side-projects supported in the NetBeans IDE.

Based on early discussions with Pavel we are exploring adding the support for client-side debugging to the J2EE Web project (JAVAONE2008). This is not a final decision but will be discussed over next week. We should also explore the same for Ruby and PHP projects.

  • Rename, Move, Delete
  • The standard set of operations available with the NetBeans projects will be available.
  • VCS
  • The standard features of available VCS system in NetBeans will be available for the sharable artifacts in the project.
  • Libraries
  • The user will be able to create and manage libraries of client side web application artifacts such as JavaScript libraries or CSS StyleSheets. The user will be able to add such libraries to the project. (The exact mechanism of how the libraries are used in the project is TBD.
  • Refactoring
  • The standard set of refactorings will be available for the artifacts in the project. The set of refactorings are:
  • File Based: Rename, Move, Copy, Safe Delete
  • Internal: JavaScript Rename, Find Usages
  • Preview
  • With embedded browser the user will be able to preview the HTML pages and CSS files without deploying.
  • The CSS files will be previewed with a user configurable template.
  • Validation
  • The user will be able to validate Html, CSS and JavaScript code.
  • Deploying
  • The user will be able to deploy the current page or the main page of the Project in the associated local Web (Application) Server.
  • Running
  • In this mode the user will be able to test the page deployed in the configured, bundled Web Server in the desktop browser.
  • The user will also be able to see test the page in embedded browser.

Debugger

In addition to all the features of Running the user will be able to

  • debug the JavaScript ( JAVAONE2008 )
  • view, navigate and manipulate the Browser DOM
  • view and manipulate the CSS in the Browser
  • JavaScript debugging support includes ( JAVAONE2008 )
  • Session management ( JAVAONE2008 )
  • Source management ( JAVAONE2008 )
  • Breakpoint management ( JAVAONE2008 )
  • Threads view ( JAVAONE2008 )
  • Call stack view and navigation ( JAVAONE2008 )
  • Local Variables view and set ( JAVAONE2008 )
  • Watches ( JAVAONE2008 )
  • Local and remote debugging

Debugger UI Details

  1. Breakpoints and the Breakpoints Window ( JAVAONE2008 )
  • Breakpoints are typically created by a user.
      1. Adding/removing a breakpoint via the source editor. If the execution is stopped at a given breakpoint it's location will be shown with a special annotation in the open source editor.
      2. Adding a breakpoint via the Breakpoint View
  • A Breakpoint can be enabled or disabled via a checkbox in Breakpoint Window.
  • Any given breakpoint is customizable meaning that the user can provided an expression that if evaluated true at the time of execution will trigger execution to pause.
  • The user can request a breakpoint when an error/exception is thrown (?)
  • As the JavaScript executes, the user will be notified when the breakpoint it hit. The line will be highlighted in the editor and the JavaScript will pause from it's running state until the user decides how he or she wishes to proceed. The Watches Window, Local Variables Window, Thread and Call Stack Window will be fully populated at this time.
  1. Watches Window ( JAVAONE2008 )
  • This window provides developers a means of inspecting a text expression in any given context. When a user adds a watch, the evaluated expression and it's value is shown. This functionality is similar to the Netbeans Java Debugger.
  • Scope: This expression is maintained beyond context and session ( at the project level ) and is only removed upon user request.
  • Out of Bounds: If the JavaScript expression as provided by user cannot be evaluated in its given context it will simply state undefined.
  1. Sessions Window ( JAVAONE2008 )
  • Client Side Runtime will be represented by a session in Sessions View. This view will not be visible by default unless there are multiple sessions.
  1. Threads (Windows and Call Stack) Window ( JAVAONE2008 )
  • In JavaScript there is not really a notion of Threads, however when there are multiple frames in a FrameSet or even a spawned window you are have distinct context in each. Therefore, we have decided to show top level Windows as the main(root) elements in the Thread view. The frames and iframes will be shown in their logical structure. The user can then switch between contexts depending on which window they select if the JavaScript execution is paused. (This may be inconsistent with NetBeans separate Threads and Call stack windows - HIE input required).
  • Below each root is the relative call stack.
  • For each element in the CallStack, the user can double click and it will be navigated to that portion in the source.
  1. Call Stack Window ( JAVAONE2008 )
  • To be consistent with consistent with the NetBeans debugger UI the call stack window will show the call stack of the current context with the functionality described above (HIE input required). The Call Stack window will show the current window context information.
  • The call stack frame locations will be shown in the open source editor windows using annotations. The current call stack window will shwon with a distinct annotation.
  1. Local Variables Window ( JAVAONE2008 )
  • This window displays all variables (or relative object properties) and there values known to the current context.
  • Values are added and removed from the window as the context changes (or as the user steps through the javascript sources).
  • The Local Variables window will show the current window + current call stack context information.
  1. Sources Window ( JAVAONE2008 )
  • This Window displays all the sources related to current runtime context. The sources may be shown in the form of a URL (for remote resources) or a file path (for resources in the Project).
  • From this view, the user can double click on a given source and it will open its relative source file (if it is one that we uploaded to the web server). Otherwise, Netbeans will grab the sources on the network and open it in a new file in the editor in a read-only state for the user to view.
  1. Output Window ( JAVAONE2008 )
  • This window is similar to the JavaScript Error Console. It shows evaluation errors, thrown exceptions and other information sent to the console.
  1. Runtime DOM Window
  • The current DOM as parsed by the browser. This DOM can be modified dynamically without editing source code.
  • Thei view is refreshed at
  • breakpoint
  • on demand
  • automatic (?)
  1. CSS Window
  • This view shows the current CSS state for any given DOM element. The view will also show how the cascading is happening. (Inspecting?)
  • From this window you can edit a css element dynamically, however this data will reset when the page is refreshed.
  1. Network Monitor Window
  • Each request is represented by a line. There are four columns in each row (and the total table is sortable by any of these columns)
      1. request string (ie getModel?make=honda)
      2. domain string (ie mail.yahoo.com)
      3. request time
      4. initiating time of request
  • As you mouse over each line, the tooltip will show the full url request.
  • Each request can be expanded to show additional data information.
  • XMLHttpRequest GET will show the following.
    • Params: Name and value pairs of the URL
    • Headers: Package Headers of the Request and Response
    • Response: The raw text actually received in response to the request. ( In the future, we may be able to do something special if we recognize a JSON object i the response.)
  • XMLHttpRequest POST will show the three above as well as the POST name value pairs.
  • There will be 7 views on this window that act as a filter to viewable network activity.
      1. HTML - shows requests for HTML documents
      2. CSS - shows requests for CSS documents
      3. JS - shows requests for Javascript files
      4. XMLHttpRequest - shows AJAX request made
      5. Images - shows request make for images.
      6. Flash - shows Flash requests.
      7. ALL - show all network activity without any filtering.

Future Features

  1. Profile Window
  • This window will keep track of how long it takes for any given function to complete. By default, the methods that take the most time will be moved to the top of the list. There is a filtering mechanism in which the user my search for a Object name. The user can also sort by Object name and completion time.
  • By default the profiler is turned off, but once turned on it can run in default mode or in a user specified context where it defines specific Object or Functions to listen to.
  1. Network Activity Window
  • The ability to rerun a request by simply double clicking on a request. This is usefully when the developer modifies server side code and would like to see the current response. However, it is not guaranteed that any Object properties will be updated.
  1. Sources Window
  • This sources window might also show the time it took to load this source file and it's size (?)
  1. CSS Window
  • The user should be allowed to press a commit button that will attempt to write the updated css values to the appropriate styles documents.

AJAX Monitoring

  • Monitoring of AJAX requests from Browser and responses from Web Server
  • JSON inspector

Editing

Note: The editing support is being developed elsewhere. More details will be available later.

  • Source Editing
  • Html/Xhtml file (includes embedded styles and JavaScript)
  • CSS Files
  • JavaScript Files

The editing features include:

  • Syntax coloring
  • Semantic coloring
  • Code folding
  • Error highlighting
  • Code completion
  • Code Templates and abbreviations
  • Structured editing
  • Structured editing will be available for CSS files.
  • Navigation
  • The user will be able to see the outline of HTML, CSS and JavaScript files in the Navigator window.
  • The user will be able to navigate the source code using the Navigator nodes.
  • The user will be able to view and edit (certain) the properties of the selected element/node in the property sheet.

Visualization of JavaScript Debugger integrated into NetBeans

Image:JavascriptDebuggerNetBeansIntegration_ClientSideWebAppDevProposal.png

Architecture of JavaScript Debugger

NOTE: The above screen shot is showing the embedded browser based debugging scenario. This is not slated for Milestone 1.

NOTE: The above screen shot does not yet show

  • Sessions View
  • Sources View
  • Threads view
  • Call stack view contents
  • AJAX transaction monitor
  • CSS view

NOTE: The DOM view is showing the runtime DOM. It will not be shown in the Navigator window. Instead it will be shown in one of the debugger windows. The Navigator window will show the structure of the (X)HTML, CSS and JavaScript files files in the project.

  • Local Web Server Management: The user will be able to manage the local web server configurations independent of the Project
  • Add local web server configuration
  • Modify local web server configuration
  • Remove local web server configuration

Release Milestones

Initially, the JavaScript debugging features described in this document will be developed in parallel with NetBeans releases, but will not be part of the formal NetBeans distribution (i.e. the NB installer or Stable Update Center) until after NetBeans 6.1. Pre-FCS modules will be made available on the NetBeans Beta Update Center according to the following schedule:

  • Milestone 1: April 21, 2008 - Technology Preview
  • Milestone 2: TBD - Feature Complete Beta
  • Milestone 3: TBD - FCS Quality

Logistics

  • All features proposed for Milestone 1 will be developed in parallel with and compatible with NetBeans 6.1
  • Since there are no specific NB 6.1 deliverables, feature development will occur in a separate Mercurial repository branch that is regularly and frequently synchronized with the NB 6.1 codeline
  • Regular project builds (frequency TBD) will be made available for development and testing purposes
  • Synchronization with other advanced development projects (new JavaScript editor, Visual XHTML editor) is TBD

Milestone Features

Milestone 1

Milestone 1 is will be positioned as a technology preview release intended to show some of the key functionality related to JavaScript development in NetBeans. The two main components the user will have showing on the desktop is the NetBeans IDE and the user's default browser running as a separate process outside of the IDE. For Milestone 1, the supported browser will be FireFox.

Milestone 1 defining features: ( JAVAONE2008 )

NOTE: As mentioned earlier instead of focusing on the simple Client Side Web project we are exploring the addition of JavaScript debugging support to J2EE Web projects.

  • Project
  • Create a simple Client Side Web project. This will be a new project type available in the Create Project Wizard distinct from the existing Web project or any other project type. Project options:
  • Target web server
  • Project Logical View will be Files view only
  • Create and edit dynamic web pages in the project with X/HTML, CSS, and JavaScript. These artifacts will appear in the list of preferred templates in the project's Add context menu
  • Add 3rd-party JavaScript libraries and AJAX frameworks to the project. For M1, the sources for these imported libraries will be simply expanded and copied into the project as normal source files.
  • Project Actions
  • Run: Deploy the project to a web server such as Apache or Glassfish and launch the default desktop browser with the appropriate URL
  • Debug: Run the project and launch a JavaScript debugging session in NetBeans, attached to the default desktop browser where the client-side application is running
  • JavaScript Debugger ( JAVAONE2008 )
  • Ability to add & delete breakpoints in JavaScript code
  • Ability to set & delete watches
  • JS callstack view and navigation
  • Source mapping from browser DOM to project source
  • Debugger session management

Milestone 1 target features:

  • View browser DOM in the IDE
  • View CSS styles for DOM elements
  • Monitor AJAX transactions
ID Doc Prio Target Owner Component Status Short Summary
1 M1 Sandip JS Debugger Core DB adapter to browser's JS debugging services
1 M1 Sandip JS Debugger Core IDE/Browser communication plugins (FireFox)
1 M1 Sandip JS Debugger Core Debugger model, internal project APIs
1 M1 Joelle JS Debugger UI Integration with the NetBeans Debugger UI
1 M1 Quy Integration with Web Project Browser configuration
1 M1 Quy Integration with Web Project Project property customizer to configure simultaneous launching of JavaScript debugger when the Web Project Debug action is invoked.
1 M1 Quy Integration with Web Project Invocation of JavaScript debugger when the Web Project Debug action is invoked.
1 M1 Quy Integration with Web Project Mapping of URIs to FileObjects and FileObjects to URIs.


ID Doc Prio Target Owner Component Status Short Summary
2 M1 TBD JS Debugger UI DOM Inspector
2 M1 TBD JS Debugger UI CSS Viewer
2 M1 TBD AJAX AJAX transaction monitor


Functional Specs

Milestone 2

ID Doc Prio Target Owner Component Status Short Summary


Milestone 3

ID Doc Prio Target Owner Component Status Short Summary


Design Considerations

  • JavaScript Debugger as a Service
  • Generic project-related services
  • Project agnostic services
  • Browser Integration
  • External Browser
  • Embedded Browser

Dependencies / External Requirements

  • NetBeans Debugger Infrastructure
  • Browser Toolkits
  • XULRunner
  • Internet Explorer


Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo