Evaluate Lightning Web Components In Online Playground

Author

mirketa

March 19, 2019

Salesforce has introduced an online editor to try out Lightning Web Components. Lightning Web Components is the new UI development approach that Salesforce has; this is an evolution from the current Aura framework. Salesforce is to allow both Lightning Web Components and Aura frameworks to exist side-by-side.

To not just experiment, but also evaluate design considerations playgrounds can be used. By using the instructions here, new Lightning Web Components can also be created on the interactive code Playground editor.
Dual Listbox is a control that that just shows a bunch of values on the left-side and allows users to choose the values and move them to the right side.

Can dual Listbox handle thousands of values on the left-side? Playground makes it quite easy to change the values of the values loaded.

Loading the values

Step 1: To load a static list of 1000’s of values to the left-side of the dual Listbox, use Excel to create some dummy values.Step 2: Load the values
The simple.js can be edited to add more label values that are taken from the Excel.

Observations

Time is taken to load the dual picklist: 5 seconds
Time is taken to choose the first value on the left: 60 seconds
Time is taken to choose the subsequent values on the left: 22 seconds
Time is taken to move a chosen value from left to right: 20 seconds

Decision
Obviously, the dual picklist is not capable of loading 1000s of values as the user response times are quite high for simple operations performed on it.

Conclusion

Normally as a developer, we would create some dummy Lightning control with lot of plumbing to conclude a simple experiment like this. With the new online playground, playing with the controls becomes much easier.
However, the playground can’t access Salesforce organizations, so it doesn’t support features that require data from Salesforce. However, the code written in the playground can be easily recreated in your own Org to work on real data.