Plug-in from Everlaw makes Netbeans suitable for TypeScript

Typescript, Angular 2 and NetBeans IDE: An unbeatable trio

Karsten Sitterberg
TypeScript
Web site codes macro image via Shutterstock

Since Angular 2 has reached beta phase and the stability of its API should now be guaranteed, it is time to take a closer look at the framework. Thanks to a plug-in, it is now possible to use TypeScript in the NetBeans IDE.

Angular 2 supports various languages: Dart, TypeScript, ECMAScript 2015 and ES5 (therefore classic JavaScript). This article explores the implementation of Angular 2 with TypeScript since Angular 2 was developed based on TypeScript, which offers advantages  in development in relation to what classic JavaScript and ECMAScript2015/ES6 have to offer.

What’s new in Angular 2

A major change is the introduction of Components instead of Directives and Controllers.

Furthermore, the dirty-checking based digest-cycle of AngularJS has been replaced with a change detection algorithm which recognizes changes in the DOM tree in a single pass. This is essential for server-side rendering, which requires a stable model and therefore a point in time when all changes are processed.

This design even yields considerable advantages in speed, particularly when there are many synchronous components on the website. More on this topic will be illustrated throughout the course of this article.

NetBeans and TypeScript

TypeScript support was introduced in NetBeans by a community contribution: A company named Everlaw made their NetBeans plug-in available as an Open Source package. Since then, new versions are released continuously, as can be seen on the GitHub page of the releases.

image10

It makes sense to use a recent version of NetBeans, like NetBeans 8.1, for TypeScript development. When downloading NetBeans from here:

https://netbeans.org/downloads/, the complete edition (“All”) or the HTML5 Edition should be chosen. Subsequently, the Everlaw plug-in has to be downloaded as a NetBeans Module (NBM)-file from GitHub. (Link to the release page: https://github.com/Everlaw/nbts/releases)

The file is installed on the plug-in manager of NetBeans (ToolsPlugins, select the tab Downloaded and click Add Plugins to add the TypeScript-NBM, then click Install to install the package).

image13

image11

Required software

When developing with JavaScript, most of the tools are written in the language itself and executed with the help of Node.js. For handling libraries and modules, the node-package manager “npm” is used.

Installation of nodejs and npm on a Linux based system can usually be done via the package manager of choice. During this procedure, “curl” can also be installed, if it is not already there. On Ubuntu, the procedure looks like this:

sudo apt-get install nodejs npm curl

Setting up NetBeans is straightforward: Go to the NetBeans settings (ToolsOptions), choose “HTML5/JS” and click the search button for the “Node Path” as well as for the “npm Path”. In order for the NetBeans-Node.js support to operate normally, the Node.js sources have to be downloaded. Use the “Download” button in the Node.js section to do this.

image07

Setting up an Angular 2 project in NetBeans

The setup does not different from other projects done in NetBeans, so click “New Project” first. Select “HTML5/JavaScript” from the categories and “HTML5/JS-Application” as project type.

image12

After hitting the “next” button, the project name and location folder can be specified. In an optional further step, templates can be added to the project. This step is left out here for simplicity reasons. In the last step, choose “Next” instead of “Finish” to let NetBeans generate the following configuration file:

  • package.json (bower.json, if bower is used instead of NPM)

Analogous to the Angular 2 tutorial on angular.io, NPM will be used in this example to manage dependencies.

After setting up the project in NetBeans, the Angular 2 dependencies are configured in package.json:

{
	"name": "2016-01-angular2-simple",
	"version": "1.0.0",
	"keywords": ["util", "functional", "server", "client", "browser"],
	"author": "Karsten Sitterberg",
	"scripts": {
    	"tsc": "tsc",
    	"tsc:w": "tsc -w",
    	"lite": "lite-server",
    	"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
	},
	"dependencies": {
    	"angular2": "2.0.0-beta.2",
    	"systemjs": "0.19.6",
    	"es6-shim": "^0.33.3",
    	"reflect-metadata": "0.1.2",
    	"rxjs": "5.0.0-beta.0",
    	"zone.js": "0.5.10"
	},
	"devDependencies": {
    	"concurrently": "^1.0.0",
    	"lite-server": "^1.3.1",
    	"typescript": "^1.7.3"
	}
}

The individual components are:

Screen Shot 2016-04-08 at 3.02.49 PM

These dependencies can be installed directly from NetBeans – assuming you have internet connection. The installation is triggered by right-clicking the project and choosing “npm install”.

For the project to be carried out in a browser, NetBeans has to be told which browser to use. This is done in NetBeans’ upper symbol bar. When clicking the browser symbol, a menu will pop up. From this menu, Chromium can be selected.

image08

Initializing the TypeScript compiler

To facilitate the transpilation from TypeScript to ES5, a JSON configuration file named tsconfig.json is needed. It should be located in the site root, just like the package.json file. It makes sense to configure the NetBeans project to put the project root in the same location as the site root. This is done by right-clicking the project and choosing “Properties”. In the properties menu, the entry for the site root is set to an empty value, as shown in the picture.

image01

Within the property menu’s category “JavaScript Frameworks” → “Typescript”, the option “Compile on Save” should be enabled. This option triggers a transpilation to JavaScript after each saving process.

image00

An example of the tsconfig.json file:

{
  "compilerOptions": {
	"target": "ES5",
	"module": "system",
	"moduleResolution": "node",
	"sourceMap": true,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"removeComments": false,
	"noImplicitAny": false
  },
  "exclude": [
	"node_modules"
  ]
}

The options mean:

Screen Shot 2016-04-08 at 3.09.00 PM

Angular 2 basics

Angular 2 is used to create performant HTML5/JavaScript applications. It is built on top of different JavaScript libraries, like RxJS or zone.js and provides a new abstraction layer for building custom components (@Component) and services (@Injectable). In Angular 2, services represent the logic, while the application itself is managed via its components.

For developers, Angular 2 provides high flexibility regarding the technology used; applications can be implemented in TypeScript, Dart or native JavaScript (ES5 and also ES6). In this article, the TypeScript variant is adopted to show the functionality of NetBeans in conjunction with the Everlaw/nbts-TypeScript plugin.

A basic Angular 2 application is shipped like any plain HTML page. This page contains the call to Angular 2 with the compiling and rendering of the root component and thus start the whole application.

Sample project

In this example, a simple Angular 2 component is created. The application will be a component which can show the name inputted to a corresponding input-field. An additional Button will be able to toggle between activating and deactivating the name-output.

When filling in the input box, the directive is showing the reactive behavior of Angular 2: for each letter typed into the input-box, the output line above is immediately updated.

image03

image04

By clicking the button, the output line can be faded in or out. However, the state of the input-box is still connected to the state of the application, so another click to the toggle-button will reveal the name (and changes which may have happened to the input-box).

image02

Structure

projectRoot/- index.html
		- package.json
		- tsconfig.json
		- app/
			- boot.ts
			- simple.component.ts
		- node_modules/

Besides the node_modules, as generated by “npm install”, the project contains the app folder. All application logic will be contained in this folder. The file “boot.ts” contains the instructions necessary for bootstrapping the application. Inside “simple.component.ts”, the actual component is stored. The main purpose of the file “index.html” is to tell the browser which node_modules it has to load and how it has to configure the JavaScript environment. Also, the app is started within this file by placing the root component in the HTML-body. It may happen that NetBeans will not recognize the custom component within the HTML document. Due to NetBeans’ strict HTML validator, warnings or error messages for the opening tag of the component will be the result. These can then be ignored.

index.html:

<html>
   <head>
    	<title>Simple Angular 2 App</title>

      <!-- 1. Load libraries -->
      <script src="node_modules/es6-shim/es6-shim.js"></script>
      <script src="node_modules/angular2/bundles/angular2-polyfills.js">
</script>
      <script src="node_modules/systemjs/dist/system.src.js"></script>
      <script src="node_modules/rxjs/bundles/Rx.js"></script>
      <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

      <!-- 2. Configure SystemJS -->
      <script>
         System.config({
            packages: {
               app: {
                  format: 'register',
                  defaultExtension: 'js'
               }
    	      }
         });
         System.import('app/boot').then(null, console.error.bind(console));
      </script>
      </head>

      <!-- 3. Display the application -->
      <body>
            <simple-component>Loading...</simple-component>
      </body>
</html>

To load the application, the corresponding script file has to be imported into the HTML file and subsequently the bootstrap function has to be called with the root component as argument. The root component also has to be imported into the HTML document.

boot.ts:

import {bootstrap}	from 'angular2/platform/browser'
import {SimpleComponent} from './simple.component'

bootstrap(SimpleComponent);

In TypeScript, components are represented by classes, whereas the component’s logic is represented by properties and methods of the class. But not every class is connected to a component, as for example services are represented by classes as well. To tell Angular that one particular class is connected to a component, the @Component annotation is used. Configuration of the component – like setting the selector to use in the HTML document – is done with this annotation. Furthermore, the template for the component is specified in the annotation. The term ‘template’ refers to the output – the “View” – of the app. Inside the template, normal HTML elements like “<h1>”, the usual Angular 2 property- and event-bindings (e.g. [hidden], (click)) as well as every custom component can be used.

simple.component.ts:

import {Component} from "angular2/core"

@Component({
	selector: "simple-component",
	template: `

&lt;h1&gt;Hallo Angular 2!&lt;/h1&gt;


&lt;div&gt;
        	&lt;label [hidden]="!isCalling"&gt;Ich bin {{name}}.&lt;/label&gt;

&lt;div&gt;
            	&lt;input [(ngModel)]="name" /&gt;
            	&lt;button (click)="toggleCalling()"&gt;toggle Calling&lt;/button&gt;

&lt;div&gt;
    	&lt;/div&gt;

    	`
})
export class SimpleComponent {
	private name = "da";
	private isCalling = true;

	private toggleCalling() {
    	this.isCalling = !this.isCalling;
	}
}

In our example, the hidden-property of the label is switched with the property “isCalling”. Therefore, the label is faded in or out based on the state of “isCalling”. Clicking the button will change the state of “isCalling”, because the toggleCalling() callback is bound to the onclick event of the button. The “name” property is two-way bound to the value of the input-element. Due to Angular’s interpolation syntax, the actual value of “name” will be shown inside the label at runtime.

Helpful features

Developers need good support from the IDE for effective application development. When developing TypeScript applications, NetBeans provides this support – in combination with the Everlaw plugin – for example by offering syntax highlighting, usages highlighting, error highlighting and code completion. As an example for usages highlighting, every occurrence of the property “isCalling” is highlighted. In the upper part of the image, two errors are shown. The first is due to NetBeans recognizing that nothing named “Componen” can be found under the path “angular2/core” (it has to be “Component”). Because of the wrong import statement, the @Component annotation is unknown to NetBeans and therefore the second error is shown.

image06

Code completion is triggered as usual in NetBeans (“Crtl+Space”).

image09

Unique to the TypeScript support is the transpilation of the TypeScript files into ES5 JavaScript files, which happens automatically when saving the file. If all files should be transpiled at once, this can be accomplished by triggering the corresponding npm-script. In NetBeans, right clicking the project and choosing the script will do the trick (here, “tsc” has to be called).

image05

Because the plugin is in an early development phase, small glitches may happen at times. For example, some error markers may not be be deleted from time to time, even though the error has been fixed. These glitch can mostly be fixed by restarting NetBeans.

Conclusion and outlook

Thanks to the TypeScript plugin, NetBeans and its existing infrastructure is well suited as an integrated tool for development of Angular 2 frontend applications.

Angular 2 itself can already be used reliably. If a larger application is planned, Angular 2 and Typescript may be used. Additionally, one should acquaint oneself with the relevant architectural concepts, e.g. via a training.

Basic features like syntax highlighting or code completion are available, as well as automatic transpilation from TypeScript to JavaScript. As development of the plugin continues, the remaining glitches will sure enough be covered in later versions of the plugin. Readers are invited to take part in advancing the plugin, for example by adding pull requests on GitHub.

Other aspects of Angular 2 development and more complex examples will be covered in future articles.

Author
Karsten Sitterberg

Karsten Sitterberg

All Posts by Karsten Sitterberg

Karsten Sitterberg is a freelance developer, trainer and consultant for Java and web technologies. Karsten has a masters degree in physics and is an Oracle certified Java developer. Since 2012 he works with trion.

Comments
comments powered by Disqus