Lightning Component Dev Tips 2

Here are additional dev tips that I’ve learned in the past week from being in the trenches. See Lightning Component Dev Tips for other dev tips.

Set Component Attribute Again To Rerender

I’m leveraging a complex, nested object hierarchy for my main component attribute. This object has nested nodes and each node may have additional sub-nodes. A user can interact with these nodes in various ways and so each one may get updated. One thing I discovered was that updating an attribute’s “child objects” didn’t automatically update the component’s view, even though I may have used them in the view with the {! v.Object.ChildObjects…} syntax. This is quite unfortunate because other SPA frameworks such as Angular are smart enough to attach watchers to the object properties and automatically rerender the view appropriately.

To resolve this, set the component’s attribute again in the controller code and the framework will rerender the view. I.E. component.set(‘v.attribute’, attributeValue);

Leverage Existing Components Such as Lightning Strike IO

Whenever possible, leverage existing frameworks and tools so you don’t have to reinvent the wheel. Ideally, this would be open source software so that you can contribute and enhance them too, if desired.

For example, I discovered that there’s no lookup Lightning base component, which was totally unexpected after Lightning has been out for 2 years! I didn’t want to implement this myself so I searched around and asked around about it. Craig on Slackforce pointed me to Lightning Strike, an open source project containing commonly used Lightning components that aren’t or weren’t part of the Lightning base components.

After installing the components in my dev org, I had the strike_lookup component configured and in use within 5 minutes.

Leverage Tokens

Leverage Tokens to define your CSS values and reuse them throughout your components in your codebase. This allows a more consistent UI to be more easily developed and more importantly, maintained. If you have to change your margin from 1rem to 1.5 rems, update the token in one place and everywhere it’s used inherits it automatically.

This is another application of the Single Responsibility Principle.

What dev tips do you have?

What Lightning component architecture resources do you use?