This series introduces you to the Lightning Component Framework through a free online course by Salesforce University combined with a six part blog series written by Don Robins, a Salesforce MVP, Certified Advanced Developer and Certified Salesforce Instructor. Each post provides deeper insight and additional perspective around topics covered by each course module.

In our last post (the first in this series) we pointed out some of the reasons why Lightning Components are not “just another JavaScript UI framework.” If you watched Module 1: Introduction to Lightning Components of our online course Creating Lightning Components, you learned a bit about where they can be used, some of the benefits of component-based architecture, and how developers can use them to build apps on the Salesforce1 platform. You also watched us build and launch a simple Hello World component in the Developer Console that you then had the opportunity to build yourself.

Components are Application Building Blocks

Remember, a component is nothing more than a building block that can encapsulate both presentation and/or logic. The component can be very simple, very complex, or somewhere in the middle. A given component can contain one or more components, or it can be contained by one or more components. Its job is simply to provide a specific piece of functionality in any given application.

A Lightning Component can contain combinations of metadata supporting both the shape of the component, (such as attributes, published events, and other definitions) as well as logic defined with JavaScript. A component’s markup metadata provides for its visual presentation, but keep in mind that a Lightning Component can also be completely non-visual by design, simply providing encapsulated functionality.

Resources are Component Building Blocks

In Module 2: Component Markup and Style, we’ll take a closer look at just a few of the various supporting resources that can be encapsulated and contained in a component. Taken together, we refer to this collection of metadata resources as the component bundle. As we do this, we’ll walk through adding some markup and CSS style rules in the resources to make our simple component a bit prettier.

Markup in the Component resource is used to shape the visual presentation of any Lightning Component. If you’re familiar with Visualforce, you’ll feel right at home with component markup.  Although they have different names and namespaces than those you’ve used in Visualforce, most Lightning Component tags and their named attributes have the same usage pattern. These tags can also use CSS classes from linked stylesheets just like Visualforce markup, but what’s a little different here is that a special Style resource also allows CSS rules to be completely encapsulated within any component.

Such encapsulated style rules are usually accessed only by the markup in the Component resource of the component bundle, and would typically not be used by any other component.  The benefit of encapsulated style is that it allows everything a component requires to be contained in one neat deployable package. However, developers don’t have to encapsulate CSS. They may still leverage style libraries like Twitter Bootstrap or others.

There are a number of other resources in the component bundle as well, including a JavaScript controller, a JavaScript helper library, and a few others that we won’t be discussing in the course. We’ll dig deeper into how we use the JavaScript resources in later modules. However, aside from the different resources contained in a component bundle, and the fact that additional resources may appear as the framework evolves over time, it is useful to understand the benefit of the bundle and how it provides scaffolding for each component.

The Component Bundle Provides the Scaffolding

One of the greatest challenges faced by developers building typical JavaScript Single Page Applications (SPAs) is the proliferation of the JavaScript code itself. Many of the more sophisticated frameworks provide patterns for how to organize JavaScript files and other related resources into folder directories on a developer’s hard drive, and tools to allow those files to be bound together and minified for eventual deployment to a web server. Such an organized codebase is crucial for enterprise class SPA development, and is necessary to allow for maintainability and consistency over time, especially with team development.

Unfortunately, when building SPAs using such third party frameworks to be hosted in Visualforce, there is no hard drive available to build such folder-based scaffolding while working in the cloud. Developers have only two options. The first is to manage the core of the codebase on their development computer’s hard drive and then zip and deploy the completed project as a static resource. The alternative is to maintain the JavaScript codebase and assets where embedded in a host Visualforce page, or perhaps custom Visualforce components. Neither of these options allow for much in the way of efficient organization.

Lightning Component bundles allow for a highly maintainable, cloud-based organizational structure while supporting scalability, as well as supporting a parallel development approach for development teams. All resources and the containing bundle are maintained as metadata and may be managed completely in the cloud, or by using a desktop IDE accessing resources through the Salesforce Tooling API. These are clearly huge benefits for maintaining and managing a JavaScript codebase.

Let’s Dig Back In

Watch Module 2: Component Markup and Style to learn how to use bundled resources. Using the Developer Console, you’ll get your feet wet learning about adding markup and style to your components.

Related Content

Creating Lightning Components online course

Blog Series:

Creating Lightning Components: Single Page Applications (1 of 6)
Creating Lightning Components: The Bundle as Scaffolding (2 of 6)
Creating Lightning Components: Action Processing and Binding Data (3 of 6)
Creating Lightning Components: Component Based Architecture (4 of 6)
Creating Lightning Components: Events and Messaging (5 of 6)
Creating Lightning Components: Wrapping It Up (6 of 6)

About the Author

Don Robins is a Force.com MVP, Certified Advanced Developer and award winning Salesforce University Certified Instructor. Since 2010, he’s been delivering the core development curriculum to hundreds of customers in both public and private workshops for Salesforce University in the US and abroad. As an independent Training Delivery Partner through his company Forcementor.com, he leads and mentors a team of certified Salesforce instructors, curriculum developers and technical authors. He found his way onto the platform as a consultant and developer in 2009, after two decades of building custom business applications with a metadata, framework-based approach. Ever since, his primary focus has been to educate developers and the business community on Salesforce1 and to evangelize the platform.