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