[CzechDreamin 2022] Build your apps everywhere with Lightning Web Components Open Source

Did you know that several parts of the tools you’re using on the Salesforce Platform are open source ? That you can create a LWR Community using Lightning Base Components and Lightning Design System and host it wherever you want ? That you can benefit from new features being part of LWC but not yet available on the Platform like Light-DOM or dynamic components creation ? And that some of your existing components can be reused quite easily ? If not, come and see how powerful Lightning Web Components Open Source are !

Transcript

1. Build your apps everywhere with Lightning Web Components Open Source by Fabien Taillon
2. #CD22 Fabien Taillon - 7x Salesforce MVP - CTO at Texeï - Paris Developer Group leader - French Touch Dreamin team - Serial speaker - Not so serial blogger @FabienTaillon https://texei.com/blog
3. #CD22 • What’s Open Sourced at Salesforce • What’s available as a public package • What can be done • Let’s build something with Lightning Web Runtime • Demo • Differences between OSS & Platform Agenda
4. #CD22 A whole site dedicated to OSS (open source software): https://opensource.salesforce.com Some OSS Projects: • Lightning Web Components • Salesforce Extensions for VS Code • Salesforce Lightning Design System • oclif • TransmogrifAI (automated machine learning) • … Not something new, Aura was already open source. What’s Open Sourced at Salesforce
5. #CD22 Some other projects are not open sourced, but available as packages (npm) for us to use: • Lightning Web Runtime • Lightning Base Components • … What’s available as a public package
6. #CD22 Benefit from all publicly available resources to build your own application locally, hosted wherever you want: • Lightning Web Runtime • Lightning Web Components • Salesforce Lightning Design System • Lightning Base Components What can be done
7. #CD22 Benefit from all publicly available resources to build your own application locally, hosted wherever you want: • Lightning Web Runtime • Lightning Web Components • Salesforce Lightning Design System • Lightning Base Components • Custom @wire api What can be done
8. #CD22 Benefit from all publicly available resources to build your own application locally, hosted wherever you want: • Lightning Web Runtime • Lightning Web Components • Salesforce Lightning Design System • Lightning Base Components • Custom @wire api • Use Lightning Navigation Service What can be done
9. #CD22 Benefit from all publicly available resources to build your own application locally, hosted wherever you want: • Lightning Web Runtime • Lightning Web Components • Salesforce Lightning Design System • Lightning Base Components • Custom @wire api • Use Lightning Navigation Service • Use OSS first/only features (Light DOM, dynamic component creation) What can be done
10. #CD22 Benefit from all publicly available resources to build your own application locally, hosted wherever you want: • Lightning Web Runtime • Lightning Web Components • Salesforce Lightning Design System • Lightning Base Components • Custom @wire api • Use Lightning Navigation Service • Use OSS first/only features (Light DOM, dynamic component creation) • Any tool of your choice (Rollup, webpack, TypeScript…) What can be done
11. #CD22 • LWR is a runtime built with performance in mind • Loads modules/services, like routing • Used by the latest Experience Cloud templates • Configurable via lwr.config.json Easy to start with: npm init lwr https://developer.salesforce.com/docs/platform/lwr/overview Let’s build something with Lightning Web Runtime
12. #CD22 • npm install @salesforce-ux/design-system • Copy node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning- design-system.min.css to assets/styles/salesforce-lightning-design-system.min.css (or script it) Add SLDS
13. #CD22 • Create src/layouts/main.html ◦ see template here: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-slds.html • Add stylesheet link https://developer.salesforce.com/docs/platform/lwr/guide/lwr-slds.html Add SLDS
14. #CD22 Add synthetic shadow to lwr.config.json SLDS needs Synthetic Shadow
15. #CD22 • npm install lightning-base-components • Add "npm": "lightning-base-components" to lwr.config.json Add Lightning Base Components
16. #CD22 Add routes to lwr.config.json Server-side Routing
17. #CD22 Add routes in main app, and define handler function: Client-side Routing
18. #CD22 Add lwr-router-container to main app template import { createRouter } from 'lwr/router'; Client-side Routing
19. #CD22 Basically just an ES6 module with a few functions: • constructor • connect • disconnect • Update https://lwc.dev/guide/wire_adapter Custom @wire
20. #CD22 DEMO
21. #CD22 • Custom images/assets vs static resources (different import) ◦ OSS: just add files to src/assets folder ◦ Platform: import myResource from '@salesforce/resourceUrl/resourceReference'; • Custom @wire → not allowed on Platform, replaced by Apex Class ◦ OSS: import { getUser } from 'c/usersWireApi'; ◦ Platform: import getUser from '@salesforce/apex/Namespace.UsersWireApi.getUser'; Differences between OSS & Platform
22. #CD22 • Navigation page names ◦ OSS: whatever name you would like (eg. “namedPage”) ◦ Platform: page names expected by Salesforce (ex: comm__namedPage) • Metadata file (myComponent.js-meta.xml) ◦ OSS: No need, but won’t complain if the file is there ◦ Platform: expected by Salesforce, Differences between OSS & Platform
23. #CD22 • Presentational components • No Salesforce only import • Navigation is OK • Was designed to work everywhere from the start ◦ Use Salesforce expected page names • Won’t fit for all components Components suited to use everywhere
24. #CD22 LWC: • https://lwc.dev • https://github.com/salesforce/lwc LWR: • https://developer.salesforce.com/docs/platform/lwr/overview SLDS: • https://www.lightningdesignsystem.com • https://github.com/salesforce-ux/design-system Resources
25. #CD22 Demo projects GitHub repositories: https://github.com/FabienTaillon/lwc-lwr-oss https://github.com/FabienTaillon/lwc-oss-on-platform Create Components Dynamically in LWC OSS: https://www.youtube.com/watch?v=KYRGmilJOrM Resources
26. Thank you! #CD22