Latest Blog posts

Follow us @

Salesforce: The nuts and bolts of Lightning Web Components

Salesforce: The nuts and bolts of Lightning Web Components

Salesforce Spring ‘19 release is finally here, and we cannot be more thrilled! There are a lot of goodies in this announcement but, for us developers, one just made our eyes sparkle… 

The brand-new Lightning Web Components (LWC), a new programming model for Lightning component development, built on top of innovative web technologies.

This alone can make our whole year. But it was a great pleasure to hear this exciting news in the front row of the 1st Lisbon Developers Community Meeting, hosted by Near Partner and presented by one of the most enthusiastic Salesforce developers I know — my team leader and the Community Leader – Newton Calvin.

If you haven’t had the privilege to attend the Global Developers Week, don’t despair – help is on the way! We’ve made a short brief with the nuts and bolts of Lightning Web Components. The meeting presentation is also available for download by the end of this post, so check it out.

Lisbon Developers Community Meeting, hosted by Near Partner and presented by one of the most enthusiastic Salesforce developers I know — my team leader and the Community Leader - Newton Calvin.

That said, let’s get into it!

What are web components and why they are important?

First things first, let’s look at the technology behind the LWC: Web components.

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets built on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

The idea of being able to write reusable and portable code isn’t new but is here to stay and Salesforce knows that! This was the main drive behind these new features. Taking advantage of the benefits of this approach – it’s reusable, maintainable, independent and, most important, provides an encapsulation mechanism – in order to get development in Salesforce easier, faster, and appropriate for any developer.

Ok… but what are Lightning Web Components?

According to Salesforce, the Lightning Web Components’ technology is a new programming model for building Lightning components, that “leverages the web standards breakthroughs of the last five years, can coexist and inter-operate with the original Aura programming model, and delivers unparalleled performance.”

In another words, LWC is a set of building blocks of code that gives developers the freedom to use the tools they prefer to build components. Then, by mixing the existing Lightning developer services and low-code tools, we can now use all their existing developer and admin resources to collaboratively build high-performing web experiences. Sounds exciting!

This is one of the main reasons for this launch but, in my opinion, there are others equally important. Let’s dive deep into them:

➤ JavaScript is the first perpetrator!

Let’s face the fact… JavaScript is one of the core technologies behind the Internet. This programming language is used in 95% of all websites – and, according to 2016 Stack Overflow Developer Survey, JavaScript is the most commonly used programming language on earth.

stackoverflow - 0.1% 49,525 responses More respondents consider themselves Full-stack Developers than any other role. On average, Full-stack developers are comfortable coding with 5 to 6 major languages or frameworks (vs. 4 for everyone else). Executives are comfortable using more languages and frameworks than any other developer occupation, which is most likely a result of having more experience. There are roughly just as many developers who call themselves Mobile Developers as there are Android Mobile Developers (3% for each). About 2.5% of all developers are iOS Mobile Developers. We received 59 responses from Windows Phone Mobile Developers (.1%). Most Popular Technologies per Dev Type

JavaScript is used and loved by millions of developers worldwide. LWC just takes the best of this modern programming language and pairs it with the existing portfolio of developer services in the Lightning Platform to help developers work faster, build more efficient and modern apps.

Summing up, now every JavaScript developer can build on Salesforce. Hurrah!

➤ Aura isn’t going anywhere

You are probably thinking (I did!)… “now I’ve mastered Aura, they came up with this!” But don’t panic… Aura components and Lightning web components can coexist in the same application and it’s important to understand that this model will help us… a lot!

By creating the Lightning Web Components model, Salesforce aligned their technology with the web standards that didn’t exist or was super hard to build in the original Aura model.

The most important thing to note is that developers with experience in web components can get in to LWC faster, and developers familiar with Aura will already know most of the major standard components; you just need to translate them from the old syntax to the new. 😊

➤ Unit testing with Jest is now a reality

Support is added for Jest! Now, you can write unit tests for your client-side logic in a widely proven testing framework. It’s simple to use and as a big support from the community being one of the most used JavaScript testing frameworks out there, including by big name companies like Twitter or Spotify.

Just out of curiosity, did you know that Jest was created by Facebook? 😊

 

What about the existing components?

Don’t panic! As I said before, Aura components and Lightning web components can exist in the same application. One doesn’t replace the other. We’ll need both Aura and LWC for certain features.

But please note that LWC components can be placed in Aura components, but Aura components may not be used in LWC components. So, you’ll see both Aura and LWC components in the same page and communicate with via events.

By using the LWC you should expect an overall increased performance. It’s true that, in many cases, you won’t be able to use LWC right away, but you can always put them in backlog. Aura will be around for a long time!

 

So… should I move completely to LWC?

My honest answer is: take it easy. We know Salesforce piloted LWC for a year with over 100 ISVs, SIs, and Customers who took part in the pilot spanning over 500 developers, but the real test starts now with the mass adoption of LWC.

So, if you are halfway through an Aura-based development project, maybe you should stick to it for the time being.

On the other hand, if you are starting a new and exciting project where you can start playing with these new resources, it might make sense to use some of the new possibilities.

 

An exciting step into the future

Lightning Web Components is the future of Lightning and the future of development at Salesforce. It’s important to stay committed to make Salesforce development easier and faster.

With LWC we have better security, better testing, better browser compatibility, better performance, and generally smaller components. This is really good news!

We couldn’t be more excited to see this exciting step-change in frontend development for Salesforce. And the most exciting part is that this technology is available right now and better… you don’t have to rebuild anything, it integrates with your current codebase 😀

If you want to know more about the newest Lightning Web Components, please download the Global Developers Week Presentation below! You will find more background details on why and what of lightning web components and all the documentation needed to start playing with these new resources. And don’t forget to explore and conquer the trailhead module!

Have you already started playing with these new resources? What do you think about them? Share your thoughts with us!

 


Download here: Salesforce Global Developers Week Presentation

Check out the documentation provided by NewtonCalvin – Lisbon, PT Developers Community Group Leader:

Rui Caneira

A resilient fighter, embraces life’s challenges as they come. Strives to find the best in others and be present when needed. A software developer at mind; a passionate gamer at heart (since he knows himself).