Beyond Java

Update Aug 4, 2016

Recently, this article received a couple of harsh comments calling it "useless". So I should point out that I've published this article some time ago when Angular2 was still being developed. At the time, it wasn't even an alpha version. So expect an introductory-level article which may even be partially outdated. If so, please leave a comment so I can correct it. It's a popular article, so your comment is going to help a lot of developers. Thanks!

Update Oct 06, 2016

Currently, I'm evaluating a couple of tools that weren't available to me when I wrote the first version of the article: Webstorm, IntelliJ, angular-cli and ionic-cli. I'll cover them in an article soon, and update this blog entry subsequently. Until then, keep in mind that I wrote the article when Angular2 was still an alpha version, so don't be disappointed if parts of the article are outdated.

Live in the early days of AngularJS 2.0

Probably it's still a bit early to investigate AngularJS 2 thoroughly. The release date of AngularJS 2 is still open, documentation is scarce and I'm told many important APIs are still unfinished. But that's the fate of an early adopter. On the other hand, it's already possible to work with the current Alpha versions, and if I'm not mistaken the fundamental decisions of what AngularJS 2 is going to look like already have been made. So I thought by myself that the time is ripe to explore AngularJS 2. Along the way, I wrote a little chess program consisting of 1500 lines, give or take a few.

Cutting a long story short: AngularJS 2.0 is fun, even today. It's a big step forward.

Today's article is not so much about the architecture of AngularJS - BeyondJava.net is going to cover this soon - but concentrates on how to set up an efficient development environment. Coming from a Java developer team, I'll report many things JavaScript developers are already familiar with. Bear with me.

I need an IDE! Do I need an IDE?

First, let's set up our IDE. Actually, that's already a difference to what Java programmers are used to. There's no such thing as an IDE, Visual Studio and IntelliJ 15+ possibly being the exceptions. However, I didn't want to buy Visual Studio, so I can say little about it. IntelliJ 15 wasn't available when I started my chess project, so it wasn't in my scope, neither. Thing is, you don't need an IDE. Like JavaScript programmers, TypeScript developers are better off with separate and dedicated tools. The general idea of an IDE is to provide an unified environment to edit, run and debug your program. But in the case of TypeScript the runtime environment is the browser, which is always outside the IDE. Sometimes you encounter approaches to include the browser into the IDE, but usually it's a very shallow integration. Consider the browser integration in Eclipse: it's a nice tool to get started, but as soon as they start to work seriously, most developers switch to a native browser. Many developers have to test their programs with multiple browsers, anyways. Multi-browser support renders the idea of an IDE ("one tool to rule them all!") useless.

What about the debugger?

Modern browsers have a decent debugger. For many, many years the Firebug plugin of Firefox used to be the tool of choice, but recently Google Chrome has caught up, so I prefer it over Firebug. I'm told that the debugger of Internet Explorer 11 has also become very good. Actually, I use the debugger of IE11 every once in a while. It's not my tool of choice, basically because I don't want to learn yet another set of keyboard bindings, menu structures and so on. But even my short glimpses into the IE11 world and my even shorter glimpse into the realm of the new Edge browser make me believe both tools come with a powerful debugger. Chances are you have to test and - if things go wrong - debug with all three browsers, so that's good news.

Debugging in a foreign language

Actually, the debuggers are JavaScript debuggers. But you can use them with TypeScript using sourcemaps. These nifty tools translate possibly unreadable (think of minification!) JavaScript code to the human-readable source code. This worked in my chess project without further ado, so I'll leave the explanation at that. I couldn't explain it better than Ryan Seddon of HTML5Rocks.com, anyways. Suffice it to say that the debugger of Google Chrome 45 caches too aggressively: it won't update the TypeScript code it shows, no matter how often you've edited the TypeScript source code in the meantime. The only solution I found was to clear the cache manually, or to debug the application in incognito mode. Or to wait until Google fixes the bug they've added only a few versions ago.

Forget about browser extensions (for now)

There are also browser extensions like Batarang and ngInspector. However, the tools are not prepared for AngularJS 2.0, so you can ignore them for now.

So all we need is a compiler, an editor and a web server.

Let's install the TypeScript compiler!

As for the compiler, there's little choice: there's exactly one TypeScript compiler. You have to install node.js first. After that, you can use npm to install both TypeScript and AngularJS. If I'm not mistaken, it's a good idea to create the project folder first and install AngularJS in that folder:

There's a pretty good five-minutes-tutorial to AngularJS 2.0, leading you through the basic steps of the installation.

Running the compiler from the shell

Now, you've got two options. You can start the compiler from the command line, or you can use an advanced editor like Atom or Visual Studio Code to compile the code each time you save the TypeScript source code. The editors worked pretty good for me, but for the sake of completeness, this is how to run the compiler from the command line. Entering this command on a shell starts the compiler in "watch mode", i.e. it will monitor the TypeScript files in the current folder and recompile them when they change:

There is a catch: The compiler doesn't recognize when files are added. In this case, you have to stop it by hitting CTRL+C and to restart it again.

TypeScript editors with compiler integration

After that, I installed Visual Studio Code and the Atom editor. Both editors automatically compile when you save a file. For some reason, I abandoned Visual Studio Code in favor of Atom after a while. This is a pretty impressive editor with thousands of plugins you can add. The TypeScript editor is a plugin to Atom.

Atom comes with an installer, so installing Atom usually is pretty straightforward. There's also detailed description on the project web page.

After starting the editor, open the "preferences" dialog and choose "install". I've installed three plugins:

• atom-typescript, which is the typescript editor,
• atom-beautify, adding a nice source code formatter to the editor, and
• atomatigit, which integrates your Git repository with the editor.

That's all you need to get started with AngularJS and TypeScript.

TypeScript blues

TypeScript rocks! Yet still, I've got the TypeScript blues.

Let's start with the blue notes, because that's something that's going to improve soon (I guess). Let me unburden my heart to you, and after that, let's return to business. Thing is, the TypeScript plugin of the Atom editor is great, especially if you take into account it has initially been released merely 18 months ago (at the time of writing). The history of Eclipse and its predecessor, VisualAge, dates back to the 1980s. Which is to say: it's hard to beat the mature Java IDE of Eclipse.

There's that. I noted the lack of advanced tools painfully when I crossed the magical 1000 lines of code line. Before that, using the Atom editor with the TypeScript editor was an unspoiled fun experience. After that, I started to miss advanced features, such as the "call hierarchy" of Eclipse, or advanced refactorings, such as "extract method" or "inline variable".

But, as I said before, the Atom project is young, development is fast, so I should stop complaining because probably help is already on the way. In fact, I checked the bug tracker: the refactorings I miss most are currently being developed. Chances are they're going to hit the market in the near future.

TypeScript euphoria

I'm so glad I'm allowed to program AngularJS 2.0 not in JavaScript, but in TypeScript! The AngularJS development team emphasizes that it's possible to program AngularJS 2.0 in pure JavaScript. There even seem to be developers out there considering this a valid option. But, coming from a Java world, I wont recommend that. AngularJS uses annotations, which look fairly natural in TypeScript, but odd in JavaScript.

TypeScript knows annotations, classes and a decent scope system almost familiar to Java programmers. That makes for a very steep learning curve. You'll be productive in virtually no time. There's a caveat: TypeScript is fully compatible to JavaScript, which knows a couple of concepts Java developers are not familiar with. TypeScript makes it easy to enter the JavaScript world, but there's no such thing as a free lunch.

Types at last!

What makes TypeScript really rock is types. Types, in turn, allow for useful autocomplete suggestions of your editor. Which is exactly what make the Visual Studio Code experience and the Atom experience so pleasant. When I program JavaScript, the internet is my best friend because I have to look up so many things. With TypeScript, the Atom editor spares me many Internet lookups. Sometimes I wonder how I ever managed to program before the invention of the internet? How did I ever manage without StackOverflow.com?

Definitely typed

Now, there's an absolutely incredible project providing types to libraries that have been developed without types in mind. Definitely Typed is a repository consisting of more then 900 libraries written in or compiled to JavaScript. The repository provides TypeScript definition files for each of these 900 libraries. Thanks to these type definitions, your editor's autocomplete feature can offer useful suggestions for JavaScript libraries like - say - jQuery.

Optional typing and type inference

The target audience of AngularJS 2.0 is not limited to the enterprise Java developers, but it also includes JavaScript developers who've grown up with and accustomed to dynamic typing. TypeScript offers a decent compromise for both communities. Despite being a central topic of TypeScript, types are optional. If you don't like them, you can do without.

Almost. But I guess you won't mind the "almost" bit. It doesn't pose limits to your creativity. TypeScript is able to infer the desired type from the context. In fact, that's one of the core features of TypeScript.

TypeScript uses type inference to recognize the types you're using even if you don't mention them explicitly. That's a good compromise. Even the developers who can't stand static typing hardly ever change the type of a variable over time. What good is it to use a variable initially as a string, as an integer later and as an object at last? There are viable use cases, but they are rare. So in many cases you can guess the type of a variable when it's first assigned a value. By the way, that's precisely what the optimizing compiler of JavaScript does. Switching from one type to another is likely to catch a major performance penalty because it renders the JIT compiler's assumptions invalid, so don't do it.

Each TypeScript file is compiled individually

Most of the time, modifying a TypeScript file results in recompiling only this TypeScript file. In fact, I can't think of a situation where the modification of a TypeScript file forces the recompilation of more than one file. For some reason, the Atom TypeScript editor disagrees with me: every once in a while, it complained about a file being not compiled without telling me which one. Be that as it may, most of the time the compiler is super-fast because it has to compile one and only one file at a time. This, in turn, makes for a very fast turnaround cycle. There's no perceptible delay between editing, saving and debugging (apart from Chrome's annoying caching problem).

Update Nov 18, 2015

Recently, my TypeScript editor shows an annoying tendency to compile the entire project after a tiny change. So I can't keep up my claim that TypeScript compiles super-fast. I'm optimistic the error is on my side - probably a configuration gone wrong - but I can't say for sure. On the other hand, there's a static file server called live-server which solves the browser's caching problem.

Starting the program

AngularJS 2.0 is client-side technology. Which is to say: you can use any web server you want. It's not important whether you use an Apache httpd server, Tomcat, IIS or anything else. The only restriction is you do need a web server: you can run AngularJS from the file system.

When we'd installed npm at the begin of the article, we've also added the program "http-server" to our system. It does the trick, so I simply used it.

In case you want to try things yourself, here's how to get my chess program up and running:

Now you can open the URL 127.0.0.1/index.html in your browser and start playing. By the way, the chess engine is still buggy at the time of writing, so don't expect too much :).

Wrapping it up

Even now, developing with AngularJS 2.0 - immature as the current alpha version is - is fun. I recommend using the Atom editor. Currently things are developing so fast, my recommendation may be outdated by the time you read it. But even so, I'm sure Atom will remain a viable alternative. As for the other tools needed to set up your development environment, I recommend you to read the five-minutes-tutorial to AngularJS 2.0.