Slide 1

Slide 1 text

Build your apps everywhere with Lightning Web Components Open Source FabienTaillon Salesforce MVP - CTO at Texeï trailblazer.me/id/fabien @FabienTaillon

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

● 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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

● 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

Slide 12

Slide 12 text

● npm install @salesforce-ux/design-system ● Copy node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.mi n.css to assets/styles/salesforce-lightning-design-system.min.css (or script it) Add SLDS

Slide 13

Slide 13 text

● 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

Slide 14

Slide 14 text

Add synthetic shadow to lwr.config.json SLDS needs Synthetic Shadow

Slide 15

Slide 15 text

● npm install lightning-base-components ● Add "npm": "lightning-base-components" to lwr.config.json Add Lightning Base Components

Slide 16

Slide 16 text

Add routes to lwr.config.json Server-side Routing

Slide 17

Slide 17 text

Add routes in main app, and define handler function: Client-side Routing

Slide 18

Slide 18 text

● Add lwr-router-container to main app template ● import { createRouter } from 'lwr/router'; Client-side Routing

Slide 19

Slide 19 text

Basically just an ES6 module with a few functions: ● constructor ● connect ● disconnect ● Update https://lwc.dev/guide/wire_adapter Custom @wire

Slide 20

Slide 20 text

DEMO

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

● 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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Thank You FabienTaillon Salesforce MVP - CTO at Texeï trailblazer.me/id/fabien @FabienTaillon