More, Less and Most

I found the following gem in [1]:

“less is more, but more more than more is, so more is less less, so use more less if you want less more.”

— Joost Kremers²

“If less is more than more, most is more than less.”

— Slackware Linux Essentials²

References

[1] Stackoverflow - What are the differences between most, more and less?

http://unix.stackexchange.com/questions/81129/what-are-the-differences-between-most-more-and-less

[2] Slackware Linux Essentials - 10.2 Pagers: more, less, and most

http://www.slackbook.org/html/file-commands-pagers.html

Front end update: Angular 2.0 & HTTP/2

I have taken up learning Angular, yet it seems that a new angular is being prepared, Angular 2¹. Angular 2 seems to be a complete rewrite, and has a very different architecture. For one thing, it can work with ECMAScript 6 and TypeScript.

Luckily, I managed to be at a small session regarding Angular 2 at Quintor, today, Thursday the 18th of February 2016.².

As a matter of fact, I am writing this blog in the train home.

HTTP/2

The speaker was Martijn van Campenhout of Quintor. The first presentation was regarding the new HTTP/2 protocol (officially released in May 2015), which is rapidly replacing the old HTTP/1.1 version (released in 1996). It is based on the SPDY implementation developed by Google in 2010 and officially submitted for standardisation.

Statistics shown by Mozilla indicate that an decrease of pageload times of 2.2 seconds, results in an increase of Downloads by about 15%.^{3 4}

Old tips and tricks

The old tips and tricks that are used to deal with the defficiencies of HTTP/1.1 and the lack of bandwith and troubles with latency were:

• combining files as much as possible
• inlining everything
• minifying everything
• domain sharding
• using sprite files
• define critical CSS and JS files
• using GZIP

These different tactics are used to make sure the Webbrowser has to do a minimum number of requests and does not need to get a lot of data to the user.

It seems the Chrome browser development tools has excellent support for simulating bad connections or large latency, using a variety of set network connection types.

Another common tactic was to display/render only those parts of the web page that are visible to the user. Once the user starts scrolling, the parts that scroll into the viewscreen of the user are downloaded and rendered. This is called "the Fold"⁵, and is a common DTP term.

There was a most impressive demonstration, where a picture consisting of about 100 smaller pictures was being shown, with a one second delay (latency) between the request and the response for a smaller picture. The difference between HTTP/1.1 and HTTP/2 was very big. Where the Browser only allows 8 concurrent connections with HTTP/1.1 causing a severe bottleneck, a single connection using HTTP/2 was more than enough to show the entire picture in about a second.

The tactics used for HTTP/2 can be summed up as follows:

Multiplexing

different Streams of data (files, css, images, html, javascript) across the same HTTP connection

Priority

allowing a setting of priority based on content. For example that the big logo should be loaded first, and the little icons at the bottom of the page last.

Binary Headers

easier and quicker to parse, fixed length, unambiguous

HPACK

In the past headers were not compressed, this has now changed.

Server push

server remembers the combination of files requested. One file request will trigger the others automatically.

This is also the first time that I heard the term CRIME, "Compression Ratio Info-leak Made Easy". Basically it boils down to a man-in-the-middle-attack, adding stuff to a message to see if it increased the compressed file. If it does not, the item added already was part of the file, and he has learned something valuable regarding the message.

The HTTP/2 is already incorporated in Apache server, NGINX. Servlet specification 4.0 of Java EE 8 will have support for it (JSR-369).

Criticisms

There were some criticisms regarding HTTP/2, though.

It seems the HTTP/2 might just be available only using HTTPS. The configuring of priority and server push needs to be done on the backend right now and cannot be controlled by the webdeveloper. This causes a tight coupling between front end and back end, which most people (including me) might not like.

All these optimalisations mean absolutely nothing, if your resources (html files, images, etc) are retrieved from many different servers.

Note: the effect of HTTP/2 is also that the old tips and tricks are not only useless, but can actually hamper the responsiveness of the website. An example of this is caching.

Angular 2

The speaker, Rachèl Heimbach, went quite fast through his presentation, which means we had time for two presentations in stead of one. On the other hand, it did require an inordinate amount of attention and knowledge of Angular/JavaScript/TypeScript to follow.

Angular 2 uses both ECMAScript 6 and TypeScript.

Some of the most important features⁶ of ECMAScript 6 that will return when you are attempting Angular 2:

• class
• import
• export
• private namespaces (without export and import, everything is by default off limits)
• default values (used when parameters are omitted in the function call)
• lambdas (no longer do we require the use of "var self = this;".

Benefits of using TypeScript in angular 2 are as follows:

• safe typing, makes refactoring and debugging a whole lot easier
• @Decorators, makes injection and adding behaviour generically a whole lot easier

Instead of the familiar services, factories and controllers of Angular 1, Angular 2 has simplified this a bit. Angular 2 basically consists of only Web components (that make up your pages/views/etc) and singleton injectors (that can take the place of your controllers, factories and services.) As you can see there is no longer a distinction necessary.

Some more enhancements:

• ChangeDetection
• ViewEncapsulation (with a shadow dom)
• Provide function
• ngUpgrade thing

It is possible to upgrade an Angular 1 application piece-by-piece or add Angular 2 components to it. The other way around is also possible.

Notes

HTTP/2 seems to be more and more widely supported. Angular 2 is still in the beta phase, however, it seems to be fairly stable. Unfortunately, it is currently not recommended for production use. However, the presentation did point out that in order to make the task of porting your application from Angular 1 to Angular 2 less onerous, it might be a good bet to start by designing the new parts of your Angular 1 application according to the Angular 2 style.

A question was raised on whether or not you should use Angular 2 at all. It seems Google will support Angular 1 for as long as there is a market for it. I heard that they measure the traffic to the two websites (Angular 1 and Angular 2) to determine interest. I got the impression from the presentation that Angular 1 has slowly been moving towards the new Angular 2 way of doing things.

Performance wise, Angular 2 is a step in the right direction. Keeping new Angular 2 in mind, whilst working on an Angular 1 application seems to be a very safe bet. If the need will arise in the future that a port is required, at least it will not be as herculean a task as first thought.

References

[1] Angular 2

https://angular.io/

[2] Quintor - Front end update: Angular 2.0 & HTTP/2

https://www.quintor.nl/sessie-front-end-update/

[3] Webpage testing

http://www.webpagetest.org

[4] Can I use?

http://www.caniuse.com

[5] Wikipedia - Above the fold

https://en.wikipedia.org/wiki/Above_the_fold

[6] ES6 Features

http://www.es6-features.org

My First Lambda

I just implemented my first lambda¹. My java code is now officially only Java 8 and up compliant.

My pom was changed as follows:

<project.source.version>1.8</project.source.version>
<project.target.version>1.8</project.target.version>

Original code

The original code looked like this:
Pretty straight forward stuff.

Adding a Lambda

Then we received two change requests, that could be resolved by re-using the method above.

But this time, not everyone was required to see the message. In other words, the list of active players needed to be filtered.

Enter the Predicate².

Let us say the filtering needs to be done, by those who wish to be kept in the loop regarding roleplaying events. These users contain an Ooc (Out-of-Character) flag.

Calling this can be done using a Lambda, like so:

sendWall("[OOC: " + aUser.getName() + "] " + message + "\r\n", p -> p.getOoc());

Streams

To make things a little more complicated, you can make use of the new Streams^{3 4} provided in Java 8.

In the example below, I take a stream from the List collection provided by getActivePlayers, filter it by the predicate, and run the writeMessage on each found user. That last one is called a "terminator" as it terminates the stream, i.e. it "does something".

A lot less code than the previous for loop. It seems more complicated, but I guess it just requires me to get used to it.

It also causes me to create another Lambda, as the terminator.

The Old Way

In the old way, calling this method sendWall was done using an inner class, and it looked as follows:

References

[1] Java^TM Tutorials - Lambda Expressions

https://docs.oracle.com/javase/tutorial/java/javaOO/lambdaexpressions.html

[2] JavaDoc - Interface Predicate<T>

https://docs.oracle.com/javase/8/docs/api/java/util/function/Predicate.html

[3] Java^TM Tutorials - The Collection Interface

https://docs.oracle.com/javase/tutorial/collections/interfaces/collection.html

[4] Processing Data with Java SE 8 Streams, Part 1

http://www.oracle.com/technetwork/articles/java/ma14-java-se-8-streams-2177646.html

Validation of Beans

Just a small utility function that prints out readable messages on what is wrong with a certain bean (like for example a JPA Entity).

Got a little miffed with the fact that my javax.validation.ConstraintViolationException that is thrown, never shows the exact problem. I always have to drill down into the Exception to find the message in order to fix the problem.

I hope it helps someone.

See for more information about bean validation JSR 303.

References

The Java EE 6 Tutorial - Using Bean Validation

http://docs.oracle.com/javaee/6/tutorial/doc/gircz.html

The Java EE 6 Tutorial - Validating Persistent Fields and Properties

https://docs.oracle.com/cd/E19798-01/821-1841/gkahq/index.html