Over the last month, I’ve been developing my latest lightning experience feature, a resource calendar, using Lightning Web Components which is my first time using them. With the kids and wife at the cottage, and feeling like sharing, here are my thoughts on my LWC development experience, so far…
Overall Thoughts. . .
LWC components are awesome compared to Aura components because they’re light-weight and much closer to my mental model of how to develop encapsulated, web components. Salesforce provides just enough convenience / shims that it really streamlines the development process. For example, one can use the “Wire Service” to easily invoke an Apex method from different apex classes and then use a promise to handle the result.
One Javascript File. There’s one Javascript file containing all the code instead of a “controller” and a “helper” that get merged into one so there’s a lot less delegating needed which has resulted in much less code, so far.
Events So Much Better! One fires a “CustomEvent” to parent components to notify them of changes and simply includes the data if needed. One no longer has to create an “Application” or “Component” event in a separate file and do other declarations to register and handle them. Create and Dispatching Events has more details.
No More .THIS in CSS. One doesn’t have to prefix CSS Selectors with .THIS anymore to “namespace” the css only to that component because standard web components do that. Aura components were released prior to web components so that was required and that’s Salesforce’s implementation for it.
Managing Reactive Variables way easier. Setting a “reactive variable” is just a matter of assigning it a new value. For example: this.reactiveVar = 10 will cause changes to the other things that use it. One no longer has to do component.set(‘reactiveVar’, 10) which always felt odd.
All these make development much much easier, faster to develop with less code, and much more maintainable long-term.
Not So Good
Now to be fair… Here are things I don’t like:
View Logic In Javascript. Instead of putting visibility logic to show or hide items depending on criteria in the markup, one now has to put it in Javascript. That’s a step backward. Having that in the markup is so much easier and maintainable. This has also led me to sometimes precompute values and dynamcially add them to records to use the if:true or if:false to show or hide. Similarly, one can’t dynamically add or remove CSS classes in markup. One has to use Javascript for it.
Lightning Data Service Still Useless. For any non-trivial component, I’ve always used Apex controller(s) and never used the Lightning Data Service because it only allows CRUD on single records.
API Reactive Variables Readonly. If a component has an API Reactive variable to let the containing component pass data to it, the data is completely readonly. One can’t dynamically add properties or methods to it. I typically deep clone it by using “let deepClone = JSON.parse(JSON.stringify(this.sourceVar));” This is enforced because they’re readonly proxies.
One-Way Binding. Some would say this is a benefit but I actually prefer 2-way binding where changes to the variable are visible in the inputs and vice-versa. This is not as troublesome as originally thought. One can create fairly generic “handlers” to update record fields when the field inputs change.
No Dynamic Component Instantiation. One can’t create components dynamically like Aura Components can be. This makes it a bit harder to do more advanced use cases like building an LWC Field Set Form. My Aura Field Set Form
Not Fully Supported in All Usage Contexts. LWCs aren’t supported in every usage context that Aura Components are. For example, one can’t use a LWC for record action buttons. The workaround is to create an Aura Component wrapper that delegates to the LWC component. LWCs should be on par with Aura Components over time so this is a nuisance for now.
Not Completely Inter-Operable with Aura Components. Aura Components can use LWCs. LWCs can’t use Aura Components. I don’t see that changing because of the different binding models unless Salesforce provides a way to designate an Aura component to use 1 way binding. As such, any new development should be done using LWCs, especially reusable components so they can be used in Aura components and other LWCs.
No Developer Console Support. I’ve always used an IDE, VS Code is my current one, for development but Salesforce doesn’t allow the browser’s “Developer Console” to create, edit, or delete LWCs which can be a PITA sometimes when a little change is needed.
Concluding Thoughts
While I have more negatives than positives, LWCs are the future for Lightning and I really like developing them more than Aura components. If one is considering a lightning migration from Classic, learn LWCs first since the learning curve is much easier than Aura components.
One last note… I still prefer Visualforce to LWC or Aura components because it’s more performant.
What are your thoughts on LWCs? Do you think they’re easier to learn? Let me know in the comments.