Lightning applications are composed of Lightning components. There’s not much difference the two with the exception that components must live inside an application. Before you proceed with this tutorial, I would suggest you take a look at the Lightning Components Quick Start which has a super simple guide to get a “hello world” up and running quickly. You might want to also check out the the Lightning Components Developer’s Guide for a great “Getting Started” expense tracker tutorial. We are going to build something a little more complex so let’s get started.
A component is actually a bundle of a number of files. Only the component or application is actually required but you’ll typically use at least a client-side controller as well. Here’s a breakdown of what’s in a component:
Component or Application (MyComponent.cmp or MyApp.app) – This file contains the declarative markup for the component or app.
CSS Styles (MyComponent.css) – The CSS styles scoped to the component.
Components can also container custom renderers and documentation but that is beyond the scope of this tutorial.
To get started, the first thing you’ll need to do is signup for a new Winter ‘15 Developer org. Older orgs are not enabled with Lightning. Next follow steps #2 & #3 in the Lightning Components Quick Start. Make sure in step #3 you also check “Enable Debug Mode”.
Now create the two Custom Objects to hold your data. We’ll create a Product__c object and a Product_Size__c object that looks like the following: