February 22, 2017 by LanceShi
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 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:
- The database sends data to your back-end controller (Apex controller).
- The back-end reads and processes that data and outputs Html. (Apex controller and Visualforce page)
- The Html is sent to the browser, which displays the DOM.
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 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.
How lightning component works
To specify, let’s look at the following diagram:
Now you understand how and why lightning component structure works this way, we can dive deeper into the client side controller.