Understanding Lightning Component Framework Architecture

Traditionally, Salesforce UI design came down to two questions: Do I want to recreate the look-and-feel of Salesforce with custom Visualforce pages, or do I want to install a third party framework to create rich application interfaces?

The prevailing design pattern since the fall of Adobe Flash has been to use Visualforce to simply render the output from JavaScript frameworks such as Backbone, Angular, Ember, Sencha, and others. Developers could continue to follow MVC patterns by using Apex controllers to retrieve data from the Salesforce database.

While this may have enabled a rich, responsive experience for certain applications developed for Salesforce, users still had to deal with a mixed experience across all of Salesforce, especially if multiple JavaScript frameworks were in use.

Lighting Experience and the Lightning Component Framework solve a problem that has long been a barrier to a truly unified experience for all Salesforce users: Providing a single, integrated framework for developers that enabled the creation of rich, responsive applications that could be seamlessly “plugged in” anywhere in the UI rather than having to stand alone in separate pages or standalone applications.

Because the Lightning Component Framework is what underlies Lightning Experience and the Salesforce1 mobile applications, we no longer have to choose a JavaScript framework developed and maintained outside of Salesforce. We can now create components and applications using a rich JavaScript framework that is provided and maintained by Salesforce.

What is the Lightning Component Framework?

The Lightning Component Framework is a client-side UI framework that was built by Salesforce using the open source Aura UI framework. The framework uses JavaScript for client-side operations and exposes an API to access Salesforce data using Apex controllers.

The Lightning Component Framework was initially created to support development for the Salesforce1 mobile application, but is now the standard for responsive, client-side single page applications for the end-to-end Salesforce user and developer experience across all browsers and devices.

The framework provides a number of reusable out-of-the-box components for you to get started building your own Lightning Components, and the platform is fully maintained and supported by Salesforce.

The problem Salesforce solved with the Lightning Component Framework was to give Salesforce developers a single, standardized and supported JavaScript framework to move beyond the limitations of Visualforce and build rich applications with a common design system without having to select, install and maintain a third party framework.

Eliminating the JavaScript framework sprawl within the Salesforce development ecosystem enables developers and admins to deliver customized business solutions with a standardized look and feel without having to learn and maintain yet another framework from another vendor that wasn’t built specifically for the Salesforce platform.

What is JavaScript?

Along with HTML and CSS, JavaScript is one of the three core languages of web development.

If you do not have a background in JavaScript, don’t worry. Even though it will be the most difficult thing you will have to learn when coming up to speed on Lightning Component development, JavaScript has been around for decades and there are countless resources available for learning the language.

JavaScript was introduced in the mid-1990’s as a scripting language for the Netscape Navigator browser, with Microsoft subsequently releasing a version for Internet Explorer. By the late 1990’s, JavaScript was standardized across browsers with the introduction of what is called ECMAScript. Today, all modern browsers include JavaScript engines.

JavaScript will not be completely foreign to Apex developers or anyone with an object-oriented programming (OOP) background as it follows object-oriented principles. What will throw you off if you have an Apex background is the fact that JavaScript is loosely typed, whereas Apex is a strongly typed language. This will take some getting used to conceptually.

At its core, JavaScript is a language that is used to read and manipulate what we call the Document Object Model (DOM). The DOM is a programmatic interface that gets built when a browser reads an HTML document and converts each HTML element into what are called node objects. These HTML nodes form a tree-like structure in the DOM, and we can use JavaScript to find nodes, add nodes, remove nodes and modify nodes to make our web applications dynamic.

The other core function that JavaScript performs is listening for and handling events that occur in the browser. HTML itself is a static markup language and was not built to be dynamic in its rendering, which is why JavaScript was created to handle events such as clicking a mouse, changing a picklist value, or putting a form element into focus. You can write JavaScript functions to handle DOM events, and your JavaScript functions can in turn manipulate the DOM by adding, removing or modifying DOM elements.

Many of us have only had to learn JavaScript at a cursory level because JavaScript libraries like jQuery and JavaScript frameworks such as Sencha ExtJS, Angular, Node and Backbone take care of a lot of the heavy lifting for us when it comes to actual JavaScript programming.

Lightning requires more direct JavaScript programming than many frameworks do, which gives you greater control over the functions in your Lightning Components and Applications, but unfortunately you’re going to have to bone up on your JavaScript knowledge before you can take advantage of that level of control.

What are JavaScript Frameworks?

JavaScript frameworks handle much of the behind-the-scenes complexity of JavaScript coding and DOM manipulation, and give developers a simplified template-based approach to building web applications.

While JavaScript itself does not follow the Model View Controller (MVC) design pattern, many JavaScript frameworks implement MVC to provide developers with a familiar architecture for separating the data model and view of an application with a logic, or controller layer. Each component of the MVC architecture can be maintained separately and be brought together in a cohesive application.

Some frameworks, such as Sencha ExtJS, may implement MVC but are more focused on enabling rich user interfaces by giving developers pre-built UI widgets that can be configured declaratively. Other frameworks are designed for touch-driven responsive mobile applications. There are dozens of JavaScript frameworks out there, the most common examples being Backbone.js, AngularJS, Ember.js, Knockout.js, React.js and ExtJS among others.

What is Aura?

Aura is an open source JavaScript UI framework that is maintained by Salesforce. Aura is component-based, and uses JavaScript on the client-side front-end, with Java on the sever-side back-end. Aura is the framework that underpins the Lightning Component Framework.

While the Lightning Component Framework and Aura have many similarities on the surface, do not try to use Aura components or functions that are not explicitly supported in the Lightning Component Framework documentation. Many developers have already found that these undocumented features may work at first, but unless they are explicitly supported by Salesforce, they can be taken away at any time.


Mike Topalovich
Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.

I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.

Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.
Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

One Comment

  1. Deepak Gulian

    Very well explained. Thank you


Leave a Comment

Your email address will never be published or shared and required fields are marked with an asterisk (*).

This site uses Akismet to reduce spam. Learn how your comment data is processed.