Uploaded byRoy Gilad
Intro to Salesforce Lightning Web Components (LWC)
The document introduces Lightning Web Components (LWC), highlighting their development based on modern web standards for enhanced performance, interoperability, and ease of use within the Salesforce ecosystem. It emphasizes the benefits of using LWC, such as better productivity, transferable skills, and an improved programming model compared to previous frameworks. Additionally, the document includes a quiz to reinforce understanding of LWC concepts and encourages developers to explore sample applications and best practices.
Intro to Salesforce Lightning Web Components (LWC)
- 1. Introducing Lightning Web Components RoyGilad, Founder, SND Solutions
- 2.
- 3.
- 4.
- 5. Salesforce built aLOT of stuff!!!
- 7. High entry barfor new developers and developers that have experience in other frameworks
- 8. The Human CapitalGap source
- 9. Fragmentation ● Proliferation offrameworks ● Components are not interoperable ● Skills are not transferable ● Resources are hard to find ● Framework abstractions are slow
- 10. W3C and ECMAScriptStandardization ● ECMAScript 6,7,8,9 ● Classes ● Modules ● Promises ● Decorators ● Web components ● Custom elements ● Shadow DOM ● Templates and slots source
- 11.
- 12.
- 13.
- 14. 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
- 15. Eco-System Benefits ● Morestandards, less proprietary ● Common component model ● Transferable skills ● Easier-to-find / easier-to-ramp-up developers ● Better performance
- 16. Summary 1. Game changingweb standards 2. Performance 3. Coexist and interoperate with Aura
- 17. Demo Time! Lightning WebComponents in Action
- 18. Lightning Web ComponentsPop Quiz!
- 19. 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.
- 20. 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.
- 21. Get Hands Onwith a Trailmix! sforce.co/LWC
- 22.
- 23.
Editor's Notes
- #3 What happened in 2014? Mention major events that happened and the last one should be Lightning was announced
- #4 To understand why we are launching Lightning Web Components, it is helpful to go back a few years and take a look at the web stack in 2014. Back then, web standards only offered a limited foundation for the full stack that developers need to build large scale web applications: a rendering engine, standard elements, events, and a core language (ECMAScript 5). In addition to being rudimentary, that foundation had other shortcomings traceable to its roots as a page rendering platform, not an application execution platform. For example: Rendering wasn't optimized for continuous UI transformation Standard UI elements were scarce and the standard didn't support the creation of custom elements The core language lacked modern constructs to write large and modular enterprise-class apps at the client-side (modules, classes, promises, decorators, etc.) As it is often the case, the community and software vendors jumped in to fill the gaps. For example: Different libraries provided different language extensions to support modular and large-scale development: modules (AMD and CommonJS), promises, classes, and other general utilities. Different frameworks introduced different component model and html templating approaches. New techniques were developed to optimize rendering (for example, the virtual DOM in React, Ember, and Vue). In 2014, when we launched the Lightning Component framework along with the Aura programming model, we were part of that effort to push the web forward and enable large scale client-side application development on the web.
- #5 To understand why we are launching Lightning Web Components, it is helpful to go back a few years and take a look at the web stack in 2014. Back then, web standards only offered a limited foundation for the full stack that developers need to build large scale web applications: a rendering engine, standard elements, events, and a core language (ECMAScript 5). In addition to being rudimentary, that foundation had other shortcomings traceable to its roots as a page rendering platform, not an application execution platform. For example: Rendering wasn't optimized for continuous UI transformation Standard UI elements were scarce and the standard didn't support the creation of custom elements The core language lacked modern constructs to write large and modular enterprise-class apps at the client-side (modules, classes, promises, decorators, etc.) As it is often the case, the community and software vendors jumped in to fill the gaps. For example: Different libraries provided different language extensions to support modular and large-scale development: modules (AMD and CommonJS), promises, classes, and other general utilities. Different frameworks introduced different component model and html templating approaches. New techniques were developed to optimize rendering (for example, the virtual DOM in React, Ember, and Vue). In 2014, when we launched the Lightning Component framework along with the Aura programming model, we were part of that effort to push the web forward and enable large scale client-side application development on the web.
- #6 To understand why we are launching Lightning Web Components, it is helpful to go back a few years and take a look at the web stack in 2014. Back then, web standards only offered a limited foundation for the full stack that developers need to build large scale web applications: a rendering engine, standard elements, events, and a core language (ECMAScript 5). In addition to being rudimentary, that foundation had other shortcomings traceable to its roots as a page rendering platform, not an application execution platform. For example: Rendering wasn't optimized for continuous UI transformation Standard UI elements were scarce and the standard didn't support the creation of custom elements The core language lacked modern constructs to write large and modular enterprise-class apps at the client-side (modules, classes, promises, decorators, etc.) As it is often the case, the community and software vendors jumped in to fill the gaps. For example: Different libraries provided different language extensions to support modular and large-scale development: modules (AMD and CommonJS), promises, classes, and other general utilities. Different frameworks introduced different component model and html templating approaches. New techniques were developed to optimize rendering (for example, the virtual DOM in React, Ember, and Vue). In 2014, when we launched the Lightning Component framework along with the Aura programming model, we were part of that effort to push the web forward and enable large scale client-side application development on the web.
- #7 Although these community and software vendor efforts made it possible to develop large scale client-side apps on the web, they also came with a number of challenges: Frameworks became the language. React, Angular, and the Lightning Component Framework are all JavaScript frameworks, but they provide such a high level of abstraction that they feel like different languages. As a result, skills were not transferable, and developers were hard to find and ramp up. Apps and components written with different frameworks are not interoperable. This fragmentation underscored the need for standardization.
- #8 High entry bar for new developers and developers that have expiriance in other frameworks
- #9 Source: https://www.10kview.com/introducing-10k-advisors-first-annual-salesforce-talent-ecosystem-report/
- #10 Although these community and software vendor efforts made it possible to develop large scale client-side apps on the web, they also came with a number of challenges: Frameworks became the language. React, Angular, and the Lightning Component Framework are all JavaScript frameworks, but they provide such a high level of abstraction that they feel like different languages. As a result, skills were not transferable, and developers were hard to find and ramp up. Apps and components written with different frameworks are not interoperable. This fragmentation underscored the need for standardization.
- #11 That is when the standard organization woke up: the last five years have seen an unprecedented level of innovation and standardization, mostly driven by the W3C/WHATWG and the ECMAScript Technical Committee (TC39) of which Salesforce is a member. The list of standards developed during the last five years includes: ECMAScript 2015 (6), 2016 (7), 2017 (8), 2018 (9) and beyond (adding classes, modules, promises, decorators, etc.) Web components Custom elements Templates and slots Shadow DOM
- #12 As a result, the web stack looks very different today than it did five years ago, with its weight now heavily tilting towards standards. The core stack finally got the update it needed to become an application development platform in its own right. Many features that required frameworks now come standard: you no longer need a proprietary component model, proprietary language extensions, proprietary modules, etc. The standardization of the core stack is incredibly exciting and opens the door to a new breed of frameworks: frameworks whose major task is no longer to fill in the gaps in the core stack, but to provide a thin layer of specialized services on top of a standard stack that is now suitable for large scale app development.
- #13 Lightning Web Components is the Salesforce implementation of that new breed of lightweight frameworks built on web standards. It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond. Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including: The Base Lightning Components, a set of over 150 UI components all built as custom elements. The Lightning Data Service which provides declarative access to Salesforce data and metadata, data caching, and data synchronization. The User Interface API, the underlying service that makes Base Lightning Components and the Lightning Data Service metadata aware, leading to substantial productivity gains.
- #14 With the addition of Lightning Web Components, there are now two ways to build Lightning components: Aura Components, leveraging its own component model, templates, and modular development programming model. Lightning Web Components, built on top of the web standards breakthroughs of the last five years: web components, custom elements, Shadow DOM, etc. Aura components and Lightning web components can coexist and interoperate, and they share the same high level services: Aura components and Lightning web components can coexist on the same page Aura components can include Lightning web components Aura components and Lightning web components share the same base Lightning components. Base Lightning components were already implemented as Lightning web components. Aura components and Lightning web components share the same underlying services (Lightning Data Service, User Interface API, etc.). If you are already developing Lightning components with Aura, you can continue to do so. Your Aura components will continue to work as before. You can build new components with Aura or Lightning Web Components. Your Aura and Lightning Web Components can coexist and interoperate. Over time, you can consider migrating your Aura Components to Lightning Web Components, starting with the components that would benefit the most from the performance benefits of Lightning Web Components. If you are new to developing on Lightning, or if you are starting a new project, we recommend using Lightning Web Components.
- #15 Lightning Web Components is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years, which means you can use more of the modern language of the web, build components that have blazing fast performance, and what you build can coexist and interoperate with the original Aura programming model.
- #16 The benefits are substantial: Common component model Common programming model Transferable skills and easier-to-find / easier-to-ramp-up developers Interoperable components Better performance because core features are implemented natively in web engines instead of in JavaScript in framework abstractions
- #17 Exciting time to be a Salesforce developer! Build with a state-of-the-art framework build on web standards breakthrough Deliver High-Performance Apps... … that coexist and interoperate with Aura
- #18 Use either the Live Demo Script or the Video Guide to complete this portion
- #22 This Trailmix is dedicated to all things Lightning Web Components. It’s full of useful resources and hands-on projects to take you deep into the new component programming model, the new tools available to build and deploy, and ways to connect with Salesforce Developers around the world!