Angular 6 Brings TypeScript 2.7 Bringing Improved Null-Safety

Posted Leave a commentPosted in Angular, Concepts of programming languages, TypeScript

The web is full of articles praising the improvements of Angular 6, such as library support (great!) and Angular Elements (even greater!). One small change usually passes by as a mere side-remark. But it’s a useful change, too. Angular 6 now officially supports TypeScript 2.7. That, in turn, is a major step forward for our project, because TypeScript 2.7 fills a nasty gap concerning null-safety.

You know, I played benevolent dictator, decreeing that null values need to be declared explicitly. In other words, I activated the flag strictNullChecks in the tsconfig.json file.

Unfortunately, I wasn’t prepared for the reaction. It took me a lot of talking to convince the team to keep the setting. Actually, I coaxed them to wait until Angular 6, which is “about to come out every day”. Adding insult to injury, Angular 6 took several weeks more than I expected, but now it’s there.

Combining Object-Oriented Programming and Functional Programming

Posted Leave a commentPosted in Concepts of programming languages, functional programming

When someone like Brian Goetz is giving a talk, it’s almost always worth listening. His talks at the 2018 JAX in Mainz, Germany, were no exception. There was an idea resonating particularly well with me, so let me paraphrase this part of Brian’s talk. Or rather, what I made of it: I didn’t take a recording, so adding my own thoughts and misconceptions is inevitable.

Brian is the chief architect of the Java language, so it’s not surprising his talk focused on Java. But this article is not about Java. It’s much more general. In particular, much of it also applies to JavaScript. Actually, it applies to any programming language flexible enough to support both object-oriented and functional programming.

But in the case of JavaScript, I (@beyondjava) observe that the flame wars are particularly nasty. A significant part of the community considers object-oriented programming a thing of the past. They’ve abandoned it in favor of functional programming. You can observe this particularly well in the React.js community.

Unsubscribing From an Observable in Angular

Posted Leave a commentPosted in Angular

Since version 2.0, Angular uses RX.js observables a lot. Such an observable is potentially infinite. So in many cases, you need to unsubscribe from the observable manually. If you forget to do so, you end up with a memory leak.

Actually, you’ll probably get away without unsubscribing for a long time. First, Angular cares about unsubscribing in most cases:

  • The async pipe unsubscribes automatically for you.
  • HTTP requests are short-lived observables. They call onComplete or onError after returning the result, so they unsubscribe automatically.
  • The same applies to every finite observable, such as Observable.timer(1000).subscribe(...);.
  • You don’t have to unsubscribe from @HostListener and ActivatedRoute.

However, even the official documentation of Angular recommends unsubscribing nonetheless, because it’s little effort and you never know. For instance, there seems to be a bug preventing ActivatedRoute from unsubscribing automatically under certain circumstances. You might also destroy finite Observables (such as HTTP requests) because you don’t want them to be processed if the component has already been destroyed. IMHO that’s no memory leak, but it’s useless to continue loading data after the user has pressed the “back” button.

How to Add a New Breakpoint in Bootstrap

Posted Leave a commentPosted in responsive design, web design

Bootstrap claims to be a “mobile first” framework. However, judging from the breakpoints, it’s a mobile-only layout framework. The largest breakpoint is 1200 pixels wide. Even my 15” MacBook has much more screen estate: its screen is 1440 pixels wide. Many desktop monitors have a width of 1920 pixels, and 4k monitors are gaining popularity by the day. Obviously, the “lg” breakpoint of Bootstrap 3 is merely a toy in 2018. Bootstrap 4 adds a new breakpoint called “xl”, but in reality, it only adds a breakpoint for super-narrow screens. The largest breakpoint is still 1200 pixels wide.

Luckily, both Bootstrap 3 and Bootstrap 4 can be customized. Adding a breakpoint to the new version (BS4) is very simple. It’s a little more work in Bootstrap 3. It took me a while to collect the information from the web, so it’s high time for a compact walk-through.

Graal – Towards the Holy Grail of Polyglot Programming

Posted Leave a commentPosted in Concepts of programming languages

Anybody ordered a new JVM compiler? Whoever ordered it – now it’s there, and it’s exciting! But wait: is it a compiler? No, it’s not. It’s more. Currently, it’s half a dozen compilers, plus a framework making it easy to write your own compiler.

In a nutshell, this is what the Graal project promises:

  • It’s a compiler generating faster Java code than ever. Or it will be, in a few months. The version bundled with Java 10 is marked experimental, probably for a good reason, such as a performance penalty in some applications.
  • It’s a compiler everybody can understand and modify. People like you and me can contribute improvements.
  • It brings polyglot programming to a whole new level.
  • Plus, it’s a great opportunity for minor or new languages. It’s never been so easy to create a new language with a decent performance from day one.
  • Finally, it brings AOT compilation to the Java world. That’s a big plus in cloud environment like AWS Lambda, taking the scare out of hibernation.

OK, you get it: I’m excited. Let’s examine Graal piece by piece. And let’s have a look at the current state of the art.

Should You Embrace “var” in Java 10?

Posted Leave a commentPosted in Concepts of programming languages, Java 10

Java 10 is there! And the most controversial feature of it is the var keyword. Should you embrace it or not?

If you’re a regular reader of, you probably know that I already propagated the var keywords years ago. But I’m spending enough business hours each day with Java to know how Java programmers feel. So I recommend reading and heeding the Guidelines for using the var keywords in Java 10 by Stuart W. Marks.

Elvis Operator (aka Safe Navigation) in JavaScript and TypeScript

Posted Leave a commentPosted in Concepts of programming languages, Javascript, TypeScript

One of the first feature requests of TypeScript was the Elvis operator. More precisely, the null-safe navigation operator. That’s a variant of the “dot” operator allowing you to access attributes and methods even if the object preceding the dot is null or undefined. In most languages implementing the Elvis operator, the expression null.firstName simply returns null, relieving the developers of guarding the attribute accesses with countless if statements.

This article shows several approaches to deal with null-safe navigation in JavaScript and TypeScript.

Angular Components with Non-Standard Selectors

Posted Leave a commentPosted in Angular

When I teach Angular, I keep telling my students that Angular components are custom HTML elements, while Angular directives are custom attributes. Every tutorial I know teaches the same. Nonetheless, Angular is much more flexible. In reality, the selector of both components and directives can be any CSS selector. For instance, you are allowed to define a component like so:

  selector: '[framed-image]',
  templateUrl: './framed-image.component.html'
export class FramedImageComponent { ... }

This component is used like so:

<div framed-image="art-deco" src="somePainting.jpg"></div>

What to make of this? What’s the difference between such a component and a directive?

What Does the Keyword “new” do in JavaScript?

Posted Leave a commentPosted in Concepts of programming languages, Javascript

As an Angular teacher, I often say that JavaScript objects are functions. Most of the time, I get away with this bold claim. It’s not entirely wrong. But it leaves many things in the dark. For one, my short-hand explanation makes it hard to understand why Json objects are objects, too.

By the way, a few hours after publishing this article I remembered that every function is a first-class object in JavaScript. The only property distinguishing it from other objects is that a function can be called. However, this article investigates the other direction. Can every object be defined by a function? Are functions better compared to classes? Or are they something else?


Bang, Bang, You’re a Boolean!

Posted Leave a commentPosted in Concepts of programming languages, Javascript

Did you ever wonder why there are such strange operators like !!, === and !== in JavaScript?

Developers coming from other languages, such as Java, often have a hard time to accept they have to write a triple equals character instead of a double one. Actually, the first language I learned was Basic, followed by Pascal, so I still consider the double == weird. But that’s just one of the peculiarities you have to accept if you’re learning a language following the C tradition.

But of course, all these things have a reason. Hitting SHIFT+0 thrice, hundreds of times a day clearly gets on my nerves. It feels like stuttering. But the reason it had to be introduced was the attempt to save a few keystrokes.

Guiding NPM Through a Firewall

Posted Leave a commentPosted in Javascript, npm

npm doesn’t like to be fenced in by a corporate firewall. Too bad most npm installations live precisely there. The other day, I ran an npm install on the customer’s PC. The same command that finishes in 40 seconds on my machine took roughly a quarter of an hour. Plus several hours of troubleshooting. It was a Deja-Vue experience to me, having lived this nightmare several times before, so it’s high time to collect a short list of hints. BTW, if you want to contribute to this list of life-savers, please do so. Just leave a comment, thus giving me an opportunity to include it to the list.

Basic proxy settings

These two settings almost always do the trick:

npm config set https-proxy
npm config set proxy


What About the Performance of Java 8 Lambdas?

Posted Leave a commentPosted in Concepts of programming languages, functional programming, Java 8, java 9, JIT, Performance, Uncategorized

Isn’t it funny that I start writing a series of articles about Java 8 Lambdas in 2018? Mind you: my first article dates back to April 2012, six years ago. I fell in love with functional programming even earlier. I suppose it was roughly in 2008, ten years ago. From this perspective, functional programming is nothing new to me. I’m using it on a daily basis when I’m writing TypeScript code.

As things go, I work in a very conservative environment, so I know a lot of projects that have adopted Java 8 last year. And I’m bewildered what programmers make of it – and why. It’s high time for a reality check. Java’s Lambdas and method handles are great, no doubt about that. Streams are great, too. Sometimes.

More often than you might think, they are not.

Using Java 8 Lambdas Efficiently

Posted Leave a commentPosted in Concepts of programming languages, functional programming, Java 8

Functional programming is en vogue. There are many good reasons to adopt functional programming. Recently, I watch more and more Java programmers using the new programming style. As things go, they experiment and play with their new toy, pushing it to the limits. This article briefly shows why Lambdas are useful, what Java programmers make of it, and concludes with a few recommendations to do it right.

Escape Analysis in Java

Posted Leave a commentPosted in Concepts of programming languages, JIT, JVM, Optimization

Spectre and Meltdown came as a shock. They showed that low-level CPU optimizations have an impact on our lives. Plus, they proved an illusion of most programmers wrong. Yes, you’re using a high-level language. But that doesn’t mean all those abstraction layers shield you completely from the CPU. I’ve demonstrated the effect of the CPU cache on a Java program some time ago.

Spectre and Meltdown took this to another level. If my sources are right (I still can hardly believe it!), it’s possible to observe the effect of speculative execution in JavaScript. Speculative execution is a very low-level CPU optimization. JavaScript is a very high-level language – it doesn’t even use bytecode, and the design of JavaScript makes compiling it a challenge. But that’s another day’s story.

The link between my click-bait introduction and the topic of the day is the RAM of your PC. CPUs have evolved much faster than main memory. Nowadays, CPUs spend most of their time waiting. A modern CPU can perform several instructions per CPU cycle. But if it has to access main memory, bypassing each of the three caches, it has to wait for roughly a hundred cycles. See this article on for more details.

Short Introduction to Vue.js

Posted 1 CommentPosted in Javascript, Vue.js, web design, web framework

They announced Vue.js to me saying “It’s like Angular, only they did it right this time”. I don’t think there’s anything wrong with Angular, so my curiosity was piqued, and the stakes were high. What does Vue.js better than Angular? So I spend two afternoons playing around with Vue.js.

First impressions

Before starting to dig into the source code, let me share my first impressions with you. Vue.js is fast, it’s simple, and it’s easy to find info on the internet. I also felt that the error messages could be better, but then, that’s a typical beginner’s problem. In the early days, the error messages of Angular weren’t helpful at all. Vue.js is younger than Angular, so I guess they’ve done a good job here, too.

There were two pleasant surprises I didn’t expect. First, there’s a small but useful ecosystem. There’s tool support, there’s a small CLI to get started, and there’s even a browser plugin to help you debugging.

Second, there’s decent TypeScript support. At first glance, the source code seems to benefit a lot from the syntactical sugar of TypeScript. I always thought Vue.js was meant to be the successor of AngularJS, founded and supported by developers who didn’t accept the design choice of Angular 2. And one of the key choices was to embrace TypeScript. So TypeScript support comes as a surprise.

Scope of Vue.js

Before anybody starts a useless flame-war again, let’s have a look at the scope of Vue.js. It covers a rather limited scope. It supports the “V” of MVC. Everything else is up to you. Most people opt for third-party libraries. Some of these libraries (Vuex, the router, the CLI, and –
until recently – vue-resources) are maintained by the Vue.js team, so the scope of Vue.js is slightly larger than the scope of React.js, but even so, these libraries are optional.


Migrating to Bootstrap 4

Posted 2 CommentsPosted in responsive design, web design

The first application I migrated to Bootstrap 4 recently worked out of the box. Add the new CSS and JavaScript, find a replacement for the Glyphicons and you’re done. Awesome! Only… well, it took me a couple of days to realize that my application was broken. There’s a great migration guide for Bootstrap 4, and for a good reason. It’s a good idea to read it.

By the way, if you’re already familiar with the migration guide from an alpha version of Bootstrap 4, read it again. The Bootstrap team has made a couple of last-minute changes.

Material Design for Bootstrap

Posted 2 CommentsPosted in responsive design, web design

After a long search, I’ve finally found two good libraries bringing the design language of Material Design to Bootstrap. Actually, I’ve seen similar attempts before. Just think of the Paper theme bundled with BootsFaces. It’s not bad, but I wasn’t too excited when I saw it. I didn’t run a comprehensive test yet, but at first glance, the libraries I present today match my idea of Material Design better. Please take that with a grain of salt: beauty lies in the eye of the beholder, so that’s just my personal opinion.