Successfully reported this slideshow.

Build your apps everywhere with Lightning Web Components Open Source, Fabien Taillon

0

Share

1 of 26
1 of 26

Build your apps everywhere with Lightning Web Components Open Source, Fabien Taillon

0

Share

Download to read offline

Description

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. 1. Build your apps everywhere with Lightning Web Components Open Source by Fabien Taillon
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. #CD22 Add synthetic shadow to lwr.config.json SLDS needs Synthetic Shadow
  15. 15. #CD22 ● npm install lightning-base-components ● Add "npm": "lightning-base-components" to lwr.config.json Add Lightning Base Components
  16. 16. #CD22 Add routes to lwr.config.json Server-side Routing
  17. 17. #CD22 Add routes in main app, and define handler function: Client-side Routing
  18. 18. #CD22 Add lwr-router-container to main app template import { createRouter } from 'lwr/router'; Client-side Routing
  19. 19. #CD22 Basically just an ES6 module with a few functions: ● constructor ● connect ● disconnect ● Update https://lwc.dev/guide/wire_adapter Custom @wire
  20. 20. #CD22 DEMO
  21. 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. 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. 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. 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. 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. 26. Thank you! #CD22

Description

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. 1. Build your apps everywhere with Lightning Web Components Open Source by Fabien Taillon
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. #CD22 Add synthetic shadow to lwr.config.json SLDS needs Synthetic Shadow
  15. 15. #CD22 ● npm install lightning-base-components ● Add "npm": "lightning-base-components" to lwr.config.json Add Lightning Base Components
  16. 16. #CD22 Add routes to lwr.config.json Server-side Routing
  17. 17. #CD22 Add routes in main app, and define handler function: Client-side Routing
  18. 18. #CD22 Add lwr-router-container to main app template import { createRouter } from 'lwr/router'; Client-side Routing
  19. 19. #CD22 Basically just an ES6 module with a few functions: ● constructor ● connect ● disconnect ● Update https://lwc.dev/guide/wire_adapter Custom @wire
  20. 20. #CD22 DEMO
  21. 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. 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. 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. 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. 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. 26. Thank you! #CD22

More Related Content

More from CzechDreamin

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×