Frontend development Archives | Codeexecute

How to declare a function in Javascript using constructor method?

In class-based object-oriented programming, a constructor is a special type of subroutine called to create an object. It prepares the new object for use, often accepting arguments that the constructor uses to set required member variables.

Since JavasScript is also an object-oriented programming launguage, there is also constructor methods in JS to create an object.
As we know everyting in JS is an object including fucntion , so can we declare the function as constructor in JS. The answer is yes.

Traditional Syntax


function sum(x, y) {
return x + y;
}

Constructor Syntax

let sum_ctr = new Function("x", "y", "return x + y;");
 

All about HTTP cookies

What is HTTP cookie?

When a server communicates with client’s computer then for identification sever needs  some sort of unique token from client side to identify specific client server and here comes the role of cookies. SO what are cookies. According to MDN

An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user’s web browser. The browser may store it and send it back with the next request to the same server. Typically, it’s used to tell if two requests came from the same browser — keeping a user logged-in, for example. It remembers stateful information for the stateless HTTP protocol.

So the server send the specific data to client end and then client browser use this data in further requests to provide it’s unique idenity to server. In this way when a browser requests a web page from a server, cookies correspoding to the website  is added to the http request and server returns the unique data for the request.

Application of Cookies

  1. Session management : Login details/session,
  2. Personalization: User preferences, themes, and other settings
  3. Tracking: User behaviour on site

Secure Cookies (HTTPOnly cookies )

These cookies are sent win an encrypted form over network and these cookies can’t be read / modify by client side JS. For this type of cookies user can’t access using them by document.cookie() API and for theese cookies HTTPOnly flag is set to true.

Check cookie in gogole chrome inspect tool:

http-cookie

  1. Go to google devloper console (ctrl+shift+I)> Application
  2. In left panel Storage> cookies click on site you want to check the cookies
  3. You can check the mutiple cookies for the site google.com in the right panel
  4. There are some cookies for which the http column is set as true , these are HttpOnly cookies.

How to set cookies and get cookies using JS

cookies are stored as name value pair


userToken=hzbfzjhfzjdfh6576579090910jhjsdhj65

Create a cookie


document.cookie = "userToken=hzbfzjhfzjdfh6576579090910jhjsdhj65; expires=Thu, 17 June 2018 12:00:00 UTC";

Read a cookie


var myPageCookie = document.cookie;

P.S. For further lnformation please refer MDN 

 

 

Single Page Application vs Multi Page Application (SPA vs MPA)

In the era of cloud , every application has been / being migrated from desktop to web server. And companies  earlier having their older softwares on systems are creating the same  as web app for easy and global approach of clients. Now the webapp could be categorized into two types – One is traditional Multi Page Application and the other one is the latest and new approach as Single Page Application.What are SPA or MPA? Let’s figure out.

SPA (Single Page Application):

The latset approach towards creating the web app is Single Page application where all of the content from the server is rendered on single page html. It means:

  1. The routing is maintained on client side through Java Script
  2. Devlopement is easy and no need to learn different templating language for a front end devloper to develop the web pages like PHP, JSP or django templating
  3. Required data on page is served through JSON API from server not using context variables
  4. Switching into multiple URLs in the web page is easier and faster since routing is on clinet side
  5. Since all static content like CSS/JS has been loaded initially so redundancy of static variables minimizes the server load
  6. Using the same API the mobile application can be simultaneously build reducing the load of back end devloper.In this way a back end devloper can concentrate over business logic and code optimzation instead working on page rendering stuff of fron end.
  7. The devlopement would be fast as the front end and mobile developer can build their application using dummy api’s and later integrating them.

Example of SPAs : gmail, Facebook, Twitter

Multi Page Application(MPA)

The web app consists of multiple pages and all of these are rendered on server side.

  1. Rourting is maintained on server side
  2. Web app speed is slow as each routing requires a call towards server whihc may take additional round trip towrads server.
  3. SEO is better managed in MPA
  4. Backend devloper need to create mobile APIs to give JSON data to mobile devlopers(redundancy of logic).
  5. Tightly coupled front end /backend

As per the given approach it seems to be use SPA for a better user experience and fast devlopment process.

However the SPA also having their own cons. At the end the approch completely depends upon what is the business need.

So take a call and analyze which should be best for you..