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.

1. Lightning Web Components - A New Era
Czech Dreamin 2019
@muenzpraeger
René Winkelmeyer
Architect, Developer Evangelism

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 salesforce.com, 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 non-salesforce.com products, and utilization
and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, 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.
Salesforce.com, 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. 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. Remember Amazon in 1999?

5. Proto Salesforce: 1999

6. Salesforce: 2010 until now

7. one.app

8. 2014 Web Stack

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. W3C and ECMAScript Standardization
● ECMAScript 6,7,8,9
● Classes
● Modules
● Promises
● Decorators
● Web components
● Custom elements
● Shadow DOM
● Templates and slots

11. The Web Stack Is Different Today

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. 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. Lightning Web Components Build on Modern Standards

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. Build Anywhere with
Lightning Web Components Open Source
Lightning Web Components Framework NOW OPEN
SOURCE
Start building atlwc.dev
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. 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: https://www.webcomponents.org/introduction
Web Components

18. Why did we create Lightning Web
Components
And why did we make it Open Source?

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. “Our UI platform shares the same
constraints and features of the web
platform”

21. WEB
COMPONENTS
- interoperability
- future proof
- backwards compatibility
CONTAINER
OSS, CI/CD, TOOLS

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. 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. 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. 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. 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. - 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. - 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. 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. Demo time
Lightning Web Components Open Source

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
https://lwc.dev