This series of blog posts which I have converted from Youtube videos. I personally have really enjoyed these videos so in order to textually document them, these are essentially some screenshots and rough notes organised. 

This particular post is based on the awesome Matias Niemelä NGVikings 2018 talk. It can be found on the link below: https://www.youtube.com/watch?v=WahpV6zn8lQ

Angular

Angular is a platform for building sophisticated web apps. The platform refers to adding, mixing and matching different technologies to make a very powerful, sophisticated web app.

Past Angular JS

Before angular, there were blink tags and browsers. There was no framework around except for EmberJS which later gave space to AngularJS. There were only simple, JavaScript libraries. These technologies improved over the time.

The Angular JS has a framework, which is developed by Google which encourages testing and reusability across the board.

Road to Angualr2

Angular Dart set the path for Angular 2. The angular dart is not relevant to angular anymore. The Dart programming language, which is a very rich front-end programming language and is developed by Google. The Dart language has types, classes, and annotations. While, there are typescripts nowadays, at the time Dart was a really nice addition to because it was really hard to develop a new framework with another programming language. It led to the direction of Ecma script 6 and typescript. The advantage of using type script as it also make things compact with respect to Javascript engine behaviors. They are auto handled by typescript via its typings feature.

Note: We will talk about competitors or Angular like React, Vue.js and some others in our upcoming articles.

Angular Today

Angular 5 is more popular than Angular JS was before. More developers are using it to produce cooler Web apps and projects which are shown on the internet.  

Angular 5.x improvements

A lot of code reduction has been done to make both, the bundle size and the app size of angular smaller.

This allows for the angular app to boot up for much faster than different previous versions.

The polyfills in dependencies on angular have also been cleaned up.

For example, the web animations polyfill is no longer required for angular. This helps in saving the various kilobytes and it performs better.

The HTTP module in angular is a nice new set of HTTP features which are usable with the angular app.

The Aot mode is now by default on ng angular CLI.

The motive is to understand how angular is used inside of Google- this big, profound, open-source library is capable with a big company like Google. All of the external companies and projects and websites which use angular and as well as the influence which typescript has, another big, large open-source project on angular. Then, there is X, which is the observable streamed library that is used with angular which is also open-source. Then there is angular CLI which allows people to bundle and package, build and distribute an angular app from the command line.

With the CLI, there is a new tool, the design integrated into to it, called Bazel. Then, there is a progressive web app and the procedures of their working in angular.

Angular materials and the components which have been launched. Angular animations and elements.

Google + Angular

Google is a big company, there are a lot of frameworks, platforms, projects within the company. There are tons of Google apps which use angular. Every time that angular is updated, it is tested across the company.

If a patch is made to the animations or the patch to the compiler, it will automatically be tested across every single app within the company and it will return a result stating if the test has been failed or passed.

This is what it looks like when a patch is made in to angular.

Travis which is all of the unit tests gets tested and then there are linting tools. At the very bottom, there are Google internet tests, which can get tested against. This gives nice feedback, which in turn boost up the confidence to make changes in the framework and to know that things work down the road.

Google shopping express in an external website, it is not internal to Google. It is built with the latest and greatest what angular has to offer. It has nice plugins, UI components, built with material and animations.

If a website is hosted using a google cloud platform, this is also built with angular.

www + Angular

Building and developing apps using angular.

Every time, an air ticket is booked with Amadeus, there is angular running in the background. Amadeus is connected to various other airlines as well.

Ryanair also has room bookings. This is a small app built with angular.

The freelancer website is built with angular as well.

Typescript

Angular is an open-source project, it has versioning and it has features which are used across the internet. One of them, is typescript which was initially built by Microsoft thus showing the IT industry giants’ interest in Javascript and Angular and its not only Google dependent. Angular uses it across the board and this gives a sophisticated tooling that to know the knitting errors, JavaScript grammar errors or if the overall object structure does not fall in to place. It allows the developer to analyze and understand the context of the app without having to run it.

This is an example of what typescripts can do.

Any JavaScript editor has these capabilities as well but this is built into typescript so, when it is compiled from the command line, it is possible to know all the errors up front.

Rx + Angular

It is another really big and open-source tool which is used in angular, is called Rx, which is a reactive extension. It is a streaming library which is used with HTTP and other parts of the framework.

For angular 5 a lot of work has been done within Rx, to reduce the code size and to make angular 5 and angular 6 faster and smaller.

The Angular CLI

It is used when building an angular app from scratch. This is a command line terminal tool where it is possible to scaffold and build angular apps. The angular CLI keeps up with each of the versions of angular.

The defaults are allowed to figure out what the user wants ahead of time.

Testing is also built into the CLI and there are commands to run unit tests and end-to-end tests. It is possible to scaffold components, generate directives and services directly from the command line. 

The schematics allow to make a recipe to describe how a certain operation happens on the project.

Bazel

It is built tool which allows to connect different targets.

Angular core uses bazel. Webpack or the packaging system is not used anymore. It has improved development time of building a framework. The angular CLI will have it baked into itself.

Progressive Web Apps

It gives a natural experience, like using the app in the native language. With PWAs, it is possible to progressively enhance or add more features to make the app experience on the mobile phone.

The serviceworker makes it all happen. It is another process running in the background which can download and pull in data without having to revisit the website in the browser.

A prominent feature of this is caching so that it is possible to view the website offline.

There is an angular module, called angular serviceworker module and for future versions of angular, there will be ways for offloading bits and pieces of the framework, which will be done in a serviceworker, which enables to speed up the framework and development framework as well.

If a new angular CLI project is created, it is possible to tell it to load up the serviceworker.

The website Stack blitz allows to run an angular app in the website and edit it. It uses serviceworker, which will download, pan packages and do computations in the serviceworker and not the browser. When the website is revisited, it has all the data cached and ready to go in the next time.

Firebase and Cloud

Firebase allows to connect to the angular app to a real-time back-end in order to pull and push data.

Angular material

The material is to provide reusable components which you can use in your angular app. The two examples are; a tree and a data table. With the new versions of the material, the accessibility has improved.

CDK has been introduced. It takes the lower level of bits and pieces of the component and allows to use those computers and components to build more sophisticated components. 

With future versions of materials, in the trio, angular CLI schematics will be tried so it is possible to scaffold, examples of different material components without having to include them into the app through the code.

Angular animations

Angular supports multiple element animations. They allow to choreograph an animation to happen across multiple elements across a timeline. This can occur between route changes and element Trans element changes across the app.

Scrubbing support- it is possible to build an animation timeline and access the animation at 0 percent, 50 percent or change it across time with a dial.

The recent versions have web animation polyfill has been removed. It reduces the need to have extra code in the app. It improves the performance of the angular’s animation. The material CDK will distribute reusable animations as a part of its tool chain.

Angular elements

Using a web component outside of Angular.

With some configurations and moving files around can make it possible.

Export the calendar app as a web component and have it work without having to wire up the inner angular app with the outer app.

Here is an example of a web component.

ngIvy

It can help refactor and change angular to be much smaller. The size will be smaller, the debugging will be easier. All of this is possible by tree-shaking.

Tree-shake the code, it can delete dead code or the code which is not used in your app.

To use one thing, it is not required to download the entire framework. It is possible to lazy load things, like animations. It is not required to be the part of a core.

If the angular app is reduced to be kilobytes in size, it means it is possible to have reusable angular components which can be used in other websites using angular elements.

Do you want to know what’s next? What are the plans of Angular Team? Check out their repository on Github.