Archive for the ‘jsdt’ Tag

JavaScript Craftmanship MeetUp

Still on a search to understand the state of HTML5/CCS/JavaScript tooling.

I attended a presentation by Justin Searls called “JavaScript Craftsmanship”.  It was hosted by the Columbus Polyglot Programmers Group.  There were 30+ js developers there.  Justin gave a great presentation on how JavaScript work is perceived, why JavaScript craftsmanship is in such a poor state.  He then dove in with some useful info on Jasmine unit testing and a Jasmine plugin for maven that Justin wrote.  The maven/jasmine project is here.  And he’s created a nice archetype project that creates a little test js project with Jasmine unit tests here.  It’s great to get something up and running in a few minutes.

We ended with engaged group discussion regarding issues js work faces: including language quirks, project management focus on server-side quality, and the 20 different ways to create a class.

There was a little talk of tools.  Or lack of tools.  One person had tried NetBeans, one person mentioned js-Eclipse as working nicely, 2 mentioned Aptana, the rest are using text editors of various kinds.  As someone who transitioned from finding IDEs an interference to relying on them as a productivity tool, I am still amazed that js tooling is so immature in 2010 that a text editor is the most efficient way to develop.  It was interesting that most use TDD in their daily work, but few use TDD specifically in their js work.

As HTML5/CSS/Javascript continues to take off, and as people expect rich apps in their browser and their mobile devices, the focus on js will change.  And tooling will improve.

Notes: Unit Test Framework

Selenium – record and playback tool.  Standard problems with record and playback– time spent re-recording/updating tests.

Many abandoned js unit test frameworks out there.  jsUnit is used by many but is not actively developed.  The 3 active ones are

  • jasmine – Justin’s preferred.  Runs on HTMLUnit.  Behavior Driven Development.
  • jsTestRunner – runs on real browsers, has IDE plugins including Eclipse plugin, cumbersome setup
  • qunit (jquery project)

Notes: Craftsmanship tools people find useful

Notes: Learning Resources

Notes: Some other things to check out

Advertisements

JSDT versus NetBeans

I’m spent a solid month evaluating JSDT.  The motivation for the investigation was to familiarize myself with Java Script as well as the state of the Java Script tools.  I also have some interest in building a product in the Java Script space.  Being a long-time Eclipse developer, I started with the JSDT.

Overall, the JSDT evaluation has been disappointing.  I may blog in detail about this at a later time.   Hopefully the next version will be more stable and useful.  There are links at the bottom pointing to the JSDT posts.

Some Java Script developers mentioned they had some success with NetBeans, so I decided to give NetBeans the same trial.

NetBeans: Resources

Download and Install

It wasn’t clear to me from the download page which NetBeans flavor I should download.  So I installed the ‘All’ flavor, chewing up nearly 1Gig of my hard drive!  That had everything I needed and much more.

Developing with Third Party Library

My use case for JSDT was 1. create a HTML/js project, 2. edit code, 3. leverage a third party library, 4. run the application.

NetBeans has a tutorial which does exactly that.  I followed this tutorial and had success with my use case.  No failures.  No exceptions.  No workarounds.  It just worked.  I won’t reproduce the steps of that tutorial here.  If you’re interested, try it out.  I’ll show some of the results.

Content Assist

NetBeans has knowledge of standard third party js libraries.  When I tried to use a jQuery function (after adding jQuery to my project), I get some useful content assist:

Very nice.  The Content Assist provided several useful things.

  • I showed the syntax of the method
  • Who is providing the method,
  • Which browsers I was targeting.
  • It told me which browsers this function does not work in.  (Which is why I think the method was crossed out in the CA window)
  • It included clear well-written documentation with detailed explanation and code example.

Running the Project

I right-clicked on the sample html, selected View, and the app ran in my FireFox browser.

Limitations

HTML5. Like JSDT, NetBeans doesn’t yet support HTML5.  This bug tracks it and states its slated for 6.10 (next) release in January 2011.

Java Script doesn’t seem to be a primary language of the IDE.  I had to dig deep into the menus– usually under some Other… option– to find Java Script tools.

Summary

I didn’t delve into more detailed use cases, such as debugging.  I may do that at a future time.

The use case I struggled to get running with the Helios version of JSDT worked right out of the box with NetBeans.  At some point, I would like to take myEclipse and Zend Studio— two commercial products– for a spin.

If my job was that of a JavaScript developer, I would take a long look at how NetBeans could make me more productive.

Links

Here are my blog posts related to my experiences using the JSDT:

And here are my posts regarding contributing to JSDT:

JSDT: HTML5 Support in Helios SR1

Read today that JSDT will have preliminary HTML5 support in WTP version 3.2.2 (Helios  SR1).  This will be released at the end of September 2010.

Very good news for JSDT users.

This addresses bug 292415

Using JSDT #4 : Adding Third Party Library

I’m documenting my experiences using the Eclipse JSDT.

In this post I will add a 3rd party library.  I will describe a success (mooTools) and a failure (jQuery).

Update: There is improved information in this post: Adding Third Party Library Redux.

Previously

Adding mooTools Library

MooTools is one JavaScript library I’ve been playing with lately.

First download the uncompressed version (mooTools-1.2.4-core-nc.js) and save it somewhere.

Now in Preferences, add the library. Make sure after adding the library, you also add the mooTools .js file you previously downloaded.  It should look like this:

MooTools Content Assist

Now create a Static Web Project.

  • Expand the project in Project Explorer and right click on JavaScript Resources and select Properties.
  • From this dialog, you can add MooTools.
  • Add JavaScript LibraryUser LibraryNext – Select moo Library you already added.  Finish.

You should see this in Explorer:

Content Assist

Now create a JavaScript file in your project and try some Content Assist.
Ah it can see the Cookie constructor!
And variables and functions that start with $:
And members:

MooTools Problems

I should mention that I could not get this to work in a workspace I had been working in for awhile.  In fact I spent many hours trying to get it to work and finally determined the workspace I was working had been corrupted somehow.  From the .log, I had experienced several crashes, some related to AST parsing, in that workspace.  And no amount of removing user libraries and creating fresh projects would allow me to see MooTools Content Assist.

Supposedly, if your 3rd party library uses jsDoc, the editor functionality is more robust.  MooTools does not seem to document with jsDoc.

jQuery Failure

Update: I’ve added bug 324416 for this problem.
I followed the same steps to add jQuery (1.4.2 uncompressed from the download page) as a user library. However, after adding it and opening it in Explorer, it seems that parsing has failed.  The AST is confused.
According to Explorer, it seems to know about the jQuery variable though.  But when I try to get some CA for jQuery, even though the jQuery variable is listed, I get none.  Same for _load, add, etc.  Nada.


Dojo? Prototype? YUI?

I’m wondering what experiences others have had adding 3rd party libraries or their own libraries.

Next: Adding Third Party Library Redux

Contributing to JSDT #5: Launching the Product

I’ll continue my instructions regarding how to set up JSDT development infrastructure.

Previously

Now run the product

When I work on Eclipse products, we typically provide a default launch config per product.  Although the nightly build is the ultimate authority of what encompasses the product, these version-controlled launch files provide a good point of comparison developer to developer.

I could not find a public JSDT .launch file under CVS control.

So I looked at the installed JSDT product to create my own.  It’s here if you would like to download it.

Just drop it into an active project in your Eclipse workspace, refresh the project, open ‘Run Configurations” and you should see a “jsdt” run config.

You may want to tweak it a bit and verify that the set of selected plugins is correct.

Then hit Run to see the JSDT.

Disclaimer: I’m not on the JSDT team, so this may not be exactly how they do it. But it’s what I’ve done to get it working.

Contributing to JSDT #4 : Launching the unit tests

I’ll continue my instructions regarding how to set up JSDT development infrastructure.

Previously

Run the unit tests

Now I want to verify that the unit tests for JSDT pass.  (TDD — we should launch the tests before the product, right?)

Nitin Dahyabhai, the JSDT lead, pointed out that the first project above, contains a launch config to run all of the JSDT unit tests.

I will need to check out these additional projects from the webtools CVS repository.

  • org.eclipse.jsdt/development/org.eclipse.wst.jsdt.unittests
  • sourceediting/tests/org.eclipse.wst.jsdt.web.core.tests
  • sourceediting/tests/org.eclipse.wst.jsdt.web.ui.tests


The checked in launch config makes running easy.  Open Run Configurations – select JSDT Tests.  Hit Run.  They all pass, so I see green:

Next: Launching the Product

Disclaimer: I’m not on the JSDT team, so this may not be exactly how they do it. But it’s what I’ve done to get it working.

Contributing to JSDT #3 : Build Targets on the bleeding edge

I’ve been documenting how to use JSDT to do some HTML5/CSS/JavaScript development. In order to poke around the JSDT code to understand it better, I spent a bit of time figuring out how to get things checked out, built and running. The instructions on the JSDT site a re a bit sparse, so I thought I would document what I did.

I’m not on the JSDT team, so this may not be exactly how they do it. But it works for me.

Previously

My code no longer compiles!

This morning, I updated all the code I previously checked out.  And now my rhino.ui project has a compilation error in RhinoTabGroup:

After a little investigation, I determined that RhinoTabGroup is using a new 3.7 method in AbstractLaunchConfigurationTab.  It has just been introduced.  I’m building against Eclipse 3.6, so don’t have this method.

So if I want to keep my JSDT source code in sync with the latest, I’ll have to also keep up with any dependencies.

One idea to resolve this would be to download the latest milestone builds and put them in my build target.  However, this change is very recent and is not in a milestone build yet.

Another idea is to check out the latest o.e.debug.ui project and any dependency projects (hopefully not too many).

Check out more projects

To add the eclipse CVS repo, copy this into the CVS Repositories View:

:pserver:anonymous@dev.eclipse.org:/cvsroot/eclipse

And check out org.eclipse.debug.ui and org.eclipse.debug.core projects

And the compilation issue is resolved.

Going Forward

Going forward, my build target and workspace projects will change often.  I’ll need to actively modify these to keep things rolling along.  I’ll be doing a combination of:

  1. Including other Eclipse projects in my workspace, on an as-needed basis.  I’ll start getting a good sense of what these projects are as things break.
  2. Change my build target to move up to Milestone builds.

Next: Launching the JSDT Unit Tests

Contributing to JSDT #2: Checking out the Code

I’ve been experimenting with the JSDT to try some HTML5/CSS/JavaScript development.  In order to poke around the JSDT code to understand it better, I spent a bit of time figuring out how to get things checked out, built and running. The instructions on the JSDT site are a bit sparse, so I thought I would document what I did.

I’m not on the JSDT team, so this may not be exactly how they do it. But it works for me.

Previously

Adding the CVS Repositories:

Now we’ll add the 2 CVS repositories required to check out the JSDT code.

  • Switch to CVS Repository perspective.
  • Paste the following lines of text into the CVS Repositories View to add web tools and tools as known repository locations.

:pserver:anonymous@dev.eclipse.org:/cvsroot/webtools

:pserver:anonymous@dev.eclipse.org:/cvsroot/tools


Import the projects using a Project Team Set:

The JSDT project provides a project set file, which can be useful for checking out a set of related projects.  Download this to your file system.

In the Java Perspective, right-click in the Package Explorer and choose Import… – Team Project Set

Select Next, Choose the file you previously downloaded.

You will be prompted to reconcile the repos designated in the Team Project Set file and those in your workspace:

Hit OK.  The projects should be imported into your workspace and built.

Missing Projects:

If your projects don’t all compile, you may be missing a project or two.

Currently, the Project Team Set file is missing the debug.rhino.ui and debug.transport projects.  A bug has been fixed and I’m assuming the new project set file should roll out to the web-site in a few days.

You can check out these projects by browsing the webtools CVS repo from the CVS perspective:

Go to webtools / HEAD / org.eclipse.jsdt / plugins.

Right click on the project you want to check out and select ‘Checkout

Project List

With everything compiling and launching, I have the following projects in my workspace (as of 8/30/2010):

org.eclipse.wst.jsdt.core
org.eclipse.wst.jsdt.core.tests.compiler
org.eclipse.wst.jsdt.core.tests.model
org.eclipse.wst.jsdt.debug.core
org.eclipse.wst.jsdt.debug.core.tests
org.eclipse.wst.jsdt.debug.crossfire
org.eclipse.wst.jsdt.debug.rhino
org.eclipse.wst.jsdt.debug.rhino.debugger
org.eclipse.wst.jsdt.debug.rhino.tests
org.eclipse.wst.jsdt.debug.rhino.ui
org.eclipse.wst.jsdt.debug.transport
org.eclipse.wst.jsdt.debug.ui
org.eclipse.wst.jsdt.doc
org.eclipse.wst.jsdt.feature
org.eclipse.wst.jsdt.manipulation
org.eclipse.wst.jsdt.support.firefox
org.eclipse.wst.jsdt.support.ie
org.eclipse.wst.jsdt.ui
org.eclipse.wst.jsdt.ui.tests
org.eclipse.wst.jsdt.web.core
org.eclipse.wst.jsdt.web.support.jsp
org.eclipse.wst.jsdt.web.ui
org.eclipse.wst.jsdt_sdk.feature
org.eclipse.wst.jsdt_tests.feature
org.mozilla.javascript
releng.jsdt

Notes:

Updated: In the CVS repo some of the projects seem to live in both webtools/HEAD/org.eclipse.jsdt/<project> AND webtools/HEAD/<project>.  From some help on the forum,  I’ve found out these are one and the same.

Next: Build Targets on the Bleeding Edge

Contributing to JSDT #1: Setting up Build Target

I’ve been experimenting with the JSDT to try some HTML5/CSS/JavaScript development.  In order to poke around the JSDT code to understand it better, I spent a bit of time figuring out how to get things checked out, built and running. The instructions on the JSDT site are a bit sparse, so I thought I would document what I did.

I’m not on the JSDT team, so this may not be exactly how they do it. But it works for me.

Downloading Dependencies:

First you will need to set up your PDE Target.

The WTP Downloads page is where to start.

Download the following:

I unzipped these into individual folders, someplace where you keep pristine PDE targets separate from your daily running Eclipse. For example, I unzipped GEF into c:/code/buildTargets/GEF3.6.

Setting up the Target

Now, we’ll combine all these into a single PDE Build Target.

  • Under Preferences Plugin DevelopmentTarget Platform, select Add:

Select “Start with Nothing” , then Next.

In the Locations Tab, we will add each of the installed components from our buildTargets folder.    Select Add Directory Next – then Browse the location.

(Note: when selecting, choose the eclipse folder under each target.)

Do this for each of the 6 downloads above.

Then give your target a meaningful name such as JSDT_Target.

Then click Finish.

In the Preferences dialog, change the active build target to the new “JSDT_Target” and hit OK.

Now your JSDT code– which we have not yet imported–  will compile against the expected target platform.

Resources

  • Modular Mind has some great articles on PDE build targets.

Next: Checking out the code.

Using JSDT #3 : HTML5/JavaScript Workarounds

I’m documenting steps to use the Eclipse JavaScript IDE to work with HTML5/CSS/JavaScript.

Building on the previous post, this post will create a simple HTML5/JavaScript Canvas example using the Eclipse JSDT.  It will demonstrate some of the limitations I encountered using the JSDT for HTML5 and provide one workaround.

Update: Preliminary HTML5 support will be part of JSDT’s September 2010 release.

Previously

Using the HTML5 Canvas

We’ll use HTML5’s new drawing canvas.  If you want to learn more about HTML5 or Canvas, there are some links at the bottom of this page.

In this example, I’ve created a simple HTML5 page that draws 4 colored rectangles using JavaScript.

Create a new html file called canvas.html. with the following content:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas test</title>

    <!-- Pull in canvas support for IE -->
    <!--[if IE]><script src="excanvas.js"></script><![endif]-->

    <script type="text/javascript">
      window.onload = function() {
        var drawingCanvas = document.getElementById('canvas1');

        // Is element in the DOM and does browser support canvas
        if (drawingCanvas && drawingCanvas.getContext) {
          // Init drawing context
          var context = drawingCanvas.getContext('2d');

          // Create 4 squares
          context.fillStyle =   "#00FF00";  // Green
          context.fillRect(0,0,100,100);

          context.fillStyle = "#0000FF";    // Blue
          context.fillRect(0,100,100,100);

          context.fillStyle = "#FF0000";    // Red
          context.fillRect(100,0,100,100);

          context.fillStyle = "#FFFF00";    // Yellow
          context.fillRect(100,100,100,100);
        }
      }
    </script>
   </head>
 <body>
   <h1>HTML5 Canvas</h1>
   <canvas id="canvas1" width="200" height="200">
     <p>Your browser doesn't support canvas.</p>
   </canvas>
 </body>
</html>

JSDT’s HTML5 Limitations

The first thing I noticed is that JSDT is not HTML5 aware.

  • The editor has a warning marker in the gutter because the HTML5 canvas tag is unrecognized:

  • Hovering over pre-HTML JavaScript code, gets helpful (and slightly cryptic) API information.  However, try to hover over the newer drawingCanvas.getContext, and you don’t see any API info.

  • And the internal browser doesn’t support HTML5:
    • (To run inside the internal browser, Right Click canvas.html and select Run As – Run on Server)

Working around JSDT’s HTML5 Editor Limitations

I’m still trying to figure out the best way to get some nice HTML5 editor functionality (like hover help, content assist, etc), which is the primary reason I would use an IDE over a simple text editor.

Whatever I find out, I’ll post.  If anyone has experience with this, I’d love to hear about it.

Working around JSDT’s HTML5 Browser Limitations

It’s simple to work around the fact that JSDT’s internal browser does not support HTML5.  Simply switch to a different browser.

From in Eclipse, select Window – Web Browser – and then select either IE or the system browser.

In my case, the system browser is a recent version (3.6.8) of Firefox which has good HTML5 support.  I run it.  Success!

HTML5 Resources

There are many HTML5 resources available.  Here are a couple I used:

Next: Adding a 3rd party Library