[Dreamforce 2022] Build your apps everywhere with LWC Open Source

With open source, you can benefit from new features being part of LWC but not yet available on the Platform. See how open source can help make powerful, reusable components.

Transcript

1. 1 Build your apps everywhere with LWC Open Source Fabien Taillon, CTO at Texeï, Salesforce MVP @FabienTaillon | https://texei.com/blog
2. 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. AGENDA • 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
4. 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. Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog What’s Open Sourced at Salesforce
5. 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
6. 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
7. 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
8. 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, Custom Labels… What can be done Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
9. 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, Custom Labels… • Use OSS first/only features (Light DOM, dynamic component creation) What can be done Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
10. 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, Custom Labels… • Use OSS first/only features (Light DOM, dynamic component creation) • Any tool of your choice (Rollup, webpack, TypeScript…) What can be done Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
11. • 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
12. • 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
13. • 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
14. Add synthetic shadow to lwr.config.json SLDS needs Synthetic Shadow Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
15. • npm install lightning-base-components • Add "npm": "lightning-base-components" to lwr.config.json Add Lightning Base Components Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
16. Add routes to lwr.config.json Server-side Routing Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
17. Add routes in main app, and define handler function: Client-side Routing Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
18. Add lwr-router-container to main app template import { createRouter } from 'lwr/router'; Client-side Routing Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
19. Basically just an ES6 module with a few functions: • constructor • connect • disconnect • Update https://lwc.dev/guide/wire_adapter Custom @wire Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
20. npm install @lwrjs/label-module-provider import users from '@salesforce/label/c.users'; Custom Labels Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog Use same import as on the Platform! https://salesforce.stackexchange.com/questions/385223/whats-the-expected-label-file-forma t-for-lightning-web-runtime-oss In lwr.config.json:
21. DEMO Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
22. • 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
23. • 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
24. • 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
25. 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
26. 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 Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog
28. Connect with Developer Trailblazers from Anywhere Join the Community www.salesforce.com/devcommunity/ #SFDevsAMA
29. 29 Thank you Dreamforce 2022 - Build your apps everywhere with LWC Open Source @FabienTaillon - https://texei.com/blog