I am fascinated by the thought which device you might be using right now to read this article!! A laptop, a desktop or swiping your fingers across a smartphone or tablet? When you are surrounded by the incredible plethora of devices responsive design comes as a dire necessity. So when it’s a dire need how can Salesforce be a step behind, it introduces lightning components a brilliant UI framework for developing dynamic web apps for the cell in our pockets and desktop devices. An excellent stuff for building single- page applications engineered for growth.
But changes are difficult to adopt, so it has been a constant effort by Salesforce to develop new features and functionalities to reduce the efforts and enhance the ease of adding responsive components with every release.
Adding Components To Apps
Earlier adding components to your app involved that once you are ready with the creation of components and prepared to add the components to your app you have to look for the out-of-box components that come along with the framework. You can easily leverage these available components by using them or extending them to add them to the custom components you are building.
See the Components folder at https://<myDomain>.lightning.force.com/auradocs/reference.app, as in is the name of your custom Salesforce domain. The UI namespace includes many components that are common on Web pages.
The components are encapsulated such that their internal structure remains private on the contrary their public face is visible to the consumer of the components. This clear boundary gives the author of the component flexibility to change the internal implementation and insulates the consumers from the changes implemented. However, the public shape of the component is defined by the attributes that can be configured and the events that can interact with the component.
(To build a new component we should always focus on the attributes that we want to display and the events that should trigger the components). Once you have completed defining the shape of a new component, developers can proceed on the components in parallel. This is a highly productive approach if you have a team working on an app.
Adding Lightning Components to Any App with Lightning Out (Beta)
To ease your job of adding lighting components to any app Salesforce comes up with Lightning Out (beta). You can use Lightning Out to run Lightning components apps outside of Salesforce servers.
“Whether it’s a Node.js app running on Heroku, a department server inside the firewall, or even SharePoint, build your custom app with Force.com and run it wherever your users are.”
To simplify things there were no major changes induced between deploying the lightning components anywhere and doing the same within Salesforce. All the things that you are already aware of about lightning component development still hold true. The main difference lies in the process, more specifically, in processes related to embedding the lightning components app in the remote web server or the origin server.
Lightning Out is added to the external applications in the form of JavaScript libraries that you include in the page on the origin server, and as markup code that is added to configure and activate your Lightning component app. After the initialization is completed Lightning Out pulls in the Lightning component app over a secure connection. Subsequently, it then spins it up and inserts it in the running page’s DOM. Once this is done your ‘normal’ lightning components code takes over and runs the rest of the show.
This approach adopted is quite different from that of embedding an app using an iframe. The Lightning components are treated as full citizens on the page when dealt via Lightning Out. You also have the choice to enable interaction between your Lightning components app and the embedded app and this interaction is managed by using Lightning events.
Apart from certain straightforward markup, there is a decent amount of setup and preparation needed within Salesforce to enable a secure connection between Salesforce and the origin server. Since the app is hosted in the origin server you have to handle the authentication with your own set of codes.
While wrapping up I would like to say since most of your components are running “outside” of Salesforce, so there will be certain issues that you should not be oblivious about. And it is very much possible there are changes you might need to make to your components or your app. There are two categories of concern:
- Considerations for Using Lightning Out-
The most obvious issue is authentication. There is no Salesforce container to handle authentication for you, so it is entirely your concern to take care of the authentication aspect. To learn more click here. - Limitations During the Lightning Out Beta-
The core Lightning Out functionality is stable but there are a few interactions with other Salesforce features that it is still improving on.
The chief problem amongst these is the standard components built into the Lightning Component framework. Currently, a number of the standard components show erroneous behaviour when used in a stand-alone context, for example like in Lightning Out, and Lightning Components for Visualforce based on Lightning Out. It happens as the components implicitly depend on resources present in the one.app container instead of explicitly defining their dependencies. However, this situation can be avoided if you make the components’ dependency explicit. Use ltng:require to reference all required JavaScript and CSS resources that aren’t embedded in the component itself.
Lightning Out is the technology that fuels the Lightning Components for Visualforce, which is now accessible in the “full strength” version. The process for using Lightning Out is relatively simple. It involves preparation, creating a reference to a Lightning Components app that has all the dependency information about the components and lastly creating components on the page to build the page’s functionality. So go ahead and explore the new Lightning Out and share with us your valuable experience.
Dont miss to check out : Real Time Access To External Data Using Salesforce Lightning Connect
References: developer.salesforce.com, releasenotes.docs.salesforce.com
Pratyush Kumar
