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

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

3.
<iframe> </iframe>

4.
<iframe> </iframe>

5.
StaticDynamic
UI EXTENSIBILITYEXISTING

6.
StaticDynamic
UI EXTENSIBILITYEXISTING

7.
Static Dynamic
Middle ground?
Web Items
Glance Titles Panels
Dialogs

8.
StaticDynamic Declarative
UI EXTENSIBILITYFUTURE

9.
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’;

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

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

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

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

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

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

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

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

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

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

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

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

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

23.
UI = f(state)

24.
SYSTEMS
Invocation
Service
Client Function

25.
APP LIFECYCLE
Discovery Initialise
Render
Event

26.
DATA FLOW: DISCOVERY
Invocation
Service
Client Function

27.
APP LIFECYCLE
Discovery Initialise
Render
Event

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

29.
APP LIFECYCLE
Discovery Initialise
Render
Event

30.
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>;
};

31.
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
);
};

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

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

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

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

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

37.
RENDERER
CELL
BUTTON
TEXT BUTTON
FRAGMENTCUSTOM

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

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

40.
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

41.
APP LIFECYCLE
Discovery Initialise
Render
Event

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

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

44.
EVENTS
CELL
BUTTON
TEXT BUTTON
FRAGMENT
onClick

45.
APP LIFECYCLE
Discovery Initialise
Render
Event

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

47.
EFFECTS: LATENCY
Invocation
Service
Client Function

48.
APP LIFECYCLE
Discovery Initialise
Render
Event

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

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

51.
MORE
COMPONENTS

52.
CROSS-
PRODUCT
VISION

53.
SECURITY
Function
Domain A
Domain B
Allowed
Denied

54.
SECURITY
FunctionFront End
Domain
Image

55.
SECURITY
FunctionFront End
Domain
Image

56.
NEW PLATFORMS
Invocation
Service
Different Clients Function

57.
NEW PLATFORMS
Function

58.
STATIC ASSETS
Invocation
Service
Client
IMAGES
Function

59.
STATIC ASSETS
Invocation
Service
Client
IMAGES
CDN
Function

60.
STATIC ASSETS
Deployment
Service
CLI
CODE
CDN
Functions
IMAGES
DEPLOYMENT

61.
IFRAMES
Client Hosted
iframe
API
ASSETS
CDN
Functions

62.
StaticDynamic Declarative
UI EXTENSIBILITYFUTURE

63.
EvaluatingExperimenting Expecting

64.
THIS YEAR
FORGE BETA
PROGRAM

65.
TODAY
HANDS-ON
FORGE LABS
Upstairs in Schubert 3

66.
Thank you!
SIMON KUBICA PRODUCT MANAGER
MICHAEL OATES SENIOR DEVELOPER

67.
Q & A