9

We are starting to develop a number of Lightning Components and we are struggling because of lack of well-established design patterns:

  1. Where does global constant go and how they can be shared across multiple Lightning Components?

  2. Can the helper contains member properties too or just function?

  3. What are the benefit of using aura:if over dynamic component creation?

  4. Should one use SLDS on native html items for grids or lightning:layout?

  • 3. Major problem with dynamic component creation is that you can't get components by aura:id from components created by aura:iteration. It being one of the more common building blocks for most data around Salesforce (lists, lists everywhere), you end creating even more components dynamically. – dzh Oct 9 '17 at 9:24
2
  1. Have a look at this blog post from Christophe Coenraets: Modularizing Code in Lightning Components - he also describes how to share code using JavaScript libraries

  2. Declaring member properties is not recommended, but you can use an expando on the component reference like component.isInitialized = true - this approach lets you store values for the usage in the helper only - you don't need to declare an and therefore you can't use the variable in markup. However, best practice would be attributes with access private declared in the markup.

  3. <aura:if> can be invoked through data binding without additional code - but instantiating and managing you component creation by yourself is fine as well but more individual work to do.

  4. Best practice: whenever possible use Base Lightning Components from the lightning-namespace. But: <lightning:layout> <lightning:layoutItem> creates a lot of nesting div-container in the rendered DOM which have influence on the initial render performance. If you have to render a lot of items initially, this could take dramatically more time as using plain HTML (which are, just say, also Lightning Components without a namespace ;-) - I would say this is a special use case we run into, so give the <lightning:layout> a try - and so you don't have to fiddle around with appr. 20 different slds-style-tags by yourself :-)

  • 1
    I tried to store on the helper and get a undefined error – Edmondo1984 Oct 5 '17 at 9:29
  • Yes, I think the only way is through the component reference – Christian Menzinger Oct 5 '17 at 9:37
  • Yes, this method is not working! – itzmukeshy7 Oct 5 '17 at 10:17
  • Do you have a view also on the styling issue I just added? – Edmondo1984 Oct 5 '17 at 12:51
  • Updated my answer – Christian Menzinger Oct 5 '17 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.