#1: Introduction to LWC | Learn Lightning Web Component Development | LWC Stack Salesforce

What is a Lightning Web Component?

Tell me one thing, when you listen to the word LWC or Lightning Web Component, what comes to your mind?

I had few thought when I first heard about it:

1. Is it Lightning fast?
2. Related to Web technologies?
3. Upgraded version of AURA components?

If you are also having same thoughts then let me tell you, yes you are right.

Lightning Web Components is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years, can coexist and interoperate with the original Aura programming model, and delivers unparalleled performance.

Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

In above definition you must have noticed the word Web Standards, so LWC leverages the Web Standards of the last few years. But what is Web Standards? 

Web Standards are technologies or we can say it is a rule set we can use to develop a Web Application/Website.

Advantages of using LWC

There are 4 key advantages of using Lightning Web Components:

1. Better Performance: LWC delivers unparalleled performance, which happens to be its prime advantage.
2. Faster Development: LWC enables users to come up with generic components for a seamless performance.
3. Compatibility Across Browsers: Supports the most advanced browser technologies and touch events.
4. Easy Learning: LWC uses HTML & JS to develop the component. That means tasks are more comfortable to do.

Why Lightning Web Component?

When Salesforce introduced LWC as a Developer my first question was why use LWC when we are already having the AURA component framework.

Well to understand it let me take you to the past and introduce 2014 web stack.

In 2014, when the Lightning Components framework launched along with the Aura programming model, web standards only offered a limited foundation for the full stack that developers need to build large-scale web applications, i.e. a rendering engine, standard elements, events, and a core language (ECMAScript 5).

The key elements like a component model, templates, modules, and shadow DOM are all missing from the web standards.

Then later on there was a good transformation of web stack between 2014-2019. 

You can see the templates, custom elements, and shadow DOM modules. They all are part of the web stack itself. This means the latest web stack is powerful enough to help us create these UI components. We don’t need a thick framework layer in-between, which could harm our component performance. That’s the reason behind introducing the LWC framework. Most of the features of LWC are part of the web stack itself, and only a few things depend on the frameworks now.

With the power of the latest web stack, LWC comes with many different advantages over aura components as follows:

1. Better performance

2. Modern web standards

3. Compatible with Aura components

4. Faster loading sites

5. Better security, better testing, and better browser compatibility

6. Ease of development

If you are wondering what is Web Stack and Ecma Script, here is a short definition for you.

Web stack : A Web stack is the collection of software required for Web development. At a minimum, a Web stack contains an operating system (OS), a programming language, database software and a Web server.

Ecma Script : ECMAScript is a general-purpose programming language that is implemented in Javascript and some other languages. It is the scripting language that formed the basis of browser-based Javascript and Node. js.

What will happen to Aura Components now?

Well, now you know the power of LWC, now you must be wondering what is going to happen with AURA components ? 

Are we going to skip them ? 

The answer is NO!

LWC and Aura are a perfect match for each other. You can put your LWC and the Aura Components on the same page and you will not notice any of the difference there because your LWC can talk to your Aura Component and your Aura Component can also talk to your LWC. You can even include your LWC inside an Aura Component where the vice-versa is not true because you don’t want to include a custom framework inside a generic framework, which is an LWC

Aura components and Lightning web components can coexist and interoperate, and they share the same high level services:

• Aura components and Lightning web components can coexist on the same page
• Aura components can include Lightning web components
• Aura components and Lightning web components share the same base Lightning components. Base Lightning components were already implemented as Lightning web components.
• Aura components and Lightning web components share the same underlying services (Lightning Data Service, User Interface API, etc.).

Looking at this image, you will notice that both LWC and Aura shared the same browser events, standard elements, and rendering mechanism. The difference is that Aura was built on ECMAScript 5. LWC is built on the latest ECMAScript version. Both share the Salesforce essential features like Lighting Locker, Lightning Data Services, and the Base Lightning Components.

If you are already developing Lightning components with the Aura programming model, you can continue to do so. Your Aura components will continue to work as before. You can build new components with Aura or Lightning Web Components. Your Aura and Lightning Web Components can coexist and interoperate. Over time, you can consider migrating your Aura Components to Lightning Web Components, starting with the components that would benefit the most from the performance benefits of Lightning Web Components.

If you are new to developing on Lightning or if you are starting a new project, we recommend using the Lightning Web Components programming model.

How to Start the Journey?

Here are some recommended steps that might help in your LWC development journey !

Step 1 : Install VS Code and set it up for Salesforce Development. You can follow Set up VS Code trailhead module for that.

Step 2 : Follow SLDS.

Step 3 : Check component library before starting the build.

Step 4 : Complete the LWC trailmix on trailhead.

Step 5 : For easy to understand sample code and example for almost all use cases you may follow LWC Stack playlist on Salesforce Bolt’s YouTube channel.

Checkout the Crash Course Below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)