June 3-5, 2014 | Berlin, Germany
@matthewjensen
Matthew Jensen, Confluence Ecosystem, Atlassian
Writing Connect Add-ons
for Confluence
• About Me:!
• Almost 7.5 years at Atlassian
Introduction
81%
19%
• About Me:!
• Almost 7.5 years at Atlassian!
• Over four years on Confluence
development
Introduction
81%
9%
10%
Why is it so hard to write a Confluence
plugin?
— Matthew Jensen, Confluence Ecosystem
”
“
Confluence Ecosystem
Confluence Platform
Spaces
Questions
?
??
?
?
?
Connect
and
Confluence
SAME
BUT DIFFERENT
SAME
Confluence Connect
DESIGN
SECURITY
PERFORMANCE
MACROS
HiliteMe
MACROS
Example
Consider a macro to pretty print your code
MACROS
Example
MACROS
This macro can make any code look great!
Example
http://bitbucket.org/mjensen/hilite-me-addon
MACROS
• Can be of any size!
• Can contain sensitive information
Macro Body
CONFIDENTIAL
MACROS
• Only use HTTP GET operations!
• Flexibility!
• This concern is new with Connect
Macro Bodies
MACROS
VSDynamic
Macros
Static
Macros
Dynamic Content Macros
Confluence Add onBrowser
Request
HTML
IFrame
Unformatted Code
Formatted
Requested
Returned
Macro Loaded
MACROS
• Dynamic Content Macros are good:!
• when they can take a while to load!
• when it involves a third-party integration!
• requires authentication to collect the body!
• when your macro is block macro
Dynamic Content Macros
MACROS
Static Content Macros
Confluence Add onBrowser
Request
Unformatted Code
Formatted
Code
Requested
Returned
MACROS
• Static Content Macros are good:!
• when you have many on the page!
• when the body is small or not sensitive!
• when you can avoid authentication
Static Content Macros
MACROS
• The Code Format Macro is a Dynamic Content Macro:!
• the body can be of any size!
• it integrates with a third party!
• its hard to predict the render time or the size of the output
Code Format Macro
MACROS
Confluence Connect
DESIGN
SECURITY
PERFORMANCE
MACROS
Example
• Consider a simple connect macro to include a status indicator
on your page!
• Status as a parameter, and no body.
PERFORMANCE
Example
PERFORMANCE
http://bitbucket.org/mjensen/status-addon
Static Content Macros
Confluence Add onBrowser
status=Awesome
Awesome
Requested
Returned
PERFORMANCE
Cached
• Design allows for aggressive cache settings!
• You should set appropriate cache headers for your all your
resources
Caching
res.setHeader(!
!! ! 'Cache-Control',!
!! ! ['private','max-age=3600']!
);
routes/index.js
PERFORMANCE
• A versioned URL allows you to control when your cached
content is refreshed
Versioned URLs
app.get('/v1/my-macro',!
function (req, res) { … }!
)
routes/index.js
PERFORMANCE
• The macro body can be passed as a parameter!
• This can allow you to use caching on your resources, even
when the body is needed
Body as a Parameter
"staticContentMacros": [{!
"url": "/macro?body={macro.body}", !
…!
}]
atlassian-connect.json
PERFORMANCE
Body as a Parameter
Confluence Add onBrowser
Rendered
Requested
Returned
body=Awesome
PERFORMANCE
Cached
• Body is limited to 128 characters!
• May appear in Confluence logs!
• May be tracked in caches or proxies
Body as a Parameter
PERFORMANCE
• Some integrations happen synchronously!
• Remote Conditions and Static Content Macros
Synchronous Callbacks
Confluence Add onBrowser
Request
Slow Response
!#$
PERFORMANCE
Confluence Connect
DESIGN
SECURITY
PERFORMANCE
MACROS
Do you need to store any data at all?
Data Storage
SECURITY
Web Security
Vulnerable area
Permitted to user Permitted to add on
SECURITY
READADMIN
• Use JWT for simple integration with Confluence REST api!
• Define your scopes to be as restrictive as possible
Web Security
{!
"key": "my-addon",!
"scopes": [ "read" ],!
"authentication": { "type": "jwt" },!
…!
} atlassian-connect.json
SECURITY
Confluence Connect
DESIGN
SECURITY
PERFORMANCE
MACROS
• Static add ons contain only html and javascript files
Static Add Ons
Confluence Add onBrowser
DESIGN
Coming Up
Blueprints
COMING UP
Blueprints
"blueprints": [{!
"key": "hello-world-blueprint",!
"name": { "value": "Hello World Blueprint" },!
"template": {!
"url": “/blueprints/hello-world.xml”!
},!
"icon": { "url": "/blueprints/hello-world.png" }!
}]
atlassian-connect.json
COMING UP
Blueprints
<table><tbody>!
<tr><th>Name</th><th>Date</th></tr>!
<tr>!
<td>!
<ac:placeholder>Enter today's date here</ac:placeholder>!
</td>!
<td>!
<at:var at:name="user"/>!
</td>!
</tr>!
</tbody></table>
atlassian-connect.json
COMING UP
Blueprints
COMING UP
Blueprints
COMING UP
Blueprints
https://bitbucket.org/mjensen/hello-blueprint-connect
https://ecosystem.atlassian.net/browse/AC-1082
Example Plugin
Blueprints Ongoing Work
Help us set the direction!
COMING UP
CQL
COMING UP
We need you!
Yes you!
COMING UP
Questions?
@matthewjensen
mjensen@atlassian.com

AtlasCamp 2014: Writing Connect Add-ons for Confluence