Lightning Component Zero to Hero
Welcome to the first post in my new series that will help you go from zero to hero with the Lightning Component framework. In this first post we ae going to take our first tentative steps by learning what exactly a Lightning Component is as well as the architecture of the Lightning Component framework at a very high level. We will round up with a look inside a component (the component bundle) and then be ready to get going in the next post.
So what is a Lightning Component then?
The short answer is whatever you want it to be!
That was simple eh? So the more serious long answer is:
A Lightning Component is a bundle of functionality that you may want to reuse in multiple scenarios throughout an application. You won’t believe this but I spent a long time writing that definition - all 20 words of it. The reason it took so long (aside from me being slow) is that a Lightning Component does not have to have a user interface, does not have to be something that you will definitely reuse many times and is more of a logical grouping of functionality by a developer.
Clear as Mud
Aside from just making the application more performant in some instances, the move to a component framework helps drive developers to be more productive as they componentize their application into chunks of reusable functionality. Lets take creating a task as an example. A task in Salesforce can be attached to almost any other object in Salesforce. Lets say I have devised a brilliant task entry system that makes entering this information really easy, wouldn’t it be good to be able to use this same entry system anywjere within Salesforce? By making this into a component, we can abstract away the common elements into a component and then just pass in some parameters to handle the dynamic elements of the component, in this instance the Id of the record we are associating the Task to.
Now this would make you believe that all components need to have a UI and this is why I was very careful with my definition. A component is just any bundle of functionality - it could simply be a set of logic and code to help you make a call to another site or service (for example an API to recieve a stock price). Credit here for the concept of “Lightning Service Components” goes to Dave Carroll, a concept which I intend to blog further about. However, for now (before we start getting into how componeonts communicate), just understand that a component can include other components and as such does not need to have any UI.
Enough of the Theory…
Okay, now we have laboured over the philosphical nature of what a Lightning Component is, lets actually break down what makes up a Lightning Component.
A Lightning Component is actually a bundle of things which together are called the “Component” or “Component Bundle”. Lets have a look at what actually makes up a component bundle and what all these pieces are for.
This is the UI for your component (if we have one). In here will be some HTML style markup tags which will be used to display data on the page. This is where we put anything we want to see on screen.
This is the custom styles for your component’s user interface - no UI = no styles. This is just a standard CSS file.
This file holds all the documentation details for your component including sample code showing how it an be incorporated if necessary.
This file contains information around how to apply your component and is required if you wish your component to be available in Lightning Pages, Communities or Lightning App Builder.
If you want a custom icon for your component in the Lightning App Builder then add it here.
In the next post we will start building our own Lightning Component by discussing what we are going to build and then working on a basic UI for us to display our data.