Luckily, I managed to be at a small session regarding Angular 2 at Quintor, today, Thursday the 18th of February 2016.2.
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
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"5, 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 features6 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;".
- safe typing, makes refactoring and debugging a whole lot easier
- @Decorators, makes injection and adding behaviour generically a whole lot easier
Some more enhancements:
- ChangeDetection
- ViewEncapsulation (with a shadow dom)
- Provide function
- ngUpgrade thing
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
No comments:
Post a Comment