Most of the Salesforce customers are now switching to lightning experience and so the need of custom lightning component development has increased rapidly. A better documentation is very much needed for smooth transition and to make it easy to understand by other developer.

What is the Lightning Component Framework?
The Lightning Component Framework is a UI Framework that is used for developing single-page applications for desktop and mobile devices.

There are two ways you can create Lightning Components –
1) Using two programming models: The Lightning Web Components model
2) Using the original Aura Components model

Why use the Aura Components Programming Model?
The out-of-the-box set of components, it’s event-driven architecture and a framework optimized for performance act as an advantage in comparison to other models.

What are the Aura Components?
Aura Components are the reusable self-contained units of an app. They are a reusable section of the UI, and range in granularity i.e., from a single line of text to an entire app.

Let’s do documentation of a sample component:

HelloWorld.cmp

<aura:component> 
    <aura:attribute name="greeting" type="String" default="Hello" access="global" /> 
    <aura:attribute name="subject" type="String" default="World" access="global" /> 
    <div style="box"> 
      <span class="greeting">{!v.greeting}</span>, {!v.subject}! 
    </div> 
</aura:component>

All you need to do is – open Documentation from resource bundle and use below code in it.

HelloWorld.auradocs

<aura:documentation> 
    <aura:description>This is Hello World component used for greeting.</aura: description> 
     <aura: example name="Example 1" label="Examples of Greeting Component" ref="c:helloWorld"> 
        Greeting Component Description with more info to use. 
    </aura:example> 
</aura:documentation>

aura:description – this tag describes the component using extensive HTML markup

aura:example – this tag references an example that demonstrates how the component is used, the example is displayed as interactive output. Multiple examples are supported, and each should be wrapped in individual <aura:example> tags.

To view the documentation, navigate to Component Library that is available as an authenticated experience at https://<myDomain>.lightning.force.com/componentReference/suite.app, where <myDomain> is the name of your custom Salesforce domain where you can see all standard and custom components.

You will find the component listed with either org namespace OR “c:” under components tab. Navigate to HelloWorld.cmp or try to find it in “Quick Find” Box.

It will look something like this:

Example Tab displays the component referenced in aura: example attribute “ref”

Description tab displays the text to describe the component in aura:description. 

Note: Documentation definition (DocDef) is supported for components and applications. Events and interfaces support inline descriptions only.

Reference: 

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_documentation.htm?search_text=documentation

#HappyLightning