Forge UI: A New Way to Customize the Atlassian User Experience

Forge UI
A new way to customize the Atlassian user experience
SIMON KUBICA PRODUCT MANAGER
MICHAEL OATES SENIOR DEVELOPER

Under The Hood
3
2
1
FORGE UI AGENDA
The Why Behind
The Future

StaticDynamic
UI EXTENSIBILITYEXISTING

Static Dynamic
Middle ground?
Web Items
Glance Titles Panels
Dialogs

StaticDynamic Declarative
UI EXTENSIBILITYFUTURE

import ForgeUI from ‘@atlassian/forge-ui’;
Hello Forge UI! 👋
A declarative UI framework to enable
you to quickly and easily build native,
flexible, and trusted user experiences.
import ForgeUI from ‘@atlassian/forge-ui’;

CONFLUENCEFORGE UI FAAS
(<APP />, STATE)
(EVENT, STATE)

Trusted
Secure apps with no data
egress
Quick and easy
Rapid development with
powerful components
Cross platform
Unlock support for native
extensibility on mobile

QUICK AND EASY
Declare components that
work out of the box
Faster loading times
Atlassian handles resizing and
cross-platform compatibility

TRUSTED
“No egress” apps
Apps stay within the
Atlassian cloud
Burden of trust and
security moves to Atlassian

CROSS PLATFORM
[{
"type": "Text",
"content": "Value 0"
}, {
"type": "Button",
"text": “Atlas Camp!”,
},
{
"type": "Button",
"text": "Increment",
"onClick": { }
}]

[{
"type": "Text",
"content": "Value 0"
}, {
"type": "Button",
"text": “Atlas Camp!”,
},
{
"type": "Button",
"text": "Increment",
"onClick": { }
}]
CROSS PLATFORM

<Row>
<Cell>
<Button text="Attend" />
</Cell>
</Row>
Concepts
Markup
Effects
State

{
"type": "Row",
"children": [
{
"type": "Cell",
"children": [
{
"type": "Button",
"text": "✅ Attend"
}
]
}
]
}
Concepts
Markup
Effects
State

{
"type": "render",
"aux": {
"type": "View",
"children": {
"type": "Button",
"text": "Attend"
}
}
}
Concepts
Markup
Effects
State

{
"type": "render",
"aux": {
"type": "View",
"children": {
"type": "Button",
"text": "Attend"
}
},
"state": {
"App.0": {
"count": 1
}
}
}
Concepts
Markup
Effects
State

SYSTEMS
Invocation
Service
Client Function

APP LIFECYCLE
Discovery Initialise
Render
Event

DATA FLOW: DISCOVERY
Invocation
Service
Client Function

DATA FLOW: RENDERING
{
"effects": [{
"type": "initialize",
}],
}
Event
Invocation
Service
Client Function

FORGE UI FUNCTION
const App = () => {
const [appointments, attendAppointment] = useAppointments();
const rows = appointments.map(appointment =>
<AppointmentRow
appointment = {appointment}
onAttend = { () => attendAppointment(appointment) }
/>);
return <AppointmentsTable title = {title}>
{ rows }
</AppointmentsTable>;
};

JSX TRANSFORM
const App = () => {
const [appointments, attendAppointment] = useAppointments();
const rows = appointments.map(appointment =>
ForgeUI.createElement(AppointmentRow,
{
appointment: appointment,
onAttend: () => attendAppointment(appointment)
})
);
return ForgeUI.createElement(AppointmentsTable,
{
title: title
},
... rows
);
};

RENDERER
APP
{
"state": {
"App.3.0": {
“0": useAction(...)
}
}
}

RENDERER
APP
{
"state": {
"App.3.0": {
"0": [
{
"id": 0,
"time": "9:00am - 9:30am",
"occupied": false
}
]
}
}
}

RENDERER
CELL
BUTTON CUSTOM
{
"type": "Button",
"onClick": () => {}
}
APP

RENDERER
CELL
BUTTON CUSTOM
{
"type": "Button",
"key": “Button.1.0",
"onClick": () => {}
}

RENDERER
CELL
BUTTON CUSTOM
{
"type": "Button",
"key": "Button.1.0",
"onClick": {
"componentKey": "Button.1.0",
"prop": "onClick"
}
}

RENDERER
CELL
BUTTON
TEXT BUTTON
FRAGMENTCUSTOM

DATA FLOW
Invocation
Service
Client Function
[{
"type": "render",
"state": { ... },
"aux": [
{
"type": "View",
“children”: [ ... ]
}, ...
]
}]
Result

[{
"type": "Cell",
"children": [
{
"type": "Text",
"content": "Free"
}]
}, {
"type": "Cell",
"children": [
{
"type": "Button",
"text": "✅ Attend",
"onClick": {}
}]
}]

Native rendering
Faster load times
• Fewer resources to load and parse
on app load
• No need to instantiate multiple
iframe contexts
• Can cache contents if needed
Better integration
• Content resizing works
• Better dropdown and modal support
• Consistent with visual appearance of
surrounding app
• Able to leverage more complex
components in surrounding app

{
"type": "Button",
"key": "Button.1.0",
}
"onClick": {
"componentKey": "Button.1.0",
"prop": "onClick"
}

DATA FLOW: EVENTS
Invocation
Service
Client Function
{
"effects": [{
"type": "event",
"handler": {
"componentKey": “Button.1.0",
"prop": "onClick"
},
"args": []
}],
"state": { ... }
}
Event

EVENTS
CELL
BUTTON
TEXT BUTTON
FRAGMENT
onClick

DATA FLOW: EFFECTS
Invocation
Service
Client Function
[{
"type": "render",
"state": { ... },
"aux": [
{
"type": "View",
“children”: [ ... ]
}, ...
]
}]
Result

EFFECTS: LATENCY
Invocation
Service
Client Function

SECURITY
Function
Domain A
Domain B
Allowed
Denied

SECURITY
FunctionFront End
Domain
Image

NEW PLATFORMS
Invocation
Service
Different Clients Function

STATIC ASSETS
Invocation
Service
Client
IMAGES
Function

STATIC ASSETS
Invocation
Service
Client
IMAGES
CDN
Function

STATIC ASSETS
Deployment
Service
CLI
CODE
CDN
Functions
IMAGES
DEPLOYMENT

IFRAMES
Client Hosted
iframe
API
ASSETS
CDN
Functions

EvaluatingExperimenting Expecting

TODAY
HANDS-ON
FORGE LABS
Upstairs in Schubert 3

Thank you!
SIMON KUBICA PRODUCT MANAGER
MICHAEL OATES SENIOR DEVELOPER

Forge UI: A New Way to Customize the Atlassian User Experience

More Related Content

What's hot (20)

Similar to Forge UI: A New Way to Customize the Atlassian User Experience (20)

More from Atlassian (20)

Recently uploaded (20)

Forge UI: A New Way to Customize the Atlassian User Experience