Difference between lightning component and visualforce component in Salesforce?

Hello Saloni,

Visualforce components are page-centric and most of the work is done on the server. Lightning is designed from the component up, rather than having the concept of a page as its fundamental unit. Lightning Components are client-side centric, which makes them more dynamic and mobile friendly.

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.

Hi,

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.

Hope this helps.