TypeScript Tag

How Promises work in JavaScript

In the current age of JavaScript, Promises are the default way to handle asynchronous behavior in JavaScript. But how do they work? Why should you understand them very well?

A Promise in Real Life

When we make you a promise, you take our word that we will fulfill that promise.

But we don’t tell you when that promise will be fulfilled, so life goes on…

There are two possible scenarios: fulfillment or rejection.

Fulfillment

One day, we fulfill that promise. It makes you so happy that you post about it on Twitter!

Rejection

One day, we tell you that we can’t fulfill the promise.

You make a sad post on Twitter about how we didn’t do what we had promised.

Both scenarios cause an action. The first is a positive one, and the next is a negative one.

Keep this scenario in mind while going through how JavaScript Promises work.

When To Use a Promise

JavaScript is synchronous. It runs from top to bottom. Every line of code below will wait for the execution of the code above it.

But when you want to get data from an API, you don’t know how fast you will get the data back. Rather, you don’t know if you will get the data or an error yet. Errors happen all the time, and those things can’t be planned. But we can be prepared for it.

So when you’re waiting to get a result from the API, your code is blocking the browser. It will freeze the browser. Neither we nor our users are happy about that at all!

Perfect situation for a Promise!

How To Use a Promise

Now that we know that you should use a Promise when you make Ajax requests, we can dive into using Promises. First, we will show you how to define a function that returns a Promise. Then, we will dive into how you can use a function that returns a Promise.

Define a function with a Promise

Below is an example of a function that returns a Promise:

function doSomething(value) {
    return new Promise((resolve, reject) => {
        // Fake a API call
        setTimeout(() => {
            if(value) {
                resolve(value)
            } else {
                reject('The Value Was Not Truthy')
            }
        }, 5000)
    });
}

The function returns a Promise. This Promise can be resolved or rejected.

Like a real-life promise, a Promise can be fulfilled or rejected.

States

According to MDN Web Docs, a JavaScript Promise can have one of three states:

"- pending: initial state, neither fulfilled nor rejected.

- fulfilled: meaning that the operation was completed successfully.

- rejected: meaning that the operation failed."

Pending

The pending state is the initial state. This means that we have this state as soon we call the doSomething() function, so we don’t know yet if the Promise is rejected or resolved.

Resolved

In the example, if the value is truthy, the Promise will be resolved. In this case, we pass the variable value in it to use it when we would call this function.

We can define our conditions to decide when to resolve our Promise.

Rejected

In the example, if the value is falsy, the Promise will be rejected. In this case, we pass an error message. It’s just a string here, but when you make an Ajax request, you pass the server’s error.

Use a Function With a Promise

Now that we know how to define a Promise, we can dive into how to use a function that returns a Promise:

// Classic Promise
doSomething().then((result) => {
    // Do something with the result
}).catch((error) => {
    console.error('Error message: ', error)
})
// Use a returned `Promise` with Async/Await 
(async () => {
    let data = null
    try {
        data = await doSomething()
        // Do something with the result
    } catch(error) {
        console.error('Error message: ', error)
    }
})();

You can recognize a function that returns a Promise by the .then() method or an await keyword. The catch will be called if there is an error in your Promise. So making error handling for a Promise is pretty straightforward.

Promises are used in a lot of JavaScript libraries and frameworks as well. But the simplest web API is the Fetch API, which you should use for making Ajax requests.

For more information and to develop your web app using front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.

Content Source:

1. betterprogramming.pub

Golang Vs. Node.js – respective Strengths and Weaknesses

In this blog, we’ll make a comparative analysis of Golang vs. Node.js for backend web development.

Now, we want to understand whether the switch from a traditional Node.js to the popular Golang is sensible or not. That’s why we would like to compare the two solutions to help you make the best choice.

GoLang’s Maturity

Even though Golang was only launched in 2009, it can still be regarded as quite mature and robust.

However, there can be no comparison when Node.js comes into play. It has a broader audience which supports the platform, even though the API is changing somewhat.

Node.js Performance

Being an interpreted language, which is based on JavaScript, Node.js turns out to be a bit slower than other compiled languages. Node.js is not able to provide the raw performance of CPU or memory-bound tasks that Go does. This is because it’s based on C and C++, which are initially good in terms of performance.

However, when it comes to real life, both show almost equal results.

Concurrency

Node.js is single-threaded and uses an event-callback mechanism. This is what makes Node.js much weaker than Go. It uses co-routines (called “goroutines”) and a lightweight thread, communication among which is elegant and seamless due to channels.

Scalability

Node.js is much weaker in terms of parallel processes for big projects compared to Golang, which was specifically designed to overcome possible issues in this area. Golang has the advantage due to goroutines that enable multiple threads to be performed concurrently, with parallel tasks executed simply and safely.

Front-End and Back-End

You should keep in mind that Golang is perfect for server-side applications, while Node.js is unrivaled when it comes to client-side development. Therefore, Go is an ideal decision if you want to create high-performing concurrent services on the back-end. And Node.js is your choice for the front-end.

Developers’ Tools

For a long time, Golang was regarded as having a very small community because it was young and not widely implemented. Now, the situation has changed. Despite the fact that Go still fails to keep pace with Node.js support, the language boasts numerous packages (more than 100), and the number keeps growing.With JavaScript, you’ll have no difficulty in finding the right tool or package for your project; today, there are more than 100,000. Hundreds of libraries, various tutorials, and multiple platforms are at your disposal.

Availability of Golang and Node.js Developers

According to the 2017 Developer Survey by StackOverflow, JavaScript continues to occupy the leading position, being chosen by 61.2% of developers. Go showed a slightly worse result 4.3%. However, this means Go is already among the most promising languages of 2018, based even on simple Google search.

Currently, it’s still much easier to find a competent team of Node.js developers than put together one of Golang specialists. However, you can always take the IT outsourcing route and reach out to a reputable team with a strong portfolio of Go work.

Error Handling

When you deal with errors while using Go, you have to implement explicit error checking. This can make the process of finding the causes of errors difficult. Yet numerous developers argue that such an approach provides a cleaner application in general.

The Node.js approach with a throw/catch mechanism is more traditional and is preferred by many developers, although there are some problems with consistency at the end.

Learning Curve

JavaScript is one of the most common coding languages nowadays. If you’re familiar with it, it will be no big deal to adapt to using Node.js programming. If you’re a newbie in JavaScript, you can leverage JavaScript’s vast community, which is always ready to share its expertise or give advice.

With Golang, you have to be ready to learn a new language, including co-routines, strict typing, pointers, and other programming concepts that may confuse you at first.

Ordeal by Blockchain

The latest trend of 2017 is blockchain technology. Many projects nowadays trumpet their blockchain-based application at every opportunity. And for good reason! The technology provides reliability, full control for the user, high-quality data, longevity, process integrity, transparency, and one more pack of buzzwords that define the viability of many startups today.

Theoretically, it’s possible to implement Node.js for developing a blockchain. However, building a blockchain in Go is a much easier solution and we highly recommend it.

In its essence, a blockchain is a distributed database of records. Go implies the implementation of an array and a map. The array keeps ordered hashes, and the map would keep hash -> blockpairs (maps are unordered). Then, we add blocks, and that’s it!

Summary

So, what should you choose: Node.js or Golang? The answer to this question depends on which type of development you need at the moment and how much you are going to scale the project.

For sure, Node.js has a broader community and a comprehensive documentation, yet, Go has a syntactically cleaner concurrency model, and it is better suited for scaling up.

Node.js, in its turn, can offer you a variety of packages, most of which are hard to re-implement in Go. In these case, it would be wiser to use Node.js.

If you feel overwhelmed by all this information or simply need some extra hands with Golang or Node.js expertise, then write a comment to initialise a conversation with other developers here.

For more information and to develop web application using Node JS, Hire Node Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using Node JS, please visit our Hire Node Developer technology page.

Content Source:

1. medium.com

What’s new in TypeScript 4.2?

Typescript’s 4.2 was just released recently. What awesome features does this release bring? What impact does it have in your daily life as a Developer? Should you immediately update?

Here, we will be going through all the most exciting new features. Here is a summary:

• Smarter type alias preservation
• Leading/middle rest elements in tuple types
• Stricter checks for the in operator
• –noPropertyAccessFromIndexSignature
• Template literal expressions have template literal types
• Improved uncalled function checks in logical expressions
• Better understanding of the compile process
• Support for Abstract Constructor Types

To get an editor with the latest Typescript version use Visual Studio Code Insiders. You can use a plugin alternatively for VS Code.

If you just want to have a play while reading the article you can use the Typescript Playground here. It is a fun and super easy tool to use.

Smarter Type Alias Preservation

Sometimes TypeScript just doesn’t resolve types properly. It may return the correct types but just not return the correct alias. The alias could be important and shouldn’t be lost along the way.

Let’s check this function:

export type BasicPrimitive = number | bigint;

export function divisablePer0(value: BasicPrimitive) {
    if (value === 0) {
        return undefined;
    }

    return value;
}

type ReturnAlias = ReturnType<typeof divisablePer0>; // number | bigint | undefined

Notice that an undefined type needs to be added to the method return type as it’s returning undefined on some scenarios.

Before 4.2 the return of type divisablePer0 is number | bigint | undefined. That type is indeed correct but we have lost some information. The alias BasicPrimitive got lost in the process, which is a handy piece of information to have.

If we do the same on TypeScript 4.2 we get the correct alias:

export type BasicPrimitive = number | bigint;

export function divisablePer0(value: BasicPrimitive) {
    if (value === 0) {
        return undefined;
    }

    return value;
}

type ReturnAlias = ReturnType<typeof divisablePer0>; // BasicPrimitive | undefined

Now the method divisablePer0 has the proper return type: BasicPrimitive | undefined. That makes your code more readable just by upgrading.

Leading/middle Rest Elements in Tuple Types

In the article about mapped types here we already looked at TypeScript Tuples. As a refresher, let’s revisit the example:

let arrayOptions: [string, boolean, boolean];
arrayOptions = ['config', true, true]; // works
arrayOptions = [true, 'config', true];
//             ^^^^^  ^^^^^^^^^
// Does not work: incompatible types

function printConfig(data: string) {
  console.log(data);
}

printConfig(arrayOptions[0]);

However, we forgot to check whether Tuples can use optional elements. Let’s see what the previous example would look like:

let arrayOptions: [string, boolean?, boolean?];
arrayOptions = ['config', true, true]; // works
arrayOptions = ['config', true]; // works too
arrayOptions = ['config']; // works too

function printConfig(data: string) {
  console.log(data);
}

printConfig(arrayOptions[0]);

Prior to 4.2 we could even use the spread operator to indicate a dynamic number of elements:

let arrayOptions: [string, ...boolean[]];

arrayOptions = ['config', true, true]; // works
arrayOptions = ['config', true]; // works too
arrayOptions = ['config']; // works too

function printConfig(data: string) {
  console.log(data);
}

printConfig(arrayOptions[0]);

In this new TypeScript, version Tuples become more powerful. Previously, we could use the spread operator but we couldn’t define the last element types.

let arrayOptions: [string, ...boolean[], number];
arrayOptions = ['config', true, true, 12]; // works
arrayOptions = ['config', true, 12]; // works too
arrayOptions = ['config', 12]; // works too

function printConfig(data: string) {
  console.log(data);
}

printConfig(arrayOptions[0]);

Note that something like this is invalid:

let arrayOptions: [string, ...boolean[], number?];

An optional element can’t follow a rest element. However, note that …boolean[] does accept an empty array, so that Tuple would accept [string, number] types.

Let’s see that in detail in the following example:

let arrayOptions: [string, ...boolean[], number];
arrayOptions = ['config', 12]; // works

Stricter Checks for the in Operator

The in operator is handy to know if a method or a property is in an object. However, in JavaScript, it will fail at runtime if it’s checked against a primitive.

Now, when you try to do this:

"method" in 23
//          ^^
// Error: The right-hand side of an 'in' expression must not be a primitive.

You’ll get an error telling you explicitly what’s going on. As this operator has been made stricter this release might introduce breaking changes.

--noPropertyAccessFromIndexSignature

Yet another compiler configuration that’s always interesting. In TypeScript, you can access properties using the bracketed element syntax or the dot syntax like JavaScript. That accessor is possible when the key is a string.

interface Person {

name: string;

}

const p: Person = { name: 'Max };

console.log(p.name) // Max

console.log(p['name']) // Max

There’s a situation that has led to explicit property miss typing:

interface Person {

name: string;

[key: string]: string;

}

const p: Person = { name: 'Max };

console.log(p.namme) // undefined

console.log(p['namme']) // undefined

Note how we are accessing the wrong property namme but because it fits the [key: string] implicit one, TypeScript won’t fail.

Enabling –noPropertyAccessFromIndexSignature will make TypeScript look for the explicit property when using the dotted syntax.

interface Person {
  name: string;
  [key: string]: string;
}
const p: Person = { name: 'Max' };
console.log(p.namme)
//          ^^^^^^^^
// Error
console.log(p['namme']) // works fine

It’s not part of the strict configuration as this might not suit all developers and codebases.

Template Literal Expressions Have Template Literal Types

Template literal types were introduced in 4.1 and here they got smarter. Previously, you couldn’t define a type template usage template literals.

type PropertyType = `get${string}`;

function getProperty(property: PropertyType, target: any) {
    return target[property];
}

getProperty('getName', {}); // works

const propertyName = 'Name';

const x = `get${propertyName}`;

getProperty(x, {});
//         ^^^
// Error: Argument of type 'string' is not assignable to parameter of type '`get${string}`'

The core problem is that string expressions are resolving to type string which leads to this type of incompatibility:

const x = `get${propertyName}`; // string

However, with 4.2, template string expressions will always start out with the template literal type:

const x = `get${propertyName}`; // getName

Improved Uncalled Function Checks in Logical Expressions

TypeScript’s uncalled function checks apply within && and || expressions. Under –strictNullChecks you will check the following error now:

function isInvited(name: string) {
    return name !== 'Robert';
}

function greet(name: string) {
    if (isInvited) {
    //  ^^^^^^^^^
    // Error:
    // This condition will always return true since the function is always defined.
    // Did you mean to call it instead?
        return `Welcome ${name}`;
    }
    return `Sorry you are not invited`;
}

Better Understanding of the Compile Process

Sometimes it can be quite challenging to work out where the Typescript file definitions are pulled from. It’s sometimes a trial and error process.

It’s now possible to get a deeper insight into what’s going on, making the compiler more verbose, using the following:

tsc --explainFiles

Let’s see the result:

Pic courtesy: betterprogramming.pub

It is an awesome feature that will help you understand further Typescript’s internals.

For more information and to develop web application using TypeScript, Hire TypeScript Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using TypeScript, please visit our technology page.

Content Source:

1. blog.logrocket.com

Top 6 Angular component libraries

Angular is one of the most popularly used frameworks with best-designed practices and tools for app development companies. Angular encourages the developers to use components to split the user interface into reusable and different pieces. There are many popular Angular component libraries available in the market that can help the Angular development companies create a robust application for their clients.

In this blog, we will go through some of the most popular Angular component libraries that one can use in 2021.

Why Use Angular Component Libraries?

Angular components are created by using Angular and TypeScript. These components are implemented with Google’s material design. It also enables the Angular developers to split the UI into various pieces. Some of the fantastic aspects that make developers use Angular component library are –

• Modular Architecture

The components in Angular are created in a similar manner to the modules. It properly depends on the developers on which to use and when to use it.

• Responsive

The Angular component libraries are very responsive in nature, making it crucial for website designing & development.

• User-friendly

Angular component libraries are user-friendly and are built in a lightweight manner. It is effortless to learn and use for any Angular developer.

1. NGX Bootstrap

NGX Bootstrap is one of the most popular open-source Angular components. It gives vastness in bootstrap capabilities and helps developers utilize it on the next Angular app development project for their clients.

NGX Bootstrap has scored 5.2k stars by the GitHub community.

Features of NGX Bootstrap

• Flexible

AngularJS developers of the ngx-bootstrap team put effort into creating ngx-bootstrap modular, which can help the development companies implement their own whatnot, styles, and templates. All the Angular components are designed by keeping adaptivity and extensibility in mind. They can work efficiently on Desktop and Mobile platforms with the same performance level.

• Good Documentation

NGX Bootstrap offers well-written documentation that can significantly help AngularJS developers ease their work to improve software quality. The team at ngx-bootstrap provides easy to understand and complete documentation.

• Tinker-friendly Code

NGX Bootstrap has incorporated a set of guidelines that can help in enhancing the code readability and maintainability.

Components of NGX Bootstrap

• Collapse
• Typehead
• Collapse
• Alerts
• Carousel
• Accordion

2. NG Bootstrap

The NG Bootstrap is a popular Angular development bootstrap component. It has around 7.6k stars on GitHub. When working with NG Bootstrap, there is no need to use third-party JS dependencies. It is also used for high-testing coverage.

Features of NG Bootstrap

• Widgets

The NG bootstrap offers widgets like modal, tablet, rating, and tooltip.

• Accessible

The NG bootstrap offers unique widgets and gives complete access to them. The NG bootstrap team uses HTML elements and attributes that can help AngularJS app development companies create robust applications. This library also provides focus management work and keyboard navigation.

• Quality

The team at NG bootstrap tests the code with 100% convergence and reviews all the changes.

• Team

There is a bootstrap/angular-UI team created for developing widgets and also has many core Angular contributors.

• Carousel
• Popover
• Typehead
• Model
• Tooltip
• Datepicker

3. Teradata Covalent UI Platform

Teradata is a UI platform created on Angular and Angular-Material. It comes with solutions that are a combination of the comprehensive web framework and proven design language. It even gives a quick start to the AngularJS developers in creating a modern web application. Teradata Covalent scores 2.2k GitHub scores.

Angular Command-line interface enables the developers to work with Angular-material and create, deploy, & test the application. It offers simplified stepper, file upload, user interface layout, custom web components, expansion panels, and more testing tools for both end-to-end tests and unit tests.

Features of Teradata

• Angular-material components
• Utilities
• eCharts

Components of Teradata

• Base layout
• Manage list
• Expansion panels
• Virtual scrolling
• Stepper
• Loading
• Breadcrumbs

4. Nebular

Nebular is an Angular 8 UI library that focuses on the brand’s adaptability and design. It has four visual themes that have support for custom CSS properties. This library is based on the Eva Design System. Nebular holds few security modules and around 40+ UI components. Some of these components are stated below. Besides this, it also has 6.7k starts in the GitHub community.

Features of Nebular

• Server-side rendering
• High-quality Angular components
• Visual themes

Components of Nebular

• Infinite list
• Sidebar
• Layout
• Context menu
• Tooltip
• Window
• Global Search
• Checkbox

5. Clarity

Clarity is an open-source Angular component that acts as a bridge between the HTML framework and Angular components. Clarity is the best platform for both software developers and designers.

Clarity library offers implemented data-bound components and a well-structured option to the Angular development service providers. It also owns 6.1k GitHub stars.

Features of Clarity

• Product-based

The Clarity team offers an understanding and easy-to-use platform that helps the developers solve a vast array of challenges.

• Reliable

It is the most reliable platform as it provides a high bar of quality.

• Rapid Development

Clarity is designed in a way that makes communication and collaboration of expertise very easy and rapid.

• Evolving

With new technologies and techniques coming into the picture, Clarity keeps on evolving.

Components of Clarity

• Login page
• Progress bars
• Toggle Switches
• Wizard
• Signpost
• Grid
• Alert
• Password

6. Onsen UI

Onsen UI is a component library that is one of the most used by the Angular development service company for creating mobile web apps for Android and iOS using JavaScript. It has 8.2 stars in the GitHub community.

Onsen UI is a library that comes with development tools and powerful CLI with Monaca. The main benefits of Onsen UI are its UI components that can easily be plugged into the mobile application.

Features of Onsen UI

• Supports Monaca

Monaca is a cross-platform used for creating hybrid apps, and Onsen UI performs very well with it.

• Native Look

It provides ready-to-use components like toolbar, forms, side menu, and much more to give a native look. Besides this, Onsen UI also supports Android and iOS material design, making the appearance and style of the application look according to the selected platform.

• Optimized Performance

The new version of Onsen UI is now enabled to provide optimized performance without slowing up the process.

• Easy to Learn

Despite being a powerful tool to develop a mobile application, it is straightforward to learn and use.

• Zero-time Setup

Onsen UI allows the developer to work with technologies like CSS, HTML, and JavaScript. These are the technologies that they might already know, so it would take zero-time to get started with the tool.

Components of Onsen UI

• Carousel
• Conditional
• Controls
• Dialog
• Form
• Gesture
• Menu
• List
• Navigation
• Tabbar

For more information and to develop web application using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop web application using Angular, please visit our technology page.

Content Source:

1. medium.com

What’s new in Node.js 15

In this article, we’re going to discuss about Node.js 15 new features, including throw on unhandled rejections and V8 8.6 language features.

Node.js 15 was released recently. It comes with a number of major features:

• Throw on unhandled rejections
• V8 8.6 language features
• NPM 7
• Experimental support for QUIC
• N-API Version 7
• Refinement of the Async Local Storage APIs

Let’s explore what they are and how to use them.

Use NMV to Explore Node

In a previous article, we provided instructions on using NVM (Node Version Manager) to manage Node.js and NPM versions. In our environment, we had Node.js 12.16.0 and NPM 6.14.8 installed. By running nvm install node, we installed Node.js 15.4.0 and NPM7.0.15.

We have two windows open, one is set to Node.js 12, and the other one is set to Node.js 15.

On the node12 window:

$ nvm use 12
Now using node v12.16.0 (npm v6.14.8)

On the node15 window:

$ nvm use 15
Now using node v15.4.0 (npm v7.0.15)

Now we’re ready to explore.

Throw On Unhandled Rejections

The unhandledRejection event is emitted whenever a promise is rejected and no error handler is attached to the promise within a turn of the event loop. Starting from Node.js 15, the default mode for unhandledRejection has been changed to throw from warn. In throw mode, if an unhandledRejection hook is not set, the unhandledRejection is raised as an uncaught exception.

Create a program so that a promise is rejected with an error message:

function myPromise() {
  new Promise((_, reject) =>
    setTimeout(
      () =>
        reject({
          error: 'The call is rejected with an error',
        }),
      1000
    )
  ).then((data) => console.log(data.data));
}

myPromise();

When you run this code on node12 window it shows a long warning message:

$ node myPromise.js
(node:79104) UnhandledPromiseRejectionWarning: #<Object>
(node:79104) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

(node:79104) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.Users that have an unhandledRejection hook should see no change in behavior, and it’s still possible to switch modes using the --unhandled-rejections=mode process flag.

Run this code on the node15 window and it throws the error, UnhandledPromiseRejection:

$ node myPromise.js
node:internal/process/promises:227
          triggerUncaughtException(err, true /* fromPromise */);
          ^
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Add an error handler in the then clause in the below code (.catch((error) => console.log(error.error)) works too).

function myPromise() {
  new Promise((_, reject) =>
    setTimeout(
      () =>
        reject({
          error: 'The call is rejected with an error',
        }),
      1000
    )
  ).then(
    (data) => console.log(data.data),
    (error) => console.log(error.error)
  );
}

myPromise();

Now, the code runs correctly on both node12 and node15 windows:

$ node myPromise.js
The call is rejected with an error

It’s best practice to write an error handler for promises. However, there will be cases where errors are not caught. It’s a good idea to set up the unhandledRejection hook to catch potential errors.

function myPromise() {
  new Promise((_, reject) =>
    setTimeout(
      () =>
        reject({
          error: 'The call is rejected with an error',
        }),
      1000
    )
  ).then((data) => console.log(data.data));
}

myPromise();

process.on('unhandledRejection', (reason, promise) => {
  console.log('reason is', reason);
  console.log('promise is', promise);
  // Application specific logging, throwing an error, or other logic here
});

The unhandledRejection hook works for both Node.js 12 and Node.js 15. With that set up, unhandledRejection can be handled properly.

$ node myPromise.js
reason is { error: 'The call is rejected with an error' }
promise is Promise { <rejected> { error: 'The call is rejected with an error' } }

V8 8.6 Language Features

The V8 JavaScript engine has been updated from 8.4 to 8.6. Along with performance tweaks and improvements, the V8 update also brings the following language features:

• Promise.any() and AggregateError (from V8 8.5)
• await setTimeout and AbortController (experimental)
• String.prototype.replaceAll() (from V8 8.5)
• Logical assignment operators &&=, ||=, and ??= (from V8 8.5)

Promise.any() and AggregateError

First, let’s take a look at the existing Promise.all() method.

Promise.all() takes an iterable of promises as an input and returns a single promise that resolves to an array of the results of the input promises.

The following program calls Promise.all() on two resolved promises:

function myPromise(delay) {
  return new Promise((resolve) =>
    setTimeout(
      () =>
        resolve({
          data: `The data from ${delay} ms delay`,
        }),
      delay
    )
  );
}

async function getData() {
  try {
    const data = await Promise.all([myPromise(5000), myPromise(100)]);
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

getData();

The Promise.all() returned promise will resolve when all of the input’s promises have resolved, or if the input iterable contains no promises:

$ node myPromise.js
[
  { data: 'The data from 5000 ms delay' },
  { data: 'The data from 100 ms delay' }
]

The following program calls Promise.all() on two rejected promises.

function myPromise(delay) {
  return new Promise((_, reject) =>
    setTimeout(
      () =>
        reject({
          error: `The error from ${delay} ms delay`,
        }),
      delay
    )
  );
}

async function getData() {
  try {
    const data = await Promise.all([myPromise(5000), myPromise(100)]);
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

getData();

Promise.all() immediately rejects any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message or error:

$ node myPromise.js
{ error: 'The error from 100 ms delay' }

Promise.any() is new in Node.js 15. This is the opposite of Promise.all(). It takes an iterable of promises and, as soon as one of the promises in the iterable fulfills, returns a single promise that resolves with the value from that promise.

The following program calls Promise.any() on two resolved promises:

function myPromise(delay) {
  return new Promise((resolve) =>
    setTimeout(
      () =>
        resolve({
          data: `The error from ${delay} ms delay`,
        }),
      delay
    )
  );
}

async function getData() {
  try {
    const data = await Promise.any([myPromise(5000), myPromise(100)]);
    console.log(data);
  } catch (error) {
    console.log(error);
    console.log(error.errors);
  }
}

getData();

Promise.any() returns the first resolved promise:

$ node myPromise.js
{ data: 'The error from 100 ms delay' }

The following program calls Promise.any() on two rejected promises:

function myPromise(delay) {
  return new Promise((_, reject) =>
    setTimeout(
      () =>
        reject({
          error: `The error from ${delay} ms delay`,
        }),
      delay
    )
  );
}

async function getData() {
  try {
    const data = await Promise.any([myPromise(5000), myPromise(100)]);
    console.log(data);
  } catch (error) {
    console.log(error);
    console.log(error.errors);
  }
}

getData();

If no promises in the iterable are fulfilled — i.e. all of the given promises are rejected — the returned promise is rejected with an AggregateError, a new subclass of Error that groups together individual errors.

$ node myPromise.js
[AggregateError: All promises were rejected]
[
  { error: 'The error from 5000 ms delay' },
  { error: 'The error from 100 ms delay' }
]

Await setTimeout and AbortController

In the previous examples, we used setTimeout inside the promise call. The WindowOrWorkerGlobalScope’s setTimeout uses a callback. However, timers/promises provides a promisified version of setTimeout, which can be used with async/await.

const { setTimeout } = require('timers/promises');

async function myPromise(delay) {
  await setTimeout(delay);
  return new Promise((resolve) => {
    resolve({
      data: `The data from ${delay} ms delay`,
    });
  });
}

async function getData() {
  try {
    const data = await Promise.any([myPromise(5000), myPromise(100)]);
    console.log(data);
  } catch (error) {
    console.log(error);
    console.log(error.errors);
  }
}

getData();

AbortController is a JavaScript object that allows us to abort one or more web requests as and when desired. We gave examples of how to use AbortController on the topic of useAsync.

Both await setTimeout and AbortController are experimental features.

String.prototype.replaceAll()

First, let’s take a look at the existing String.prototype.replace() method.

replace() returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a regular expression. The replacement can be a string or a function to be called for each match.

If the pattern is a string, only the first occurrence will be replaced.

'20+1+2+3'.replace('+', '-');

Executing the above statement will yield “20–1+2+3”.

In order to replace all ‘+’ with ‘-’, a regular expression has to be used.

'20+1+2+3'.replace(/\+/g, '-');

Execute the above statement will yield “20–1-2-3”.

replaceAll() is new in Node.js 15 to avoid using the regular expression. It returns a new string with all matches of a pattern replaced by a replacement. The pattern can be a string or a regular expression and the replacement can be a string or a function to be called for each match.

With replaceAll(), we do not have to use a regular expression to replace all ‘+’ with ‘-’.

'20+1+2+3'.replaceAll('+', '-');

Executing the above statement will yield “20–1-2-3”.

Logical assignment operators &&=, ||=, and ??=

A few logical assignment operators have been added to Node.js 15.

The logical AND assignment (x &&= y) operator only assigns if x is truthy. x &&= y is equivalent to x && (x = y), and it is not equivalent to x = x && y.

let x = 0;
let y = 1;

x &&= 0; // 0
x &&= 1; // 0
y &&= 1; // 1
y &&= 0; // 0

The logical OR assignment (x ||= y) operator only assigns if x is falsy. x ||= y is equivalent to x || (x = y), and it is not equivalent to x = x || y.

let x = 0;
let y = 1;

x ||= 0; // 0
x ||= 1; // 1
y ||= 1; // 1
y ||= 0; // 1

The logical nullish assignment (x ??= y) operator only assigns if x is nullish (null or undefined). x ??= y is equivalent to x ?? (x = y), and it is not equivalent to x = x ?? y.

let x = undefined;
let y = '';

x ??= null; // null
x ??= 'a value'; // "a value"
y ??= undefined; // ""
y ??= null; // ""

For more information and to develop web application using Node JS, Hire Node Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using Node JS, please visit our Hire Node Developer technology page.

Content Source:

1. medium.com

What will be the best Back End development framework for 2021

What should we learn next? If you are a developer, this question should always be in your mind. Every day, new technologies are introduced and improvements are made to existing ones. Since we can’t learn all these technologies, it is really important to decide what should we learn next.

In this article, we’re going to discuss three back end development frameworks based on three different programming languages to give you an insight into what you should learn in 2021.

Node.js

Pic courtesy: medium.com; Source: nodejs.org

NodeJS is a JavaScript runtime environment framework that can be used for cross-platform development purposes. Since JavaScript is one of the most popular languages in the current context, that popularity has lifted up NodeJS to be one of the most used back end frameworks as well. Apart from that, NodeJS brings many important features that attract developers.

• NodeJS never waits until an API returns data since it’s asynchronous. NodeJS will move onto the next API request without waiting for the response of the previous one and the notification mechanism of Events of NodeJS takes the responsibility for delivering the response to the server correctly. Hence, NodeJS is known as asynchronous and event-driven.
• Fast code execution.
• No buffer.
• Although NodeJS is single-threaded, high scalability enables it to handle a large number of requests.

NodeJS is used by some famous companies all around the world including eBay, General Electric, GoDaddy, Microsoft, PayPal, Uber, Wikipins. Node JS is a perfect match if you’re building I/O bound applications, data streaming applications, Data Intensive Real-time Applications (DIRT), JSON APIs based applications, or single-page applications.

Advantages

• Based on JavaScript, which is well known to everyone.
• Easy learning curve and large community.
• Contains an excellent package manager.
• Library support.
• Quick and easy handling of concurrent requests.
• Simple and scalable.
• Well established.

Disadvantages

• Some developers may have difficulties working with asynchronous requests.
• Nested callbacks.

Django

Pic courtesy: medium.com; Source: .djangoproject.com

Django is an open-source, high-level web application framework written in Python. Django was introduced in 2005, and its idea of using Python for web development was a huge revolution. Django follows the model-template-view architecture and the main focus of this framework is to provide an easy method for the development of complex websites. Instagram, Mozilla, Bitbucket are some leading companies that use Django as their framework.

Advantages

• Rapid Development. One of the main intentions of Django was to reduce the development time of an application.
• Django helps to avoid much common security falls like SQL injection, cross-site scripting, cross-site request forgery, etc.
• Scalability.
• Supports a large set of libraries and helping modules.
• You don’t have to worry much about user authentication and content administration since Django takes care of them for you.

Disadvantages

• Many developers do not have expert knowledge in Python compared to JavaScript.
• Although Django is scalable, there can be issues with small scale applications.
• Monolithic framework.
• Django can’t handle multiple requests simultaneously.

Laravel

Pic courtesy: medium.com; Source: laravel.com

PHP is another famous language among web developers and Laravel is based on PHP. Laravel follows model-view-control architecture and is robust and easy to understand. Laravel is known as a good starting point for young developers. It provides a large set of features, like flexible routing for easy scaling, configuration management to handle different environments, query builders and ORM to query databases, Schema Builder to maintain database definitions and schemas, lightweight templates, etc. 9GAG, MasterCard, Kmong are some famous companies that use Laravel in their products.

Advantages

• High Security.
• MVC Based.
  Uses blade template engine.
• Built-in authorization and authentication systems.
• Supports test automation.

Disadvantages

• Less inbuilt support when compared to Django and NodeJs since Laravel is lightweight.
• Community support is minimized compared to other platforms.
• Converting legacy systems to Laravel is difficult.
• Updating from an older version to a new one may break your application.
• Full-page reloads can be a bit heavy in mobile apps when compared to websites.

NodeJs vs Django vs Laravel

Pic courtesy: medium.com

As you can see, all these three frameworks are very popular among developers and they tend to select the framework based on their preferred language most of the time. For example, If you’re good with JavaScript, you will surely go with NodeJS. But there are other aspects we should take into account when selecting a framework.

If you’re a novice developer, who doesn’t have knowledge about JavaScript, Python, or PHP, Django or Python will be a good option for you to start with. Since Python is very straightforward and simple in its syntax, you can easily understand it. So, we will rank Django at the top when it comes to the learning curve while Laravel and NodeJS come next.

Security is another measurement we need to address in any project and all these frameworks provide built-in features to make a developer’s life easy. Out of these three, Django claims first place here as well.

If we talk about scalability and performance Django can be recognized as the best framework in scalability aspects while NodeJS provides the best performance.

All these frameworks have large communities and good documentation to get started with and they’re well established. So don’t hesitate to select them for your projects.

For more information and to develop web application using NodeJS, Hire Back End Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using NodeJS, please visit our technology page.

Content Source:

1. medium.com

How to automate the job with Node JS

You know those tedious tasks you have to do at work: Updating configuration files, copying and pasting files, updating Jira tickets.

What is a Reskin?

The definition of a reskin at the company was using the same game mechanics, screens and positioning of elements, but changing the visual aesthetics such as color and assets. So in the context of a simple game like ‘Rock Paper Scissors’, we would create a template with basic assets like below.

Pic courtesy: medium.com

But when we create a reskin of this, we would use different assets and the game would still work. If you look at games like Candy Crush or Angry Birds, you’ll find that they have many varieties of the same game. Usually Halloween, Christmas or Easter releases. From a business perspective it makes perfect sense. Now… back to our implementation. Each of our games would share the same bundled JavaScript file, and load in a JSON file that had different content and asset paths.

We had stacked daily schedules, and our first thought was, ‘a lot of this could be automated.’ Whenever we created a new game, we had to carry out these steps:

1. Do a git pull on the templates repository to make sure they were up to date.
2. Create a new branch – Identified by the Jira ticket ID from the master branch.
3. Make a copy of the template we needed to build.
4. Run gulp.
5. Update the content in a config.json file. This would involve asset paths, headings and paragraphs as well as data service requests.
6. Build locally and check content matched the stakeholder’s word document.
7. Verify with the designers they are happy with how it looks.
8. Merge to master branch and move on to the next one.
9. Update the status of the Jira ticket and leave a comment for the stakeholders involved.
10. Rinse and repeat.

Another Reskin?

Now to us, this felt more administrative than actual development work. We were exposed to Bash scripting in a previous role and jumped on it to create a few scripts to reduce the effort involved. One of the scripts updated the templates and created a new branch, the other script did a commit and merged the project to Staging and Production environments.

Setting up a project would take us three-to-ten minutes to set up manually. Maybe five to ten minutes for deployment. Depending on the complexity of the game, it could take anything from ten minutes to half a day. The scripts helped, but a lot of time was still spent on updating the content or trying to chase down missing information.

Writing code to save time was not enough. We were thinking of a better approach to our workflow so that we could utilize the scripts more. Move the content from out of the word documents, and into Jira tickets, breaking it out into the relevant custom fields. The Designers, instead of sending a link to where the assets exist on the public drive, it would be more practical to set up a content delivery network (CDN) repository with a Staging and Production URL to the assets.

Jira API

Things like this can take a while to enforce, but our process did improve over time. we did some research on the API of Jira, our project management tool, and did some requests to the Jira tickets we were working on. We were pulling back a lot of valuable data. So valuable that we made the decision to integrate it into our Bash scripts to read values from Jira tickets, to also post comments and tag stakeholders when we finished.

Bash Transition to Node

The Bash scripts were good, but if someone was working on a Windows machine, they couldn’t be run. After doing some digging, we made the decision to use JavaScript to wrap the
whole process into a bespoke build tool. we called the tool Mason, and it would change everything.

CLI

When you use Git, we assume you do in the terminal, you will notice it has a very friendly command line interface. If you misspell or type a command incorrectly, it will politely make a suggestion on what it thinks you were trying to type. A library called commander applies the same behavior, and this was one of many libraries we used.

Consider the simplified code example below. It’s bootstrapping a Command Line Interface (CLI) application.

src/mason.js

#! /usr/bin/env node

const mason = require('commander');
const { version } = require('./package.json');
const console = require('console');

// commands
const create = require('./commands/create');
const setup = require('./commands/setup');

mason
    .version(version);

mason
    .command('setup [env]')
    .description('run setup commands for all envs')
    .action(setup);

mason
    .command('create <ticketId>')
    .description('creates a new game')
    .action(create);

mason
    .command('*')
    .action(() => {
        mason.help();
    });

mason.parse(process.argv);

if (!mason.args.length) {
    mason.help();
}

With the use of npm, you can run a link from your package.json and it will create a global alias.

...
"bin": {
  "mason": "src/mason.js"
},
...

When we run npm link in the root of the project.

npm link

It will provide us with a command we can call, called mason. So whenever we call mason in our terminal, it will run that mason.js script. All tasks fall under one umbrella command called mason, and we used it to build games every day. The time we saved was… incredible.

You can see below in a hypothetical example of what we did back then, that we pass a Jira ticket number to the command as an argument. This would curl the Jira API, and fetch all the information we needed to update the game. It would then proceed to build and deploy the project. we would then post a comment and tag the stakeholder & designer to let them know it was done.

$ mason create GS-234
... calling Jira API 
... OK! got values!
... creating a new branch from master called 'GS-234'
... updating templates repository
... copying from template 'pick-from-three'
... injecting values into config JSON
... building project
... deploying game
... Perfect! Here is the live link 
http://www.fake-studio.com/game/fire-water-earth
... Posted comment 'Hey [~ben.smith], this has been released. Does the design look okay? [~jamie.lane]' on Jira.

All done with a few key strokes!

We were so happy with the whole project.

Idea Behind the concept

The first part is a collection of recipes, or instructional building blocks that behave as individual global commands. These can be used as you go about your day, and can be called at any time to speed up your workflow or for pure convenience.

Development Method

The second part is a walk-through of creating a cross-platform build tool from the ground up. Each script that achieves a certain task will be its own command, with a main umbrella command usually the name of your project encapsulating them all.

We understand that circumstances and flows are different in every business, but you should be able to find something, even if it’s small, that can make your day a little easier at the office.

For more information and to develop web application using Node JS, Hire Node Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using Node JS, please visit our Hire Node Developer technology page.

Content Source:

1. medium.com

What’s new in Angular 11

Angular Version 11 release has updates across the platform including the framework, the CLI and components. Let’s dive in!

What’s in this release?

Automatic Inlining of Fonts

To make your apps even faster by speeding up their first contentful paint, we’re introducing automatic font inlining. During compile time Angular CLI will download and inline fonts that are being used and linked in the application. We enable this by default in apps built with version 11. All you need to do to take advantage of this optimization is update your app!

Component Test Harnesses

In Angular v9 we introduced Component Test Harnesses. They provide a robust and legible API surface to help with testing Angular Material components. It gives developers a way to interact with Angular Material components using the supported API during testing.

Releasing with version 11, we have harnesses for all of the components! Now developers can create more robust test suites.

We’ve also included performance improvements and new APIs. The parallel function makes working with asynchronous actions in your tests easier by allowing developers to run multiple asynchronous interactions with components in parallel. The manualChangeDetection function gives developers access to finer grained control of change detection by disabling automatic change detection in unit tests.

For more details and examples of these APIs and other new features, be sure to check out the documentation for Angular Material Test Harnesses!

Improved Reporting and Logging

We’ve made changes to the builder phase reporting to make it even more helpful during development. We are bringing in new CLI output updates to make logs and reports easier to read.

Screenshot of angular CLI output nicely formatted into columns.

Improved CLI output formatting
Pic courtesy: blog.angular.io

Updated Language Service Preview

The Angular Language Service provides helpful tools to make development with Angular productive and fun. The current version of the language service is based on View Engine and today we’re giving a sneak peek of the Ivy-based language service. The updated language service provides a more powerful and accurate experience for developers.

Now, the language service will be able to correctly infer generic types in templates the same way the TypeScript compiler does. For example, in the screenshot below we’re able to infer that the iterable is of type string.

Screenshot of intellisense style insights in Angular templates.

Angular Language Service inferring iterable types in templates
Pic courtesy: blog.angular.io

This powerful new update is still in development but we wanted to share an update as we keep preparing it for a full release in an upcoming version.

Updated Hot Module Replacement (HMR) Support

Angular has offered support for HMR but enabling it required configuration and code changes making it less than ideal to quickly include in Angular projects. In version 11

we’ve updated the CLI to allow enabling HMR when starting an application with ng serve. To get started, run the following command:

ng serve --hmr

After the local server starts the console will display a message confirming that HMR is active:

NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.

Now during development the latest changes to components, templates and styles will be instantly updated into the running application. All without requiring a full page refresh. Data typed into forms are preserved as well as scroll position providing a boost to developer productivity.

Faster Builds

We’re bringing a faster development and build cycle by making updates to some key areas.

• When installing dependencies, the ngcc update process is now 2–4x faster.
• Faster compilation with TypeScript v4.0.

Experimental webpack 5 Support

Now, teams can opt-in to webpack v5. Currently, you could experiment with module federation. In the future, webpack v5 will clear the path for:

• Faster builds with persistent disk caching
• Smaller bundles thanks to cjs tree-shaking

Support is experimental and under development so we don’t recommend opting in for production uses.

Want to try out webpack 5? To enable it in your project, add the following section to your package.json file:

"resolutions": {
     "webpack": "5.4.0"
}

Currently, you’ll need to use yarn to test this as npm does not yet support the resolutions property.

Linting

In previous versions of Angular, we’ve shipped a default implementation for linting (TSLint). Now, TSLint is deprecated by the project creators who recommend migration to ESLint. James Henry together with other folks from the open-source community developed a third-party solution and migration path via typescript-eslint, angular-eslint and tslint-to-eslint-config! We’ve been collaborating closely to ensure a smooth transition of Angular developers to the supported linting stack.

We’re deprecating the use of TSLint and Codelyzer in version 11. This means that in future versions the default implementation for linting Angular projects will not be available.

Head over to the official project page for a guide to incorporate angular-eslint in a project and migrate from TSLint.

Housekeeping

In this update we’re removing support for IE9/IE10 and IE mobile. IE11 is the only version of IE still supported by Angular. We’ve also removed deprecated APIs and added a few to the deprecation list. Be sure to check this out to make sure you are using the latest APIs and following our recommended best practices.

Roadmap

We’ve also updated the roadmap to keep you posted on our current priorities. Some of the announcements in this post are updates on in-progress projects from the roadmap. This reflects our approach to incrementally rollout larger efforts and allows developers to provide early feedback that we can incorporate it into the final release.
We collaborated with Lukas Ruebbelke from the Angular community on updating the content of some of the projects to better reflect the value they provide to developers.

For more information and to develop web application using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop web application using Angular, please visit our technology page.

Content Source:

1. blog.angular.io

Communicating between templates with function-like HTML segments in Angular

The function-like HTML segment refers to a block of HTML with the ability to accept context variables (in other words, parameters). A typical Angular component has two major parts of logic, a HTML template and a Typescript class. The capability to utilize this kind of function-like HTML segment is essential for a good shared component. It is because a shared component with only a fixed HTML template is very difficult to fit all the needs among all different use cases. Trying to satisfy all potential use cases with a single and fixed HTML template will usually end up with a large template with lots of conditional statements (like *ngIf), which is painful to read and maintain.

Here we would like to explain with an example, about how we can utilize TemplateRef to define function-like HTML segments for communication between templates, which is a good solution to deal with the large template problem.

Getting started

Assume that there is a shared component DataListComponent, which takes an array of data and displays them in the view:

export interface DataTableRow {
  dataType: string;
  value: any;
}
@Component({
  selector: 'data-list',
  template: `
    <div *ngFor="let row of data" [ngSwitch]="row.dataType">
      <div *ngSwitchCase="'string'">{{row.value}}</div>
      <div *ngSwitchCase="'number'"># {{row.value | number}}</div>
      <div *ngSwitchCase="'date'">{{row.value | date}}</div>
    </div>
  `
})
export class DataListComponent {
  @Input() data: DataTableRow[] = [];
}

It understands only three types of data now, which are string, number and date. When we want to add more types to it, the easiest way is to simply add more switch cases. It is totally fine when such new types are generic enough that have universal representations. Yet, for data that is depending on the users, adding more switch cases can make the code very dirty.

Say we want to add the new type boolean which displays true/false in FirstComponent, yes/no in SecondComponent. If we simply go for the more-switch-cases solution, it may have something like this:

<div *ngSwitchCase="'boolean-firstComponent'">
  {{ row.value ? 'true' : 'false }}
</div>
<div *ngSwitchCase="'boolean-secondComponent'">
  {{ row.value ? 'yes' : 'no}}
</div>

This approach is bad as the shared component now contains component-specific logic. Besides, this block of code is going to expand really fast when there are more new use cases in the future, which will soon become a disaster. Ideally, we want to pass HTML segments from the parents, so that we can keep those specific logic away from the shared component.

@Component({
  template: `
    <data-list [data]="data">
      <!-- component specific logic to display true/false -->
    </data-list>
  `,
  ...
})
export class FirstComponent {...}
@Component({
  template: `
    <data-list [data]="data">
      <!-- component specific logic to display yes/no -->
    </data-list>
  `,
  ...
})
export class SecondComponent {...}

Minimal working example

The logic behind is actually very straight forward. First, we need to define templates with context in the user components:

@Component({
  template: `
    <data-list [data]="data">
      <ng-template let-value="value">
        {{value ? 'true' : 'false'}}
      </ng-template>
    </data-list>
  `,
  ...
})
export class FirstComponent {...}
@Component({
  template: `
    <data-list [data]="data">
      <ng-template let-value="value">
        {{value ? 'yes' : 'no'}}
      </ng-template>
    </data-list>
  `,
  ...
})
export class SecondComponent {...}

Next, we add the logic to read and present the template segment inside the shared component:

@Component({
  selector: 'data-list',
  template: `
    <div *ngFor="let row of data" [ngSwitch]="row.dataType">
      <div *ngSwitchCase="'string'">{{row.value}}</div>
      <div *ngSwitchCase="'number'"># {{row.value | number}}</div>
      <div *ngSwitchCase="'date'">{{row.value | date}}</div>
      <div *ngSwitchCase="'boolean'">
        <ng-container *ngTemplateOutlet="rowTemplate; context:{
          value: row.value
        }"></ng-container>
      </div>
    </div>
  `
})
export class DataListComponent {
  @Input() data: DataTableRow[] = [];
  @ContentChild(TemplateRef) rowTemplate: TemplateRef<any>;
}

Now we have a shared component which is capable to interpret a HTML segment from the outside. Yet, it is still not ideal. What if we have more than one templates?

Example with multiple templates

This one is more tricky. Although TemplateRef is capable of parsing context, it doesn’t have a name or ID that we can rely on to distinguish multiple templates from each other programmatically. As a result, we need to add a wrapper component on top of it when we have more than one templates, so that we can add identifiers.

@Component({
  selector: 'custom-row-definition',
  template: ''
})
export class CustomRowDefinitionComponent {
  @Input() dataType: string;
  @ContentChild(TemplateRef) rowTemplate: TemplateRef<any>;
}

Instead of directly retrieving the TemplateRef in the shared component, we retrieve the wrapper:

@Component({
  selector: 'data-list',
  template: `
    <div *ngFor="let row of data" [ngSwitch]="row.dataType">
      <div *ngSwitchCase="'string'">String: {{row.value}}</div>
      <div *ngSwitchCase="'number'"># {{row.value | number}}</div>
      <div *ngSwitchCase="'date'">{{row.value | date}}</div>
      <ng-container *ngFor="let def of customRowDefinitions">
        <ng-container *ngSwitchCase="def.dataType">
          <ng-container 
            *ngTemplateOutlet="def.rowTemplate; context:{
              value: row.value
            }"></ng-container>
        </ng-container>
      </ng-container>
    </div>
  `
})
export class DataListComponent {
  @Input() data: DataTableRow[] = [];
  @ContentChildren(CustomRowDefinitionComponent)
  customRowDefinitions: QueryList<CustomRowDefinitionComponent>;
}

(Having multiple ng-container together with structural directives may cause performance issue potentially, but it is not the main point of this article, so we leave it there for simplicity.)

In this example, we use the dataType property inside the wrapper as identifiers for the templates. As a result, we can now define multiple templates with different dataType.

@Component({
  selector: 'app-root',
  template: `
    <data-list [data]="data">
      <custom-row-definition dataType="array">
        <ng-template let-value="value">
          {{value.join(' - ')}}
        </ng-template>
      </custom-row-definition>
      <custom-row-definition dataType="money">
        <ng-template let-value="value">
          $ {{value | number}}
        </ng-template>
      </custom-row-definition>
    </data-list>
  `
})
export class AppComponent {
  data: DataTableRow[] = [
    { dataType: 'string', value: 'Row 1' },
    { dataType: 'number', value: 500 },
    { dataType: 'date', value: new Date() },
    { dataType: 'array', value: [1, 2, 3, 4] },
    { dataType: 'money', value: 200 }
  ]
}

Why not using ng-content?

Some may ask why don’t we just use ng-content with name to project the content from the outside? The major difference is the capability to have context (parameters). ng-content is like a function without parameters, which cannot achieve real mutual communication between templates. It is like a one-way channel to merge some HTML segments from the outside, but no real interaction with the template inside. It won’t be able to achieve use cases like the example above.

For more information and to develop web application using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop web application using Angular, please visit our technology page.

Content Source:

1. medium.com

Top 10 npm packages for Node.js framework

Node is a leader in the asynchronous framework market. The platform now supports a huge portion of startups and businesses that are earning hundreds of millions of dollars in revenue. Thus, it establishes itself as a platform that can sustain a huge load, whilst retaining smooth performance. Node.js was perhaps the biggest revelation of modern server engineering that we saw. By the looks of it, Node isn’t stopping any time soon; it’s the exact opposite. The project continues to push out frequent updates and maintains old releases to support older platforms. A new release secures some loopholes in OpenSSL, but also adds more support for languages like C and C++.

Starting with Node.js is a fairly easy process; the guidelines are outlined and thousands of projects are sitting on GitHub, waiting for you to inspect and analyze their architecture. Node.js works great on all platforms, even on Windows 10, for those who are interested. That makes it a truly great platform to begin learning front-end and back-end development together. Let’s not forget that Node has the most populated package manager of any framework or language known to man. Thus, building a website takes only a couple of minutes, thanks to the modules and libraries that are available through the package manager(NPM). So let’s get started with the topmost packages of nodeJS.

Express

Pic courtesy: medium.com

All common programming languages share similar structures in the way things are built. One of the fastest ways to get a programming language to serve your needs is through a framework. Express is the leading Node.js framework for quickly creating and publishing applications and APIs. The framework’s minimal structure allows any Node.js developer to quickly launch a functional application with the use of Express Generator. Express gives you a solid outline to build your apps on top of. Combine it with any of the other packages we will discuss, and you will quickly realize just how amazing this framework truly is.

PM2

Pic courtesy: medium.com

Node.js is known for being the framework to use for scaling large applications, and infrastructure. Process management should be an essential priority for any Node.js user. PM2 offers both process management for production applications, and a load-balancer to help with any possible performance tweaks. With PM2, your applications stay online indefinitely, giving you the tools to reload apps without having to experience any sort of downtime. Is it a surprise that hundreds of thousands of Node.js users consider this an essential tool to have?

Mocha

Pic courtesy: medium.com

Even more asynchronous action going on here in this Node.js package roundup, this time we have Mocha – a feature-rich JavaScript test framework running on Node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correc t test cases. Testing is so important to understand how well the application is performing, where we can locate any particular leaks, and also to know how we can improve these bugs, problems, and irritations that we experience. Testing lets developers to understand better how their code performs, and in turn learn more skills as they continue down their chosen path.

Lodash

Pic courtesy: medium.com

A modern JavaScript utility library delivering modularity, performance & extras. Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc. Lodash’s modular methods are great for:

• Iterating arrays, objects, & strings
• Manipulating & testing values
• Creating composite functions

ESLint

Pic courtesy: medium.com

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. Inshort the goal is to make code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:

• ESLint uses Espree for JavaScript parsing.
• ESLint uses an AST to evaluate patterns in code.
• ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

Passport

Pic courtesy: medium.com

Passport is a unique authentication module for Node.js devs. The main goal of Passport is to help with authentication requests, this Passport achieves through the use of third-party plugins that act as authentication methods, otherwise known as strategies. The Passport API is straightforward, you give Passport a request that you need to authenticate, the Passport in turn gives you the hooks that let you control what happens after an authentication call fails, or succeeds. Exploring the Strategies, there are hundreds of authentication methods to choose from, starting from internal ones, all the way up to external ones like Google, Facebook, and others.

Moment

One of the most stable & maintained time manipulation libraries you can find. In the whole collection of libraries, created to solve the issues of formatting, parsing, converting and, generally, working with different forms of time, Moment.js is the one that has seen the widest adoption.

import moment from "moment";
// in relation to release date of this post
moment().format("MMMM Do YYYY"); // June 6th 2019
moment("20111031", "YYYYMMDD").fromNow(); // 8 years ago
moment().subtract(10, "days").calendar(); // 05/27/2019

With its latest v2 release, Moment.js got rewritten, to support latest ES6 syntax. This brings improved modularity and better performance for always-green browsers. Such things are important, especially when dealing with a library as big as Moment.js.

Chalk

With Chalk, we’re entering the world of terminal-related tools and libraries, where a number of downloads, and thus popularity, go crazy! Chalk is an extremely simple library, created for one, simple purpose – styling your terminal strings! Just like with Require – it proves that the most useful things are also the simplest ones.

import chalk from "chalk";
// string concatenation - template literals
console.log(`${chalk.blue("Hello")} World${chalk.red("!")}`);
 
// chainable API
console.log(chalk.blue.bgRed.bold("Hello world!"));

Of course, the API is simple, intuitive (chainable) and it works really well with all features that JS has to offer natively. The official page of the packages states that it’s used by more than 20K different packages! Maybe that’s where the weekly downloads count comes from (~25M). Even though, such numbers cannot be ignored.

Socket.io

Socket.io is just happened to get early access to the Nodejs package that allows you to build a truly real-time communication application that would require real-time streams of data content, either directly from the data that you are working with, or through an Application programming interface(API) that comes from another source. Some example apps like Twitter, they deployed a bot for collecting the latest tweets and on Facebook, bot for watching the news, thus with the combinations of APIs to explore some interesting things that work with data in real-time.

Request-Promise

Request is designed to be the simplest way possible to make http calls. It supports HTTPS and follows redirects by default. You can also stream a file to a PUT or POST request. Although it’s deprecated still the most useful package for network calls. few usages are listed below,

• Crawl a webpage
• GET/POST something from a JSON REST API
• POST like HTML forms do (also with Include a cookie)
• Get the full response instead of just the body

For more information and to develop web application using Node JS, Hire Node Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using Node JS, please visit our Hire Node Developer technology page.

Content Source:

1. laravel-news.com