Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lightning Web Components - A new era, René Winkelmeyer

With the rise of Lightning Web Components a new era for building custom applications on the Salesforce platform emerged. Being based on web standards, this new programming model enables developers to leverage standard web development skills for crafting their custom components. In this session we'll walk through about what Lightning Web Components are, how to build and deploy them, and how to run them everywhere.

  • Login to see the comments

  • Be the first to like this

Lightning Web Components - A new era, René Winkelmeyer

  1. 1. Lightning Web Components - A New Era Czech Dreamin 2019 @muenzpraeger René Winkelmeyer Architect, Developer Evangelism
  2. 2. Forward-Looking Statement This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available., inc. assumes no obligation and does not intend to update these forward-looking statements. Statement under the Private Securities Litigation Reform Act of 1995
  3. 3. Web Components at Enterprise Scale ● Why we built with web components ● What does this mean for customers building on Salesforce? ● What does this for internal teams at Salesforce? ● What did we learn?
  4. 4. Remember Amazon in 1999?
  5. 5. Proto Salesforce: 1999
  6. 6. Salesforce: 2010 until now
  7. 7.
  8. 8. 2014 Web Stack
  9. 9. Frameworks become the language ● Solutions to common problems aren’t common ● Components are not interoperable ● Skills are not transferable ● Resources are hard to find ● Framework abstractions are slow
  10. 10. W3C and ECMAScript Standardization ● ECMAScript 6,7,8,9 ● Classes ● Modules ● Promises ● Decorators ● Web components ● Custom elements ● Shadow DOM ● Templates and slots
  11. 11. The Web Stack Is Different Today
  12. 12. Frameworks • React, Preact, Relay, Angular, Elm, Vue, Inferno, Ember, Aurelia, Cycle.js Data flow • Flux, Redux, GraphQL, MobX, RxJS, Falcor, ImmutableJS, Backbone.js Virtual DOM • SnabbDom, ViDom, virtual-dom, vDom Months of research to figure out what’s next
  13. 13. Create performant, reusable, self-contained components with the latest web standards, techniques, and tools—in a dead simple, faster, and more elegant way. Drive adoption and productivity by enabling developers to take advantage of a greater selection of tools that they already know and love. Deliver a technology that is compatible with the standards of today—and those well into the future. Vision
  14. 14. Lightning Web Components Build on Modern Standards
  15. 15. Salesforce is Built on Web Components 6x faster performance Versus our previous client tier Incremental roll out Global search & nav, library of 70+ metadata-aware UI components Better developer productivity Standards-based approach = more resources for devs, more familiar tooling More internal adoption Teams want to build with a faster, powerful framework
  16. 16. Build Anywhere with Lightning Web Components Open Source Lightning Web Components Framework NOW OPEN SOURCE Start building Use the same framework on and off the Lightning Platform Learn by exploring the source code Drive the roadmap by contributing code Lightning Base Components Salesforce Bindings
  17. 17. Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Source: Web Components
  18. 18. Why did we create Lightning Web Components And why did we make it Open Source?
  19. 19. ● More standards, less proprietary ● Common component model ● Transferable skills ● Easier-to-find / easier-to-ramp-up developers ● Standard tooling ● Better performance What Developers Want ● Breaking changes to their components and apps (backwards compatibility) ● Being stuck with old technology (evolution) ● Being stuck inside a walled garden (portability) What Developers Don’t Want
  20. 20. “Our UI platform shares the same constraints and features of the web platform”
  21. 21. WEB COMPONENTS - interoperability - future proof - backwards compatibility CONTAINER OSS, CI/CD, TOOLS
  22. 22. class HelloWorld extends HTMLElement { constructor() { super(); const t = document.getElementById('my-template'); this.attachShadow({mode: 'open'}).appendChild(t.cloneNode(true)); … } connectedCallback() { … } attributeChangeCallback(value) { … } disconectedCallback() { … } } ); document.customElements.define('hello-world', HelloWorld); Standards-based, Common Component Model
  23. 23. WEB COMPONENTS - interoperability - future proof - backwards compatibility LWC CONTAINER OSS, CI/CD, TOOLS - developer productivity - performance - security (locker) - accessibility (gaps) - design system (styling) - instrumentation
  24. 24. import { LightningElement, api, track } from "lwc"; export default class UIVision extends LightningElement { @api publicProp = "beautiful"; @track reactiveValue = "changes"; } Sugar On Top Of Web Components
  25. 25. color:white; WEB COMPONENTS LWC METADATA - interoperability - future proof - backwards compatibility - design time & builders - decoupling data & APIs - priming/preloading - offline - developer productivity - performance - security (locker) - accessibility (gaps) - design system (styling) - instrumentation
  26. 26. import { LightningElement, api, wire } from "lwc"; import customLabel from "@salesforce/labels/My.Label"; import ACCOUNT_NAME_FIELD from "@salesforce/schema/Account.Name"; import { getRecord } from "lightning/uiRecordApi"; export default class StaticAnalysis extends LightningElement { @api recordId; @wire(getContactList) contacts; @wire(getRecord, { recordId: "$recordId", fields: [ACCOUNT_NAME_FIELD] }) record; } Metadata for Web Components
  27. 27. - application container - routing - form factors color:white; WEB COMPONENTS LWC METADATA CONTEXT - interoperability - future proof - backwards compatibility - design time & builders - decoupling data & APIs - priming/preloading - offline - developer productivity - performance - security (locker) - accessibility (gaps) - design system (styling) - instrumentation Generally Available Spring ‘19
  28. 28. - open source - ecosystem - enterprise color:white; WEB COMPONENTS - interoperability - future proof - developer productivity - performance - security (locker) - accessibility - internationalization - backwards compatibility - instrumentation LWC METADATA - design time & builders - decoupling data & APIs - priming/preloading - offline - tooling CONTEXT OSS, CI/CD, TOOLS - application container - routing - form factors Available Now!
  29. 29. A Modern Way to Build Components in Salesforce Single Responsibility Principle Renderer Model CSS Markup & Definition Controller Helper Provider Server Controller CSS JavaScript Class HTML Template From complexity To simplicity
  30. 30. Demo time Lightning Web Components Open Source
  31. 31. Web Components at Enterprise Scale What we learned at Salesforce Build with standards Boost developer productivity, boost component/app performance Build for interoperability Let customers, developers choose their own adoption and implementation patterns Specialize what’s (actually) special Focus on services, unique value propositions