Aura Components

*8 components in Aura Bundle.
*3js, 1css, 1svg, 1 cmp, 1doc,
*TO run Bundle need App

Attributes name="xyz" value =1 replaces variables to show in front end
To show {!v.xyz}
v signify Component (ie; visual value)
c signify controller (ie; Controller value)

For back end use .js controller

aura:attribute can be defined directly in application also because both are front end.
Now we have 2 different ways to to to define aura:attribute

Creating a lightning component and then calling it in the lightning application,
lightning component attribute inside application

Button

Js Controller = all functionality inside this.

implements
: to make your component available for record pages and any other type of page,

Calculator App
Component=AddComponent.cmp

<aura:component >
    <aura:attribute name="num1" type="Integer" default="30"/>
    <aura:attribute name="num2" type="Integer" default="20"/>
    <aura:attribute name="sum" type="Integer" />
      {!v.num1} + {!v.num2} = {!v.sum}
   <br></br>
  <ui:button label= "Press Me" press="{!c.add}"/>
</aura:component>

Js.Controller =AddComponent.js

({
 add : function(component) {
       var xyz = component.get("v.num1") + component.get("v.num2");
        component.set("v.sum",xyz);
                                              }
})

Output:

You can only use {!} Syntax in markup languages like HTML, hence in .app and .cmp we are using {!} for expression.

ifElse

<aura:component>
  <aura:attribute name="edit"
                             type="Boolean"
                             default="True"/>
   <aura:if isTrue="{!v.edit}">
      <ui:button label="submit"/>
       <aura:set attribute="else">
          Hello, Welcome to SalesfrceKid Platform
     </aura:set>
   </aura:if>
</aura:component>

Output

Value Providers

Value providers encapsulate related value together, similar to how an object encapsulates properties and methods.
The value providers for a component are v(view) and c(controller).
A component's view refers to its attribute set.
A component's controller enables you to wire up event handlers and action for the components. It's where you control your component's logic.

Global Value Providers /h5>
Here are some global value providers you need to know :

globalId: It returns the global ID for a component has a unique globalId, which is generated runtime-unique ID of the component instance.
$Browser: It returns information about the hardware and operating system of the browser accessing the application.
$Label: It enables you to access labels stored outside your code.
.
.
.
.
etc

<aura:component>
  Browser running on Tablet: {!$Browser.isTablet}
   <br></br>
    Is it running on IPhone: {!$Browser.isIPhone}
    <br></br>
     Is it running on Android: {!$Browser.isAndroid}
     <br></br>
I am Running on : {!$Browser.FormFactor}
</aura:component>

output
Browser running on Tablet: false
Is it running on IPhone: false
Is it running on Android: false
I am Running on DESKTOP

Server Side Controller or Apex Class

With Sharing: To respect salesforce security to connect with client side controller
Static and stateless methods: Method don't care who is calling them
@AuraEnabled:to enable the client and server-side access to the method.
Example: Apex class (server side component).apxc

public with sharing class simpleController//with sharing to share
{
 @AuraEnabled //to enable access
 public static String serverEcho (String firstName) //static
 {
  return('Hello from the server'+ firstName); 
 }
}

component

<aura:component controller="simpleController"> //linking apex
  <aura:attribute name="firstName" 
                             type="string" 
                             default="salesforceKid"/>
<ui:button label ="callServer" press="{!c.echo}"/> //calling js
</aura:component>

JS controller (client side controller)

//This is not class. It is JSON object with map of name value pair. Having only action handlers.
In function (component, event, and helper—though you can name them differently)
({
 echo : function(cmp, event, helper) { //Action handler as func.
                                       //can have only 3 paramtr 
  var action = cmp.get("c.serverEcho");//linking serverside (ssc) 
                                   controller function serverEcho
        action.setParams({         //Sending parameter to SSC
            firstName : cmp.get("v.firstName")
        })
        action.setCallback(this, function(response){ //callback
            var state = response.getState(); //add to variable
            if(state === "SUCCESS")          //comparing
            {
                alert("This is from server ::"+ response.getReturnValue());      //gets the value returned from 
                                  the server.              
            }
            else if(state === "INCOMPLETE")
            {
                //do something 
            }
            else if(state === "ERROR")
            {
             var error = response.getError();
             if(error)
             {
                 console.log("error"+errors);
             }
            }
        });
          $A.enqueueAction(action);// $A.enqueueAction adds the 
                                 server-side action to the queue.
                                 All actions that are enqueued 
                           will run at the end of the event loop

 }
})

Important:
c. IN component represent client side Component
c. in JS controller represent server side component (apex)
c: is the default namespace. It represents Aura component code you’ve added to your org.

Lightning Application

<aura:application extends="force:slds"> //for SLDS
    <c:serverSide/>
</aura:application>

wrapper Class: Reduce server call and get data at one call

public class wrapperClassController {

 @AuraEnabled 
    public static wrapper method(){
    //Get Required Account And Contact List by SOQL STEP 2
        List<Account> getAccount = [Select Id, Name  FROM Account];
        List<Contact> getContact = [Select Id, Name FROM Contact];    
//Instance before adding a list STEP 3
        wrapper wrp = new wrapper();
        wrp.accList = new List<Account>(getAccount);
        wrp.conList = new List<Contact> (getContact);
        return wrp;
    }

//Main Wrapper Class STEP 1
    public class wrapper{
       @AuraEnabled //Annotation when using for lightning component
          public List<Account> accList;
       @AuraEnabled 
          public List<Contact> conList;
    }   
}

Init
//doInIt Handler To call the c.doInIt action when screen load

//abc is funtion name on CSC.(client side controller)

Events in Aura

component composition

communicate from parent component to child component, we include child component inside the parent component.

Parent To Child

example: parentComponent.cmp

<aura:component>
<aura:attribute name="valueToChild" 
                          value="String">
<h6>This is parent component</h6>
//Including child component in parent 
<c:childComponent value="{v.valueToChild}"/>
</aura:component>

Parent To Child Component Communication :
In parent to child component communication, we can communicate by passing value from parent to child as explained above example.
But when we want to communicate from Child To Parent we cannot directly pass value inside an attribute. In that case, we use lightning Events ⚡️

Event for Child to parent

1)Component Event
2) Application Event

1)Component Event
Component Event On child-->Register it on Childcmp-->fire Event from Child Js-->use parent JS to handle Event--> pass value to parent cmp to use.

lightning Tag vs UI tag
UI tag was initially introduced
lightning tag has inbuilt SLDS we do not need to put extra effort to improve the look and feel, also it has may awesome tags to handle the Error or bad inputs.

Link