lessons learned

I want to jot down learnings here through my LWC journey. Not all of them are specific to LWC but all are related in some way.

I hope these concepts help you get started with LWC because it's more than just understanding the framework - it's also understanding where Salesforce is going with SFDX, and specifically sfdx-cli and VScode.

1. You have to use sfdx-cli to deploy LWC to an org, but most of the pain is taken by VSCode.

   • Forget the trailheads, these docs for getting started give you a better end to end knowledge.
   • VSCode Salesforce Extensions give VSCode's Command Palette a bunch of SFDX: actions to help you do actions with the sfdx-cli.

2. Scratch orgs / Packages aren't required to work with LWC, you can do the org development model which uses sandboxes.

   • You can learn scratch orgs / package development at your own pace and figure out the push/pull vs deploy/retrieve.
   • With org development, you can put your entire org into one "project". If you can, and want to, separate your org into packages that is optimization for later.

3. Use a package manager (npm, yarn etc) to install sfdx-cli globally.

   • Many times you'll want finite control over which version to (re)install because Salesforce...

4. Brush up on JS fundamentals before reading LWC code:

   • Free intro to You Don't Know JS, 1st edition, 2nd edition but only first two books.
   • MDN web docs for Basics:
     • JS basics, looping, functions, expressions/operators, JS Object high level and low level overviews, keyed collections, and promises.
   • MDN web docs for Intermediate:
     • Data structures, async/await, map + filter + reduce and sample article on why they are staples.

5. ES6 (JavaScript 2015, like car model years) was the 2nd major revision of JS and everything after is "modern" JS.

   • Any reference docs using ES6 just means "JavaScript after 2015".
   • You can google ES6 tutorials, ES6 features or even ES6 tricks to accelerate your self-learning.

6. Events in JavaScript can be confusing at first. Couple of good resources:

   • Events up, Props (and @api methods) down trailhead here.
   • Inter-component event architecture (Ignore the aura syntax, look at just the intention of the event architecture).
   • Inter-technology event architecture.
   • Official LWC docs around events are worth reviewing in detail (and bookmarking as you learn).

7. LWC is separated into LWC-OSS (i.e. LWC off platform, LWC open source) and LWC (LWC on platform, just "LWC").

   • It is very unlikely you will need to learn about LWC-OSS at the beginning of this journey.
   • Anytime you read about Node.js, use LWC outside SFDC, use LWC in VF, skip that for now.

8. The LWC dev guide isn't the only place to learn about how lwc behaves. Even though you don't need to know the details about LWC-OSS, their docs can give additional insight that do not show up in the LWC dev guide.

   • Most of it works on platform, but some things don't! Take the LWC-OSS dev guide as supplemental information and not truth as to how lwc on platform behaves.

9. It's ok get get inspiration when first learning LWC. There are two great sources:

   • lwc-recipes.
   • lwc-recipes-oss.
   • Even the way the project folder is set up, including various config files (.gitignore, .prettierrc etc) can help guide how you should set up your first LWC related project.

10. For intermediate LWC, specifically how they work in Screen Flows, UnofficialSF has page components from various authors and links to their github so you can reverse engineer working examples.

11. Everyone should go through this workflow / evaluation phase unless you have prior experience with LWC and already know their pitfalls in your situation (ISVs and Managed Packages - I'm looking at you):

    • For overall UI Design:
      • Can I align to SLDS?
        • If yes, does a Base Component exist?
        • If no or there is no Base Component:
          • Do I have the time and skillset to borrow from the SLDS Component Blueprints or create my custom styled LWC?
      • What is the (rough) level component tree?
        • Is my top level component an LWC container so this component has many children akin to a Single Page Application?
        • Is my top level component an App/Record Flexipage so there are multiple sibling components on the page?
        • Is my top level, or some children, going to be used in a Screen Flow? Another declarative tool like Quick Actions?
    • For getting SFDC Data:
      • Is there a Lightning Data Service (LDS) Adapter already made for me?
      • If not, or I know their limitations, how should I call my apex?

12. Two ways to call Apex:

    • wire
      • Only use this if you need reactivity from your UI, canonical example is typeahead search.
      • Or, if you have to use LDS adapters.
      • Wires have some interesting behavior you have to account for. Details here.
      • You can't control order of multiple wires yet (IIRC it's on the roadmap)
        • HOWEVER, you can control by assignment to the $ bound variable to control that order.
    • imperatively
      • Fancy name for "on-demand" / "when I want to".

13. Complicated payloads between LWC (client) <=> Apex (server) don't have to be difficult, you can use Map<String, Object> to transport your JSON.

    • Here's my response to a question on StackExchange about this.
    • You forgo strong typing (Using an Apex class to serialalize/deserialize it) in favor of flexibility. Good for the development phase.

14. The following things are kind of difficult in LWC:

    • Event messaging for complex apps are hard, so I solved that.
    • Datatables are hard, so I solved that.
    • Dialogs / modals so hard, so I solved that.