Lightning Component frame work

What is Salesforce Lightning?

Lightning includes the Lightning Component Framework and some exciting tools for developers. Lightning makes it easier to build responsive applications for any device.Lightning includes these technologies:

• Lightning components give you a client-server framework that accelerates development, as well as app performance, and is ideal for use with the Salesforce1 mobile app and Salesforce Lightning Experience.

• The Lightning App Builder empowers you to build apps visually, without code, quicker than ever before using off-the-shelf and custom-built Lightning components. You can make your Lightning components available in the Lightning App Builder so administrators can build custom user interfaces without code.

Using these technologies, you can seamlessly customize and easily deploy new apps to mobile devices running Salesforce1. In fact, theSalesforce1 mobile app and Salesforce Lightning Experience are built with Lightning components.

Lightning scripting vs visual force java scripting

We all know when we want to refer any element inside javascript which is embedded in the visual force page, we will be using "document.getelementbyid". Once we get reference of the element we usually perform what ever operations that we want to do inside the scripting.

Well there is no mystery inside the lightning component as well, we all know ,  mostly we are using javascripting inside the aura components , this is pretty simple. Refer any element by using "component.find("Id");" and do what ever you wish on that attribute or element.

----------------------------------------------------------------------------------------------------------------------
<aura:component >
    <ui:button label="Toggle" press="{!c.toggle}"/>
    <p aura:id="text">Now you see me</p>
</aura:component>

-------------------------------------------------------------------------------------------------------------------------

/*toggleCssController.js*/
({
    toggle : function(component, event, helper) {
     
//following statement gets the reference of the attribute by id :text and hence we can do what ever we //want on that attribute like hiding and rendering and so on...
        var toggleText = component.find("text");
//if we want to refer the attribute by name, we have to use component.get("v.nameofattribute")
//if we want to set data to the any attribute, we have to use component.set("v.nameofattribute",value )
//which we want to pass..
        $A.util.toggleClass(toggleText, "toggle");
    }
})
--------------------------------------------------------------------------------------------------------------------------

If above components did not give clear picture on referring aura components by ID, following example will definitely drive out any sort of confusion. copy paste below code and keep the component inside the lightning app.
--------------------------------------------------------------------------------------------------------------------------

<aura:component >
<ui:inputNumber label="First number" aura:id="fn" placeholder="0"/>
    <ui:inputNumber label="second number" aura:id="sn" placeholder="0"/>
    <ui:button aura:id="outputButton" label="Addition" press="{!c.calci}"/>
    <ui:outputNumber aura:id="opn" value=""/>
</aura:component>

-----------------------------------------------------------------------------------------------------------------------
/*Aura controller code */

({
calci : function(cmp, event) {
var firstnumber = cmp.find("fn").get("v.value");
var secondnumber = cmp.find("sn").get("v.value");
var outnumber = cmp.find("opn");
        var finalnumber=0;
        finalnumber=firstnumber+secondnumber;
 
outnumber.set("v.value", finalnumber);
       
}
})
---------------------------------------------------------------------------------------------------------------------------

Caluclator with lightning vs visual force page

This will be super example to understand lightning basics interms of  getters, setters and rendering partial page options, I'am sure this code will solve lot of doubts that new bees has.

Compare vf code and lightning code which I have provided below and execute in your org..
You will get much more confidence on lightning
------------------------------------------------------------------------------------------------------------------------
Component code
------------------------------------------------------------------------------------------------------------------------

<aura:component >
    <aura:attribute name="num1" type="Integer"/>
    <aura:attribute name="num2" type="Integer"/>
    <aura:attribute name="num3" type="Integer"/>
    <ui:inputNumber label="Number 1" value="{!v.num1}"  />
    <ui:inputNumber label="Number 2" value="{!v.num2}"   />
    <aura:attribute name="addbo1" type="Boolean" default="false"/>
    <aura:attribute name="subbo1" type="Boolean" default="false"/>
    <aura:attribute name="mulbo1" type="Boolean" default="false"/>
    <aura:attribute name="divbo1" type="Boolean" default="false"/>
    <aura:attribute name="refreshbo1" type="Boolean" default="false"/>
<aura:if isTrue="{!v.addbo1}">
    Addition of Two Numbers is :  {!num3}
    <ui:outputNumber  value="{!v.num3}"/>
</aura:if>
    <aura:if isTrue="{!v.subbo1}">
     Substraction of Two Numbers is :  {!num3}
         <ui:outputNumber  value="{!v.num3}"/>
</aura:if>
    <aura:if isTrue="{!v.mulbo1}">
    multiplication of Two Numbers is :  {!num3}
         <ui:outputNumber  value="{!v.num3}"/>
</aura:if>
    <aura:if isTrue="{!v.divbo1}">
    Division of Two Numbers is :  {!num3}
         <ui:outputNumber  value="{!v.num3}"/>
</aura:if>
     <ui:button press="{!c.Add}" label="Addition" />
     <aura:if isTrue="{!v.refreshbo1}">
     <ui:button press="{!c.Refresh}" label="Refresh" />
    </aura:if>
    <ui:button press="{!c.Sub}" label="Substraction" />
 
    <ui:button press="{!c.Mul}" label="Multiplication" />
 
    <ui:button press="{!c.Div}" label="Division" />

   
 
</aura:component>

-----------------------------------------------------------------------------------------------------------------------
Controller code
------------------------------------------------------------------------------------------------------------------------


({
Add : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1+num2;
        component.set("v.num3", num3);
         component.set("v.addbo1", true);
        component.set("v.refreshbo1", true);
            component.set("v.mulbo1", false);
          component.set("v.subbo1", false);
          component.set("v.divbo1", false);
     

},
    Mul : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1*num2;
        component.set("v.num3", num3);
         component.set("v.mulbo1", true);
          component.set("v.refreshbo1", true);
            component.set("v.divbo1", false);
          component.set("v.subbo1", false);
          component.set("v.addbo1", false);
     

},
    Sub : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1-num2;
        component.set("v.num3", num3);
         component.set("v.subbo1", true);
          component.set("v.refreshbo1", true);
            component.set("v.mulbo1", false);
          component.set("v.divbo1", false);
          component.set("v.addbo1", false);
     

},
    Div : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1/num2;
        component.set("v.num3", num3);
         component.set("v.divbo1", true);
          component.set("v.refreshbo1", true);
            component.set("v.mulbo1", false);
          component.set("v.subbo1", false);
          component.set("v.addbo1", false);
     

},
   
     Refresh : function(component, event, helper) {
     
         component.set("v.num1", 0);
          component.set("v.num1", 0);
         component.set("v.divbo1", false);
          component.set("v.mulbo1", false);
          component.set("v.subbo1", false);
          component.set("v.addbo1", false);
           component.set("v.refreshbo1", false);
     

}
})

-------------------------------------------------------------------------------------------------------------------------
visual force page for the caluclator code with same results as above ligtnening
---------------------------------------------------------------------------------------------------------------------------
<apex:page controller="Calculator">
<apex:form >
 
    <apex:pageBlock title="Simple caluclator">
        <apex:pageBlockSection columns="1">
            <apex:pageBlockSectionItem >
Please Give First Number<apex:inputText value="{!number1}"/>
 </apex:pageBlockSectionItem>
 <apex:pageBlockSectionItem >
Please Give Second Number<apex:inputText value="{!number2}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
Please Provide The Operator <apex:inputText value="{!operator}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="ShowResult" action="{!calculation}" ></apex:commandbutton>
<apex:commandButton value="Refresh" action="{!Refresh}" rendered="{!flag}" ></apex:commandbutton>
 </apex:pageBlockButtons>

 <apex:pageBlockSection rendered="{!flag}">
 <apex:pageblockSectionItem >

 Result <apex:outputText value="{!result}"  >


 </apex:outputText>

 </apex:pageblockSectionItem>
  </apex:pageBlockSection>



 </apex:pageBlock>
</apex:form>
</apex:page>


------------------------------------------------------------------------------------------------------------------------
Controller
-------------------------------------------------------------------------------------------------------------------------


public class Calculator
{


 public boolean flag { get; set; }
public integer number1{get;set;}
public integer number2{get;set;}
public string operator{get;set;}
public double result{get;set;}


public Calculator()
{
flag=false;
}
public void calculation()
{
flag=true;
if(operator.contains('+'))
result=number1+number2;
if(operator.contains('-'))
result=number1-number2;
if(operator.contains('*'))
result=number1*number2;
if(operator.contains('%'))
result=number1/number2;
}
public void Refresh()
{
flag=false;
number1=null;
number2=null;
operator=null;


}

}

Compare Vf page and Lightning page

Some of us feel like lightning is altogether different from visual force pages but the fact is when we try to co relate the vf page with the lightning component , it would be very easy to understand the lightning concepts.

Following vf page displays different colors with text by making use of css styles and next followed lightning component also displays same  by making use css styles again.   Both are almost similar with minor differences.
 


Visual force page with "Hello world" multiple colors
--------------------------------------------------------------------------------------------------------------------------
<apex:page >

   <style>

.container {
    padding-top: 20px;
     background-color: yellow;
}

.blue1
{
   background-color: blue; }
   .red1
{
   background-color: red; }
 
   .green1
{
   background-color: green; }
 


   </style>

<div class="container">
<h1>Hello Visul force styles!</h1>

 <div >
         <h1>This is thimma code</h1>
         <div class="red1">I'm red.</div>
         <div class="blue1">I'm blue.</div>
         <div class="green1">I'm green.</div>
     </div>


</div>

 </apex:page>
--------------------------------------------------------------------------------------------------------------------------

Lightning  page with "Hello world" multiple colors
CMP name: Helloworld

--------------------------------------------------------------------------------------------------------------------------

<aura:component implements="force:appHostable">
<h1>Hello Lightning Component!</h1>
    <style>
     
    .THIS {
    background-color: yellow;
    padding-top: 10px;
}

h1.THIS {
    font-size:60px;
}

.THIS h1{
    font-weight: bold;
    padding: 10px;
}

.THIS.container {
    padding-top: 20px;
}

.THIS .red {
    background-color: red;
    padding: 10px;
}

.THIS .blue {
    background-color: blue;
    padding: 10px;
}

.THIS .green {
    background-color: green;
    padding: 10px;
}
 
 
 
    </style>
    <div class="container">
         <h1>This is thimma code</h1>
         <div class="red">I'm red.</div>
         <div class="blue">I'm blue.</div>
         <div class="green">I'm green.</div>
     </div>
 

</aura:component>
-------------------------------------------------------------------------------------------------------------------------

javascript code which solves focus of text issues on IOS device.

Several times I see when we are using IOS device especially Iphone , focus issues are rising up when some one try to edit the text area  inside the IOS device's. just add below peace of code inside your page and see the results. 

<script>
window.onkeydown=function(){window.focus();}
</script>