TECHZIO

What is 3-tier architecture of Web Development

2019-11-17T16:49:00.003-08:00

What is 3-tier architecture in Web Development?

In this design of web development with 3-tier architecture, the entire structure of the Web Application has been divided into three wide range of chambers, to split the entire system with crystal clear separation, based on certain crucial functionalities.

What are those 3 layers?

Presentation Layer
Business Logic Layer
Data Access Layer

This below image gives an overview of the 3-tier architecture:

Presentation Layer

This layer incorporates rendering/generating the layout of the web application or in other words, the user interface, as seen by the user. You can associate the presentation layer with the word "View". The Visual appearance of any web application depends on, how deep the Presentation layer is given importance. The significant technologies used are HTML, CSS and Javascript. When latest frameworks of Javascript are used, the appearance becomes more attractive and in turn pulls the user to choose the application, when there are multiple web apps of similar domain are in business. Front End Developers are responsible to create an awesome vivid appearance of the application.

Business Logic Layer

The term Business Logic itself implies, what this particular layer is made up of. When raw data is returned from the database, there needs to be some logic implied over the data, based on the need of the business. And this can be done with some key coding languages like Python, Java etc, or even with scripting languages like PHP, Perl etc

Data Access Layer

This layer is exclusively responsible for the database manipulation. It consists of programs/codes that enables the access of data from the database. An easy relative example of Data access layer code is, Stored Procedures written in SQL to access the data in the way its needed.

Significant benefits of the 3-tier architecture

The Security is enhanced, as the client i.e browser doesn't have direct connection with the Data Access Layer

Each tier can be maintained and upgraded independently.

The Corporates can easily hire people with wide knowledge in each tier, so that the application's necessary development work can be handled effectively.

3 essential types of javascript functions demonstrated with examples

2019-07-12T16:48:00.001-07:00

In any scripting or programming language, functions play a major role in the construction of simpler to complex programs. In Javascript there are three types of functions, based on the way it is structured as well as on the kind of usage.

What are the those three essential functions?

Named Functions
Anonymous functions
Immediately invoked functions

I am going to present simple code here that can be written in all the three kinds of functions mentioned above. Below is a simple code to print the input name, the given number of times.
Here comes the,

Named Functions

//Function Definition
function printNamenTimes(name,n)
{
for (i = 0; i < n; i++)
{
console.log(name);
}
}
//Function Call
printNamenTimes("Apple",10);

A Named Function as the name implies, has a name associated with it in the definition of the function and the function can be called easily with its name along with the arguments passed to it, whenever we need it in the program. This is a very straightforward way of constructing a function in Javascript.

Useful: When we need to call a function many times within a particular script.

Lets see the next one...

Anonymous Functions

//Function Definition
var nameprinting = function(name,n)
{
for (i = 0; i < n; i++)
{
console.log(name);
}
}
//Function Call
nameprinting("Orange",10);

Anonymous functions as the name indicates are anonymous and it has no name identification.
As you can see the function expression is assigned to a variable named "nameprinting"
and the variable is considered and called as a function, as it holds the function expression withing itself.

Useful: This form of function is mostly used when the function has single instance usage in the entire script.

Immediately invoked functions

//Function Definition
var nameprinting = (function(name,n)
{
for (i = 0; i < n; i++)
{
console.log(name);
}
return name;
})("Grapes",10);

//printing the variable returns value "Grapes"

console.log(nameprinting);

The structure of the immediately invoked function, is in a way that the parameters are passed in the function expression itself. In immediately invoked functions, the browser executes the function immediately after getting into the function. The variable "nameprinting" which has got initially the function expression, eventually stores the return value of the function within itself and can be used outside the function expression.

IIFE(Immediately Invoked Function Expression) is a very powerful function pattern, that can be used in more complex javascript programs, which is out of the scope of this particular post, and will be covered separately.

Zurb Foundation - Grid System

2018-04-03T17:36:00.001-07:00

Zurb Foundation is a responsive front end framework that helps us to develop beautiful responsive websites that work on all devices effortlessly. It is a similar framework as Twitter BooStrap Framework to some extent.

The powerful and most beneficial part of the Foundation Framework is its Responsive Grid System.

More on Foundation Grid System

In order to understand the Grid System, Imagine any web page as an excel sheet with 12 columns in it and with multiple rows as below.

Each cell can be merged with the adjacent cells above or below so that blocks can be formed for the web page. Below is an example for such merged cells into blocks formed page layout. The blocks can be formed in n different ways. Imagine a web page with such blocks and it can be easily created with piece of code in Zurb Foundation.

I have created a sample web layout with the help of Foundation Framework that displays as below.

Below is the major component of Foundation code that has driven into the above layout. The code is mostly self understandable. The class "row" defines each row of the above block and any number of "div" from 1 to 12 can be defined in each row based on the layout need, with the help of the class "column". The large-6, large-12 etc defines how each row needs to be split into.

<div class="row">
        <div class="large-6 column callout"></div>
        <div class="large-6 column callout"></div>
    </div>
    <div class="row">
        <div class="large-12 column callout"></div>
    </div>
    <div class="row">
        <div class="large-10 column callout"></div>
        <div class="large-2 column callout"></div>
    </div>
    <div class="row">
         <div class="large-6 column callout"></div>
         <div class="large-6 column callout"></div>
    </div>
</div>

In order to understand better, I have attached the code to this article.

Download code here

Please remember that Foundation is a responsive web framework. Take a look on the attached code in multiple devices or alter the browser size in your computer and see that the blocks stack up on one another on small browsers so that the content is visible and sized up completely and the responsiveness is achieved.