Adam Adam - 2 months ago 28
AngularJS Question

Creating a full stack Java WS, Angular.JS, TDD/BDD, maven Eclipse project

Got a few issues setting up a project to do the full Java, Angular.js, TDD/BDD stack. So far these issues aren't a blocker, but they might turn into one.

I'm using Eclipse 4.6.0 Neon with the WTP, JSDT and Angular plugins.

The 2 red flags that I see waving at the moment are:


  • in the "Javascript Resources" folder, Eclipse is showing an "ECMA 3 browser support library". This should be ECMAscript 5 surely? (If not 6!) Since Neon just came out, it's a bit of surprise that I can't even change it as I can change the Java version for instance in the project facets dialog.

  • the HTML and CSS files are buried in src/main/webapp. I shouldn't have to do 3 clicks to get to them, they should be as easy to click to as the Java or JS files. How come there's no "Web Resources" to match the "Java Resources" and "Javascript Resources" in my project in the Project Explorer view?



Like I said at this point neither of these /seem/ to matter but I'd hate to waste loads of time on a problem in the future and find out I should have set up my project differently. I'm also quite happy to hear that this is impossible and I should split the technologies out into separate projects, like one for just web services and one for JS. To follow that train of thought to its conclusion, I'm also happy to hear that I should ditch Eclipse and go back to the command line.

Update 2016-08-01
The Eclipse project went into a nose-dive, locked into some never-ending process which I couldn't stop and couldn't identify after I created a bower.json project file.

I will separate the Java and JS into separate projects and take it from there. There is no need to keep them together except the benefit of having only one deployable artifact not 2, and right now that doesn't seem like such a big deal.

Answer

I found it easier to set up the Javascript / Angular.js, HTML and CSS in a separate project in Eclipse because the Eclipse project config probably went up the creek as I continually bashed away at it.

This means there have to be 2 deployable artifacts but at this point that's acceptable. When it comes to production and definitely if it becomes easier as the Eclipse JS tooling matures, I will recombine then into one project.

All the google top-ranking JS / Angular HOWTOs out there on the net assume no java or maven at all will come into it, but I have a variety of use-cases where I want the HTML in JSP files rather than as static files, so I created a project as Javascript, Java and Maven.

Also, there is an awesome looking Maven plugin frontend-maven-plugin

  <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.0</version>
  </plugin>

which is, quote:

Maven-node-grunt-gulp-npm-node-plugin to end all maven-node-grunt-gulp-npm-plugins.

So this will take care of the continuous integration of browserify and grunt or gulp tasks.

It's easy to split out the HTML and CSS resources and put them into the WebContent directory that is automatically created for an Eclipse Dynamic Web Module. That makes them reachable with one click of the mouse in the folder tree (compared to 3 clicks in src/main/webapp).

In fact using the maven-war-plugin it is simple enough to tell Eclipse where to assemble the various parts from:

  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.6</version>
    <configuration>
      <failOnMissingWebXml>false</failOnMissingWebXml>
      <warSourceDirectory>${project.basedir}/WebContent</warSourceDirectory>
      <webResources>
        <webResource>
          <directory>${project.basedir}/src/main/javascript</directory>
        </webResource>
      </webResources>
    </configuration>
  </plugin>

To bring in ECMAScript 5 or 6 support, I installed the Tern Eclipse plugin which doesn't quite take over the project configuration since Eclipse still shows the ECMA 3 Browser library in its properties dialog, but it provides code completion and validation.

Apparently this whole thing is easier with IntelliJ but hopefully this was the last big session on the Eclipse project config that I'll need to do for a while, so I won't be going there just yet. No idea about Netbeans.

Update 2016-09-23:

I now have all my javascript in /src/main/webapp/javascript/.

This goes against my original desire to separate out the Javascript from the HTML, CSS and images. Even if separate in the dev environment, I can easily package and deploy them together at build time.

However the Eclipse Angular plugin can't find my Angular code and flags up errors in the HTML unless the Javascript is in the same directory or subdirectory where the HTML is.

The default validations carried out by Eclipse are also not good. They check everything in node_modules and bower_components unless turned off or reconfigured with a filter to exclude those directories (there are over 25 separate validation configurations to do).

Also, the Javascript outline view breaks when it tries to scan in the code in 3rd party libraries like angular.min.js or d3.min.js - there is a release 4.6.1 due at the end of September this year 2016 with a fix for this.