Custom Lightning Component Vs. Visualforce Page

Custom Lightning Component Vs. Visualforce Page

Visualforce page


Visualforce app development is familiar to anyone who has built web apps. Developers create Visualforce pages by composing components, HTML, and optional styling elements. Visualforce can integrate with any standard web technology or JavaScript framework to allow for a more animated and rich user interface. Each page is accessible by a unique URL. When someone accesses a page the server performs any data processing required by the page, renders the page into HTML, and returns the results to the browser for display.

Benefits of Visualforce:


User-friendly development
Developers can edit their Visualforce markup in the same window that displays the resulting page. Consequently, developers can instantly verify the result of an edit just by saving their code. The Visualforce editor pane also includes auto-completion and syntax highlighting.
Visualforce also supports “quick fixes” that allow developers to create supporting components on the fly. For example, a developer can define a new Visualforce page simply by logging in to Salesforce and then entering the name of the new page in a URL. Much like a wiki, if the page does not yet exist, the platform creates it for you.

Integration with other Web-based user interface technologies
Because Visualforce markup is ultimately rendered into HTML, designers can use Visualforce tags alongside standard HTML, JavaScript, Flash, or any other code that can execute within an HTML page on the platform, including Lightning platform merge fields and expressions.

Model-View-Controller (MVC) style development
Visualforce conforms to the Model-View-Controller (MVC) development pattern by providing a clear division between the view of an application (the user interface, defined by Visualforce markup), and the controller that determines how the application works (the business logic, defined by a Visualforce controller written in Apex). With this architecture, designers and developers can easily split up the work that goes with building a new application—designers can focus on the look and feel of the user interface, while developers can work on the business logic that drives the app.

Concise syntax
Visualforce pages can implement the same functionality as s-controls but with approximately 90% fewer lines of code.

Data-driven defaults
Visualforce components are rendered intelligently by the platform. For example, rather than forcing page designers to use different component tags for different types of editable fields (such as email addresses or calendar dates), designers can simply use a generic <apex:inputField> tag for all fields. The Visualforce renderer displays the appropriate edit interface for each field.

Automatically upgradeable
Visualforce pages do not need to be rewritten when other parts of the Lightning platform are upgraded. Because the pages are stored as metadata, they are automatically upgraded with the rest of the system.

Make Long-Running Callouts from a Visualforce Page 
Use asynchronous callouts to make long-running requests from a Visualforce page to an external Web service and process responses in callback methods. Asynchronous callouts that are made from a Visualforce page don’t count toward the Apex limit of 10 synchronous requests that last longer than five seconds. As a result, you can make more long-running callouts and you can integrate your Visualforce pages with complex back-end assets.

Disadvantages of Visualforce:


View State Size
The view state size of your Visualforce pages must be under 135 KB.

Load Times
Large page sizes directly affects load times.
Higher latency, which degrades mobile performance.
Poor match for low-end or older mobiles devices with limited compute resources.
Visualforce processes markup tags on the Salesforce server, which can increase the response time.

Multiple Concurrent Requests
Concurrent requests are long-running tasks that could block other pending tasks.

Preventing Field Values from Dropping Off the Page
If your page contains many fields, including large text area fields, and has master-detail relationships with other entities, it may not display all data due to limits on the size of data returned to Visualforce pages and batch limits. The page displays this warning: “You requested too many fields to display. Consider removing some to prevent field values from being dropped from the display.”


Not Mobile friendly
Making VF mobile friendly makes the development complex.

Customization
Standard tabs, custom object tabs, and list views that are overridden with a Visualforce page aren’t supported in the Salesforce app. Mobile users see the default Salesforce page for the object instead.

Interactivity
Limited interactivity (aside from JavaScript functionality you add yourself).
Difficult to create an immersive user experience.

Lightning Component 

Lightning Components is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side.


Benefits of Lightning Component:
Load Times
Lightning Component processes markup tags on the client(browser), which can decrease the response time.

Rich component ecosystem
Create business-ready components and make them available in the Salesforce app, Lightning Experience, and Communities. Salesforce app users access your components via the navigation menu. Customize Lightning Experience or Communities using drag-and-drop components on a Lightning Page in the Lightning App Builder or using Community Builder. Additional components are available for your org in the AppExchange. Similarly, you can publish your components and share them with other users.

Performance
Uses a stateful client and stateless server architecture that relies on JavaScript on the client side to manage UI component metadata and application data. The client calls the server only when absolutely necessary; for example to get more metadata or data. The server only sends data that is needed by the user to maximize efficiency. The framework uses JSON to exchange data between the server and the client. It intelligently utilizes your server, browser, devices, and network so you can focus on the logic and interactions of your apps.

Event-driven architecture
Uses an event-driven architecture for better decoupling between components. Any component can subscribe to an application event, or to a component event they can see.

Faster development
Empowers teams to work faster with out-of-the-box components that function seamlessly with desktop and mobile devices. Building an app with components facilitates parallel design, improving overall development efficiency.
Components are encapsulated and their internals stay private, while their public shape is visible to consumers of the component. This strong separation gives component authors freedom to change the internal implementation details and insulates component consumers from those changes.

Device-aware and cross browser compatibility
Apps use responsive design and provide an enjoyable user experience. The Lightning Component framework supports the latest in browser technology such as HTML5, CSS3, and touch events. Salesforce promoting this as next platform for building web and mobile apps and will work with mobile.

Extendability
Components have a object oriented approach and can inherit other components. The advantages are widely known but ultimately it makes for more organized, reusable and manageable components.

Security
Another big win for Salesforce is the enhanced security that comes with Lightning. LockerService, for instance, is a security feature that isolates Lightning components (the building blocks of Lightning pages) so they can’t interact with each other. This helps safeguard against malicious input.


Disadvantages of Lightning Component Framework

1. Since Lightning components are new, there are still some features that aren’t supported.
2. Doesn’t work well with Internet Explorer browser.

Final Touch point

1. There are no major disadvantages of Lightning Components
2. Enhanced security that comes with Lightning
3. Lightning component development time is much less than Visualforce
4. Reusability is higher in Lightning Components
5. For long running callouts Visualforce with Continuation Server is the best approach

Leave a Reply