SlideShare a Scribd company logo
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
<iframe> </iframe>
<iframe> </iframe>
Forge UI: A New Way to Customize the Atlassian User Experience
StaticDynamic
UI EXTENSIBILITYEXISTING
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)
Forge UI: A New Way to Customize the Atlassian User Experience
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
Trusted
Secure apps with no data
egress
Quick and easy
Rapid development with
powerful components
Cross platform
Unlock support for native
extensibility on mobile
Under The Hood
3
2
1
FORGE UI AGENDA
The Why Behind
The Future
Under The Hood
3
2
1
FORGE UI AGENDA
The Why Behind
The Future
<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
UI = f(state)
Forge UI: A New Way to Customize the Atlassian User Experience
SYSTEMS
Invocation
Service
Client Function
APP LIFECYCLE
Discovery Initialise
Render
Event
DATA FLOW: DISCOVERY
Invocation
Service
Client Function
Forge UI: A New Way to Customize the Atlassian User Experience
APP LIFECYCLE
Discovery Initialise
Render
Event
DATA FLOW: RENDERING
{
"effects": [{
"type": "initialize",
}],
}
Event
Invocation
Service
Client Function
APP LIFECYCLE
Discovery Initialise
Render
Event
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
Forge UI: A New Way to Customize the Atlassian User Experience
[{
"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
APP LIFECYCLE
Discovery Initialise
Render
Event
Forge UI: A New Way to Customize the Atlassian User Experience
{
"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
APP LIFECYCLE
Discovery Initialise
Render
Event
DATA FLOW: EFFECTS
Invocation
Service
Client Function
[{
"type": "render",
"state": { ... },
"aux": [
{
"type": "View",
“children”: [ ... ]
}, ...
]
}]
Result
Forge UI: A New Way to Customize the Atlassian User Experience
EFFECTS: LATENCY
Invocation
Service
Client Function
APP LIFECYCLE
Discovery Initialise
Render
Event
Under The Hood
3
2
1
FORGE UI AGENDA
The Why Behind
The Future
Under The Hood
3
2
1
FORGE UI AGENDA
The Why Behind
The Future
MORE
COMPONENTS
CROSS-
PRODUCT
VISION
SECURITY
Function
Domain A
Domain B
Allowed
Denied
SECURITY
FunctionFront End
Domain
Image
SECURITY
FunctionFront End
Domain
Image
NEW PLATFORMS
Invocation
Service
Different Clients Function
NEW PLATFORMS
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
StaticDynamic Declarative
UI EXTENSIBILITYFUTURE
EvaluatingExperimenting Expecting
THIS YEAR
FORGE BETA
PROGRAM
TODAY
HANDS-ON
FORGE LABS
Upstairs in Schubert 3
Thank you!
SIMON KUBICA PRODUCT MANAGER
MICHAEL OATES SENIOR DEVELOPER
Q & A

More Related Content

PPT
Generics in java
PDF
Web Development with Python and Django
PDF
TypeScript Introduction
PDF
A Basic Django Introduction
PDF
Introduction to Spring's Dependency Injection
PPTX
Introduction to Spring Boot
PDF
Beyond Java: 자바 8을 중심으로 본 자바의 혁신
PDF
3. Java Script
Generics in java
Web Development with Python and Django
TypeScript Introduction
A Basic Django Introduction
Introduction to Spring's Dependency Injection
Introduction to Spring Boot
Beyond Java: 자바 8을 중심으로 본 자바의 혁신
3. Java Script

What's hot (20)

PDF
Flask Basics
PDF
TypeScript - An Introduction
PDF
Lets make a better react form
PPT
Java 8 Streams
PDF
Java 8 Lambda Expressions
PPTX
Spring Framework
PPT
PHP Tutorials
PDF
Spring Boot
PPT
Ppt of Basic MVC Structure
PPTX
Php oop presentation
PDF
Basics of JavaScript
PDF
Spring Data JPA
PPTX
Introduction to Linked Data 1/5
PDF
Spring Framework - AOP
PPTX
Web development with django - Basics Presentation
PPS
Introduction to class in java
PDF
Python Collections Tutorial | Edureka
PPTX
Clean Code
Flask Basics
TypeScript - An Introduction
Lets make a better react form
Java 8 Streams
Java 8 Lambda Expressions
Spring Framework
PHP Tutorials
Spring Boot
Ppt of Basic MVC Structure
Php oop presentation
Basics of JavaScript
Spring Data JPA
Introduction to Linked Data 1/5
Spring Framework - AOP
Web development with django - Basics Presentation
Introduction to class in java
Python Collections Tutorial | Edureka
Clean Code
Ad

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

PDF
Let's Build an Editor Macro with Forge UI
PDF
A Blueprint for Scala Microservices
PPTX
Vertx - Reactive & Distributed
PDF
TDC2017 | São Paulo - Trilha Android How we figured out we had a SRE team at ...
PDF
Angular server side rendering - Strategies & Technics
PPTX
Building Progressive Web Apps for Windows devices
PDF
Windows phone 7 series
KEY
Android app development basics
PDF
mobl
PDF
Mozilla Web Apps - Super-VanJS
PPTX
[NDC 2019] Enterprise-Grade Serverless
PPTX
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
PPT
Cloud2Car - Force.com and the Internet of Things
PDF
Microservice Come in Systems
PDF
Improving android experience for both users and developers
PDF
Droidcon2013 android experience lahoda
PDF
Backendless apps
PDF
The evolution of redux action creators
PDF
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
PPTX
GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...
Let's Build an Editor Macro with Forge UI
A Blueprint for Scala Microservices
Vertx - Reactive & Distributed
TDC2017 | São Paulo - Trilha Android How we figured out we had a SRE team at ...
Angular server side rendering - Strategies & Technics
Building Progressive Web Apps for Windows devices
Windows phone 7 series
Android app development basics
mobl
Mozilla Web Apps - Super-VanJS
[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
Cloud2Car - Force.com and the Internet of Things
Microservice Come in Systems
Improving android experience for both users and developers
Droidcon2013 android experience lahoda
Backendless apps
The evolution of redux action creators
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...
Ad

More from Atlassian (20)

PPTX
International Women's Day 2020
PDF
10 emerging trends that will unbreak your workplace in 2020
PDF
Forge App Showcase
PDF
Meet the Forge Runtime
PDF
Take Action with Forge Triggers
PDF
Observability and Troubleshooting in Forge
PDF
Trusted by Default: The Forge Security & Privacy Model
PDF
Designing Forge UI: A Story of Designing an App UI System
PDF
Forge: Under the Hood
PDF
Access to User Activities - Activity Platform APIs
PDF
Design Your Next App with the Atlassian Vendor Sketch Plugin
PDF
Tear Up Your Roadmap and Get Out of the Building
PDF
Nailing Measurement: a Framework for Measuring Metrics that Matter
PDF
Building Apps With Color Blind Users in Mind
PDF
Creating Inclusive Experiences: Balancing Personality and Accessibility in UX...
PDF
Beyond Diversity: A Guide to Building Balanced Teams
PDF
The Road(map) to Las Vegas - The Story of an Emerging Self-Managed Team
PDF
Building Apps With Enterprise in Mind
PDF
Shipping With Velocity and Confidence Using Feature Flags
PDF
Build With Heart and Balance, Remote Work Edition
International Women's Day 2020
10 emerging trends that will unbreak your workplace in 2020
Forge App Showcase
Meet the Forge Runtime
Take Action with Forge Triggers
Observability and Troubleshooting in Forge
Trusted by Default: The Forge Security & Privacy Model
Designing Forge UI: A Story of Designing an App UI System
Forge: Under the Hood
Access to User Activities - Activity Platform APIs
Design Your Next App with the Atlassian Vendor Sketch Plugin
Tear Up Your Roadmap and Get Out of the Building
Nailing Measurement: a Framework for Measuring Metrics that Matter
Building Apps With Color Blind Users in Mind
Creating Inclusive Experiences: Balancing Personality and Accessibility in UX...
Beyond Diversity: A Guide to Building Balanced Teams
The Road(map) to Las Vegas - The Story of an Emerging Self-Managed Team
Building Apps With Enterprise in Mind
Shipping With Velocity and Confidence Using Feature Flags
Build With Heart and Balance, Remote Work Edition

Recently uploaded (20)

PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
cuic standard and advanced reporting.pdf
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Modernizing your data center with Dell and AMD
PPT
Teaching material agriculture food technology
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Encapsulation theory and applications.pdf
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PPTX
Cloud computing and distributed systems.
PDF
Unlocking AI with Model Context Protocol (MCP)
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Per capita expenditure prediction using model stacking based on satellite ima...
Understanding_Digital_Forensics_Presentation.pptx
cuic standard and advanced reporting.pdf
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Modernizing your data center with Dell and AMD
Teaching material agriculture food technology
Dropbox Q2 2025 Financial Results & Investor Presentation
The Rise and Fall of 3GPP – Time for a Sabbatical?
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Digital-Transformation-Roadmap-for-Companies.pptx
Encapsulation_ Review paper, used for researhc scholars
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Encapsulation theory and applications.pdf
Diabetes mellitus diagnosis method based random forest with bat algorithm
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Cloud computing and distributed systems.
Unlocking AI with Model Context Protocol (MCP)

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