CRT-450 Salesforce Certified Platform Developer – User Interface – 25% Part 4

10. The Lightning Component framework and its benefits

In this lecture we will talk about the Lighting Component framework and its benefits. The topics of this lecture are the Lighting Component Framework and the benefits of this framework. Border and flexible, device aware and responsive, better performance, event driven architecture, reduce development time, and can be used in different places. Before listing the benefits of the Lighting Component Framework and the details of these benefits, we need to know what is this framework? The Lighting Component Framework is a UI framework for developing web applications for mobile and desktop devices. A framework is a collection of code and services that make it easier for you to create your own custom applications without having to write the entire code yourself. There are lots of different web application frameworks out there, like Ruby on Raid, like KPHP, like Grail and so on. It’s tailored to be used on mobile first, and it can also be used on tablets and on desktop. The Lighting Component framework is a modern framework for building single page applications with dynamic, responsive user interfaces for Lightning platform applications.

What’s special about this Lightning Component framework is that it uses JavaScript on the client side as the client controller and Apex on the server side. This is different than Visual Force that does not deal natively with JavaScript, but it has a direct channel with the server through Apex as of spring 19. You can build Lightning components using two programmatic models. First of all, we have the new Lightning Web component model, and then we have the original or a component model. Admins and end users do not know which programmatic model was used to develop the components. To them, they are simply Lighting components. So when an admin adds a component to, let’s say, an account page using the Lighting app builder, this admin does not know if this component is built using Aura or LWC. This is the list of the benefits of the Lighting Component framework. As you can see, there are so many benefits out there. We have modular and flexible.

We have device aware and responsive. We have better performance, event driver architecture, reduced development time, and then we have can be used in different places. Let’s talk about each one of them in detail. To begin, a Lighting component is modular and flexible. You can look at a Lighting component as a standalone entity that can be used and reused in many places. Imagine a Lego brick. You can use it in building a house, a castle, a wall, and so on. The same brick can be used and reused again in many different places. And the same can be said for a Lighting component. You can build a Lighting component and then you can add it to a record page, and then to a VisualForce page, to a flow and so on. You can also add it to a community and to many other places. It is the exact same component that you have built from the beginning, but it is so flexible that it can be used in so many places. Next, a Lighting component is device aware and responsive. What does this mean? Well, a single Lighting component can display in any device and it is natively responsive and it can handle different devices of different sizes.

This is the definition of responses web design RWD It is an approach to web design aimed at allowing desktop web pages to be viewed in response to the side of the screen or web browser one is viewing with. This can be achieved with proper coding and SLDs Grid and Lightning Layout components. Moreover, the latest Lighting Web component supports the latest in browser technology such as HTML Five, PS Three and Touch Events, and so on. Please check the link provided here to learn more about the responsive design of the Lighting component framework. So, as you can see on the right side, we have three Lighting components that are viewed by three different devices. On the top we have a large resolution device. So as you can see, component A is next to B, which is next to C. And then we have a medium resolution where component A and B are on the same line. And then component C moves to the next line. And then the third is a small resolution device where each one of these components has its own line. This is the definition of a responsive design. Next, we have performance. Lightning components have a client side JavaScript controller that is used to manage user interface, component metadata and data.

This means that there is no need to call the server all the times the client side controller handles this, and it can call the server only when needed. Moreover, the server sends only the data needed by the client and finally, caching data at the client side as possible. With Lighting components, it can reduce the number of server round trips and improve the performance of your Lighting components. The Lightning framework uses event driven programming. This means that there is no need to specify a point-to-point interaction between two components.

The way it works is that from one side, a component can be configured to fire an application or component event, and then on the other side, another component or any other component can subscribe to this application or component event that they can see. Event driven architecture allows better decoupling between components, so there’s no need to integrate each one of these components. There’s no need to say to component A. Now you need to fire to component B, and then component B you need to go back to component A. It’s not like that. We just need to use events. So to explain this more, let’s say that you have different number of components that need to communicate together. Let’s say that you need to inform component B when something changes on component A. Without event driven architecture, you need to configure component A. Once it changes to send a message directly to component B. But with event driven architecture you don’t need to do that. You just need to specify that once component A changes, it will fire an event. And then you need to go to component B and then you need to subscribe to that event and that’s it. Of course, you can go to other components like CED and so on. And you can subscribe to the same event fired by component A. So in this case, there is no point to point integration and there is decoupling.

Then we have reduced development time. Well, the Lighting component framework provides a big set of predefined components that can be used to build applications quickly. There is no need to spend time in creating everything from scratch. For example, let’s say that you want to add a button to a Lighting component. You have to go to the documentation and then you have to search for the button component. You have to copy the code and then you have to add the attributes and use this code within your component. To get the list of all components, please visit this link. And finally, a Lightning component can be used in different places in salesforce. Let’s see where it can be used. A Lighting component can be accessed as a standalone tab or a tab within an application. You can configure a tab to open a Lightning component.

So anytime you click on that tab, the Lighting component will display. The tab as mentioned can be part of an application, or it can be a standalone tab. A Lightning component can be added to a Lightning page using Lightning App Builder. So for example, you can open the Account page and then drag and drop any component from the left side of the Lightning page. Anything on the left side is a Lightning component which can be standard or custom. So let’s say you need to change the Lighting page of the account. You go to the app builder. You then drag and drop anything from the left side which now you know that are Lighting components. And then you choose the place where you want this to be on the page. You can also build your own Lighting component. And then these components will appear on this page. And then you can use them on the Account page. A Lightning component can be also launched as an action. An action can be configured to call a Lighting component as you can see on the right side. This way, clicking on this action would launch the Lighting component.

Moreover, a Lighting component can be used to override a standard action. For example, the view action here is overridden by the specified Lighting component and the standard behavior is not used, it is overridden. A Lighting component can also be added to a flow. Standard components can be added or custom ones that you create. So you can go and you can build custom Lighting components and then you can open Flow and then as an option you can add this Lighting component and the flow. Or you can simply use the standard components. A Lighting component can also be added to a VisualForce page. Also, a Lighting component can be launched directly from the URL of its hosted application. A Lighting component cannot be invoked directly without an app. So to be able to launch it from a URL, we create a Lighting app that hosts it and then we use the app URL to open this component. And finally, a Lightning component can be added to other platforms using Lightning Out. As a summary, this is the list of places where we can use a Lightning component within salesforce. So a Lightning component can be accessed as a standalone tab or a tab within an application. It can be added to a Lightning page using Lightning app builder. It can be launched as an action. It can be used to override standard actions. It can be added to a flow to a VisualForce page. It can also be launched by its app URL. And finally, it can be added to other platforms using Lightning Out.

And that’s it for this lecture. In this lecture, we have talked about the Lighting Component framework, which is a UI framework for developing web applications for mobile and desktop devices. You can build Lightning component using two programming models. First of all, we have the new Lightning web component and then we have the original Aura component. We then talked about all the benefits of this framework. The Lighting Component framework is modular and flexible in that a Lightning component is a standalone entity that can be used and reused in many places. Think of it as a Lego brick. It is device aware and responsive as it offers a responsive design that takes into account different devices with different sizes. It has better performance because of its client side JavaScript controller that is used to manage user interface, component metadata and data.

 It is based on an event driven architecture where the Lightning components are configured to either fire or subscribe to an application or to a component event, which means there is no need to link components used. A coupled point to point approach. It offers reduce development time as it consists of predefined out of the box set of components that can be used to build applications quickly. And it can be used in different places, as you have seen in the previous slide. And finally, as usual, thanks for watching.

11. 4.5- Resources in a Lightning Component

Hey guys. This is section four. User interface. And this is lecture number five, resources and a Lightning component. In this lecture will talk about what are the different resources that we can use in a Lightning component. First of all, let me go to the Developer Console and then let me show you the Lightning component that we have just made. This is a very simple one. You can notice on the right side we have different rows. Each one of these is a resource that we can use for this component. So for now, we have the component itself, which is this one. We can also use these. We can also use a controller, a helper styled documentation renderer design and SPG. Let’s talk about these in detail. These are the different resources that can be used in a Lighting component bundled. First of all, we have the component itself. This is the only required resource in a bundle. And it contains the markup for the component. It contains the different tags that compose this component. The file is file name CMP. And then we have the controller. This file contains the client side JavaScript controller method to handle events fired and handled by the component. So this is the controller and the file name is file Name JS.

And then we have the helper. As you can recall from Apex, we also have helper classes. When we built a trigger, we did not have any code in the trigger, but instead we used methods and a helper class. So this is the same thing here. This file contains JavaScript functions that can be called from any JavaScript code in a component bundle. And this will be a helper class to the controller. And it will be useful when we need to reuse the same logic somewhere else. So this is the same concept of helper classes in Apex.

The helper file has the same extension as the controller file. It’s a JavaScript file. And then we have the style resource. This will allow you to create CSS style files to be used by the component. And the extension is file name CSS. And then we have the documentation resource. This is just like a guide. And by adding it, we can easily know the use of the component. And it has over a doc extension. We have the renderer resource. This is a client side renderer to override the default rendering for a component. And the file name is file name JavaScript. And then we have the design resource. This is required for components that are used in Lightning App Builder and Lighting pages or in Community Builder. The file name is sampled. That design. And finally we have SVG.

This is a custom icon resource for components that are used in the Lightning App Builder or the Community Builder. And the file name is sampled SVG. Let me go back to the Developer console and if you want, let’s add one resource. I will add the documentation resource. When I clicked on this resource, I now have a new file called component one or a dock. This is the extension of this resource and then as you can see it has the description. So I will change this. This is a guide of this component and then I can add other text. I can do the same for all the other resources. If I want to add a resource, I just click on it and I will have its file open and ready and I can edit it. So I will save this. And now I have this resource and this component. So that’s it for this lecture. We have learned the different resources that we can use. Lighting Component and finally, as usual, thanks for watching.