1 Build your apps everywhere with LWC Open Source Fabien Taillon, CTO at Texeï, Salesforce MVP @FabienTaillon | https://texei.com/blog

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

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

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

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

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

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

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

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

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

● 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

● 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

● 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

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

● 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

Add routes to lwr.config.json Server-side Routing Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog

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

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

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

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:

DEMO Dreamforce 2022 - Build your apps everywhere with LWC Open Source - @FabienTaillon - https://texei.com/blog

● 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

● 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

● 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

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

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

No content

Connect with Developer Trailblazers from Anywhere Join the Community www.salesforce.com/devcommunity/ #SFDevsAMA

29 Thank you Dreamforce 2022 - Build your apps everywhere with LWC Open Source @FabienTaillon - https://texei.com/blog