2.2 Some explanation about how lightning component works

In our previous post, we have introduced lightning component client side controller. And in the future, we will also introduce server side controller and client side helper. Why, you may wonder, are there so many different files? In Visualforce, we used to have only two files – the page and the controller, right?

The answer, is that it is required by modern web app. If you look around the modern structure of web applications, you will find more and more web apps are moving to a structure called single page application(SPA). And the building framework from more backend focused (php, Ruby on Rails, RoR) are gradually moving to frontend javascript framework(Angular, Backbone, ReactJs, VueJs). So here comes why.

The Building Blocks Of Web Apps

In order to understand why modern web apps seem so complex, you first need to understand how they work.

For starters, let’s look at a “traditional” (Visualforce way) web app:

  1. The database sends data to your back-end controller (Apex controller).
  2. The back-end reads and processes that data and outputs Html. (Apex controller and Visualforce page)
  3. The Html is sent to the browser, which displays the DOM.

Now a lot of Visualforce pages also sprinkled in some Javascript code to add interactivity, such as modal dialogs and spinning image. But fundamentally, the browser was still receiving Html and going from there.

Now compare this with a “modern” web app:

Notice the difference? Instead of sending Html, the server now sends data, and the “data to Html” conversion step happens on the client instead of the server side.

This has many implications. First, the good:

  • For a given piece of content, sending only data is faster than sending entire HTML pages.
  • The client can swap in content instantly without having to ever refresh the browser window (thus the term “Single Page App”).

The bad:

  • The initial load takes longer since the “data to HTML” codebase can grow quite large.
  • You now need a place to store and manage the data on the client too, in case you want to cache it or inspect it.

And the ugly:

  • Congratulations — you now have to deal with a client-side stack, which can get just as complex as your server-side stack.

And that is majorly why we all should learn Javascript now if you haven’t yet started.

How lightning component works

The above image already pretty much explains how lightning component structure works. After all, the lightning component isn’t that different from Angular, React, VueJs or any other modern Javascript framework. So if you are coming from another Javascript MVC framework background, you will find lightning component concepts are pretty easy to understand.

To specify, let’s look at the following diagram:

In lightning component, we will have a lightning component page file which is the View part. We will also have a style file(css) to manipulate how the page looks like. The View file talks to client side controller(Javascript). And that client side controller talks to server side controller(Apex) which in turn calls Salesforce database.

Now you understand how and why lightning component structure works this way, we can dive deeper into the client side controller.

Next Post

2.3 Handle ui elements in client side controller

Subscribe to Sfdcinpractice

Subscribe to get the latest blogs and tutorials of sfdcinpractice. No spam, no trash, only the awesome posts from sfdcinpractice. 

Leave a Reply

Your email address will not be published / Required fields are marked *