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

• jsLint
• jsCoverage

Notes: Learning Resources

• JavaScript – The Good Parts – Crockford
• Pro JavaScript – Resig
• js koans – like Ruby koans. Learn functional js.

Notes: Some other things to check out

• SproutCore Framework , GreenHouse – open source platform for building scalable rich HTML5/js apps
• Eich, JSConf 2010 Future of ECMAScript5/JS
• w3c – downloadable HTML validator.

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 page.
• NetBeans has a useful learning trail.
• NetBeans JavaScript overview.

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:

• #1: JSDT resources.
• #2 : Run First Project
• #3 : HTML5 limitations
• #4: Adding a 3rd party Library
• #5: Adding a 3rd Party Library Redux

And here are my posts regarding contributing to JSDT:

• #1: Build target
• #2 Checking out code
• #3 Bleeding Edge Build target
• #4: Launching the unit tests
• #5: Launching the Product

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 #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

• Some JSDT resources.
• Instructions for installation and creation of a simple HTML example using JSDT.

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:

• Canvas Example.
• Carsonified’s Essential HTML5 Resources.
• Canvas CheatSheet

Next: Adding a 3rd party Library

Using JSDT #2 : Run First Project

I’m documenting the steps I’ve taken in using the Eclipse JavaScript IDE to work with HTML5/CSS/JavaScript.  Today, I’ll step you through installation and running a very simple HTML project.

Previously

• I compiled some JSDT resources.

Installation

The Eclipse JavaScript tools are called JSDT (JavaScript Development Tools).  You can get them several ways.  They come as part of the Eclipse Web Tools Project (WTP).  If you are already running Eclipse, you could use Update manager to install the JavaScript plug-ins into your current Eclipse installation.  I decided to download the JSDT product to keep it simple and see how well it worked by itself.

• Unzip the download into a suitable location.  For simplicity, I unzipped into c:/jsdt.

Starting the product

• Navigate into c:/jsdt/eclipse and double-click eclipse.exe to start the product.

(I’m using Windows.  The process is different but close enough that a user smart enough to use a different OS can figure it out.)

• The first screen prompts you for a workspace.  I changed to default to c:/workspaces/html5.  Hit OK.

• You should then see the JavaScript IDE, with no projects, ready to go.

Create HTML project

Now we’ll create a very simple static HTML page.

• Select File – New – Static Web Project, and you should see this dialog:

• Name the project simple and hit Finish.

• Now select the simple project and right-click.  Select New – Html File:

• Name the html file simple.html:

• Hit finish.

• Double click on simple.html to open it in the editor.  Change the title to “Simple Title” and enter “Simple” into the body.  Save it.

Test it inside Eclipse

Now we’ll test Simple using  server and browser provided by Eclipse.

• Right Click simple.html and select Run As – Run on Server:

• This will bring up this dialog.  Accept the defaults and hit Finish.

• This will start a jetty server and open a browser view.  You should see the “Simple” page in the browser.

Next

The next entry will add some JavaScript and HTML5 functionality.

Using JSDT #1 : Resources

I’ve been doing some HTML5/CSS/Javascript programming lately.  I decided to take the JSDT (JavaScript Development Toolkit) for a test drive.

My plan is to document the steps I went through from installation through running some JavaScript from the IDE.

Today, I’m posting some of the more useful links I found when getting familiar with the project.

Download

The JSDT comes as part of Web Tools.  You could also use Update Manager to pull the JSDT plugins into an existing Eclipse.

I decided to download the JSDT product to see how well it worked by itself.

Resources for Users

• A dated but good DeveloperWorks article on JSDT:
• Some dated demo videos on the Eclipse site.
• The JSDT documentation (is also included in the product).
  • Explains how to set up an embedded project (HTML + Javascript)

Potential Problems?

While doing some research, I ran across several articles talking about the difficulty in getting the JSDT to integrate with 3rd party libraries.

• A blog entry detailing problems using 3rd party libraries:
• And a Dojo tech support forum:

I’ll find out more about this as I progress.

Resources for JSDT Developers

• The JSDT website
• Eclipse wiki page regarding developing JSDT

Next

Next I will step through the basics install JSDT, create and run an HTML page.