Lightning Web Component – My First Web Component

Lightning Web Component – My First Web Component

Lightning Web Components are announced as part of Spring19 pre-release and would be generally available from Spring19 release.

 

What are Lightning Web Components?

If you talk about look and feel, LWC are pretty similar to your existing Lightning Components but there is a lot has changed on architecture level. Where Lightning Component uses its own component model and programming standards, LWC uses modern web programming standards, shadow DOM, modules and ECMAScript7. LWC are faster on the performance level, as most of the feature implemented natively web engine.

Should you learn Lightning Component Development first before I can start with LWC?

Not needed, having knowledge of Lightning Framework or any other web framework like React, Angular may help you in some way to understand LWC faster or but it is not mandatory. You can directly start learning LWC, with a little bit of exploration and practice, you should be able to develop your own web components very soon!!

Where would Lightning Component go?

They are not going anywhere 😃. What is more exciting is, LWC and Lightning Components can easily talk to each other and you can use both of them on the same page.

How to create a Lightning Web Component?

Unfortunately, you cannot create LWC directly from your developer console. You need to SFDX to create your lightning component. Please watch this video on how to setup SFDX for your org:

Once you have SFDX setup, there are few more things you need to do:

    • Sign up for a Spring19 pre-release org.
    • Update SFDX plugin with Spring19 pre-release. Run below command in either your terminal or command prompt.
sfdx plugins:install salesforcedx@pre-release
  • Once this is done, follow this trailhead link to set up and basic project and create a basic lightning web component.
Create A Basic Calculator App LWC

I have created a pretty basic calculator web component which allows the user to perform the basic operation like addition, subtraction, multiplication, and division.

SimpleCalculator.html

This file has the UI layer code. Since we are developing web component, the file type is no more .cmp, we are back to classic .html file type now.




SimpleCalculator.js

This is the javascript file for our SimpleCalculator component. If you notice, both JS and HTML file has the same name, this is how the platform will bind these files together.




SimpleCalculator.js-meta.xml

This is meta-data file where component’s meta properties will be stored. Here we will define that our web component will be available for Lightning App Page, Record Page, and Home Page.



Output

This is pretty basic Lightning Web Component that I have created and this is my first LWC as well. Let me know if you find any scope of improvement as I am still learning LWC. Stay tuned for more awesome Lightning Web Components.

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 11 Comments

  1. Avatar

    Nice one, Manish!

    You only should @track currentResult, as that’s the only property that you use in your HTML template.

    The other three properties (firstNumber, secondNumber, operatorUsed) should be private to your JavaScript file. Consider prepending a ‘_’ to the variable name to make that clear.

    Cheers!

    1. Avatar

      Thanks, Rene for the feedback. Yeah, it makes more sense this way. Let me make these changes and enhance this app a little bit.

  2. Avatar

    Hi Manish,

    I have configured SFDX as mentioned int he above but when i try to create Lightning web component it is not listed in the visual studio. Please am i setup wrongly.

    Thanks,

  3. Avatar

    Thanks Manish!

    Does LWC’s have locker Service concept to them?

    Do they allow us import external JS libraries like underscore JS or clipboard JS ?

    1. Avatar

      Yes, LWC also has locker service concept and JS libraries are subject to approval list. If your JS library is in Salesforce approved list, you can use them.

  4. Avatar

    after creating default scratch org, i also generated password for scratch org and was able to login using it.
    However push src to default scratch org fails now. Any additional step i need to follow post password set?

    1. Avatar

      Ignore my question. It worked perfectly now. I found the error in the output panel and corrected it

  5. Avatar

    My second question is knowing difference between ‘Signing up for a Spring pre-release org’ vs ‘Enabling dev hub’ in dev org’
    Do we need both? why? Help me understand their fundamentals please

    1. Avatar

      Signing up for a Spring pre-release org: The ‘Lightning Web Components’ are currently available for this spring’19 pre-release org (After every new release Salesforce come with this type of org for using Beta features).
      ‘Enabling dev hub’ in dev Org: You need to enable this for creating LWC using the Salesforce DX. Unfortunately, you cannot create LWC directly from your developer console.

Leave a Reply

Close Menu