Download to read offline
Uploaded byBordeaux Salesforce Developer Group
Introduction to Lightning Web Components
Lightning web components are a new programming model for developing lightning components, offering enhanced compatibility with modern web standards such as ES6+ and custom elements. They are designed for better performance and interoperability with existing aura components. The introduction of this model aims to streamline development processes and improve the overall developer experience by aligning with web standards and practices.
Introduction to Lightning Web Components
- 1. Introducing Lightning WebComponents
- 2. A New ProgrammingModel “You can now develop Lightning components in two programming models: the original model—Aura Components, and the new model—Lightning Web Components. Just when you’ve mastered developing Aura components, we’ve come up with Lightning web components! Why, oh why, you ask? Well, we created the Lightning Web Components model to align with web standards that didn’t exist several years ago when we built the original Aura model.” Trailhead
- 3. Enhanced productivity Use themodern language of the web: ES6+, Custom Elements, and Shadow DOM Built for performance More code executed by the browser instead of JavaScript abstractions for a blazing fast experience Compatible and easy to use Runs side-by-side with existing Lightning components and can be composed with clicks or code Introducing Lightning Web Components Generally Available Spring ‘19 (Feb) New programming model built on modern web standards
- 4.
- 5. Fragmentation ● Proliferation offrameworks ● Components are not interoperable ● Skills are not transferable ● Resources are hard to find ● Framework abstractions are slow
- 6. W3C and ECMAScriptStandardization ● ECMAScript 6,7,8,9 ● Classes ● Modules ● Promises ● Decorators ● Web components ● Custom elements ● Shadow DOM ● Templates and slots
- 7.
- 8.
- 9. Benefits ● More standards,less proprietary ● Common component model ● Transferable skills ● Easier-to-find / easier-to-ramp-up developers ● Better performance
- 10.
- 11. Summary 1. Game changingweb standards 2. Performance 3. Coexist and interoperate with Aura
- 12. Demo Time! Lightning WebComponents in Action
- 13. Lightning Web ComponentsPop Quiz!
- 14. Quiz: Lightning WebComponents 1. Where should you put your template markup in a Lightning web component bundle? a. The HTML file 2. How does the @track decorator affect a JavaScript property? a. It makes the property reactive, so when the value of a property changes it will re-render in the HTML 3. What tool do you use to create a Lightning web component bundle? a. The Salesforce CLI 4. What does the (cacheable=true) Apex annotation mean? a. It allows the platform to create and manage a client-side cache for any data returned by Apex.
- 15. Get Hands Onwith a Trailmix! sforce.co/LWC
- 16. Sample gallery Get inspiredwith sample apps, explore reference code, and learn best practices Get your hands on applications fully developed with Lightning Web Components, already available in the sample gallery. Upload source code directly from Github and integrate applications into your platform with Salesforce DX.
- 17. Prochain Meetup Appréhender ledéveloppement de Lightning web components après avoir développé sous le framework Aura + Migrer ses composants lightning vers Lightning Web Component