Throw Back ...

UI5 Con 2017 ...

UI5 Con 2018 ...

UI5 Con 2019 ...

What are Web Components?

• Custom Elements
• Shadow DOM
• ES6 Imports
• Templates

Custom Elements

							<script>
								class MyComponent extends HTMLElement {

								}

								window.customElements.define('my-component', MyComponent);
							</script>

							
						

Shadow DOM

							class MyComponent extends HTMLElement {
								constructor() {
									super();
									const shadowRoot = this.attachShadow({mode: 'open'});
									shadowRoot.innerHTML = '
Hello UI5con!
';
								}
							}
						

More standards, Less frameworks

What are UI5 Web Components?

Native HTML Elements

								<h2>Hello UI5 Con</h2>

								<button>Press me</button>

								<ul>
									<li>Pineapple</li>
									<li>Apple</li>
									<li>Banana</li>
								</ul>
							

Custom HTML Elements

						<ui5-title>Hello UI5 Con</ui5-title>

						<ui5-button>Hello UI5 Con</ui5-button>

						<ui5-list>
							<ui5-li>Pineapple</ui5-li>
							<ui5-li>Apple</ui5-li>
							<ui5-li>Banana</ui5-li>
						</ui5-list>
					

It is just an HTML ...

						<ui5-title>Hello UI5 Con</ui5-title>

						<br/>

						<ui5-button style="color: red">Hello UI5 Con</ui5-button>

						<ui5-list id="my-list" class="list-sample">
							<ui5-li>Pineapple</ui5-li>
							<ui5-li>Apple</ui5-li>
							<ui5-li>Banana</ui5-li>
						</ui5-list>
					

Eventing

							<ui5-datepicker value="2019-06-28" id="myPicker"></ui5-datepicker>
					

								const datepicker = document.getElementById("myPicker");

								console.log(datepicker.value); // 2019-06-28

								datepicker.addEventListener('change', (event) => {
									alert(event.target.value);
								});
						

Aggregation via slots

						<ui5-panel>
							<!-- Panel header -->
							<div slot="header">
								<ui5-button design="Emphasized">Add</ui5-button>
								<ui5-button design="Negative">Remove</ui5-button>
							</div>

							<div>Hello UI5Con 2019!</div>
						</ui5-panel>
					

Aggregation via slots

							<ui5-datepicker value="2019-06-28" id="myPicker"></ui5-datepicker>
						

							document.getElementById("myPicker").value
						

							<ui5-datepicker value="2019-06-28" id="myPicker"></ui5-datepicker>
						

							document.getElementById("myPicker").value
						

							<ui5-datepicker value="2019-06-28" id="myPicker"></ui5-datepicker>
						

							document.getElementById("myPicker").value
						

Enterprise standards

Theming - Global configuration

						<script data-id="sap-ui-config" type="application/json">
							{
								"theme": "sap_belize_hcb" // sap_belize, sap_fiori_3
							}
						</script>
					

Theming - Dynamic switch

							import { setTheme } from "@ui5/webcomponents-base/Theming";

							setTheme("sap_belize"); // sap_fiori_3, sap_belize_hcb
							

Theming – How is it so cool?

• CSS Custom Properties
• Static styles in Shadow DOM
• Constructable Stylesheets

Theming – Custom Styling

• Adding styles on root
• CSS Shadow parts ^*
• Setting CSS properties

CSS Shadow parts^*

							<style>
								#my-card::part(status) {
									color: red;
									font-size: 2rem;
								}
							</style>

							<ui5-card id="my-card">
								...
							</ui5-card>
						

Accessibility

i18n (30+ languages)

							<script data-id="sap-ui-config" type="application/json">
							{
								language: "de"
							}
							</script>
						

RTL

					<script data-id="sap-ui-config" type="application/json">
					{
						"rtl": true
					}
					</script>
				

RTL - language driven

					<script data-id="sap-ui-config" type="application/json">
						{
							"language": "he"
						}
					</script>
				

High Level Architecture

Class Hierarchy

Button

						class Button extends UI5Element {

							static get metadata() {} // properties, events and slots
							static get styles() {} // styles
							static get render() {} // rendering engine
							static get template() {} // template for rendering

							onBeforeRendering() {}
							onAfterRendering() {}
							onEnterDOM() {}
							onExitDOM() {}
						}
				

Rendering

Declarative Renderer

					<button
						type="button"
						class="{{classes.main}}"
						?disabled="{{disabled}}"
						dir="{{rtl}}"
					>
						<ui5-icon class="{{classes.icon}}" src="{{icon}}"></ui5-icon>
						<span class="{{classes.text}}">
							<bdi><slot></slot></bdi>
						</span>
					</button>
				

Template

					html`<button
						type="button"
						class="${classes.main}"
						?disabled="${disabled}"
						dir="${rtl}"
					>
						<ui5-icon class="${classes.icon}" src="${icon}"></ui5-icon>
						<span class="${classes.text}">
							<bdi><slot></slot></bdi>
						</span>
					</button>`
				

							<ui5-button>Press me</ui5-button>
						

Shadow DOM

Ta-da!

Get started

Playground

Reference apps

Building Fiori 3 using React

One thing we are proud of

9 Web Components UI libraries You Should Now in 2019

Next steps

We need you!

Upcoming topics

• Theming
• New components
• Custom components
• Server-Side Rendering