All you wanted to know about Lightning Component | JET BI

All you wanted to know about Lightning Component

Blog: 
Lightning-Component

         Salesforce Lightning;

  1. Lightning Component Framework;
  2. Advantages of using the Lightning Component Framework;
  3. Structure of Lightning Component;
  4. Helpful links.

 

 

1) Salesforce Lightning

Salesforce Lightning makes it easier to build responsive applications for any device, and encompasses the Lightning Component framework and helpful tools for developers.

New Features in Lightning:

Here are some of the new features that we are most excited about:

  • Experience. Modern user interface optimized for speed and responsive design for all devices (one code base for desktop, tablet, phone, and watch screens).
  • Lightning App Builder. A drag-and-drop authoring tool for easy app building and customizations. Developers can work with both out-of-the-box components and custom-built components.
  • Lightning Component Framework. Tools that allow developers to build reusable components, customize the Salesforce1 Mobile App, and build standalone apps. As a framework built right into the platform, it liberates the UI from the limitations of Visualforce UIs that are non-responsive in their design.
  • Design System. A responsive CSS framework, style guides, and modern enterprise user experience best practices. Salesforce is working to educate and guide developers on modern usability.
  • Lightning Connect. An integration tool that makes it easier for Force.com apps to consume data from external sources that conform to the OData spec.

The Lightning Experience is a beautiful, modern, customizable user experience that’s consistent across products and devices. The Lightning Platform enables you to build apps and customizations fast for desktops and mobile devices using powerful drag and drop tools. Lightning is also much faster than the Salesforce Classic interface.

2) Lightning Component Framework

Lightning Component Framework supports partitioned, multi-tier component development that bridges the client and server. It uses JavaScript on the client side and Apex on the server side. The benefits include an out-of-the-box set of components and interfaces, event-driven architecture, and a framework optimized for performance.

3) Advantages of using the Lightning Component Framework

 
  • Rich component ecosystem and faster development

A Lightning component can be used as in Salesforce app and also Lightning Experience and communities. We do not need to use different metadata for it. 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.

  • 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
 

Developers who have used frameworks written in languages such as .NET, Java, and JavaScript, are likely familiar with concepts around event driven programming. An event driven programming model is required in applications heavily dependent upon a graphical user interface, such as those found in browser-based, mobile web or native mobile apps. Such apps focus heavily on performing various actions in response to data entry and gesture-based user interaction. Actions include clicks, button presses, and swipes, all of which determine the flow of the application. The Lightning Component Framework supports these actions and also provides for custom events which allow messaging across loosely coupled independent component instances in an application.

The eventing model, in general, relies on an ever-present loop that listens for the various events, and fires off associated programmatic logic to handle each event when detected. The Lightning Component Framework uses the JavaScript event loop to listen for events associated with browser-based user actions, as well as other custom events fired from JavaScript code. While the capture and raising of user interface events are automatically managed by the browser, developers are responsible for registering which events to listen for in each component, and for coding the associated JavaScript event handler functions.

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

4) Structure of Lightning Component

The below diagram already pretty much explains how lightning component structure works. After all, the lightning component isn’t that different from Angular, React, VueJs or any other modern Javascript framework. So if you are coming from another Javascript MVC framework background, you will find lightning component concepts are pretty easy to understand.

To specify, let’s look at the following diagram:

 




Resource

Resource Name

Usage

Component or Application

sample.cmp or sample.app

The only required resource in a bundle. Contains markup for the component or app. Each bundle contains only one component or app resource.

CSS Styles

sample.css

Contains styles for the component.

Controller

sampleController.js

Contains client-side controller methods to handle events in the component.

Design

sample.design

File required for components used in Lightning App Builder, Lightning pages, Community Builder, or Cloud Flow Designer.

Documentation

sample.auradoc

A description, sample code, and one or multiple references to example components.

Renderer

sampleRenderer.js

Client-side renderer to override default rendering for a component.

Helper

sampleHelper.js

JavaScript functions that can be called from any JavaScript code in a component’s bundle

SVG File

sample.svg

Custom icon resource for components used in the Lightning App Builder or Community Builder.

 

5) Helpful resources

Salesforce provides useful resources for getting knowledge about new features. It is “Trailhead” portal. There are a lot of modules related to the development of Lightning components.

We recommend pass “Lightning Component Framework Specialist” Trailhead.

 

Also, you can find samples of using standard lightning components in the Lightning Components Library.

You can find  specific answers in  Lightning Components Developer Guide

 

Still have questions?

Contact JET BI expert

About Us

We develop and implement business intelligence solutions based on SAP BO/BW platform. We also provide the full cycle of Salesforce consulting: Salesforce implementation and customization, support, and ISV solutions. Mobile Development Department focuses on business solutions for iOS and Android. 

Get in touch

Minsk, Belarus
220002, Masherova avenue 19, 8 floor
Phone Belarus: +375 17 334 24 16

Saint-Petersburg, Russia
199178, 6th Line V.O., 61 office 71
Phone Russia: +7 911 830 05 05

Phone USA: +1 628 226 23 73

Projects: sales@jetbi.com
Career: jobs@jetbi.com

Connect With Us