So, you have a Server App developed with Atlassian User Interface (AUI) and now want to know how to transition it to Atlaskit. Do you also want to move it to Cloud and re-use the UI without massive headaches? Naiara Martin, of Comalatech, has been there, done that.

1. NAIARA MARTIN | DESIGN TECHNOLOGIST | COMALATECH | @NAMI_EIKU
From AUI to AtlasKit
Streamlining Development for Server & Cloud Apps

2. Platinum Top Vendor
10+ years in the ecosystem

4. Workflows Lite
Confluence Server
Confluence Cloud
Comala Workflows Family
Workflows
Confluence Server
Coming soon!
Approvals
Confluence Server
Confluence Cloud

5. Agenda
From AUI to AtlasKit
Working with Server
From Server to Cloud
Next Steps
Q&A

6. From AUI to AtlasKit
embracing the reactive UI

7. AtlasKit
React
Redux
AUI / AJS
Backbone
Underscore
jQuery

8. AtlasKitAUI / AJS

9. Is AtlasKit for you?
If your add-on does not benefit from a
reactive interface,
sticking with AUI is a perfectly
reasonable choice.

12. ATLASKITAJS
💔

13. Agenda
From AUI to AtlasKit
Working with Server
From Server to Cloud
Next Steps
Q&A

14. Working with Server
as if it was Cloud

15. Working with
Server
Layout
Dependencies
Procedure
Iframes
To load our Atlaskit Apps
XDM
To enable communication between frames
AJS.Params
To provide context information to our iframes

16. Working with
Server
Layout
Dependencies
Procedure
AUI & Backbone
We’re still tied to the stack embedded in Confluence
Iframe wrappers
Custom Backbone Views for Flags, Modals & Inline
Dialogs
Keeping updates under control
A single javascript file that we require as a dependency

17. Working with
Server
Layout
Dependencies
Procedure
Migration
Using iframes we’re able to migrate entire screens or
only small pieces to the new stack.
DarkFeatures
• Keep up with the release frequency
• Gather feedback before releasing to the public

18. Backbone View
Our custom backbone view renders both the trigger and
the Inline Dialog
Parent Frame

19. Backbone View
Our custom backbone view renders both the trigger and
the Inline Dialog
trigger
Inline Dialog
Parent Frame

20. Atlaskit App
The iframe within the Inline
Dialog renders one of our
Atlaskit Apps
Parent Frame

21. Atlaskit App
The iframe within the Inline
Dialog renders one of our
Atlaskit Apps
Parent Frame

22. XDM
The approve button sends a postMessage event to the
parent frame
Parent Frame

23. XDM
The approve button sends a postMessage event to the
parent frame
postMessage
Parent Frame

24. Backbone View
The parent frame calls a new Backbone
View to render a Modal Dialog
Parent Frame

25. Backbone View
The parent frame calls a new Backbone
View to render a Modal Dialog
Parent Frame

26. Atlaskit App
The iframe within the Modal Dialog loads a different
Atlaskit AppParent Frame

27. Atlaskit App
The iframe within the Modal Dialog loads a different
Atlaskit AppParent Frame

28. XDM
A success or failure message
is sent to the parent frame
Parent Frame

29. XDM
A success or failure message
is sent to the parent frame
Parent Frame
postMessage

30. Backbone View
The parent frame renders a
AJS.Flag element with the provided
message
Parent Frame

31. Parent Frame
Backbone View
The parent frame renders a
AJS.Flag element with the provided
message

32. Agenda
From AUI to AtlasKit
Working with Server
From Server to Cloud
Next Steps
Q&A

33. From Server to Cloud
the rise of Workflowskit

34. Server
Platform + App @ customer
Version compatibility
Everything is “hackable”
Cloud
Platform @ Atlassian
App @ vendor
Limited to module availability
Server vs Cloud

35. create: {
if (isCloud()) {
// code for cloud
} else {
// code for server
}
}
Our initial
approach
100% shared
codebase
difficult to
debug
noisy and heavy
bundles

36. Workflowskit
Common UI, separate implementations

37. What is it?
An NPM library of reusable React
components divorced from business
logic that can be shared across Server
and Cloud.
Workflowskit
What is it?
Component
types
Wrapping
Atlaskit
Development
Usage

38. Component typesWorkflowskit
What is it?
Component
types
Wrapping
Atlaskit
Development
Usage
• Simple functional components
• State managed components
• Complex app-like components

39. Workflowskit
What is it?
Component
types
Wrapping
Atlaskit
Development
Usage
Component types
• Simple functional components
• State managed components
• Complex app-like components

40. Workflowskit
What is it?
Component
types
Wrapping
Atlaskit
Development
Usage
Component types
• Simple functional components
• State managed components
• Complex app-like components

41. Comalakit
A set of wrappers for Atlaskit
components that allow us to deal with
dependency updates
Workflowskit
What is it?
Component
types
Wrapping
Atlaskit
Development
Usage

42. Storybook
We use storybook for:
• Component development
• Manual unit testing
• Internal documentation
Workflowskit
What is it?
Component
types
Wrapping
Atlaskit
Development
Usage

43. Usage
We export the components as ESM
modules and use tree shaking with
Webpack 4 to generate the bundles
with only the required code.
Workflowskit
What is it?
Component
types
Wrapping
Atlaskit
Development
Usage

46. Agenda
From AUI to AtlasKit
Working with Server
From Server to Cloud
Next Steps
Q&A

47. Next steps
Implementing features with Server & Cloud in mind

48. Server ≠ Cloud
Limitations on both
environments may require
different solutions.
Think Cloud First
But don’t punish your
Server customers.
Don’t overshare
If components get too
complex, break them down
or even use different
components.
Consider:

49. Agenda
From AUI to AtlasKit
Working with Server
From Server to Cloud
Next Steps
Q&A

50. Questions?

51. NAIARA MARTIN | DESIGN TECHNOLOGIST | COMALATECH | @NAMI_EIKU
Thank you!