Lightning web components
Download as PPTX, PDF•0 likes•140 views
The document provides an overview of Lightning Web Components (LWC) by Amit Singh, highlighting its advantages, such as ease of building reusable applications and improved performance. It covers the four pillars of web components, templating methods, and practical applications like calling Apex classes and communication with Aura components. Resources for further learning are also included, along with contact information for the presenter.
Lightning web components
- 2. Hello! I am Amit Singh I am here to give you some overview about Lightning Web components 1. @cloudyamit 2. Sfdcpanther.com 3. https://www.youtube.com/c/SFDCPanther 2
- 3. Agenda 1. Why Lightning Web Component? 2. HTML5 Vanilla Components a. 4 Pillars of Web Component b. How templating works in Web components 3. Lightning Web Components a. Hello Word Components b. Call Apex From LWC c. Communicate with Aura Components 1
- 4. Why LWC? 1. In 2014 Salesforce released a new feature called salesforce lightning. 2. At that time Web components was not supported by all browsers. So, many other framework came in picture like angular, 3. Less browser support for Web Component API and encapsulation. 4. Build reusable, scalable application in a very easy and fast manner. 5. More standard and less framework.
- 5. 4 Pillars of HTML Components 1. Template 2. Custom template 3. Import 4. Shadow Dom
- 6. Why Templating 1. Method 1: Offscreen DOM 2. Method 2: Overloading script
- 7. Method 1: Offscreen DOM 1. Using DOM 2. Nothing is rendered 3. Painful styling and theaming 4. Not inert(Network Request still made)
- 8. Method 2: Overloading script <script id="mytemplate" type="text/x-handlebars- template"> <img src="logo.png"> <div class="comment"></div> </script>
- 9. Lightning Web Components 1. helloWorld Web Component 2. Call Apex class from LWC 3. Communicate between aura components and LWC using event.
- 10. Resources 1. Salesforce Document :- https://developer.salesforce.com/docs/component- library/documentation/lwc 2. HTML 5 Vanilla Components :- https://ayushgp.github.io/html-web-components- using-vanilla-js/ 3. Template in HTML5: - https://www.html5rocks.com/en/tutorials/webcompon ents/template/#toc-pillars 4. JavaScript ES6: - https://medium.freecodecamp.org/write-less-do- more-with-javascript-es6-5fd4a8e50ee2
- 11. Any questions? You can find me at: 1. @cloudyamit 2. [email protected] 3. [email protected]