UI extensibility is an integral part of Atlassian's ecosystem story. In cloud, traditionally this has been accomplished with the humble iframe. In this session you will learn about Forge UI, an additional and innovative way to build visual apps for Atlassian products. Join Product Manager Simon Kubica and Senior Developer Michael Oates from the Forge team in exploring the underlying concepts and technology powering Forge UI, and learn how it will unlock exciting new opportunities in our ecosystem.

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>

6. StaticDynamic
UI EXTENSIBILITYEXISTING

7. StaticDynamic
UI EXTENSIBILITYEXISTING

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

9. StaticDynamic Declarative
UI EXTENSIBILITYFUTURE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25. UI = f(state)

27. SYSTEMS
Invocation
Service
Client Function

28. APP LIFECYCLE
Discovery Initialise
Render
Event

29. DATA FLOW: DISCOVERY
Invocation
Service
Client Function

31. APP LIFECYCLE
Discovery Initialise
Render
Event

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

33. APP LIFECYCLE
Discovery Initialise
Render
Event

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

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

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

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

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

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

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

41. RENDERER
CELL
BUTTON
TEXT BUTTON
FRAGMENTCUSTOM

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

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

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

46. APP LIFECYCLE
Discovery Initialise
Render
Event

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

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

50. EVENTS
CELL
BUTTON
TEXT BUTTON
FRAGMENT
onClick

51. APP LIFECYCLE
Discovery Initialise
Render
Event

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

54. EFFECTS: LATENCY
Invocation
Service
Client Function

55. APP LIFECYCLE
Discovery Initialise
Render
Event

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

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

58. MORE
COMPONENTS

59. CROSS-
PRODUCT
VISION

60. SECURITY
Function
Domain A
Domain B
Allowed
Denied

61. SECURITY
FunctionFront End
Domain
Image

62. SECURITY
FunctionFront End
Domain
Image

63. NEW PLATFORMS
Invocation
Service
Different Clients Function

64. NEW PLATFORMS
Function

65. STATIC ASSETS
Invocation
Service
Client
IMAGES
Function

66. STATIC ASSETS
Invocation
Service
Client
IMAGES
CDN
Function

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

68. IFRAMES
Client Hosted
iframe
API
ASSETS
CDN
Functions

69. StaticDynamic Declarative
UI EXTENSIBILITYFUTURE

70. EvaluatingExperimenting Expecting

71. THIS YEAR
FORGE BETA
PROGRAM

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

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

74. Q & A