Aura to Lightning Web Components: How it works in real life
July 22, 2019

Aura to Lightning Web Components: How it works in real life

I’ve been diving deep into migration from Aura to Lightning Web Components for quite some time now. When preparing for a workshop, to demonstrate how this can be done in action, I opted for the Aura component described in my article, which was used to build a simple employee list application using the standard lightning:datatable component from the Lightning Aura Framework. Since this standard component is also available for use in the Lightning Web Components Framework, I decided to prepare a workshop where the main task was to clone that application using an Aura component and replace the SimpleEmployeeList aura component with the SimpleEmployees Lightning Web Component counterpart. Also, I offered an additional task to clone another advanced application and replace a reference to another DataTable Aura component with the Lightning Web Component counterpart. Here, I’ll present a plan on how this migration can be performed with video screenshots of the most important steps.

The workshop task was to clone the SimpleDataApp and replace the SimpleEmployeeList Aura Component with the SimpleEmployees Lightning Web Component counterpart.

Setup a scratch org with prebuilt Aura components

  1. Fork bdovhan/SimpleDataTableApp application implemented using the Lightning Aura Framework.
  2. Perform a Git clone of your fork of SimpleDataTableApp to your local folder, for example, to D:/Git/AuraToLWCWorkshop.
  3. Read the App description and default available bat commands in SimpleDataTable/readme.md
  4. Ensure that you have the default dev hub set up correctly, if not then set up devhub first.
  5. Run Start.bat (would work for Windows; need to implement .sh correspondent file for Mac).
  6. Wait until the setup script is executed successfully. Confirm that SimpleDataApp.app is opened.

How to Setup a scratch org with prebuilt Aura components

Create a blank app and blank Lightning Web Components

  1. Open the SimpleDataTableApp Folder, as a project in Visual Studio Code.
  2. Create a clone of SimpleDataTableApp either in VS by menu item or by code, or in the Developer Console. Call it SimpleAppUsesLWC. If any component or app is created outside of the VS Code, use a retrieve menu item or command sfdx force:source:retrieve -m AuraDefinitionBundle to see that component or app inside the VS Code.
  3. Copy the content of SimpleDataTableApp App to SimpleAppUsesLWC.
  4. Create a blank simpleEmployees Lightning Web component. You may copy to it the commented code from SimpleEmployeeList.
  5. Create a blank simpleTable Lightning Web component. You may copy to it the commented code from SimpleDataTable.

how to create a blank app and blank LWC

Start converting SimpleDataTable to simpleTable

  1. Change colons to dashes in the commented code; remove most double quotation marks (except for the inline string values like “Id” for keyField value) and standard provider references “!v” and “!c” from the commented code.
  2. Change camelCased properties to kebab-cased; add closing tags. The inner content of the html file of the component should look like the following:  Aura to Lightning Web Components: How it works in real life
  3. Go to simpleTable.js and declare data and columns properties there and the updateColumnSorting method. Add track to imports. Now simpleTable.js should look like the following:Aura to Lightning Web Components: How it works in real life
  4. Import the apex controller by inserting a line, like:  import getColumnsAndData from ‘@salesforce/apex/SimpleDataTableController.getColumnsAndData ‘Now simpleTable.js should look like:Aura to Lightning Web Components: How it works in real life
  5. Deploy your changes by the menu items or by the command sfdx force:source:deploy -m LightningComponentBundle

Use Imperative Apex in simpleTable

  1. Call the Apex method imperatively. Create the method connectedCallback and inside of it, call the promise getColumnsAndData.
  2. Pass parameters sObjectName, sObjectFieldsNames, whereClause into the promise initializer.
  3. Remove single quotes; replace component.get(‘v. with this..
  4. Declare the public reactive properties sObjectName, sObjectFieldsNames, whereClause, and import the api module
  5. The imperative Apex function is a promise. Write the arrow-function for the then callback, to process a successful execution.
  6. Write the arrow-function for the error callback, add the code to display the error and add the private reactive error property @track error; to the Javascript module. Aura to Lightning Web Components: How it works in real life

Now the list of attributes in it should look like the following:

Aura to Lightning Web Components: How it works in real life

The connected callback function should look like this:

Aura to Lightning Web Components: How it works in real life

Convert SimpleEmployeeList to simpleEmployees

  1. Change the colons to dashes in the commented code.
  2. Change camelCased properties to kebab-cased. Add closing tags.
    The inner content of the Html file, of the component, should look like the following: Aura to Lightning Web Components: How it works in real life
  3. Use the simpleEmployees component inside of the SimpleAppUsesLWC. The inner content of the SimpleAppUsesLWC should look like: Aura to Lightning Web Components: How it works in real life
  4. Deploy changes either by menu items or by the command line.

Error handling and troubleshooting

  1. Add code to SimpleAppUsesLWC in order to display an error, because of an invalid object name.Aura to Lightning Web Components: How it works in real life
  2. Notice the two null-pointer errors.
  3. Change the code of simpleTable.js to transform the string value into an array and fix one of the null pointer errors.Aura to Lightning Web Components: How it works in real life
  4. Use Javascript Debugging if you don’t see the error displayed.
  5. Notice the null-pointer error and learn how to transform it into a meaningful exception by inserting a piece of code to the SchemaProvider class before line #6. Aura to Lightning Web Components: How it works in real lifeAnd introduce an inner CustomException class at the bottom of the classAura to Lightning Web Components: How it works in real life
  6. Comment a catch block in the SimpleDataTableController lines 41 and 43-45, and see that the unhandled exceptions result in non-readable errors. Notice the non-readable exception and then revert change in the SimpleDataTableController.

Fix sorting by converting the updateColumnSorting method into the Javascript module method

  1. Notice that the sorting is not working in the current LWC version but that it is working in the Aura version.
  2. Copy methods updateColumnSorting, sortData and sortBy from js into simpleTable.js and then comment them out.
  3. Remove the function keyword and colon from the sortData and sortBy function definitions.
  4. Replace event by e, then replace getSource() by srcElement, and remove set(“v.and the corresponding closing parenthesis. Also replace the comma by an assignment operator.
  5. Replace getParam(‘ with detail. and remove the corresponding closing parenthesis.
  6. Replace helper with this and replace the cmp param with srcElement.
  7. Uncomment the sortBy code, as it contains a valid LWC code and doesn’t have to be converted.
  8. Inside sortData, replace cmp with src, and replace get(“v.data”) with JSON.parse(JSON.stringify(src.data)) and cmp.set(“v.data”, with src.data = and remove the corresponding closing parenthesis.
  9. Deploy changes and confirm that the sorting now works in the LWC version. Check to ensure the code of these functions looks like: 

Aura to Lightning Web Components: How it works in real lifeHow to fix sorting

Implement the wired function version of getColumnsAndData call in simpleDataTableWiredFunction.js

Listing of code inside simpleDataTableWiredFunction.htmlAura to Lightning Web Components: How it works in real life

Listing of code inside simpleDataTableWiredProperty.js

Aura to Lightning Web Components: How it works in real life

Note that in this case we have defined a private internal property to store fields as an array, and in public property setter we split the string value provided by a comma.

Implement the wired property version of getColumnsAndData and call in simpleDataTableWiredProperty

Listing of code inside simpleDataTableWiredProperty.html

Aura to Lightning Web Components: How it works in real life

Listing of code inside simpleDataTableWiredProperty.js

Aura to Lightning Web Components: How it works in real life

Note that in this case we also have defined the same private internal property to store fields as array declared for the wired function example, however, the code assigning value to the property is much shorter.

Clone DataTableTestApp and convert the cloned version for use in the LWC version of the DataTable Aura Component.

Run ./finish.bat.

See this in action in the video screenshot

How to clone DataTableTestApp and convert the cloned version

In my case, I had already pulled and committed all my changes. So pull command didn’t find any more changed files in the case shown in video screenshot.

Conclusion

Salesforce workshops are a great way to explore new features, develop your skills and share personal experience with the tech community, whether you attend or organise one. During my last workshop I demonstrated migration from Aura to Lightning Web Components in action. Attendees practiced cloning the sample project build on Aura Framework and replacing the sample Aura Component with the Lightning Web Component counterpart.

Lightning Web Components helps Salesforce Developers to follow the latest Javascript code standards. Every Salesforce developer should get to know the new features provided by Salesforce and suggest the best appropriate development option to customers.

Tags

AuraLightningLWCmigrationSalesforce

Share


Recent Articles

Salesforce Marketing Cloud October 2019 Release

November 13, 2019 | Ihor Shupeniuk, Salesforce Engineer and Marketing Cloud Specialist

Every three months we get a Salesforce Marketing Cloud release and write notes for you about its new features and options. This time we waited for a little and during two weeks after the release tried all updates in our workflows. Now, we are ready to tell you how it actually works. Content Builder No More Live Offers, […]

UX Dev Summit Notes

November 1, 2019

This October, we visited Berlin to network with other companies from the IT Services Competence Platform group. UX Dev Summit is the first internal event where UX designers and front-end developers from Sevenval, CoreValue, Solidbrain and IT Kontrakt met to share their experiences. The main idea was to get to know each other better across […]

Contact Us

By submitting this form you acknowledge that you agreed to our Cookies and Privacy Policy.