VF code vs Lightning code.

<apex:page controller="Mycalci">
    <apex:form >
        <apex:pageBlock >
       
  First Number      <apex:inputText value="{!num1}"/>
       
  Second Number         <apex:inputText value="{!num2}"/>
 
 
 Out put <apex:outputText value="{!num3}" label="Out put"/>
 
  <apex:pageBlockButtons >
 
  <apex:commandButton value="Add" action="{!Add}"/>
    <apex:commandButton value="Sub" action="{!sub}"/>
  </apex:pageBlockButtons>
         
        </apex:pageBlock>
    </apex:form>
</apex:page>

=====================

public class Mycalci {

    public Integer num1 { get; set; }
    public Integer  num2 { get; set; }
    public Integer  num3{ get; set; }
   
   
    public pageReference Add()
    {
   
    num3=num1+num2;
   
    return null;
    }
   
   
    public void Sub()
    {
   
    num3=num1-num2;
   
   
    }
   
}

============
lighting component
=======

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
   
   
    <aura:attribute name="num1" type="integer" />
    <aura:attribute name="num2" type="integer" />   
    <aura:attribute name="num3" type="integer" />
   
     <lightning:input name="input1" label="Enter first number" type="number" value="{!v.num1}" aura:id="abc"/>
   
     <lightning:input name="input2" label="Enter second number" type="number" value="{!v.num2}" aura:id="xyz"/>
   
      <ui:inputNumber label="Number 1" value="{!v.num1}" aura:id="ddd" />
   
  {!v.num1} +{!v.num2}
   
<lightning:buttonGroup >
     
        <lightning:button label="Add" variant="success" onclick="{!c.Add}" title="Add Method"  />
        <lightning:button label="Sub" variant="brand" onclick="{!c.Sub}"  />
        <lightning:button label="Mul" variant="destructive"  onclick="{!c.Mul}"  />
    </lightning:buttonGroup>
   
   
</aura:component>

===========
Java script Controller code
===========


({
Add : function(component, event, helper) {
       
      var n1=parseInt(component.find("abc").get("v.value"));
 
         var n2=parseInt(component.find("xyz").get("v.value"));
       
         var n3=component.find("ddd").get("v.value");
       
        alert(n3);
       
    var a=  parseInt(component.get('v.num1'));
    var b=  parseInt(component.get('v.num2'));
    var c=n1+n2;
       
        var d= a+b;
       
        alert('%%%%%final out put%%%%%'+d);
       
       
       
       
     
     

},
    Sub : function(component, event, helper) {
       
       var n1=parseInt(component.find("abc").get("v.value"));
 
         var n2=parseInt(component.find("xyz").get("v.value"));
       
         var c=n1-n2;
       
        alert('%%%%%final out put%%%%%'+c);

},
    Mul : function(component, event, helper) {
       
            var n1=parseInt(component.find("abc").get("v.value"));
 
         var n2=parseInt(component.find("xyz").get("v.value"));
       
         var c=n1*n2;
       
        alert('%%%%%final out put%%%%%'+c);


}
   
})

Component References for Lighting

For getting your org Components source code, please replace below domain name with your domain name.

https://lightningclass1000-dev-ed.lightning.force.com/auradocs/reference.app

For getting all the OOTB(our of box) components, please replace below domain name with your domain name.

https://lightningclass1000-dev-ed.lightning.force.com/componentReference/suite.app

To understand the Secure versions of essential Java Script DOM API's, such as Window.. click on below link>

http://documentation.auraframework.org/lockerApiTest/index.app?aura.mode=DEV