0

I have just started using LWC recently having normally coded front-ends in Angular of some sort. There are a couple of things that you don't seem to be able to do with LWC that seem to be really bloating my code, but I wondering if I'm just haven't come across the right way of doing things.

Objects can't be tracked

I'm used to getting a record from the server and assigning it to a single property in the component class, and then referring to a property of that object from the template, e.g.:

<my-component [some-attribute]="myModel.property"></my-component>

Whereas with LWCs, a separate tracked property needs to be created for each property of the model used on the template, and then transformed back into a single object on save etc. It seems very long-winded for scenarios with lots of properties.

There are no expressions

I've found that using template expressions in Angular is very handy way to cut down on code because a single property in the component class can be referenced in different ways, e.g.

<input name="account-name" [required]="stagePercentage >= 50" />
<input name="account-postcode [required]="stagePercentage >= 80" />

whereas for the same scenario with LWCs, two handler functions would have to be written in the controller:

<lightning-input required={stagePercentage50OrMore} />
<lightning-input required={stagePercentage80OrMore} />

and that is just a very simple scenario.

Have I missed any obvious patterns or ways of approaching this? Are there ways I could be reducing code here?

Thanks

Improve this question
0

1 Answer 1

Reset to default
2

Whereas with LWCs, a separate tracked property needs to be created for each property of the model used on the template, and then transformed back into a single object on save etc. It seems very long-winded for scenarios with lots of properties.

This is not correct. You just need to declare 1 object (can be record) like below. Any change in its properties are all tracked and DOM is rerendered.

@track myObject = {};

There are no expressions

LWC is based on Standard Web Components. LWC does not support expressions because browser cannot support it. If LWC has to support it, again it has to do custom HTML rendering which will again give rise to Aura performance issues. Angular is not a truly component based framework but polymer is. Even in Polymer the support for expressions is limited. You need functions (like getters) to support expressions.

Improve this answer
6
  • Thanks again for your answer. I've found that although the template will display the initial values of a tracked object, it won't display any updates. That is unless I clone the entire object using e.g. this.myObject = {...this.myObject} as people do when treating everything as immutable like in redux. Perhaps this is because in the case of objects @track is tracking the address of the object rather than the object itself?
    – lemming
    Commented Aug 6, 2019 at 15:16
  • tracked objects need not be cloned. The main purpose of track is itself rerendering DOM when they change. api objects are immutable and so you cannot modify them unless you clone them. You are correct that everything should be treated immutable for better performance. So, for example, you should use map function rather than forEach while working on arrays (tracked).
    – salesforce-sas
    Commented Aug 6, 2019 at 15:22
  • That's strange that my object property change, which is definitely being updated, isn't showing as changed in the template. Unless I clone the whole tracked object. I do notice that the docs say "You can use @track to decorate a property only; you can’t use it to decorate an object." (developer.salesforce.com/docs/component-library/documentation/…). Maybe they have changed something recently?
    – lemming
    Commented Aug 6, 2019 at 15:30
  • Can you give link to docs?
    – salesforce-sas
    Commented Aug 6, 2019 at 15:32
  • Yes sorry I just edited my previous one.
    – lemming
    Commented Aug 6, 2019 at 15:33

Not the answer you're looking for? Browse other questions tagged .