Friday, 24 July 2020

LWC VS Aura Component

Design question LWC / Aura Components?

To answer in simple words LWC is future,So any new implementations should go with LWC , There is no question of Aura will be supported or not ,Absolutely Aura is not going anywhere But all future innovation will be in LWC,So its better to start adopting LWC. LWC still does not support few of the features in those use cases. Aura components will be the alternate option.
LWC Supported & Unsupported Experiences And Tools

LWC(Lightning Web Components) VS Aura ?

LWC Aura
Introduction :
Lightning Web Components,
It is a new programming model built on modern web standards.
Aura framework built using both HTML and Javascript in 2014 to extend the limited features that web standards offered.
Standards :
More standards,less proprietary Less standards,More proprietary
Use Case :
Lightning Web Components are the future.
  1. For SPA(Single Page Applications) this is the best design use case.
  2. If any performance issues with Aura,Migrate to LWC for performance boosting.
Currently where LWC not supports feature need to go with Aura,

Aura :
Lightning Components provide “a single, integrated framework for developers to create rich, responsive applications that could be seamlessly “plugged in” anywhere in the UI.”
Performance :
Higher,
Because using the native browser instead of javascript framework & Native DOM support.
Low,
Because using the javascript framework ,Browser downloads javascript and parses ,compiles and splits DOM objects,Split CSS and finally renders on the screen.This process takes time.
Security :
Lightning Web Components demonstrate better security as they add CSS isolation, script isolation, DOM isolation, and a more limited event scope. Will allow the access of child component's.
Unit Test Framework :
Lightning Web Components can be unit tested with the Jest framework Lightning Platform provides wrapper libraries for Jasmine and Mocha.
Developer Console :
LWC not possible to develop in the Developer Console.Requires below installation.
  • Salesforce CLI
  • VS Code Salesforce Extension Pack
Can be developed in “Developer Console” And also with below
  • Salesforce CLI
  • VS Code Salesforce Extension Pack
Bundle Files :
Resource Type LWC Aura
Markup .html
Note :For service components or libraries not required this filex,For UI components this is must.
,html
Controller .js
Note :There is a single file of javascript handles all in LWC.
.js
Helper NA .js
Renderer NA .js
CSS .CSS
Note : If required can be added not part of the default bundle files
.CSS
Documentation Not available currently .auradoc
Design .js-meta.xml .design
SVG Not available as separate file,Can be achieved as seperate .html file .svg
.html code component reference
  • kebab-case style
  • Closing tag must
  • camelCase style
  • Self closing allowed
Mix of LWC & Aura components :
Lightning Web Components do not allow containing Aura components.

Note :
Aura and LWC can be able to communicate using Public API’s and Events.
Aura Components allowed to contain Lightning Web Components & Aura components should be parent.

Thanks to my dear friend Swati Thakur,Helping in the table formatting

1 comment: