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

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

Communication between Angular Controller and Directive

Since I had issues finding a good explanation on how to tie together a controller and a directive with isolated scope I decided to create my own blog post on this subject. This repo contains a runnable example of the solution. It contains a Spring Boot Web Application that can be started to act as a HTTP server but all the interesting stuff is in the src/main/webapp folder.

Problem description

To create modular code with AngularJS you want to create reusable components; directives. Directives should not depend in any way on the parent controller. They should not be able to see any of the parent scope unless it’s explicitly provided to them. To do this Angular directives can have an isolated scope (which in my opinion should be the default). Continue reading

Web-components like AngularJS directives

As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The main additions, as described in several blogposts, are HTML imports, Shadow Dom and Templates combined with isolated scripts and styling. (If these concepts are new to you i suggest you read up on web components at WebComponents.org).

This blog post has a living example on plnkr.co.

Continue reading

JavaScript: console logging (with IE safety)

Every once in a while I work on a site which has some or copious amounts of javascript. Now I do not mind this at all. But it’s pretty tedious stuff writing the code and putting in loggers. And when you’re working on something and you have to test it on IE. Well let’s just say the console may cause some problems.

But rather then removing all the logging i’ve found there’s an easy solution. Building yourself a logger like structure which checks the existence of the console before writing. That way you can add logging statements without crashing the entire application. Continue reading

Safe-guarding AngularJS scopes with ECMAScript 5 “Strict Mode”

Having a history as a Java developer I prefer declaring the complete JavaScript object at once through an object literal; in a similar fashion as your would declare a class in Java.
In my opinion adding new properties “on the fly” to a JavaScript object is a very bad practice:

For the same reasons I dislike how properties are declared in an AngularJS application:

Javascript, keeping it clear

Note that this blog is in no way written as a “best practice” or “do it this way” kind of blog. I am not, nor do I aspire to be, the worlds greatest javascript programmer. I do however like my code clear and structured. Now lately some collegues have asked me how I write my code and that in turn prompted this blog.

In short the best way to keep your javascript clear is using namespaces. The use of namespacing is very simple and should cause you no problems. As you will come to see it will be both easy and clear for fellow developers to read and modify your code. So yes, if you wish to remain the javascript magician with obscure code that no other developer wants to touch feel free to not use them. Continue reading

Adding custom HTML attributes to your AngularJS web app

AngularJS is an excellent JavaScript web framework offering so-called “directives” to ‘teach’ HTML some new tricks. Examples of built-in AngularJS directives are:

  • “ngView”: defines the placeholder for rending views
  • “ngModel”: binds scope properties to “input”, “select” and “text” elements
  • “ngShow” / “ngDisabled”: for showing or disabling an element based on the result of an expressions

Continue reading

AngularJS made me stop hiding from JavaScript

Like most Java developers I used to have a serious aversion to JavaScript.
I was quite happy to delegate any ‘scripting’ stuff to fellow developers.

At my current project, we initially decided to use the Vaadin web framework.
It seemed the perfect choice for creating Rich Internet Application (RIA) user-interfaces without writing a single line of JavaScript.

However what originally seemed to be a sensible choice, turned out to be a dead-end:
Continue reading