By now you may have heard that we made the UI framework behind Salesforce1 mobile app available to Force.com developers. The Lightning Component framework empowers you to extend Salesforce1 with your own custom components. Components are reusable sections of the UI and can range in granularity from a single line of text to an entire app. This framework is based on the open-source Aura Framework available at https://github.com/forcedotcom/aura.

The Lightning Component framework encapsulates components while enabling them to communicate their data using events. Components can contain HTML or other components, and their logic is maintained in JavaScript controllers, which react to events and use component attributes and expressions to display data. You can handle user interactions using these client-side controllers, and persist data updates using an Apex controller.

Build Apps Lightning Fast

Load Record Data in a Lightning Component

Let’s say you have a custom object to track your expenses and you’re building a custom interface to let users quickly update whether the expense has been reimbursed. You can load the expense data using an Apex controller class that looks like this.

@AuraEnabled enables client- and server-side access to the Apex controller method, which is wired to the following component via the controller attribute on the aura:component tag. namespace refers to your registered namespace prefix.

Component attributes are typed fields that are set on a specific instance of a component,
and can be referenced from within the component’s markup using an expression syntax. Attributes enable you to make components more dynamic. Our component has an expenses attribute, defined by the aura:attribute tag. We will populate this attribute with the data returned by the Apex controller.

aura:iteration iterates over the list of expenses and renders them in the component. The expression {!v.expenses} wires up the component to the expenses object. var="exp" denotes the name of the variable to use for each item inside the iteration. {!exp.namespace_Client__c} represents data binding to the client field in the expense object.

Load the expense data on component initialization in the following client-side controller. The init event enables you to call a client-side controller action when the component is initialized. In this case, we call the doInit() action via the {!c.doInit} expression, which calls the getExpenses() method of the Apex controller via component.get("c.getExpenses").

All action calls are asynchronous and run in batches to minimize network traffic. Rather than sending a separate request for each individual action, the framework processes the event chain and executes the action in the queue after batching up related requests.

See how easy it is to create Lightning components? From there, you can use some of the out-of-the-box input and output components to get and display user input, using an Apex controller method to insert or update data changes. The possibilities for extending Salesforce1 with Lightning components are endless.

For the rest of the tutorial and tips on using Lightning components, see the Lightning Components Developer’s Guide.