TypeScript and ES6 import syntax

When I started using TypeScript for my Angular applications, I was confused about all the different ways with which you could import other modules.

import './polyfills.ts';
import { Component } from '@angular/core';
import HomeComponent from './pages/home/home-page.component';
import * as _ from 'lodash';
import assert = require('assert');

At first, I thought that as a programmer you could choose whether you wanted to use curly braces or not, but I quickly found out that that was not the case. It all depends on how the module that you are importing is structured.

I have created an overview of the different ways by which a module can be exported, together with their corresponding import syntax. Most of them are actually plain ECMAScript 2015 (ES6) module syntax that TypeScript uses as well.

Continue reading

Release NPM package with git-flow

Having an NPM package in an enterprise environment and wanting to release that package using the git-flow model? Then using the node-generate-release can be very helpful.
This blog shows how to execute an integrated git flow release from your NPM package, even if your master and develop branches are protected.

Install plugin

Let’s assume we have all changes in the develop branch and we would like to create a release with all the current changes in develop. With the git-flow release the result will be that all changes will be merged into master and a tag for the release version is created with correct version. Before we can finish the release the correct version in NPM package.json needs to be set. This can all be nicely done with node-generate-release plugin.

Continue reading

Events in Polymer

When playing around in Polymer, we encounter iron signals. Besides normal javascript events, this gives us a lot of options for dealing with events. Lets try it all out!

We can catch events using the on-event attribute:

This calls method push1:

Scroll down for the complete code listing. Or see it on github.

Another way to catch it is using a listener:

We can also fire our own events:

We can catch that in the parent component using the on-event attribute or a listener.

These events will always bubble up to parent components. Even when the event is caught. But never sideways.

So in this situation the methods push, push-parent and push-grandparent will be called, but not push-sibling.

So it’s good to not use too generic names, because the parent component might also use that event.
You can prevent that by prefixing your event names with your component name.

you can stop an event from bubbling up by using event.stopPropagation():

You can also use iron-signals to throw events sideways.

Throw them:

and catch them:

You can also catch them in multiple places.

I recommend against using iron-signals, because it can be hard to find out where the even comes from or will be caught. Use the rule of least power and stay with normal javascript events.

Complete code.
Polymer-events.html:

This uses subComponent1:

and subComponent2:

Integrate Angular in Spring Boot with Gradle

Having a Angular HTML5 single page application and a Spring Boot application, we would like to serve the complete Angular app from Spring Boot. This blog shows you a couple simple steps to get everything up and running: run NPM from Gradle, integrate the Gradle frontend build in the main build and support HTML5 mode in the ResourceHandler of Spring Boot.

Run NPM from Gradle

Create a subdirectory called frontend with the frontend code and build scripts (webpack, npm). Let’s assume our npm start and npm run watch output to the /frontend/dist/ directory.

First we need to make sure the frontend code is build when we run gradle build on our project. We can use the plugin gradle-node-plugin for this. Go ahead and create a /frontend/build.gradle file.

Now, if we run a gradle build from our frontend subdirectory:

  • node will be downloaded
  • npm install will be executed
  • npm run build will be executed

Run integrated Gradle build

To run the frontend submodule integrated from our root project, all we need to do is include a settings.gradle at the root of the project.

Go ahead and run gradle build from the root of our project and see that npm is downloaded and the expected npm tasks are run.

We need to include the distribution of the frontend build in the JAR. Thus the frontend:build task needs to be run before we process the resources of the JAR. Go ahead and add the following snippet to /build.gradle.

Support Angular HTML5 mode

Now all we need to do is create support for HTML5 mode in Angular. Angular is a single page application and subroutes of the application are default served with a ‘#’ hashtag separator. If we want to have regular paths, we can enable HTML5 mode. The problem in serving this Angular HTML5 application from Spring Boot is that the Spring Boot ResourceHandler cannot find these resources, since the real resources is the index.html with the JavaScript files. With the next code snippet we instruct Spring Boot to look for the index.html as well. This is inspired by http://stackoverflow.com/questions/24837715/spring-boot-with-angularjs-html5mode

Happy coding!

Caching HTTP requests in AngularJS

In AngularJS, especially when you’re using a ‘modern’ Web Component like approach, you often have directives request the same information from your services multiple times. Since we’d rather not do round-trips we don’t need to to save on server resources caching is our go-to solution. In this post I will show two different approaches to caching resources: the built-in angular way using $resource and a home-grown solution.

Original post

Continue reading

Experiences at Google IO 2016

From May 18-20 myself and Richard attended the Google IO 2016 conference. We both visited different tracks and have some different experiences we’d like to share. Here are mine. Read on about topics in the likes of VR, Progressive Web Apps, and Artificial Intelligence. For a quick impression have a look at the photo album.

Google CEO Pichai during Google IO keynote at the Amfitheater
Continue reading

Grasping AngularJS 1.5 directive bindings by learning from Angular 2

In AngularJS 1.5 we can use attribute binding to allow easy use of input-only, output-only and two-way attributes for a directive or component.

Instead of manually parsing, watching and modifying attribute values through code, we can simply specify an attribute binding by adding a property to the object hash of:

In this blog post we will learn how attribute bindings differ between AngularJS 1.5 and Angular 2 and what we can learn from Angular 2 to make your HTML and JavaScript in Angular 1.5 more descriptive.
Continue reading

Using `$q.defer()` in AngularJS? Try the $q ‘constructor’ instead.

Although I’m a great fan of using the ($q) Promise API in AngularJS, I never really liked using $q.defer() and its Deferred API. I always found using var deferred = $q.defer() together with $.resolve(..) and $.reject(..) to be too verbose.

After recently checking the $q service documentation I stumbled upon the $q constructor that results in way less verbose code.

To illustrate the usage of the $q constructor I will create a function that wraps the result of a Geolocation#getCurrentPosition invocation as an AngularJS $q promise.

Using the traditional $q.defer() approach the function wrapper will look like this.

When using the $q constructor, I could rewrite the code as follows, resulting in less verbose code:

And since in this case we are merely passing through the arguments of the success and error callbacks, I could rewrite the code to be even smaller:

As you can see, using the $q constructor produces code with less boilerplate, making it more readable in the process.

Notice that although it’s being called the “$q constructor” we are not actually doing a new on $q.
Possibly, the AngularJS team calls it this way because it mimics the ECMAScript 2015 Promise constructor API.

Next to the $q constructor there are some other alternatives to using the verbose $q.defer().
In most cases you can probably use a less verbose alternative as is nicely described in this blog post that I stumbled upon while doing some additional research for my own blog post.