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.

(Visited 2623 Times)

9 thoughts on “Lightning Web Component – My First Web Component

  1. René Winkelmeyer

    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!

    Reply
  2. veera

    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,

    Reply
  3. Nithesh C Nekkanti

    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 ?

    Reply
  4. Isha

    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?

    Reply
  5. Isha

    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

    Reply
    1. Sandesh Ganjare

      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.

      Reply

Leave a Reply

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