Locker Service Ready Lightning Components With Webpack
•Download as PPTX, PDF•
1 like•2,997 views
In this talk you will learn: How to structure your JS-heavy project in Salesforce DX How to structure your JS-heavy project in Salesforce DX Learn how to use all the familiar JS tools with Webpack and Lightning
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Locker Service Ready Lightning Components With Webpack
Similar to Locker Service Ready Lightning Components With Webpack (20)
More from Salesforce Engineering
More from Salesforce Engineering (20)
Recently uploaded
Recently uploaded (20)
Locker Service Ready Lightning Components With Webpack
- 1. Locker Service Ready Lightning 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 talk you 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 a random broken lib from StackExchange question choices.js — the lib of choice
- 5. The reason? Broken Internet Explorer polyfill choices.js/assets/scripts/src/lib/polyfills.js
- 6. Let’s apply some SFDX and Webpack magic!
- 7. What is my modern 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
- 9. Salesforce DX Artifact Structure Aura Classes Objects Layouts Static Resources == Webpack Artifacts … JavaScript CSS BowerES6 NPM Bower SCSS LESS NPM
- 10. Salesforce DX Artifact Structure Lightning Component Webpack Project
- 11. Webpack Configuration for Lightning 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 Produces a single app.resource with all Javascript
- 13. Configure CSS Output Produces a single styles.resource with all CSS
- 14. Fix Legacy Libraries Referencing this when meaning window is not compatible with Locker Service: Use imports-loader
- 15. Un-polyfill Locker Objects Locker Service has custom implementations for many DOM APIs. Do not polyfill them.
- 16. Fix UMD and AMD 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 JS to Browser-Compatible Use babel-loader with babel-preset-env In package.json configure: “browserlist”: “last 2 versions” https://sfdc.co/browsers
- 18. Check for Lightning Issues in JS Use eslint-loader with @salesforce/eslint-plugin-aura in .eslintrc
- 19. Voila!
- 21. Check out my VisualForce work too! @salesforce/eslint-plugin-visualforce forcedotcom/eslint-plugin-visualforce
- 22. Attend these theater sessions 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
- 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