JavaScript, React

ES2017 async/await with fetch in Redux (No Callback Hell anymore)

When we need to use third party API or any REST API in our web app, we need to wait for the response coming from the server.
Then in the success callback , we use that data and do other operations.And if we have more REST calls, we all know that it could end up being a Callback Hell

But if we use ES2017 async/await syntax , we can write our code as clean as possible with minimum lines of code.

Basic example of async/await is like below-

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

here var result = await resolveAfter2Seconds(); will wait to resolve the Promise and assign the returned data to `result` variable.
It seems like its executing the code line by line though it has asynchronous operation , which is awesome!

As of now , we know basic of async/wait , now we will use this inside redux ActionCreator. But first we will see how the code looks like without using async/await.
So our action creator code is –

export const getSpeakers = () => (dispatch, getState) => {
  return fetch(`${API_SERVER}/speakers`)
    .then(
      response => response.json(),
      error => {
        console.log("No! error occured.", error);
        throw error;
      }
    )
    .then(speakers => {
      console.log("speakers success", speakers);
      dispatch(saveSpeakers(speakers));
    })
    .catch(error => {
      console.log("Return Error by throwing", error);
      throw error;
    });
};

So here ^ is our action creator named `getSpeakers` which calls one REST API endpoint and then dispatch the speakers to the redux store.Here we can see we need to chain with `then`, `catch` etc which make the code a bit messy and hard to understand.

Now we will use async/await with fetch and will make our code good looking

export const getSpeakers = () => async (dispatch, getState) => {
  try {
    const response = await fetch(`${API_SERVER}/speakers`);
    const speakers = await response.json();
    console.log("speakers success", speakers);
    dispatch(saveSpeakers(speakers));
  } catch (error) {
    console.log("throwing Error", error);
    throw error;
  }
};

Here , we have added try/catch so that if any error happens, we can catch and take our decision what we want to do. Here in this case , I have just thrown the error, but we can dispatch another FAILURE action.
Ah , that made our code smaller,cleaner and easy to understand!

Cheers!

Standard
JavaScript, React

Play with React for beginners with react-basic-starter

I have been working with React for long time now . But as I was not regular in writing , that’s why I have never written a single post on React.

This would be officially my first ReactJS post , and I know I am late.

react-basic-starter

Its 2017 . There are lot of articles published on Web . Facebook has created a tool for React developers called create-react-app which is awesome for starting any new react based project. But What I feel , if anyone is a fresher in React , then its a bit more than the skill level.Also I feel React Developers should learn a bit of Webpack , thats why I added a simple Webpack Config for building react code.

This post actually tries to help a react fresher to start creating his/her first React sample component and do some fun in his Bedroom playground.

module.exports = {
  entry: './index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {

        }
      }
    ]
  },
};

The upper code snippet is available inside webpack.config.js file and It will build the React Code and JSX and create a file called `bundle.js`

Inside our `index.html` file we have included this bundle to load as script.

<script src="bundle.js"></script>

Our simple component is available on `App.jsx` file which has only one H1 inside.

export default class App extends React.Component {
  render() {
    return(
      <div>
        <h1>React Basic Starter</h1>
      </div>
    )
  }
};

Full code is available at my Github Repo https://github.com/destromas1/react-basic-starter

Cheers!

Standard
C#, Cross Domain, HTML5, JavaScript, NodeJS

Visual Studio Code – A Cross Platform Code Editor built with Chromium

Microsoft has launched VSCode few weeks back for Cross Platform (Linux/Mac,Windows) and 55% download was Non-Windows. Shocking , right ?

HackerNews had a post on this and had really lot of comments/traffic on it.

Lets see the first look of Code.

Code First Look

Code First Look

Its lightweight and simple and has GIT embedded with this.

But I am not here to say that Code has been released by Microsoft. I am here to shock you little bit.

When you are on Code, Just press F12.

And lets see the below image.

Code First Look Shocked

Code First Look Shocked

#%$#@ ???? Is it Chrome Dev Tools ?

YES !!! It is!

In fact VSCode has been built with Web Technologies like HTML,CSS , JavaScript with Chromium and NodeJS . Here , Chromium is the Engine for Chrome browser by Google.

Lets get a little idea about CEF (Chromium Embedded Framework)

Tech

And they used Electron for Cross Platform . Electron helps to Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with Love by GitHub.

Initially developed For GitHub’s Atom editor , Electron has since been used to create applications by companies like Microsoft, Facebook, Slack, and Docker.

Slack‘s new Desktop app was also built with this.

In VSCode , what we do Like adding/editing Projects/Folders/Files , all is saved in HTML5’s Client Side DBs like IndexedDB and LocalStorage. To know more about HTML5 Database , you can see my other posts on HTML5 Database here
https://shahjadatalukdar.wordpress.com/2013/09/27/using-html5-localstorage-with-angularjs/

https://shahjadatalukdar.wordpress.com/2014/01/18/websql-welcome-to-client-side-db-part1/

Lets see the below image.

HTML5 Database

HTML5 Database

Okay , lets see Where the World goes to!

Cheers!

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

Standard
AngularJS, JavaScript

AngularJS One Time Binding Concept

Angular 1.3 added a new feature called One Time Binding . This is definitely an awesome enhancement for performance of an angular app.

We know , If a data changes in angular app, The $digest cycle checks for changes through watchers and gets the new value and renders the view. But if the app gets bigger with so many data , so many bindings , the $$watchers count increases with $digest loop size. Though in a large collection only few data got changed but the whole data gets rendered which is not good for performance.

One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value

The main purpose of one-time binding expression is to provide a way to create a binding that gets deregistered and frees up resources once the binding is stabilized. Reducing the number of expressions being watched makes the digest loop faster and allows more information to be displayed at the same time.

Lets see how we can do this in angular app.

<div>
        <h1>Angular OneTimeBinding</h1>
        <br />
        <table>
            <tr ng-repeat="profile in profiles">
                <td>
                    {{::profile.Id}}
                </td>
                <td>
                    {{::profile.Name}}
                </td>
                <td>
                    {{::profile.Address}}
                </td>
            </tr>
        </table>
        <br />

        <button ng-click="addProfiles()">addProfiles</button>
        <button ng-click="getWatchers()">getWatchers</button>

        <div>
            <h3>OneTimeBinding Watchers Count :::  {{totalWatchers}}</h3>
        </div>

    </div>

Here I added {{::}} this syntax for One Time Binding.

Lets see our Controller’s code-

app.controller('profileCtrl' , ['$scope' , function($scope){
    console.log('profileCtrl is running...');

    $scope.profiles = [
                    { Id: 1, Name: 'Masoom', Address: 'Dhaka1' },
                    { Id : 2 , Name : 'Talukdar' , Address : 'Dhaka2' },
                    { Id: 3, Name: 'Shahjada', Address: 'Dhaka3' }
    ];

    $scope.addProfiles = function () {
        var id = $scope.profiles.length + 1;
        $scope.profiles.push({ Id: id, Name: 'AAAA' + id, Address: 'Dhaka' + id });
    };

    $scope.getWatchers = function () {
        var watchers = ($scope.$$watchers) ? $scope.$$watchers.length : 0;
        var child = $scope.$$childHead;
        while (child) {
            watchers += (child.$$watchers) ? child.$$watchers.length : 0;
            child = child.$$nextSibling;
        }
        $scope.totalWatchers = watchers;
    };

}]);

Here If we add a new profile by clicking the addProfile Button , it will add a Row , but the Watcher Count will not increase as its One Time Binding But if we remove the OneTimeBinding Syntax , I will increase the count which hampers the performance.

And, if we do not use One Time Binding in Property Level , but in Collection level like below , then If we click and click addProfile button , it will add new item in the collection inside $scope , but the UI will not render the new Items coz we have used OneTimeBinding in the Collection/List Level.

<table>
            <tr ng-repeat="profile in ::profiles">
                <td>
                    {{profile.Id}}
                </td>
                <td>
                    {{profile.Name}}
                </td>
                <td>
                    {{profile.Address}}
                </td>
            </tr>
        </table>

Hope , It helps you.

Cheers

Standard
AngularJS, ASP.Net MVC, JavaScript, jQuery, jQuery AJAX, MVC WebAPI

Add Request Header for REST API Calling with AngularJS & jQuery

In the Web World , We always call REST APIs from our Web Applications .

When We call REST APIs through jQuery or AngularJS , they added few default Request Headers .

But many a time , we need to pass Custom Request Headers for different purposes.

A Common scenario is for Authentication we need to pass Customer Request header .

But how we can add this ?

Lets see the below samples :::

for jQuery , we can easily add Request Headers when we do AJAX Calling .

$.ajax({
            type: "POST",
            url: '/api/test',
            data: myObj,
            headers: { 'Custom-Header': 'Value'},
            success: function (resp) {
                alert(resp);
            },
            error: function (x, y, z) {
                alert(x);
            }
        });

In AngularJS , If we use $http for REST API calling , we can add Request Header like below , after we create AngularJS Module , we can do :::

myModule.run(['$route', '$http', function ($route, $http) {
            $http.defaults.headers.common.CustomeHeader = 'Value';
        }]);

Thanks

Standard
AngularJS, HTML5, JavaScript

WebSQL : Welcome to client side DB – Part1

I think , We,all the Devs, know about SQL . Like , we have already worked with MySQL , MS SQL Server etc .

But then what is WebSQL ? If I say in a simple statement – WebSQL is SQL which is available in Client Browser .

Inside Browser :S ? Where is it ? I never saw that :@

Then please see the below image 🙂

WebSQL in Chrome Browser

WebSQL in Chrome Browser

Now lets begin…

With HTML5, there was also a desire to develop applications so that they’d run off-line. Where could they store data when there is no Internet?

Currently , we can store Data in browser in the below ways –

1.Local Storage
2.WebSQL
3.IndexedDB

You can get few browsers do not support all these , like previous versions.

LocalStorage can store data in Key-Value pairs but nothing more than that.To know more about LocalStorage , you can check out my another Article on LocalStorage .

WebSQL is based on a free database product called SQLite which is written in C , Go here

In a WebSQL Database , we can create DB and Tables kinda like MySQL or SQL Server and store Data in the same manner what we knew earlier 🙂

Lets do some Coding…

I have used WebSQL in a AngularJS application . I have created an Angular Service which is separated from another Controllers and can be injected in any controller when needed where I have used WebSQL APIs .

Below is the code of my Service…

app.service('WebSqlDbService', function ($resource) {

    this.createDbAndTables = function () {
        var db = openDatabase('myClientDB', '1.0', 'Mobile Client DB', 2 * 1024 * 1024);
        db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS User (UserInfo)');
        });
    };

    this.storeUserInfo = function (user) {
        var db = openDatabase('myClientDB', '1.0', 'Mobile Client DB', 2 * 1024 * 1024);
        db.transaction(function (tx) {
            tx.executeSql('INSERT INTO User (UserInfo) VALUES ( ?)', [JSON.stringify(user)]);
        });
    };

});

Then I have used WebSqlDbService in my Controller and called the Functions of the Service something like this…

$scope.userInfo = {
            UserId: 'as34fsdf*i#sad454',
            UserName: 'shahjada',
            IsAdmin: true
        };

        webSqlDbService.createDbAndTables();
        webSqlDbService.storeUserInfo($scope.userInfo);

I have saved the JSON Object by Stringifying , and when we will get this from WebSQL , we will convert it to JSON Object…

After saving Object to WebSQL DB , my DB and Table looks like below…

WebSQL in Chrome Browser - DB and Tables

WebSQL in Chrome Browser – DB and Tables

We can also write SQL Queries like SQL Server Management Studio…

Just follow the Image below…

WebSQL in Chrome Browser - SQL Queries

WebSQL in Chrome Browser – SQL Queries

Its nice and cool , right ?

I will write another Article on IndexedDB very soon .
Keep an eye on my Blog Site , Share/Subscribe…

Thanks and regards

Standard
AngularJS, HTML5, JavaScript

Using HTML5 LocalStorage with AngularJS

Today , I will talk about LocalStorage Support of HTML5.

We can store named key/value pairs locally, within the client web browser. Like cookies, this data persists even after you navigate away from the web site, close your browser tab, exit your browser, or what have you. Unlike cookies, this data is never transmitted to the remote web server (unless you go out of your way to send it manually). Unlike all previous attempts at providing persistent local storage, it is implemented natively in web browsers, so it is available even when third-party browser plugins are not.

HTML5 STORAGE SUPPORT
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
8.0+ 3.5+ 4.0+ 4.0+ 10.5+ 2.0+ 2.0+

Based on different browsers , we can get 2 MB to 5MB (even more) space in LocalStorage . To get more idea on space check out this link …

BY the below code , we can check our browser supports LocalStorage or Not !

function supports_html5_storage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

Also we can use Modernizr to check this .

if (Modernizr.localstorage) {
    // window.localStorage is available!
} else {
    // no native support for HTML5 storage :(
}

Lets develop a simple LocalStorage Cache framework with AngularJS .

For this , am gonna create an AngularJS Factory Service to communicate with the HTML5 LocalStorage .

'use strict';

valApp.factory('storageService', function ($rootScope) {

    return {
        
        get: function (key) {
           return localStorage.getItem(key);
        },

        save: function (key, data) {
           localStorage.setItem(key, JSON.stringify(data));
        },

        remove: function (key) {
            localStorage.removeItem(key);
        },
        
        clearAll : function () {
            localStorage.clear();
        }
    };
});

localStorage keyword in the upper is the core API which is responsible for providing LocalStorage facility .

I have not used this storageService directly in the client .I am gonna use another Mid Layer Factory which will communicate with storageService and client code will call this Mid Layer Factory named cacheService . This is like below :::

'use strict';

valApp.factory('cacheService', function ($http, storageService) {
    
    return {
        
        getData: function (key) {
            return storageService.get(key);
        },

        setData: function (key,data) {
            storageService.save(key, data);
        },
        
        removeData: function (key) {
            storageService.remove(key);
        }
    };
});

You can see , I have injected storageService to cacheService .

Now from my AJs Controller , I will call cacheService’s Function to serve my purpose .

Now below is the example , how you can use this Cache Framework …

In My Controller , I’ve simply injected cacheService and can use all the features of it .

var city = [
                  { Id: 1, Name: 'Dhaka' },
                  { Id: 2, Name: 'Ctg' }
    ];
    cacheService.setData('city', city);

I have used the Mid Layer , if we need any new logic later, we can easily add those to the Mid Layer .

Its easy and awesome , right ?

Cheers 🙂

Standard
AngularJS, JavaScript

AngularJS : Using Promise-Part1

In Modern Web (Web 2.0) , We use so many Asynchronous call in our Web Applications . But sometimes , we need that , A Call is depended on another call .That means – After First Method’s Success CallBack another Method should be called . So if both the call occurs asynchronously , It does not fit my requirement .

So We can use AngularJS Promise to do this kind of things .

Lets see an example .

app.controller('PersonCtrl', ['$scope', '$rootScope', '$http', '$q', 'setting', function($scope, $rootScope, $http, $q, setting) {
    
    $scope.personsFromServer = [
        { Id: 1, Name: 'Shahjada' },
        { Id: 2, Name: 'Talukdar' },
        { Id: 3, Name: 'Masoom' }
    ];

    var getPersonPromise = function() {
        var deferred = $q.defer();
        deferred.resolve($scope.personsFromServer);
        return deferred.promise;
    };

    getPersonPromise().then(function(persons) {
        $scope.persons = persons;
        $scope.personId = persons[0].Id;
    }, function (reason) {
        alert('Failed: ' + reason);
    });
    
}]);

I am mocking PersonsFromServer Data in my example (Suppose this is gonna come from Server By an asynchronous call) .Now I am gonna populate a DropDown after successfully returning the data , and am selecting the first Person as selected Item in DropDown .

<div ng-controller="PersonCtrl">
        <select id="Person"
            ng-model="personId"
            ng-options="p.Id as p.Name for p in persons"
            required>
        </select>
    </div>

The Deferred API

A new instance of deferred is constructed by calling $q.defer().

The purpose of the deferred object is to expose the associated Promise instance as well as APIs that can be used for signaling the successful or unsuccessful completion of the task.

The Promise API

A new promise instance is created when a deferred instance is created and can be retrieved by calling deferred.promise.

The purpose of the promise object is to allow for interested parties to get access to the result of the deferred task when it completes.

Hope you got the idea .

Thanks .
In Part2 , I will show Calling API from Server with Resource and of course with Promise .

Cheers

Standard
JavaScript

Show JavaScript Confirmation message while deleting ASP.Net Grid Row

Many a time , we need a confirmation Message on deleting ASP.Net Gird Row . Coz if any User mistakenly clicks the delete button , the data will be gone . So its always the Best to use Confirmation on Deleting .

We will see a demo now how to Show JavaScript/Client Side Confirmation Msg while deleting an ASP.Net Grid Row .

A long time ago ,I had to use more brain processing power to do this requirement 🙂 So I thought to share with all .

Lets see the below image for what I am gonna do :

Show JavaScript Confirmation message while deleting  ASP.Net Grid Row

Show JavaScript Confirmation message while deleting ASP.Net Grid Row

Add this markup inside your ASP.Net Grid .

<asp:TemplateField HeaderText="" ShowHeader="False" HeaderStyle-HorizontalAlign="Left">
                            <ItemTemplate>      
                                      <asp:LinkButton ID="lnkDelete" runat="server" CausesValidation="False" CommandName="Delete"
                                    Text="Delete" OnClientClick="ConfirmDelete(this.id)" ></asp:LinkButton>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Left" />
                      </asp:TemplateField>

And the JavaScript method implementation of the ConfirmDelete(this.id) is like below –

function ConfirmDelete(RowId)
     {
         var rowNoStr = RowId.split('_');
         rowNo = parseInt(rowNoStr[3]) + 1;              
    
         var confirm_value = document.createElement("INPUT");
         confirm_value.type = "hidden";
         confirm_value.name = "confirm_value";

         var grid = document.getElementById('<%=gvTicketDetails.ClientID%>');

         var delText = "Are you sure to delete - ";
         var ticketNo ="Tk " + grid.rows[rowNo].cells[0].innerText + " : ";
         var ticketTitle = grid.rows[rowNo].cells[1].innerText + " ?";
         var delMsg = delText.concat(ticketNo, ticketTitle);

         var answer = confirm(delMsg);
         if (answer)
         {
             confirm_value.value = "Yes";
         }
         else
         {
             confirm_value.value = "No";
         }
         document.forms[0].appendChild(confirm_value);       
     }

And now using the below code , you can easily get the confirmation value at server side .

protected void gvTicketDetails_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            string confirmValue = Request.Form["confirm_value"];
            if (confirmValue.ToUpper() == "YES")
            {
                
            }
        }

You are done 🙂 Cheers

Standard