Hi Satheesh,


Visualforce and Lightning both offer ways to design and create custom interfaces for Salesforce. 
Visualforce was designed to follow a Page-Centric model. This means that the intent of Visualforce was to create something that was your full page interface with Salesforce. When the user needed to perform some kind of operation, like Save a record, it would send that request to the Salesforce servers and then reload the entire page with the new state of the UI. All backend processing is done with Apex Code on the Server-Side. You have the option to inject JavaScript into the mix to handle some of the Client-Side processing, but it isn't the default interaction methodology. Visualforce was also primarily built for Desktop. When Visualforce was first launched back in 2008 the iPhone had been out for about a year. The concept of designing things "mobile first" hadn't yet been realized, this would come a few years later.
Visualforce also uses an HTML-like markup language for designing the pages and Apex code to handle the database operations. Here is a breakdown of what you have with Visualforce pages:
Visualforce Page - HTML-like markup language used to design the layout of the page.
Standard Or Custom Controller - Apex Code to handle Server-Side operations executed from the Visualforce page (EX: CRUD operations).
Optional: CSS Styling - Style your Visualforce page to look a specific way within the header or by file reference.
Optional: JavaScript - Used to handle Client-Side processing or to be coupled with CSS for a cosmetic revamp of the UI.
Optional: Apex Extensions - These are used to perform logical operations that are not housed within the standard or custom controller.


Lightning was designed to follow an App-Centric model. This essentially means that it has been designed to create self-contained components that build on top of each other. To put this in perspective, with Visualforce you would send an interaction to the Salesforce server and then update the entire page. However, with Lightning, you can send an interaction to the Salesforce servers and then update a specific component. This has huge implications for performance and for the fluid motion of a UI. This allows us to design UIs that are inherently responsive to the user interactions, meaning we update the things the user is interacting with and everything else remains untouched.
The components themselves can either have the logic process on the Client-Side (using JavaScript code) or on the Server-Side (using Apex Code) depending on what the component is designed to do. There is a great Blog Tutorial for how to use both types of processing within the Lightning framework. The Lightning Components and Applications come in "Bundles" that store all of the necessary files to run. Let's take a look at what a Lightning Component Bundle includes:
Component - Markup language used to structure the layout of the component.
CSS Styling - Used to change the cosmetic look or style of the component.
Controller - Use a JavaScript Controller to handle Client-Side logic processing or use an Apex Controller to handle Server-Side logic processing.
Design File - Used to describe the design-time behavior of the component when used in Lightning Pages, Lightning App Builder, or in Community Builder.
Documentation File - Provides sample code or reference documents for others to use when they get your component.
Renderer - Used to override the default Client-Side render settings of a component.
Helper - Used to store reusable JavaScript functions that are handled by the Renderer or Controller as well as executing Server-Side actions.
Optional: SVG File - Allows you to include custom icons for reference within your component.

Please refer below link for more clarification.

https://balkishankachawa.wordpress.com/2015/11/23/visualforce-vs-lightning/
 
Hope this helps you!

Please mark it as Best Answer if my reply was helpful. It will make it available for other as the proper solution.
 
Thanks and Regards
Sandhya