Lint Driven Development

It is no wonder that “Lint Driven Development – LDD” is one of the most essential development approach that every developer should follow up! It is an integral part of every developer’s toolbox! If you could agree my statement, then you’re already on the track of super cool development. If not, then I can get you a step further towards that through this blog.

What is linting?

You write code. Probably a lot of code. And you make mistakes. Probably a lot of mistakes. Sometimes your mistake is a real bug that can be fixed. Sometimes it’s just an unclear coding style which may seem trivial at first but they become patently important as the codebase grows and as more people stick their hands in it. You can’t always focus on fixing this inevitable mistakes that you do! Isn’t it? Because, there is probably no practical way to make it impossible to write sloppy and unclear code, but it is fascinating to consider how tooling has evolved to make it harder. One fine tooling is “Linters” which understands you and your code.

Linter is part of the style guide. It’s a small piece of software that automatically checks if your code has any stylistic or potential errors and meets the predefined code convention rules. You don’t have to manually go through the code base to check style and any errors. Linting helps us in two ways. First, it looks for code that will potentially break. Second, it provides a style guide for the development team to follow.

Why Linting is Important?

Some great movies involves compelling stories, and colorful screenplays that are easy to watch and understand. From that aspect, the job of a developer is similar to that of the movie director, since the code has to be easy to read and comprehensive. I know it’s pretty hard to focus on code quality when you’re under pressure to meet the next deadline, but if you’re thinking long term, you definitely need to write code that’s readable and maintainable.

In addition to its readability and maintainability there lies an important third reason which is lower technical debt which allows speeding up long term software development since it can be reused without involving any future developer’s time to work on fixing the old bugs and styling the code.

How Linters prevent our problems?

Linting tools throws warnings about certain types of code that can lead to common problems. Some are quite major. As a Javascript Engineer, I’ll list down some major problems in JS code and how linters could prevent those problems!

Problem #1
Most of us have got this one common question in our mind that our code works in development but why not in production? We all knew that most modern web stacks support minification, but neither the minifiers nor the browser tell us when are we missing semicolons. But a missing semicolon can break minified javascript and so it stops in production. So Linters notify you about the missing semicolons, braces, etc..

Problem #2:

Have you ever created a variable called “id” or “name” or “value”? Yeah, so has every other developer in history, and people who work on the same codebase as you is not an exception. And if someone forgets to declare all their variables with var, as they can overwrite each other unexpectedly. The scope of the variables is gone as well as your code.

You don’t always need to rely on your reviewers to find mistakes in your code and in some cases it takes too much of your reviewer’s time to find some sloppy mistakes or even they might miss it completely. Linting your JS can prevent potential XSS security holes, readability problems, and many more!

Linting Tools

Linters comes with a lot of tools that are capable of finding stylistic errors and sloppy mistakes in every technology that we use. Among many JS linters, ESLint seems to be the best available linter as it is completely plug-able, every single rule is a plugin and we can add more rules at run-time. It gives concise output, and also includes the rule name by default so it’s always easy to know which rules are causing the errors. We also have Linters for most languages like TS, CSS, HTML, Python, etc..

There are different means by which one can use linting tools to improve the code quality. To mention a few,

Linting manually, in the browser

Copy and Paste your code into JSHint or CSSLint or HTMLHint or any other static code analysis tool to check for some interesting lint errors. This might be the quickest way to get started with linting.

Linting from your code editor

Many code editors have support for configurable linting, such as VSCode. Here is the guide to configure Linters in VSCode. It has many extensions for all of the linters above. Grab one and have it check your code automatically which is really great since you’re already in your editor, where you can clean your code up simultaneously while you write it.

Linting from the command line

If you’re using a command line tool like Npm, you’re ahead of the curve. Just install a linter of your choice and follow some commands to get notified of your errors in code.

Linting as part of the build process

This is the best way to ensure that these types of problems never see the light of day. I recommend adding a flag to the ng serve and the ng build commands that automatically runs ng lint before each build and causes a build failure on any linter rule violation.

Even if you set up a linter, it might warn you against invalid code but it cannot stop you from pushing this code to the repo. This is where Git pre-commit hook comes into the picture. It’ll restrict the developer from committing the code if it doesn’t pass the rules available in .git/hooks. For information about Git Hooks, please visit here.

It is NoteWorthy!

I recommend turning off most of your linter’s settings when you start using it, so that you have a minimal set of errors to start with. Consider the ones it throws out, learn what they mean and then fix them. Later, re-enable another setting and repeat until you understand all the rules. I understand, it takes some time to understand everything and to get them fixed up. Let me copy out some words from Bruce Lee.

“I fear not the man who has practiced 10,000 kicks once,

         but I fear the man who has practiced one kick 10,000 times.”

– Bruce Lee

Software development is pretty much always slower than anyone wants it to be. It takes time. Sometimes you just have to be patient enough to turn out the code you need to write. No matter how long you’ve been in this field, you should keep practicing the craft of coding.

Conclusion

Linting is a vital part of our workflow, and will definitely help us improve our skills. If you were not using linting, I hope this blog convinced you a bit to configure lint to your code. I think Linting is one of the traits that makes a good developer! What do you think makes a great developer? Love to hear from you!

Rendering in Web Browser

The main purpose of the browser is to present the web resources by requesting it from the server and rendering it. In present days, apart from the development phase, web developers face challenges where their UX designs are not the same across the browsers.

Basically, the HTML specifications are designed by W3C(World Wide Web Consortium). But only a part of the rules is followed by the browsers and the other parts are their own extensions and developments. This is why we face cross-browser compatibility issues.

The similarities across all browsers are the address bar, reload URL, bookmarks, home page, etc,,.

High Level Structure of a Browser

  • User Interface:  The View we see it when we hit an URL/link
  • Browser Engine: An engine that invokes the browser and responsible for displaying content on the screen(between UI and Rendering Engine)
  • Rendering Engine
  • Networking: For network calls that happen in the web browsers
  • UI Backend
  • Javascript Engine: Parse Javascript code
  • Data Storage: Refers the Local storage, cookies, WebSQL, IndexedDB, etc..

The Rendering Engine and the Javascript Engine will vary based on the browsers. Due to this, we face compatibility issues. Few are here,

browser-details

Let’s go more detail about Rendering Engine!

Rendering engine

Rendering Outline

First, HTML is parsed to DOM tree using HTML parser. In the meantime, the CSS is parsed to CSSOM tree using CSS parser. Combining both DOM and CSSOM, the ‘Render Tree’ is constructed.
Then goes the layout formation. In the layout process, every DOM element gets its coordinates.
Using the paint method, all coordinates get their position in the view/display

For a better experience, the rendering engine will try to display the contents on the screen as soon as possible. Many times we see the half view is loaded in the browser. This is because only a part of the HTML and CSS is parsed as rendering engine tried to give the view as quickly as possible and remaining are loaded later.

Terms:

Scripts:
The Rendering engine reads the HTML document line by line. If it finds a script tag <script>, the parsing of the document halts until the script finished. Due to this, the loading of the document takes time. To avoid this, use async/defer in the script tag to process asynchronously which means a separate thread is called for script parsing.

Repaint/Restyle:
Changing the style of the element that does not affect the respective element’s position, like changing the background color, the repaint will happen.

Reflow:
The Reflow will happen on changing the content that affects the element’s position or a situation where restructuring the DOM is necessary, like changing the text of an element, animations for the relative elements, resizing, scrolling, etc,.The cost of rendering is high when reflow happens frequently.

Better Optimization:

  • Use proper encoding document types and valid HTML, CSS elements.
  • Apply the rules in the correct cascade order
  • Apply animation only for the absolute/fixed positioned elements.
  • Work with ‘offline elements’.
  • Place the scripts end of the document or use async/defer in the scripts

References:

  • https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Rendering_engines
  • https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509
  • https://hackernoon.com/how-do-web-browsers-work-40cefd2cb1e1
  • http://frontendbabel.info/articles/webpage-rendering-101/
  • https://developers.google.com/web/updates/2019/02/rendering-on-the-web
  • https://labs.ft.com/2012/08/basic-offline-html5-web-app/

Angular Lazy Loading

In this blog, we will be learning about lazy loading in angular. The main concept of lazy loading is that don’t load something which you don’t need. Lazy loading is a useful technique for reducing the size of the bundle when the app loads initially which improves the app loads time thus improving the user experience. It’s also easy to have features loaded only when the user navigates to their routes for the first time.

Main steps to set up lazy loading

  1. Create a feature module.
  2. Use loadChildren in the main routing module.
  3. Create a routing module for feature module.

Create a feature module

In order to use lazy loading, we need submodules in our applications often called a feature module. Assuming that you have an Angular CLI project, let’s create a feature module using the following command.

Create lazy loading module

Note: Don’t load the feature module in your main module.

Now let’s create two components inside the lazyLoading module using the following command.

Create lazy loading component

Use loadChildren in the main routing module

Now let’s load the feature module in our main routing module (app-routing.module.ts). We need to use loadChildren() method to lazy load the feature module.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path:'lazyLoading',
    loadChildren:
      './lazy-loading/lazy-loading.module#LazyLoadingModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

 

The loadChildren() method takes the path to the module, then # followed by the module’s class name.

Create a routing module for a feature module

Now let’s configure routes in the routing module for the components under the feature module.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';

const routes: Routes = [
{ path: '', component: OneComponent },
{ path: 'two', component: TwoComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class LazyLoadingRoutingModule { }

 

In the feature routing module include the routes with RouterModule’s forChild() method instead of the forRoot() method.

Lazy loading has been configured successfully now LazyLoadingModule will load only when the user navigates to “/lazyLoading”.

Preloading Strategy

When we run the application only the main modules are loaded all the other modules are lazy loaded. In this case, the lazily loaded modules load only when the user navigates to the feature module. Since the module is lazy loaded we have to wait for it to be loaded to overcome this we can use preload strategy.

To use preloading strategy we have to add preloadingStrategt in our app-routing.module.ts as shown below.

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
const routes: Routes = [
 { path: '', redirectTo: 'home', pathMatch: 'full' },
 { 
  path: 'lazyLoading', 
  loadChildren:
    './lazy-loading/lazy-loading.module#LazyLoadingModule' 
 }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules,
  }
)],
exports: [RouterModule]
})
export class AppRoutingModule { }

The two subclasses in preloadingStrategy are.

  • NoPreloading: Default strategy which provides no preloading.
  • PreloadAllModules: Preloads all the lazy loaded modules.

By using PreloadAllModules we can load the modules which are required on the initial load of an application. All the other lazy loaded modules are loaded asynchronously right after the initial load of the application is done.

Another strategy is to preload the modules which are required and some other module with a delay. The method to use this is to add the data object to the route config as shown below.

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { 
    path: 'lazyLoading', 
    loadChildren: './lazy-loading/lazy-loading.module#LazyLoadingModule',
    data: { preload: true, delay: false }, 
  }
];

 

Reference:

 

Angular Flex-Layout

Flex layout is a package made for angular to use CSS flexbox features. The flex layout is used to display the elements within the flexbox container to be automatically arranged based on the parent container. Flex layout is used for building a layout structure. In this blog, we will be learning how to use angular flex layout module and its features.

Installation

Install the flex layout package with npm/yarn in your angular project.

$ npm i @angular/flex-layout

And add FlexLayoutModule into your AppModule.

Flex Layout

Let’s get started with flex layout features and how to use it and their properties.

  1. fxFlex

The fxFlex should be used on the element within the flexbox container. The fxFlex is used to resize the element based on the parent container. The fxFlex supports two usage long-form and short-form.

  • Long-form 
<div fxFlex="<grow> <shrink> <basis>"></div>
  • Short-form 
 <div fxFlex="<basis>"></div>

The flex basis value can be percentages, pixels, em, vm, vh, calcs.

Example:

<div fxFlex="20"> … </div>
  1. fxLayout

The fxLayout is used to specify the direction of the elements inside the flexbox container. Shown below are the property values of fxLayout.

  • row – Default value, the elements are displayed horizontally, as a row.
  • row-reverse – Same as the row, but in reverse order.
  • column – The elements are displayed vertically, as a column.
  • column-reverse – Same as the column, but in reverse order.
  • fxLayout + wrap – Specifies that the elements will wrap if necessary.

Note: when using the wrap, must first specify the layout direction.

Example:

<div fxLayout="row"> … </div>

<div fxLayout="row wrap"> … </div>
  1. fxLayoutGap

The fxLayout is used to specify the margin gaps on elements within the flexbox container. Shown below are the default mode of fxLayout.

  • margin-right is used when the flexbox container flex direction is a row.
  • margin-bottom is used when the flexbox container flex direction is a column.

Note: The last child element will not have the margin gap only the inside gap are specified.

Example:

<div fxLayoutGap="20px"> … </div>
  1. fxLayoutAlign

The fxLayoutAlign is used to align the elements inside a flexbox container. Shown below are the property values of fxLayoutAlign.

  • strat or flex-start – Default value, the elements are positioned at the beginning of the container.
  • end or flex-end – The elements are positioned at the end of the container.
  • center – The elements are positioned at the center of the container.
  • space-around – The elements are positioned with space before, between and after the lines.
  • space-between – The elements are positioned with space between the lines.
  • space-evenly – The elements have equal space around them.

Example:

 <div fxLayoutAlign="space-between center"> … </div>
  1. fxFlexOffset

This should be used on the element within the flexbox container. This is used to specify the margin-left to the elements within the flexbox container.

Example:

<div fxFlexOffset="20px"> … </div>
  1. fxFlexOrder

This should be used on the element within the flexbox container. This is used to specify the order for the elements inside the flexbox container.

Example:

 <div fxFlexOrder="2"> … </div>
  1. fxFlexFill

The fxFlexFill is used to maximizes the height and the width of the elements inside the flexbox container.

Example:

<div fxFlexFill> … </div>
  1. fxShow and fxHide

The fxShow and fxHide is used to show/hide the element based on the value passed to it.

Example:

<div fxHide="true"> … </div>

Responsive Layouts

The responsive layouts are used to apply different layout styles for different viewport sizes and display devices.  This can be used by combining breakpoints with fxLayout features. Some of the breakpoints are xs, sm, md, lg, xl for more reference responsive layouts.

Example:

<div fxHide.xs="true"> … </div>

Reference:

Insights on code reviews

“Anybody can write code if he learns programming. But what makes him stand out of the crowd is the quality of the code”. Yes, the way you write and construct the code defines you as developer. Before anything else, how many of us feel to read another person’s code? How do we feel looking into our own code post 6 months ? There might be some suggestions that pops in our mind like, “Oh! I would have written like this/that”, which you would have never thought during coding that piece of code. Likewise, there may be some suggestions by our peers that could improve your code, which people name it as “Code review”. People often fail to understand the purpose of code review. We have cultivated a habit of code review as nitpicking. Ofcourse, it is partly yes! But the main purpose according to me is to share the knowledge and enhance the quality. Let’s dig deeper into it.

I still remember the first time when I was given an opportunity to review a code. I didn’t have a clear checklist or flow to review a code. But I had a few vague points(do’s and don’ts) which I learnt through the experiences of my projects. I started noting it down and framed my own checklists and reviewed. After my maiden review, whenever I code, I started following my own checklists. That’s when I realized, how could these checklists make a huge impact on the quality of the code. Believe me or not, each time when you do a code review, it enlightens us in one way or another !

When do you think your code is good to go ?

Well, it depends on who reviews it. When you go to a peer, he/she will have her own criteria. When it comes to another person the criteria will vary, where one focuses on formatting while the other doesn’t. This will lead to inconsistent feedback. Instead, we must have a common checklist/criteria in your organization which are open to developers and reviewers. In Squashapps, we have a set of 10-15 criterias and developers check those before submitting for the review. This would be good approach to be followed as it saves time and this also lets developer’s know what to be focussed on while coding.

Automate your work !

When you know what your organization needs as a quality check, you can automate them. We can use few plugins like ESLint, which will alert you from writing stupid codes. If a pattern of your code is already reviewed, you could create a reviewed template on your own and use it for further development like the one given in this link: https://code.visualstudio.com/docs/editor/userdefinedsnippets .

Don’t make the code review a nightmare!

It is always better to have a small code reviews. Yes, I do understand the fact that some features may have lesser codes while some may have a week or a month’s work. In the case of a week or a month’s work the code gets piled up which may lead to more review comments. This will become a nightmare for both reviewers and developers. When it comes to bigger features, it is always better to do a frequent small releases. This will make the other developers to get the updated code and also reduce the merge conflict to an extent.

There are three points of time, where a code can be reviewed:

  1. During implementation
  2. When code is ready to merge
  3. After code is merged

During implementation:

Reviewing with your team mate or any colleague while developing a feature, will make you get ideas from a different perspective. Here is were pair programming dives in. This will not only helps you to find bugs in your flow, it also increases the bus factor. Else the code will be known only by one developer in your team and this may lead to may issues. Pair programming helps us to get different solutions to the same, where we can have options to choose the best approach.

When code is ready to merge.

In this stage the code is reviewed by a gatekeeper like a senior developer, who is assigned to approve/decline the code to push to production.

After code is merged.

We all may think, why do we review after merging? As I said earlier, reviewing is not only finding bugs in the code, it also means to share knowledge and get feedback. In this stage of reviewing, the customers/clients checks whether the code is understandable by them.

How comments play an important role in code review ?

When it comes to reviewing of a small part in a big feature, the reviewers might not know what are all you have accomplished. To make your code speak and make it self-documented, it is good to add comments like :

// This function may fail if transportMode==Train, but there are currently no 

// documented requirements or data for Trains, so there's no way to reliably test it.

function sampleFunction (transportMode) {

// Some code

}

You could also add your thought process describing why you have chosen an approach instead of other approach. So the reviewer might know, that you have thought about the other approaches too.

Submitting for a review:

It is our prime responsibility to sync up with the reviewers in a periodic time. Once you have submitted the code, there might be further feedback or declining of code. The code has to go under some process or iterations to meet the level of standards and to push to production.

Hope you guys got something from my writing to improve the code quality.

Happy coding!

Inspired from :

https://youtu.be/jXi8h44cbQA

Validations in Full Stack Development

Full Stack Development, a quite tough to explain in a couple of lines. It takes ownership of the entire application from top to bottom. If you see a person as Full Stack Developer, he must be an all-rounder to develop an application from zero to high excellence. Full Stack Development includes 2 layers of architecture :

  1. Front-End Development (aka Client-Side / Presentation Layer)
  2. Back-End Development (aka Server-Side / Business Logic Layer)

Each Layer should have a data validations. Let’s dive in deeper,

Client-Side Validations

Validation takes place on the client side(web browser). It would be more frustrating to wait for the server response and re-enter the form that has nearly 100 inputs. So it is mainly for formatting data instantly and for the quick error recovery process.
Client-side validation gives the user feedback ASAP without having to wait for the server. It is an added topping, but not necessary. This will avoid the majority of validation issues and unnecessary processing from the server to perform data validations.

Pros:

  • Faster than Server-Side Validation
  • Better user experience can be provided by responding quickly(like invalid phone number, required fields,etc..)
  • Saves network bandwidth, traffic API calls

Cons:

  • Not Secure and useless if client-side scripts are disabled(javascript disabled)

Server-Side Validations

It is all about the data validation takes place on the server-side using the server-side scripting language. If you use server-side validation, you are developing a more secure application. Because client-side validations can be bypassed easily.

Let’s take a scenario. If a user is a technical guy/ a malicious user, he can pass invalid inputs through API testing tool or he can disable the javascript in client script or some malicious attack to skip client side validations. In these cases, validation will not happen. This may lead to incorrect entries, server downtime if any serious errors, etc, So we should verify on the server as well.

There are few libraries(eg., express-validator, etc) available to validate the inputs. Better, write a few code snippets for validations before continuing your business logic like

router.post(‘/api’, async(req, res) => {

 let isValidationPassed= await validateAndHandleInputs(req);

 if(isValidationPassed){

  //continue the business logics

 }

})

Pros:

  • More Secure than Client-Side Validation
  • Validation Techniques and Logics cannot be viewed/modified by the user.

Cons

  • Comparatively slower execution

References:

  1. https://www.smashingmagazine.com/2009/07/web-form-validation-best-practices-and-tutorials/
  2. https://medium.com/@davidpetri/server-and-client-side-validation-with-javascript-html-and-hapi-js-eccc779e448a
  3. http://net-informations.com/faq/asp/validation.htm
  4. https://surajdeshpande.wordpress.com/2013/08/10/difference-between-server-side-validation-and-client-side-validation/

Materialise your Angular App

As much as I love Angular, I also recognize that there are a few things that could make your Angular App look even more stunning without much effort! So, let’s go ahead and change your life in about 5 minutes by getting productive with Material Design using Angular Material in your Angular CLI app.

So, What Exactly is Angular Material?

Angular Material Design is a design language for web and mobile apps which was developed by Google in 2014. Material Design makes it easy for developers to customize their UI while still keeping a good-looking app interface that users are comfortable with and also you’ll get a well-organized format along with the flexibility to express your brand and style. For an example of Material Design, check out Airbnb, Gmail, and Houzz. These apps make the best use of Material Design to fit its many features into the limited mobile device. Going through the official Material design documentation is quite an experience. I recommend taking a look at the docs, but I will summarize it here.

Setup the Environment for Angular

To work with Angular, you will need Node.js and Angular CLI (Command Line Interface) installed in your development environment. Proceeding further, you can use the following command to set up a new Angular project.

ng new angular-material-app

Step 1: Install Angular Material and Cdk

Head over to your terminal, navigate inside your created Angular front-end application and then run the following commands to install Angular Material 6 and Angular 6 CDK.

npm install --save @angular/material @angular/cdk

Step 2: Install Angular Animations

In order to add enable support for animations in your Angular 6 front-end application, head back to your terminal and run the following command to install the Angular animations module and import the BrowserAnimationsModule and add it to the list of imports.

npm install --save @angular/animations

Step 3: Angular Material Theme

Angular Material comes prepackaged with several pre-built theme CSS files. To configure the basic theme, open the src/styles.css file and import any one of the available themes in Material Themes.

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Step 4: Angular Material Gesture

Some components like Slide Toggle, Slider, and Tooltip rely on a library called HammerJS to capture touch gestures. So, you will need to install HammerJS and import it into our application.

npm install --save hammerjs

Step 5: Angular Material Icons (Optional)

If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html. For more information on using Material Icons, check out the Material icons guide.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And yeah, Now you are good to go!

Note:  You can create an app-material module file for importing the angular material components and export them wherever necessary! Let’s write clean code and be a Better programmer!

What Will You Build with Angular Material?

After setting up the project structure and some dependencies, you will be able to start developing apps. You could try out some examples with the built-in components that are provided in Material docs. In this blog, to know about Angular material implementation, we will be implementing it with some small examples that play a major role in any webpage! The idea of this blog is to show how cool and easy it is to use Angular Material.

Example 1: Layout

The most widely used layout is cards. The most basic card needs only an <mat-card> element with some content. However, Angular Material provides a number of preset sections that you can use inside of an <mat-card>. For now, just copy the following code into your HTML file and you could witness a card display!

<mat-card> Simple Card</mat-card>

Example 2: Navigation

Next comes the navigation part of a webpage. <mat-menu> is a floating panel containing the list of options. By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive as follows.

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
 <mat-menu #menu="matMenu">
   <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button>
 </mat-menu>

Example 3: Progress Bar

    “Boredom, according to psychologists, is merely lack of stimulation,the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation?”

~ Alice Kotlyarenko

Yeah! The UI progress bar will make you enjoy the wait! Angular Material made it easy to display a progress bar with customizable modes.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

Conclusion

I hope this blog has helped you understand how to use the power of Material Design in your app for a top-notch UI. For more information about Material Design in Angular 6, check out the official docs which contain ready-to-use templates. It’s a great place to learn about Angular. Thus Angular Material components create a beautiful application without investing too much time thinking about styles. Awesome, right?

Reference:

SwitchMap in rxjs

Let’s dive deep into switchMap with an example, so it helps as to understand what is it and when to use it.

Say we need to implement functionality for traffic signal which consists of 4 roads(A, B, C, D) meeting at a junction. The signals of these roads can be controlled either manually or automatically. The signal change is asynchronous(Observable- data stream).

const roadSignals = Observable.from(['Road SignalA', 'Road SignalB', 'Road SignalC', 'Road SignalD' ]);

roadSignals.subscribe((signal)=>console.log(signal));

Output: 

Road SignalA 

Road SignalB

Road SignalC

Road SignalD

Here comes the next part. We have to allow vehicles to pass through the junction when the signal is ON. Let’s try doing this with the help of the map. (Map -transform the items emitted by an Observable by applying a function to each item. Click here to learn about map )

roadSignals.pipe(

    .map((signal) => changeSignal(signal)),

    .map((allow) => allow.allowVehiclesObservable())

    ).subscribe((vehiclesObservable) => {

        vehiclesObservable.subscribe((vehicle) => console.log(vehicle))

    });

Here the vehicles in roads refer to an observable. So the output will be an Observable inside an Observable. We have to subscribe them in order to get vehicles individually.

In our case, allowVehiclesObservable is the outer Observable and vehiclesObservable is the inner Observable. We need to subscribe the vehiclesObservable(inner Observable) in order to get the vehicles individually. This method is called as FLATTENING.(subscribe inside a subscribe).

Come on let’s do flattening to get vehicles individually.

roadSignals.pipe(

    .map((signal) => changeSignal(signal)),

    .map((allow) => allow.allowVehiclesObservable())

    ).subscribe((vehiclesObservable) => {

        vehiclesObservable.subscribe((vehicle) => console.log(vehicle))

    });

Let a1, a2,.. b1, b2,.. be the vehicles in Road A, B, ..respectively.

Output :

a1

a2

a3

b1

b2

a4

Yes! Now we get vehicles individually. Flattening works:)

Wait a sec. What’s happening. Vehicles from Road A  as well as Road B is also moving. There are chances for accidents. After a few seconds, Signal C and Signal D will go ON. What if the vehicles from all the roads are moving.

 

Oh no. We should stop this. How to do this?

Whenever flattening is used we should use a Flattening Strategy.

  1. We need to store a subscription to the current vehiclesObservable subscription.
let subscription; (declare at top);

subscription = vehiclesObservable.subscribe(vehicle => console.log(vehicle));
  1. If new vehiclesObservable comes in we need to unsubscribe from the previous subscription before we subscribe to the new observable.
if(subscription) subscription.unsubscribe();

subscription = vehiclesObservable.subscribe(vehicle => console.log(vehicle));

Let’s apply the above steps:

let subscription;

roadSignals.pipe(

    map((signal) => changeSignal(signal)),

    map((allow) => allow.allowVehiclesObservable())

).subscribe((vehiclesObservable) => {

    if(subscription){

        subscription.unsubscribe();

    }

    subscription = vehiclesObservable.subscribe((vehicle) => console.log(vehicle))

    });

Output :

a1

a2

b1

b2

b3

c1

c2

SignalA comes first. Initially, the subscription is undefined.  RoadA-vehiclesObservable is stored in the subscription(local variable) and is subscribed. Vehicles from roadA start moving. When SignalB comes in, the subscription is defined (RoadA-vehiclesObservable). The if condition becomes true. Unsubscribe the existing subscription(RoadA-vehiclesObservable) and store the new subscription(RoadB-vehiclesObservable) to get vehicles from road B.No more vehicles from Road A..! When SignalC comes in, the existing subscription (RoadB-vehiclesObservable) is unsubscribed and new RoadC-vehicleObservable is subscribed.

As soon as the outer observable changes we kill the most recent observable and switch to new observable to replace it. Thus unsubscribing from the previous observable before subscribing to the new one is called as SWITCH Strategy.

Yes, we have achieved our desired result. But now,  the problem is the code became complex with observables, two subscribes, subscription, unsubscribe and all of these.

What to do?

Here comes switchMap for our rescue. We can replace the map and inner subscription with switchMap.

roadSignals.pipe(

    map((signal) => changeSignal(signal)),

    switchMap((allow) => allow.allowVehiclesObservable())

).subscribe((vehicle) => {

console.log(vehicle)

    });

Output :

Signal A

   vehicle a1

   vehicle a2

Signal B

   vehicle b1

   vehicle b2

Signal C

   vehicle c1

   vehicle c2

The main difference between switchMap and other flattening operators is the cancellation effect. On each emission, the previous inner observable (the result of the function you supplied) is canceled and the new observable is subscribed. You can remember this by the phrase switch to a new observable.

When to use and avoid switchMap?

switchMap can be used, when a new search is made, pending results are no longer needed; And should be avoided in scenarios where every request needs to complete, think writes to a database. switchMap could cancel a request if the source emits quickly enough.

References:

Learn RxJS in 1 Blog…(Disclaimer: Javascript basics are highly recommended)

RxJS (stands for Reactive Javascript) is actually a well-known library that is used to handle asynchronous calls with multiple events. There are plenty of other reactive libraries written in other platforms. Some of them are RxJava, Rx.NET, UniRx, RxScala, RxClosure, RxCpp, RxPY, RxDart, RxNetty, RxAndroid, RxCocoa etc.

Sample RxJS Implementation:

const interval = new Observable(observer => {

 let count = 0;

 const interval = setInterval(() => {

   observer.next(count++);

 }, 1000);

 // once we stop listening to values clear the interval

 return () => {

   clearInterval(interval);

 }

});

interval.subscribe(value => console.log(value));

// —-1—-2—-3—->

The functional units of RxJs are,

Observable:

Observables are collections of a stream of values or events. It can hold either synchronous or asynchronous stream of values or events.

Observer:

After fetching the necessary values from observables, callbacks are implemented to perform the required actions based upon the values. These set of collections of callbacks are called observers.

Subscription:

Subscription is the way to return the value when the asynchronous function is completed.

Operators:

RxJs Operators can be considered as Lodash for events. It provides the ease of RxJS implementations through enabling functional programming.

Subject:

A subject is simply a unit that can act as both Observable and Observer simultaneously.

Schedulers:

Schedulers help us to define in what execution way does an observable deliver its values to the observer.

Basically, the RxJs Observables can be compared with Promises in a better way as they have the major similarities.

Reference Links:

A dive into “Vuex” !

Let’s meet our hero – “The Vuex”!

Vuex is a state management library that is used commonly in vue.js. But why do we use it? Vuex is very much useful in passing the data from one component to another component.

We can pass data from the parent component to child component using props, but when the child component has many nested siblings, the data passing between the child components becomes difficult and that’s where “Vuex” comes into play !!

Store :

A store is a global object that keeps track of all the state changes of the app across the components.

But what makes it different from other objects?

  • Vuex stores are reactive – every state changes are updated efficiently in the store
  • Vuex stores are read-only – It is not possible to change the state properties directly in the store. The only way to change a store’s state is by explicitly committing mutations.

We can create a store by creating an instance of vuex like :

const store = new Vuex.Store({ state: {} })

In order to integrate vuex with vue, we have to add the store in the vue instance by :

const App = new Vue({ store })

In order to keep track of the state changes, we have to access the state in the “computed” property in vue component

Now we have created a store, but how do we access the store data?

We access the store by the following methods :

  • Mutations
  • Getters
  • Actions

Mutations :

These are functions used to update the state. They behave like events and we have to use “commit” in order to invoke them.

To be clear, we define the mutation by :

const store = new Vuex.Store({

mutations: {

  yourMutationFunction (state, payload) => {

     }

   }

});

We invoke the above mutation by:

this.$store.commit(MUTATION_NAME, {payloadData});

Getters :

Applicable to a scenario where we have to get a value from the store that is obtained by manipulating the state data, then we use “Getters”. Having these manipulations in the store makes the “Getters” reusable in other components as well.

Getter functions are created by :

const store = new Vuex.Store({getters: { yourGetterFunction : (state) => ( ) } });

And we invoke the getters by,

this.$store.getters.yourGetterFunction

We also have a helper method called “mapGetters” to invoke a getter function in the component.

Example :

import { mapGetters } from ‘vuex’

export default {
 // some code ..
 computed: {
   …mapGetters([   // we use spread operator to append the mapGetters to the computed object
    ‘yourGetter’
   ])
 }
}

But when we have no manipulation in the state, we have to use mapState helper to fetch the data in the store directly from the store.

computed: {

  …mapState([‘yourStateName’]);

}

Actions :

They are generally functions, that is invoked to perform some backend calls or any other asynchronous operations before mutations. Actions keep track of the mutation changes correctly in case of asynchronous operations.

actions: {
 yourActionMethod({ commit }) {
   commit(‘mutationMethod’)
 }
}

Actions are invoked by dispatching them using store object or mapActions helper function

Example :

   this.$store.dispatch(‘actionName’)

Or in components by :

methods: {
   …mapActions([‘actionName’])

}

Thus, the flow for the state from component to store will be like :

Sources :