Download to read offline
Uploaded bySalesforce Engineering
Locker Service Ready Lightning Components With Webpack
The document discusses how to develop JavaScript-heavy projects within the Salesforce DX framework using tools like Webpack for creating locker service-compatible bundles. It emphasizes structuring JavaScript applications for better compatibility and security while leveraging modern ES6+ features. It also highlights best practices for managing legacy libraries and linting with Salesforce-specific plugins.
More Related Content
Similar to Locker Service Ready Lightning Components With Webpack
More from Salesforce Engineering
Locker Service Ready Lightning Components With Webpack
- 1. Locker Service ReadyLightning Components With Webpack Writing modern JavaScript with dependencies in a safe and platform-compatible way marat@salesforce.com, @MaratVy Marat Vyshegorodtsev, Lead Application Security Engineer
- 2. In this talkyou will learn How to structure your JS-heavy project in Salesforce DX Artifacts! How to build Locker Service-compatible JS bundles using Webpack You may know Webpack from ReactJS development, but it is not its only use! Learn how to use all the familiar JS tools with Webpack and Lightning Linting, depolyfilling and more!
- 3. Remember this article?You may forget it now https://sfdc.co/locker
- 4. Let’s try arandom broken lib from StackExchange question choices.js — the lib of choice
- 5. The reason? BrokenInternet Explorer polyfill choices.js/assets/scripts/src/lib/polyfills.js
- 6. Let’s apply some SFDXand Webpack magic!
- 7. What is mymodern Salesforce stack in 2017? Salesforce Developer Experience (DX) Source-driven deployments a la Heroku Lightning + Salesforce Design System + Locker + Stricter CSP Critical Update Enable all usability and security features ECMAScript 6+ with Webpack 3 + Babel + ESLint with Salesforce rules Modern JavaScript development with freedom to choose the libraries Bleeding edge platform technologies
- 8.
- 9. Salesforce DX ArtifactStructure Aura Classes Objects Layouts Static Resources == Webpack Artifacts … JavaScript CSS BowerES6 NPM Bower SCSS LESS NPM
- 10. Salesforce DX ArtifactStructure Lightning Component Webpack Project
- 11. Webpack Configuration forLightning Output two static resources: App.resource and Styles.resource Package code as a library with window library target Fix all Locker-broken imports: global variables, this instead of window Lint code for Lightning issues Transpile ES6+ to browser-compatible JS
- 12. Configure JS Output Producesa single app.resource with all Javascript
- 13. Configure CSS Output Producesa single styles.resource with all CSS
- 14. Fix Legacy Libraries Referencingthis when meaning window is not compatible with Locker Service: Use imports-loader
- 15. Un-polyfill Locker Objects LockerService has custom implementations for many DOM APIs. Do not polyfill them.
- 16. Fix UMD andAMD Imports Webpack wraps UMD call to this nicely so that libraries like Choices.js just work For AMD packages disable define using imports-loader: imports-loader?define=>false
- 17. Transpile Modern JSto Browser-Compatible Use babel-loader with babel-preset-env In package.json configure: “browserlist”: “last 2 versions” https://sfdc.co/browsers
- 18. Check for LightningIssues in JS Use eslint-loader with @salesforce/eslint-plugin-aura in .eslintrc
- 19.
- 20.
- 21. Check out myVisualForce work too! @salesforce/eslint-plugin-visualforce forcedotcom/eslint-plugin-visualforce
- 22. Attend these theatersessions today! 1:30pm Common Web Security Vulnerabilities and Their Fixes Learn more about Open Redirect and XSS 2:00pm Avoiding Common Security Mistakes Learn more about SOQL injection and CSRF
Editor's Notes
- #6 No browser detection for polyfill breaks the proper CustomEvent object in SecureWindow object. Just search for CustomEvent in the source code given the error from the previous slide