Lightning - Read the values based on ids and set the values based on attributes

Read the values based on ids and set the values based on attributes

I have got this strange doubt when we can read the values based on ids what is the use of <aura:attribute> 
For displaying the data we can use output text. In this case we are reading and assigning the values in script i.e. controller. 
In order to display values in markup i.e. component we need attributes 

Component
************************************************************************************************
<aura:component >
    <aura:attribute name="FirstName" type="String" />
    <aura:attribute name="LastName" type="String" />
    <aura:attribute name="DateOfBirth" type="Date" />
    <aura:attribute name="Email" type="String" />
    <aura:attribute name="Phone" type="String" />
    <lightning:card iconName="standard:lead">
    	<aura:set attribute="actions">
        	<lightning:buttonGroup>
                <lightning:button label="Submit" onclick="{!c.demo}"/>
            </lightning:buttonGroup>
        </aura:set>
        <aura:set attribute="title">
            Personal Data<br/>
            Basic Information
        </aura:set>
        <aura:set attribute="footer">
            <lightning:badge label="All Information is protected"/> 
        </aura:set>
        <lightning:input label="Enter First Name" aura:id="firstname" name="firstName" required="true" /> 
        <lightning:input label="Enter Last Name" aura:id="lastname" name="lastName" required="true" />
        <lightning:input label="Enter Date Of Birth" type="Date" aura:id="dob" name="dob" required="true" />
        <lightning:input label="Enter Email" aura:id="email" name="email" required="true" />
        <lightning:input label="Enter Phone" aura:id="phone" name="phone" required="true" />   
        
        First Name: {!v.FirstName}<br/>
        Last Name: {!v.LastName}<br/>
        DateOfBirth: {!v.DateOfBirth}<br/>
        Last Email: {!v.Email}<br/>
        Last Phone: {!v.Phone}
    </lightning:card>
</aura:component>
************************************************************************************************

Controller
************************************************************************************************
({
	demo : function(component, event, helper) {
		var fname = component.find("firstname").get("v.value");
        var lname = component.find("lastname").get("v.value");
        var dob = component.find("dob").get("v.value");
        var email = component.find("email").get("v.value");
        var phone = component.find("phone").get("v.value");
        component.set("v.FirstName",fname);
        component.set("v.LastName",lname);
        component.set("v.DateOfBirth",dob);
        component.set("v.Email",email);
        component.set("v.Phone",phone);
	}
})
************************************************************************************************