Css Archives | Codeexecute

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..

 
 

image (img) element is not taking margin-top or bottom..

While designing one of my page I encountered with an interesting issue with which I juggled a lot.I was trying to align the image element as per design but the image element was not taking any margin at all in top or bottom but in horizontal direction only.

So as per specification I have discovered the basic behind the inline and block element.The image element is inline by default. All the inline elements take margin only in horizontal direction but that would not be reflected in vertical direction. This elements will continue the flow without breaking the flow.

Hence in below example:-


<style>
.custom-span{
margin:20px;
border:2px #000 solid;
background-color:#d5cbcb;
}
</style>

The span element in this line will be separated horizontally on 
defining the margin but the vertical alignment of the span will be same. <span class="custom-span">span element</span>
Margin example in inline element :-

The span element in this line will be separated horizontally on defining the margin but the vertical alignment of the span remains same. span element

More about the inline and block properties,click here

 

display:Inline vs display:block

Normally HTML elements are rendered as box elements according to HTML specification. But the element could be shown in different manner. If not specified all the HTML elements inherit the default display property according to their behaviors. These default and basic properties are:-
1.inline
2.block
3.none

display:none, property implies that element and its children elements will not be rendered at all and would not be displayed on the page.

But rest of the elements are either inline or block ,so we will learn about the difference between inline vs block

A block element-
– Uses full width of available space
– starts always in next line
– margin and width defined on these elements will be reflected on page

Common Block elements :-

<h1> to <h6> , <p>,<div>, <table>,<form>,<pre>,<block>,<blockquote>

An inline element

– do not break the flow, it starts in the continuity of the existing element
– does not use complete space
– the margin and padding would be reflected only in horizontal direction not in vertical direction

Common inline elements :-

<ul>,<li>,<a>,<span>,<strong>,<em>

Example for (display:block) elements :-

<style>
div{
border:2px soild #000;
background-color:#ccc;
}
</style>
<div id="div1">
This div is using complete space.

</div>

<div  id="div2">
div2 is using complete space  and starts in second line after first div

</div>
This div is using complete space.

div2 is using complete space and starts in second line after first div

Example for (display:block) elements:-

<p>The span element won't start in next line<em>inline span element</em></p>

The span element won’t start in next line inline span element

Common Problems related to this section:-
1. Why image (img) element is not taking margin-top or bottom..