I wanted to get started with Javascript and AngularJS, a framework for creating frontend for apps – e.g. human user interfaces. Reason: software is eating the world, but Javascript is eating all software.
I don’t like the messy javascript approach of downloading js files storing them manually in your project-dir, or worse, copy&pasting snippets. I’m used to programming Java, with using Maven to manage my Java-dependencies, and using brew (Mac) or apt-get (Ubuntu) to manage platform-specific dependencies. In this posting all write down my experiences on starting with Javascript-development, with practical use of package managers.

Package management in Javascript

AngularJS as well as lots of other Javascript-frameworks, including well-known ones as jquery, can be installed via a package manager, bower. Bower is a simple and light-weight package manager for the web .
The first challenge I had, how do I install bower? The website of bower mentions npm, a package manager combined with NodeJS.
NodeJS is a Javascript-engine, the same engine as that is used in Chrome. npm is the package manager that’s installed with it. Npm and bower have overlapping functionality but they’re different enough to use both: npm main purpose is installing server-side javascript-components, to be used with NodeJS. Bower’s purpose is installing client-side javascript-components to be used in a web-browser (more information at Stackoverflow).

First the platform specific package management

Then, how do I install node? Of course I want to use a package manager, but since node is compiled per platform (it can’t be turtles all the way down) we have to use the package manager per platform. If you’re using Linux you most likely will be familier with Yum (Redhat, CentOS) or the apt-get (Debian, Ubuntu) . Typing:
[sourcecode language="bash"]
sudo yum install node
[/sourcecode]
or
[sourcecode language="bash"]
sudo apt-get install node
[/sourcecode]
is enough to install node.
Note: I’ve added sudo to every command because you’ll need root/admin rights to install the application.
I’m currently using a mac, and then the best package manager to use is Homebrew. It’s not installed by default, but if you go the Homebrew website you’ll have the tool up and running quickly.
After that I can install node via:
[sourcecode language="bash"]
brew install node
[/sourcecode]
I don’t use sudo: brew only stores files in /usr/local and I’ve set that directory to be writeable for admin-users. If you think that’s a security risk, you shouldn’t use brew at all.
If you’re a Windows use, you can use nu-get to install nodejs, but I don’t have experience with that tool yet.
If you don’t want to use any package-manager, then install node the more traditional way by downloading the installation package from the Node.js website.

Package management with Bower

Now node is installed I can use npm to install bower:
[sourcecode language="sh"]
npm install bower
[/sourcecode]
With have bower installed, I can fetch angularjs.
First I’ll create a directory where my application can reside, then I’ll use bower to add angular to my application.
[sourcecode language="bash"]
mkdir workspace/MyNewapp
bower init
bower install angular
[/sourcecode]
The angular library is now available in the directory I’ve just created. The angular.js file can be included just as you’d normally include js files.
[sourcecode language="html"]
<head>
<script src="components/angular/angular.js"></script>
</head>
[/sourcecode]
The components contains all the js files used by the applications. If you delete the directory, executing bower install will reconstruct the whole directory based on the bower.json file, so that’s the only file that we need to check to get our libraries.
Instead of including the js-files by manually adding the script src statements, you can also frameworks such as require to require.js to dynamically load javascript files, but that’s beyond the scope of this article.

Part of the build

Javascript will not have eaten all my software yet. Quite a few applications will have backend written as a Java webaplication (.war), build using Maven, with the frontend being Javascript. Here bower can bower help to keep the project maintainable: rather then checking in the javascript-libraries into the src/main/webapp directory, the bower build file bower.json could be checked into source control. Using the exec-maven-plugin you can easily execute bower as part of your regular Maven-build. This way there’s no need to check Javascript-files in subversion, git or any other version-control-system!
[sourcecode language="xml"]
…
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<executions>
<execution>
<phase>generate-sources</phase>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
<configuration>
<executable>bower</executable>
<arguments>
<argument>install</argument>
</arguments>
<workingDirectory>${basedir}/src/main/webapp</workingDirectory>
</configuration>
</plugin>
…
[/sourcecode]

A Javascript build framework: Yeoman

No code is complete, without automatic tests and/or validation. In Maven that’s just a step in the build-process. Furthermore, although Javascript is an interpreted language and therefor now compile-step is needed, you still might want to do some post-processing of your javascript application. This could be possible in Maven, but using a Javascript-build-framework (which you could trigger from Maven just as well) might be more versatile. Yeoman seems a good start. Given the feature-set, Yeoman and Javascript-build-tools in general are worth a whole new post so I won’t dive into that further.

An IDE

Now I want to code in a IDE as good as Eclipse. I’d certainly want code-completion, and automatic checks of my source-code on types, synax and similar errors. Based on experience and hear-say, IntelliJ is very good Javascript support. Also Sublime is a good editor. Eclipse can be used to even, using various plugins. I have not enough experience with any of those IDEs to be able to recommend anything yet.

Conclusion

As a Java-developer and Maven-user I’m used to using package managers to automatically download libraries. With the current state of Javascript, this way of working is still possible when developing Javascript-web-application. So the increasing popularity of Javascript is not as bad as it seems.
The complete project I’ve created while writing this posting is available at my public github-account.

Maven-user starting with package-management in Javascript