Best-practices learnt from delivering a quality Angular4 application

As some of you might recall, Angular2 went through an unusually long Alpha, Beta and RC stages. It seemed as if the entire Angular2 was re-written since the first Alpha release. So at the time of 2.0 final release, the entire Angular scene was very chaotic. There were hardly any good tutorials or resources which were working with 2.0.0.Final release.

I also did not have AngularJS(1.x) background. I had just delivered a huge SPA using Backbone-Marionette-Rivets.js stack. In the hindsight, it was a good thing to not have baggage from AngularJS!

All in all, we took a leap of faith! I placed my faith on Angular developers, community and my ability to adapt to new framework and jumped into the valley without a parachute!

Me and my core team members — we had about 3–4 weeks time to create the first spike and we all ran fence to fence; fell often but learnt a lot. My overall experience of JavaScript development scene also came handy when we scaled from 4 people to about 18 people team in couple of months.

Looking back, after 6–8 months of development and product delivery of the application, I can see that some good practices saved the day. This post summarizes them for everyone’s benefit. Without further ado, here are some of the best practices that you might want to adopt to deliver a quality Angular application…

Best practices for Absolute beginners

Become comfortable with ES2015

Most of the initial curve for angular is just about getting comfortable with ES2015. So ensure all the developers on the team have READ and actually TRIED ES2015 and ES2016 flavors of JavaScript. There is A LOT to learn here but it will just make ready to face the external world tutorials which often makes use of these syntax. E.g. syntax like () => { } or […a, b,] should not trip you. Or usage of import, class, let, const, etc should be first nature to your developers.

Embrace Typescript and Visual Studio Code (VSCode).

Most of the code snippets for Angular you will find online are in Typescript.. which is a superset of ES2015. I will highly recommend that you use this so that code snippets online will make sense. Also as a companion, use Visual Studio for Code as your IDE, TSLint as your linter and TSLint plugin in VSCode to ensure you get best static code analysis experience. Plus — by using TS, you don’t need Babel. Bonus: Also add Angular Language Service plugin to VSCode. This gives far better angular experience especially in the Angular templates.

Master npm ecosystem.

Along-side ES2015, Angular is also all about being comfortable with Node and NPM Ecosystem. Any serious example will make use of package.json (npm) and node to build and run their example. Virtually EVERY angular component out there will give you instructions about how to install it using npm. So make absence of Npm and VSCode deal-breaker for your teams. Either your developers are using these tools or they are not on your team! Seriously!

Angular Application Development Best Practices

Eat, Sleep, Breath Components!

Angular is all about components. Design the components first, before starting to code. By design, I mean –

• Draw outlines on the Visual-Designs to clearly demarcate which screen area will be owned by which component. Make the components small enough so that they can be reused at many places But large enough that making them any smaller makes no sense. It takes a bit of time to get used to creating this this logical grouping but you can naturally do this in 2–3 sprints. I insist on my entire team doing this for EVERY story in EVERY sprint.
• Once you know your component, document the “inputs” and “outputs”. I have a small design-checklist which I make every developer fill-up as a short design documentation for each story. Please see Design Narrative section at the bottom of below this post if you want to adapt it in your project.

Design each component with Re-usability in mind. Try to create commonly used UI element as separate component and re-use them in the screens.

Use seed projects to hit the ground running!

Make use of some kickass starter seed projects because they would have done a great job at incorporating many features for you. I wholeheartedly recommend AngularClass webpack starter or BlackSonic’s ES6 starter. This will get you running in no time with a great foundation for large project.

Or… Use Angular-CLI

Other option is to use Angular-CLI. Angular CLI is really good option for those who are finding entire ES2015+TypeScript+Angular a bit overwhelming. It abstract away quite a few things from you including entire webpack configuration. But that abstraction is also a downside since you cannot tinker around those abstracted parts. Thankfully, there is a eject option in Angular-CLI to eject most of abstracted things.

RIP SystemJS, Hello Webpack!

From the beginning, stop using SystemJS and switch over to Webpack. Webpack is far more powerful and versatile tool. Optimize webpack bundles effectively to ensure that you are not bundling same modules in multiple chunks. There are bundle-analyzers from webpack which do brilliant job of telling you about this. Bonus: Webpack Learning Slides and Step-by-step code

Use AoT FTW!

Usage of AoT (ahead of time) compilation is a great step towards performance gains at runtime. It also reduces your bundle by about 30kb (gzipped) which is a LOT of improvement. Angular 4.0+ brings about 30% improvement in app bundles due to how it generates the AoT code.

Understand Observables from RxJS.

A LOT of Angular work is about understanding what is Observable. It’s very important to understand how Observables work and becoming comfortable with RxJS library which helps you become Observable Ninja.

Lazy Loading the non-first-page routes

Lazy-load every route which don’t need at 1st page hit. Webpack2 import()function will come handy for you. Also webpack’s ng-router-loader will help automate the bundle creation for each lazy loaded module automatically..

Using Widgets and Libraries

Consider using standard widget library like PrimeNG or ValorSoft. Try to avoid JQuery as it cannot be tree-shaken.

Debugging

Make use of ng.probe() in chrome console to do effective debugging / Or make use of Augury chrome extension — which wraps ng.probe for you.

Stay safe in Dark Corners of NgZone

NgZone and ZoneJS are some of the dark corners of Angular. When things don’t work fine even after you trying 100 different things for many days, you might be up against these two adversaries. I call them dark corners because no error will ever tell you that that error can be fixed if you fiddle around with NgZone. You must correlate your error and potential NgZone conflict yourself 😧. As such, NgZone is quite easy to use but I did not even know it existed for almost 5 months in my project.

Other wins via code structuring

1. Shared Modules — Try to make use of shared module. Create a module and that should import & export all the commonly used modules & providers and import this in other modules.
2. Global vs local CSS — Whenever writing the CSS, try to visualize if this kind of element might be used at lot of places and then write the style at application level instead of component, it will avoid the re-writing it again in new component. You can just override any small change is required in component level.
3. Theme File with SCSS — When using any CSS preprocessor, always define a file which has variables only related to color, font-size, etc. of the applications, it will help when you need to change the theme.
4. Typescript Inheritance for your help — Try to utilize the Inheritance in Typescript. If you have some view related functionality that might be required in many screens, you can create a base component with common functionality and then all other components can just extend it.
5. Use Services — Strive for complete segregation between the View implementation and service call. In the UI component, keep code only related to view, and delegate to a service to make the backend calls and for any functional logic.

General Web Developer Productivity Best Practices

1. Improve development workflow — Often times, developer do not think about finding shortcuts to improve their developer productivity. This includes, circumventing login locally, caching backend calls which are not required for your current work, making small code fixes to skip through 10 screens / clicks to arrive at the screen where they need to do their change. One should spend half an hour to twaek these things reach their current screen instantly and save time on every minor code update.
2. Mandatory Human Code Review — We have mandated that all developers must deliver code as pull_request in Git. Architect would review and approve the code before merging. This ensures that each line of code has been reviewed before merging. This help catching bugs and quality / performance problems which cannot be caught using Linters.

Design narrative:

One of the best thing that we implemented was — process of design elaboration from each developer for their story.

I insist that my developers follow this narrative.

To deliver story xyz,

1. Which component(s) would be required to be “created” or “modified”.
2. How will the component be accessed? From a topNav? Routing? From some user interaction on other components?
3. Which folder would those components belong?
4. What kind of @input, @output would be provided to / emitted from these components.
5. What would be your backend call requirement and it’s sequence
6. Any form validations?
7. Any spl technical things / libs required? E.g. moment, datepicker, modal, etc.
8. “Productivity improvement”? How will you reach your page fast — hardcoding? Proxying?

I have found that the developers were far more confident and their code quality improved once we established above design documentation process. Hopefully, you will find similar change in your team quality as well.

This post is adapted from my original post on my blog.

That’s it folks for now. Thank you for patiently reading till the end! If you liked the story — please follow me on twitter and hit ❤️ symbol below the story.

Angular 9 New Features and Ivy

What're the Angular 9 New Features?

Angular is one of the three most popular JavaScript frameworks for building client-side web and mobile applications. It's built and backed by Google and has been developed over the years into a fully-fledged platform with integrated libraries required for front-end web development.

Since developers and companies all over the world are depending on Angular for building their frontend apps, the team behind the framework follows a strict plan for updates with a new major version released every six months. The current major version is Angular 9.

This means we can already use the new version! But before, let's see some of the new features of Angular 9.

Compared to React or Vue, performance and file size are big downsides of Angular.

One major problem of the previous versions of Angular is the large size of the final bundle which impacts the download time and as a result the overall performance of the application.

Angular 9 brings a few new features most importantly, the Ivy compiler which provides a huge boost in performance.

In nutshell these are the new features of Angular 9:

• Smaller bundles and better performance,
• The Ivy compiler: The default use of the Ivy compiler is the most important feature of Angular 9, Ivy is what actually designed to solve the major problems of Angular i.e the performance and large file size.
• Selector-less bindings support for Angular Ivy,
• Internationalization support for Anguar Ivy.
• Support for TypeScript Diagnostics Format
• Support for more scopes in providedIn
• A New Type-Safe TestBed.inject() Method Instead of TestBed.get()

Smaller Bundles and Better Performance Thanks to Ivy

Previous versions of Angular have relatively large file size of the final bundles compared to React or Vue.

The performance of the Angular runtime is quite good but the loading time is longer because of the large file size which affects the overall performance of the application.

So what the Angular team is doing to solve the large size of the final bundles?

Enter Ivy.

• Before Angular 8, the framework used ViewEngine as the renderer,
• With Angular 8, Ivy is in experimental mode behind an optional flag,
• With Angular 9+, Ivy is the default compiler.

What is Ivy?

Ivy is a complete rewrite of the Angular renderer which is simply the part of Angular that transforms your Angular templates into JavaScript code.

Angular components are a mix of TypeScript code, HTML and CSS. TypeScript is a superset of JavaScript, that needs to be compiled into JavaScript before it can be consumed by a web browser.

Angular previuosly made use of ViewEngine to transform TypeScript code to JavaScript.

The Angular ViewEngine transforms the templates and components to HTML and JavaScript so that the browser can render them.

These are some informations about Ivy:

• The Ivy compiler is abtsracted from developers, and will replace ViewEngine so what you know about Angular is still valid.
• Angular 8 allows developers to play with Ivy but with Angular 9, Ivy is the default renderer.
• The Ivy compiler outputs much smaller JavaScript bundles, so Ivy solves Angular’s bundle problems.
• The Ivy compiler will not change how you work with Angular so what you previosly learned about Angular will still work in Angular 9+.

Note: Ivy will be a major corner stone because it takes Angular applications to the next level in terms of performance and final bundle size.

How to work with Ivy?

In Angular 9+, Ivy will be the default renderer, so Angular applications will be faster and smaller.

In Angular 8, you need to enable Ivy by adding the following lines to the tsconfig.json file:

"angularCompilerOptions": {  
  "enableIvy": true  
}

You can then invoke the compiler by running the ngc command inside the node_modules folder:

$ node_modules/.bin/ngc

Starting with Angular 9, you don't need to do the previous steps because Ivy is the default compiler.

Selector-less Directives in Ivy

Using selector-less directives as base classes is already supported in the old ViewEngine but missing in the Ivy preview in Angular 8. This is now added in Angular 9.

Consider the following pattern showing a decorated child class that inherits a constructor from an undecorated base class:

Let's take, for example, this class:

export class BaseDirective {  
  constructor(@Inject(ViewContainerRef) protected viewContainerRef: ViewContainerRef) {}  
}

In ViewEngine the following code will work but not in Ivy before Angular 9:

@Directive({  
  selector: '[child]',  
})  
export class ChildDirective extends BaseDirective {  
  // constructor will be inherited from BaseDirective  
}

In Angular 8 Ivy, you need to decorate the base directive with the @directive decorator to achieve the desired behavior.

Angular 9 will now support this feature for the sake of consistence across all of the Angular codebase.

Support for TypeScript Diagnostics Format

Angular 9 will add support for using the same TypeScript Diagnostics format for the TypeScript Compiler diagnostics.

Also, more descriptive error messages will be generated thanks to better template diagnostics.

In previous versions of Angular, the compiler outputs both native TypeScript diagnostics and its API diagnostics.

Angular 9 will also add support for the schema registry to prevent potential binding issues while checking DOM bindings.

Support for Internationalization in Angular Ivy

Angular Ivy has added improvements for internationalization in Ivy which were missing in the Angular 8 preview.

In Angular 9, the i18n code has been updated to provide a better platform for supporting compile-time inlining.

Support for more scopes in providedIn

providedIn is a decorator that marks a class as available to be provided and injected as a dependency.

It determines which injectors will provide the injectable, by either associating it with an @NgModule or other InjectorType, or by specifying that this injectable should be provided in the root injector, which will be the application-level injector in most apps.

Angular 9 adds support for the platform and any scopes.

A New Type-Safe TestBed.inject() Method Instead of TestBed.get()

Angular 9 provides a new TestBed.inject() instead of the deprecated TestBed.get() method:

TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef

The TestBed.get() method is not type-safe so was replaced with the new TestBed.inject()

What is New with Angular 8.3?

Angular 8.3 has been released a few weeks ago! Also the Angular team has made more steps closer to the final release of Angular 9 with many bug fixes, a few breaking changes, and performance upgrades and improvements to Ivy, the new powerful renderer of Angular that will be the default renderer starting with Angular 9.

Let's see what's new and the Angular 8.3 features in more detail.

Angular is the most popular platform for developing client-side (front-end) mobile and desktop web apps or SPAs. With the new release of Angular 8.3, we have some really cool new features.

In this post, we are going to summarize some of the most important new features officially announced by the Angular team.

Angular 8.3 is released with a bunch of new features:

A new deploy command added to Angular CLI

Angular CLI has many commands that make development quick such as ng new, serve, test, build and add. Now a new ng deploy has been introduced which allows developers to deploy their final app to the cloud with a few clicks from their command-line interface.

Before using the command, you need to add a builder that provides your project with the capability to deploy to a specific hosting provider. For example, for Firebase, you first need to run the ng add @angular/fire command which takes care of all the configurations you need for Firebase. After that, you can run the ng deploy command which creates an optimized production build and upload it to the web.

We already covered that, in much details, in our step by step tutorial

Increased speed in production builds

Angular 8.0 introuced differential loading which is a cool feature that allows Angular CLI to produce two production bundles, one for modern browsers targetting ES6+ and one for legacy browsers targetting ES5. As a result the ng build --prod takes twice the time needed for building a project. In Angular 8.3 optimized the command as follows:

• The ES6+ version is built first,
• Next, ES6+ bundles are transformed to ES5, instead of rebuilding the project from scratch.

At this time, if you get any issues, you can use the previous behavior with the NG_BUILD_DIFFERENTIAL_FULL=true ng build --prod.

A new design of the home page of the Angular project

If you have created and served a project with the latest Angular 8.3 version, you'll notice a nice looking interface with helpful links and common commands to start your development journey:

That's it, now the Angular team has started working on Angular 9.

Updates for Angular 9, October 15, 2019

Day by day, we are getting closer to the final release of Angular 9!

The Angular team has released version 9.0.0-next.11 which added a list of bug fixes, a few new features and breaking changes, and removed the deprecated renderers. Also some performance upgrades and improvements are made to Ivy.

What's New with Angular 8

Angular 8 brings many new features, particularly for the tool-chain.

This version is a major release that involves the complete platform, including the Angular core framework, Angular Material, and the Command Line Interface or CLI.

We have a new set of powerful features that developers will appreciate which are added at many levels; the core framework, Angular Material library and the CLI. It has also enabled many major partner launches such as NativeScript (a framework for building native mobile apps with Angular), Angular Console (console for running Angular projects on your system),@angular/fire (for integrating Firebase with Angular) and StackBlitz (an online IDE for Angular).

As planned, Angular 8 was released and these are the new and most important features:

Preview of Ivy

With the release of Angular 8, a preview version of Ivy is now available for testing. Ivy is a new rendering engine that will produce smaller bundle sizes. But it's not recommended to start using it in production not just yet.

If you would like to start playing with Ivy, you can instruct the Angular CLI to enable Ivy in your project using the --enable-ivy switch:

$ ng new angular-project --enable-ivy

Web Workers

Thanks to Angular CLI 8, web workers are taken into consideration when building the production bundles which helps increase the performance. Angular CLI 8 provides now one bundle for every web worker.

Lazy Loading

The Angular Router has always supported lazy loading but now wiht Angular 8 the support for dynamic EcmaScript imports is added. For example:

{
    path: 'lazy',
    loadChildren: () => import('./mylazy/mylazy.module').then(mod => mod.Module)
}

Improvement of ngUpgrade

Angular 8 has also added new features to ngUpgrade which makes easier for developers to upgrade their Angular.js apps to Angular 8.

Angular 7 Features

v7 introduces many new changes in the Component Dev Kit or CDK and the Material Design library such as the Drag and Drop support and Virtual Scrolling.

In this release, the team has also focused on the Ivy renderer and how to make it smaller and faster by adding support for animation and improving the @NgModule integration etc. But Ivy is not yet ready for prime time.

These are the new features introduced by Angular 7 for developers.

Support for Node 10

Node v10 is the latest version of the Node.js platform which is used by the Angular CLI and most front-end development tools nowadays. v7 has now support for v10 of Node but v8 is also still supported.

Support for TypeScript 3.1

TypeScript 3.1 is the latest version of TypeScript, the official langauge for Angular. Angular 7 requires the latest version of TypeScript.

The CLI Prompts

Angular 7 introduces a new nice feature that allows the CLI to prompt users when executing commands like ng new or ng add. This enables users to make decisions for chosing the right built-in features to include or ignore at many points of the life-cycle of the project's creation and configuration.

As the Angular team is always focusing on making the CLI a powerful tool at the disposal of developers, the new CLI prompts feature is another step toward achieving that goal. More than often, when you use common commands like ng new or ng add, you don't have much control except what you pass as arguments in the first place. But what if you intend to add support for routing in your project but did not specify the --routing switch? You need to stop the command and start over. What, about when you want to avoid installing some unecessary dependencies? Aside from stopping the running command, you have no other options

But thanks to Angular CLI 7, this has changed. Now the CLI supports user prompts. For example, if you run the ng new angular-7-project, you'll presented with a nice prompt asking if you xant to include routing in your project. If you also like to use a specific stylesheet format? The CLI will present you with a list of choices between CSS, SCSS and SASS.

Not just that, you have complete control over the CLI prompts. You can simply add a schematic.json file to instruct the Angular 7 CLI to show or hide specific prompts.

CLI Prompts are also added to Angular Shematics which means developers of CLI tools can take advantage of it to prompt users for more information about customizations and act accordingly. This can be done using an x-prompt key to a Schematics collection.

Angular Performance: CLI Budgets by Default

The obvious fact is that Angular 7 is the best Angular yet! It's more performant and faster than any previou version including v6.

Upgrade from v6 to v7 consumes less time (no more than ten minutes according to the official docs). Also the upgrade process is more easier thanks to the work done in v6. Also the core framework has better performace with the new features such as the virtual scrolling detailed on below section.

But that's not the end of the story. Angular 7 gives importance to the final app bundle not just the framework by correcting a common production bug where the reflect-metadata polyfill gets added in the production build as well but it's only required in development so v7 will remove automatically from your final app's bundle.

For generating smaller bundles, new Angular 7 projects are using the Bundle Budgets in the CLI by default which were optional in v6.

Developers will get warnings when the initial bundle sizes more than 2MB and an error when it has a size of 5MB. But you can easliy change the default budgets from the angular.json file.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Virtual Scrolling: ScrollingModule

Virual scrolling is a technique used by popular UI libraries like Ionic for enabling developers to build efficient UIs. Loading hundreds of items could be very slow in most browsers, virtual scrolling takes performance in consideration and it's particularly useful for mobile apps when you need to scroll large lists without affecting the app's performance and by result the user's experience.

Now the Angular 7 CDK includes support for virtual scrolling via the ScrollingModule module. You can use the <cdk-virtual-scroll-viewport> to display large lists of data by only rendering the elements that actually fit on the visible part of the screen.

You can read more information from Angular Material docs.

Support for Drag and Drop: DragDropModule

With Angular 7, drag and drop support is added on the CDK. Items are rendered as long as the user is moving elements. Developers can use methods like moveItemInArray for reordering lists or transferArrayItem for moving items between lists.

You can read more about drag and drop.

Support for <Slot> HTML Element with Angular Elements

<slot> is a new standard HTML tag that was introduced by the Web Component specification.

You can now write compnenets like the following example:

@Component({
  selector: 'a-component',
  template: `
    <header>
      <slot name="header"></slot>
    </header>
    <slot></slot>`,
  encapsulation: ViewEncapsulation.ShadowDom,
  styles: []
})
export class MyComponent {
}

You can then use this Angular component as a web component:

<a-component>
  <span slot="header">This is a header</span>
  <p>Hello Angular!</p>
</a-componeny>

New Features of Angular 6.1

Angular 6.1 is released in 2018-07-25 with multiple bug fixes and new features.

Angular CLI is also updated to Angular v6.1.1.

Angular 6.1 is the last planned minor version of Angular 6. That means, the Angular team will start working toward releasing Angular 7, the next major version.

Angular 6 major release has a strong focus on the developer toolchain i.e Angular CLI which introduces powerful features such as project workspaces and Schematics etc. Now Angular 7 is on the road after this latest minor version which will be focused on new features such as the Ivy Renderer.

Let's see the new features and how can make Angular developer lives easier.

This new minor release has over 70 bugfixes and 20 new features!

What's New with Angular 6.1?

Angular 6.1 brings many new features to Angular such as:

• You can, now configure Angular Router to remember and restore the position of scroll by setting scrollPositionRestoration to enabled.
• You can use ShadowDOM v1 API for View Encapsulation to specify how CSS is encapsulated in a component (encapsulation: ViewEncapsulation.ShadowDom).
• You can use async/await with Jasmine etc.
• You can use a new pipe that allows you to iterate over a map or object and display key/value pairs in the template.
• Support for TypeScript 2.9: With Angular 6.1, you'll be able to use TypeScript 2.8 and TypeScript 2.9
• Angular CLI v6.1.1: Angular CLI v6.1.1 is also released with many new features that you can see below.

Angular CLI v6.1.1 New Features

• Support for TS 2.8 and 2.9,
• Support for Angular 6.1,
• The use of ES2015 Modules for all files,
• The new --vendor-source-map switch that allows you to have source maps for vendor packages. This is useful for debugging your production packages.

Conclusion

This post is updated with the new Angular 8 features as v8 was just released.

Now the Angular team is working toward releasing Angular 9!