What's inside Angular 8?

[Rss Bot 1]

Angular 8 is the latest version of Google's Angular – one of the best JavaScript frameworks around. In this article, we'll run through what's special about Angular 8, and show you how to get started. First, a brief look back at what's happened with the framework so far.

Angular's introduction led to a paradigm shift in web development: while most libraries limited themselves to providing support to developers with relatively limited architectural impact, Angular's developer team went in the other direction. Their product forces you to use a specific architecture, with deviations ranging from difficult to commercially pointless. In fact, most Angular code runs through a relatively complex transpilation toolchain before it ever hits the browser.

Due to the immense success of Angular, both inside and outside of Google Inc, development has – by and large – stabilised. This means that breaking code changes are few, while the semi-annual upgrades are focused on adapting the framework to changes in the web browsing landscape.

In the case of Angular 8, for example, a new JavaScript compiler is deployed (albeit still experimentally).  It optimises generated compatibility code to be significantly smaller and faster at the expense of older browsers. Furthermore, Web Worker support is integrated to increase Angular's processing capability. In short, there is a lot to see – so let us dive right in.

01. Run a version check

Angular's toolchain lives inside the NodeJS environment. As of this writing, Node.js 10.9 or better is needed – if you find yourself on an older version, visit the Node.js website and get an upgrade. The code below shows the version status on this machine.

02. Install Angular

Angular's toolchain resides in a command line utility named ng. It can be installed via the well-known NPM.

Be careful to answer the question shown in the image below.

Click the icon in the top right to enlarge

Getting version info out of the tool is quite difficult – not only is the syntax unique, but the output is also verbose (see image below).

Click the icon in the top right to enlarge

03. Create a project skeleton

ng generates the Angular scaffolding for us. In the following steps, we want to add routing, and use Sass for CSS transpilation. Should the deployment fail for some reason, empty the working directory, and restart ng with superuser rights.

04. Harness differential loading

The new version of Angular optimises backward compatiblity code for reduced impact – a file called browserslist lets you decide which browsers are to be supported. Open browserslist and remove the word not in front of IE 9 to IE11.

05. ... and see the results

Order a compile of the project, change into the distribution folder and purge unneeded map files.

Invoke tree to see the results – ng creates multiple versions of various code files (see image below).

Click the icon in the top right to enlarge

06. Spawn a web worker

Web workers let JavaScript enter the last frontier of native applications: massively parallel processing of tasks. With Angular 8, a web worker can be created right from the comfort of the ng command line utility.

07. Explore the code

ng's output is likely to look intimidating at first glance. Opening the file src/app/myworker.worker.ts in a code editor of choice reveals code which you should know well from the WebWorker specification. In principle, the worker receives messages and processes them as needed.

08. Set up scaffolding

Angular applications consist of components. Firing off our web worker is best done inside the AppComponent, which is expanded to include a listener for the OnInit event. For now, it will emit status information only.

09. Don't worry about the lack of constructor

Experienced TypeScript developers ask themselves why our code does not use the constructor provided by the programming language. The reason for that is that ngOnInit is a lifecycle event which gets fired whenever an initialisation event takes place – this does not need to be correlated to class invocation.

10. Execute a small compile run

At this point in time, the program is ready to run. We will execute it from the server inside of ng, which can be invoked via the serve command. A neat aspect of this approach is that the program detects changes and recompiles the project on the fly.

Take a look at the figure to see this in action in the image below.

Hit the icon in the top right to enlarge the image

11. ...and find the output

ng serve putputs the address of its local web server, which is usually http://localhost:4200/. Open the web page and open the developer tools to see the status output. Keep in mind that console.log outputs data to the browser console and leaves the console of the NodeJS instance untouched.

12. Get to work

At this point in time, we create an instance of the worker and provide it with a message. Its results are then shown in the browser console.

13. Explore Ivy

Future versions of Angular will use a more advanced compiler, leading to even smaller views. While the product is not finished yet, an ivy-enabled skeleton can be spawned via ng new ivy-project – enable-ivy. Alternatively, change the compiler settings as shown in the snippet.

A word of warning: Ivy leads to amazing size reductions, but it is not free. The product has yet to stabilize, so using it in productive environments is not recommended.

14. Try modified ng processing

Angular's ng command line tool used child scripts internally for some time. Angular 8 ups the ante in that you can now, also, use this facility to run your own tasks as your application is assembled and compiled.

One neat application of ng scripts involves directly uploading applications to cloud services. The Git repository provides a useful script that uploads your work to a Firebase account.

15. Enjoy improved migration

Developers migrating away from Angular 1.x, also known as AngularJS, have had a fair share of issues getting the navigator to work right in 'combined' applications. The new Unified Location Service aims to make this process smoother.

16. Explore workspace control

Large projects benefit from the ability to change the workspace structure dynamically. This is done via the new Workspace API introduced in Angular 8.0 – the snippet accompanying this step provides a quick overview of the behaviour.

17. Accelerate the process

Building large JavaScript code bases gets tedious. Future versions of AngularJS will use Google's Bazel build system to accelerate the process – sadly, at time of writing it wasn't ready for primetime. 

18. Avoid the walking dead

Even though Google takes extreme care not to break code, some features simply need to be removed as they are no longer needed. Check this depreciations list to learn more about features which should be avoided.

19. Look at the change log

As always, one article can never do justice to an entire release. Fortunately, this change log provides a detailed list of all the changes – just in case you ever feel like checking the pulse of a feature especially dear to you.

This article was originally published in creative web design magazine Web Designer.

Read more:

• Add multi-language support to Angular
• The best JavaScript APIs
• How to code faster, lighter JavaScript

View the full article