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.

Online IDEs: Links

Did a little research today on Online IDEs.  I’ve been thinking a bit how this would change the developer workflow– continuous integration, common build targets, continuous deployment,etc.  Still revising my thoughts.

Thought it useful to share links I’ve found interesting.  (And helpful to me later).  Will update as I find more.

General Articles:

• dz: Who needs an online IDE? by Zviki Cohen
• We don’t need an online IDE, S. Arbogast.  Discusses how we don’t need to port existing IDEs to the web.  We need to rethink workflow and collaboration.  Thoughtful.  Extends some thoughts I’ve been having.

Products:

• Eclipse e4 – Evangelism page.  Many useful links
• Kodingen.com – looks promising.
• CodeSlam
• devUnity.  Code Collaboration using Google Wave.  No useful info.  Been ‘coming soon’ for awhile.
• PHPAnywhere.net
• ECCO

Future of IDEs (Not Necessarily Web Based IDE)

• Code Bubbles.

Mozilla Skywriter (formerly Bespin), online JavaScript editor

• Skywriter Overview, lots of docs, links to developer resources
• Skywriter/Bespin trial.
• Video demo.
• Bespin article with interesting commentary from Bespin Product Mgr

Existing Products that aren’t really IDEs– just web based place to enter code and compile it.

• codepad
• py I/o

Hosting

• Google App Engine

Tip: Eclipse Slowness/Locking when “Installing Software”

This may fall into the category of something everyone else already knows and I discovered it today.

I had an experience today when trying to install the PDE Visualization component (Update site) into Eclipse 3.6.

P2 just stayed at 5% complete.  I waited.  Made a coffee.  Waited some more.  It never progressed in 15 minutes.

Thinking I had some odd combination of dependencies and P2 was choking on resolving them, I tried to install another component.  Same result.

Then I noticed the checkbox at the bottom: “Contact all update sites during install…”.   I tried to install with this unchecked, and it quickly told me that the PDE Visualization component required draw2d.  So i”Contact All” must be checked to pull dependencies from Eclipse update site.

Hmm, I wonder how many update sites it’s trying to contact?  So I clicked on “Available Update Sites” at the top of the page, and there were 50 or so sites.  Over 20 of them were checked.  Some I knew were unreachable because they were on my corporate network and I wasn’t connected.

So I cleaned up my list of update sites.  Removed those I didn’t need, and most importantly unchecked those that I didn’t want to connect to on a regular basis.  I had only 4 checked when I tried it again.  Fast install.  Problem Solved!

Why did I have so many?  I think its because when I migrated from Eclipse 3.5 to 3.6, I exported my update sites and re-imported them into Eclipse 3.6.

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 #5: Adding 3rd Party Library Redux

I’m documenting my experiences using the Eclipse JSDT.

My initial attempt to add a 3rd party library had mixed results.  My goal was to get some content assist working.  I was to add mooTools but not jQuery.  However, I also found my approach failed when I wanted to get the mooTools library loaded when running the app.

Previously

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

Don’t add Library to “JavaScript Resources”

Previously, I added the mootools library as a JavaScript Resource.  This resulted in knowledge of the mooTools library while I was coding.  I mistakenly assumed that I would be able to configure my project such that my html code would be able to load these libraries when running.  Maybe it’s possible, but I’ve yet to figure this out.

So, this does not work:

And when you try and run the example, you will notice either errors in your HTML debugging that states that the mootools libraries cannot be found, or the example will just not work properly.

My example

A side track for a second.

I’m running an example from the wrox Professional Java Script Frameworks book, a good introduction to Prototype, YUI, Ext JS, Dojo and MooTools.  The code samples can be downloaded here.  Unzip the mooTools zip file, and locate code/mootools/mootools-animation-ui.

The example contains ui.js and ui.html, and they use 2 mooTools libraries.

• mooTools-1.2.4-core.js
• mooTools more, which is a script that is built by selecting various components.  I chose all the options except the non-English options, and chose no compression to create a mootools-1.2.4.4-more.js.

Solution: Add to Web Context

So instead of adding the script as libraries in the JavaScript Resources, just copy them in to the Web Context, make sure that your html references them correctly.

Successful Run

Now when I run the ui.html example, I am able to see the nice graphical effects that mooTools provides:

But, another exception

I was rewarded with this NPE exception dialog when I dragged the mooTools libraries from my File Explorer into the Web Context.  Filed this bug.

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

• #1: JSDT resources.
• #2 : Run First Project
• #3 : HTML5 limitations

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 Library – User Library – Next – 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

• I set up the build target
• I checked out the code
• I updated to the latest debug plugins to resolve compilation issues.
• I launched the unit tests

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.