What's new in Angular 8

Sameer Srivastava — Fri, 31 May 2019 23:08:49 +0000

So finally the much awaited version(due to IVY buzz) of Angular has been released. Angular 8 includes preview of Ivy and Bazel. The Angular team has been talking about Ivy Renderer for more than a year and now we have atleast an opt-in-preview for the same in the version 8. In order to test Ivy or Bazel you need to activate them manually.

Apart from this, the new version of framework has made a lot improvement in bundle size and runtime speed.

The most important change or feature in this version is Differential Loading - different bundle for legacy and modern browsers.

Other changes includes Dynamic imports in route configurations for lazy loading modules, Web Worker support, Support for Typescript 3.4.x.

Differential Loading

Differential Loading is a process by which a browser, based on its capabilities, chooses between a legacy(ES5) or modern(ES2015+) JavaScript. Thus Angular will create a legacy build and a modern build and when the application will be loaded, the appropriate bundle will be loaded.
The bundles created by Angular will be injected using nomodule attribute.

<script nomodule src="…"> // Legacy
<script type="module" src="…"> // Modern

The nomodule attribute is a boolean attribute that prevents a script from being executed in browsers that support module scripts thereby allowing selective execution of module scripts in modern browsers and old scripts in legacy ones.

Lazy Loading changes - Dynamic Imports

The new version of Angular is depricating the way we used to lazy load our feature module in router configurations. So earlier we used to do the following in router config:

{
    path: '/user',
    loadChildren: './user/user.module#UserModule'
}

New syntax:

{
    path: '/user',
    loadChildren: () => import(`./user/user.module`).then(mod => mod.UserModule)
}

Builder APIs

There are lot of CLI commands which run complex process. Each of these commands use an internal tool called Architect to run CLI builders (which eventually use another tool to get the task done). With Angular 8, CLI Builder API is available for the developers to customize the Angular CLI by adding or modifying commands.

Web Worker Support

Web Workers allow you to run CPU intensive computations in a background thread, freeing the main thread to update the user interface.
We can generate web worker using ng generate command in CLI

ng generate webWorker test-worker

Support for TypeScript

Angular 8 will include the updates to the latest versions of its dependencies like RxJs & TypeScript. Angular now uses TypeScript 3.4.

So these are some new additions to Angular. Although they are nice to have but they aren't very much critical. The important addition to this is definitely the opt-in-preview for Ivy. So with Angular version 8, you can choose to opt in to start using a preview version of Ivy. And with the additions of differential loading, you’ll get noticeable performance gains.

Keep Calm & Keep Coding!

Design Patterns in JavaScript

Sameer Srivastava — Fri, 31 May 2019 18:54:56 +0000

What is a Pattern?

A pattern can be thought of as a template, which can be used in few different situations. A pattern provides us with a solution strategy that we can apply to commonly occurring problems in software design.
Basically, design patterns allow the code you write to be easier to implement, build, and maintain.

Program to an interface, not an implementation.

Design Patterns Categories

Design patterns can be categorized into multiple categories. But following are used in general.

1) Creational Design Pattern
These mainly focuses on class instantiation or you can say handling object creation mechanism.
So these pattern help in solving issues that might generate by object creation. Factory, Constructor, Prototype, Abstract, Singleton, Builder are some of creational design patterns.

2) Structural Design Pattern
Structural design patterns are all about object composition. These mainly identify ways to realize the relationship between objects and ensure that one part of system is independent to another.
Decorator, Bridge, Flyweight, Adapter, Composite and Proxy are some of these patterns.

3) Behavioral Design Pattern
Behavioral design pattern focuses on object's communication in a system.
Some of these patterns are Iterator, State, Mediator and Observer.

JavaScript Design Patterns

There are numerous patterns which we could implement using JavaScript. But I'll be discussing on only four of them, namely Constructor Pattern, Module Pattern, Singleton Pattern and Prototype Pattern.

Constructor Pattern
We all know that constructors are used to initialize the object once the system allocates a memory to it. In JavaScript almost everything is an object, even functions.
Now JavaScript supports constructor functions and calling constructor function through "new" implies that we want that function to behave like a constructor and instantiate an object. Lets see it through an example:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
Person.prototype.fullName = function() {
  console.log(this.firstName + ' ' + this.lastName);
}
var driver = new Person('John', 'Doe');
driver.fullName();    //Prints John Doe in console

The above example demonstrates a simple constructor design pattern. Important thing to note here is that we are using function's prototype object to define fullName().
The reason behind this is that in this way the fullName() will not be redefined every time whenever we create new objects of Person. Now only a single instance of fullName() will be shared among different Person objects.

Module Pattern
Modules are small units of independent and reusable code. They help in keeping a section of code separate and organized. Modules helps in defining private and public members separately, making it one of the more desired design patterns in JavaScript paradigm.
With Module pattern we can mimic the concept of classes i.e. we include both private and public variables and methods inside a single object, also protecting pieces from leaking into global scope. So basically here we are encapsulating everything with the help of closures and exposing only public API. Take a look at the example below:

var counterApi = (function(){
  var counter = 0;

  var inc = function() {
    counter++;
  }

  var dec = function() {
    counter--;
  }
  return {
    increment: function() {
      inc();
    },
    decrement: function() {
      dec();
    },
    reset: function() {
      counter = 0;
    },
    getCounterValue: function() {
      return counter;
    }
  };
})();

counterApi.increment();
counterApi.increment();
counterApi.increment();
counterApi.decrement();
counterApi.reset();
console.log(counterApi.getCounterValue());

In the above example you can see that the variable counter is protected from the global scope thus behaving like a private member. The increment, decrement, reset and getCounterValue functions are exposed to the outer world and only these can access counter.
Within the Module pattern, variables or methods declared are only available inside the module itself (because of closure). Variables or methods defined within the returning object however are available to everyone.

Singleton Pattern
The singleton pattern restricts instantiation of a class to a single object. A new instance of class is created only when there is no instance in existence. However if an instance of a class exists, it is returned. Following is a simple example to implement this pattern:

var mySingleton = (function () {
  // Instance stores a reference to the Singleton
  var instance;
  function init() {
    // Singleton
    function printNum() {
      console.log(num);
    }
    var num = Math.random();
    return {
      printNumber: function() {
        printNum();
      },
      getNumber: function() {
        return num;
      }
    };
  };
  return {
    getInstance: function () {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

var ins1 = mySingleton.getInstance();
var ins2 = mySingleton.getInstance();
console.log(ins1.getNumber() === ins2.getNumber()); // true

Prototype Pattern
Prototype pattern refers to creating objects based on the template of an existing one. In JavaScript, we can think this as a prototypal inheritance where the objects created act as prototypes for others.
The major advantage of prototype pattern is performance boost. All the child objects points to same function defined in parent object instead of creating their own copies.
We can make use Object.create() (it creates a new object, using an existing object as the prototype of the newly created object) to implement this pattern.

var libraryPrototype = {
  books: ['Book1', 'Book2'],
  getAllBooks: function() {
    console.log(this.books);
  }
}

var myLibrary = Object.create(libraryPrototype, 
{ 
  name: {
    writable: true,
    configurable: true,
    value: 'My Library'
  }
});

console.log(myLibrary.name); // prints "My Library"
myLibrary.getAllBooks(); // prints ["Book1", "Book2"]

So in the above example, libraryPrototype is existing object which acts as a prototype for myLibrary object. New properties to myLibrary can be initialized on the second argument of Object.create.

Design patterns can speed up the development process by providing tested, proven development paradigms.They are also quite a powerful approach to getting all of the developers in an organization or team on the same page when creating or maintaining solutions.
They are tools to improve efficiency but more importantly allow you as the developer to improve your overall design skills as well as the quality of your projects, and give you a wider scope of skill sets.

Forem: Sameer Srivastava