If you're a JavaScript developer, you can't miss this session. Atlassian Connect presents some challenges that might be new to JavaScript developers, like third-party cookie policy, window.postMessage, and sending data between multiple iframes, just to name a few. This session will address these challenges and offer practical tips from the trenches of building new add-ons with Atlassian Connect.

1. June 3-5, 2014 | Berlin, Germany

2. Chris Whittington, Javascript Developer, Atlassian
10 Things every front end developer
should know about connect

3. • No Inheritance of:!
• CSS!
• Javascript!
• No Cookies / localStorage / indexDB!
• No window resizing
Iframe sandbox?1

4. • History!
• Cookies!
• Resizing!
• modifying product DOM
Connect allows…1

5. • Documentation!
• Laid out per-module!
• Useful examples
Support & troubleshooting2
go.atlassian.com/connect

6. • use the drop down!
• select the frame to target
Debugging an iframe2

7. Firefox version 30+2

8. Other browsers2
Internet explorer 9+
cd("frame1");
As a last resort
window.frames[1].myFunction();

9. • Dialog!
• Inline Dialog
Webitem target options3

10. Insert title here

11. Inline dialog
"key": "hello-webitem-key",
"url": "/hello-world",
"name": {
"value": "hello webitem"
},
"location": "system.content.metadata",
"target": {
"type": "inlinedialog",
"options": {
"onHover": true,
"width": "200px",
"height": "200px"
}
}
3

12. !
"authentication": {
"type": "none"
}
No auth4

13. “AUI is a tailor-made frontend library for
creating a user interface according to the
Atlassian Design Guidelines”
Styling: courtesy of AUI5
go.atlassian.com/aui

14. Atlassian design guide
go.atlassian.com/adg
5

15. AUI sandbox
go.atlassian.com/aui-sandbox
5

16. • Query product data!
• JIRA issues!
• User data!
• Save custom JIRA issue properties!
• Save Confluence page properties
Using the REST API6

17. AP.require("request", function(request){
request({
url: "/rest/api/2/issue/TEST-1",
success: function(responseText){
alert(responseText);
}
});
});
REST example6

18. • ACE and ACplay provide token support!
• Tokens change per request!
• Expire after 15 minutes
Ajax requests with state7

19. Token exchange
Browser Server
AJAX request containing token
Response with new token
Initial page load with token
7

20. Token exchange
<meta name="acpt" content="{{token}}">
$.ajax({
url: "/my-content",
beforeSend: function( xhr ) {
xhr.setRequestHeader("x-acpt", token);
}
});
7

21. Updating the token
var token;
$.ajax({
url: "/my-content",
beforeSend: function( xhr ) {
xhr.setRequestHeader("x-acpt", token);
}
}).done( function(data, textStatus, jqXHR) {
token = jqXHR.getResponseHeader("x-acpt");
});
7

22. • Free yourself from callback hell!
• Subscribe for pre-defined events!
• Subscribe / emit custom events!
• Send data between frames!
Events are your friends8

23. iframe 1
!
AP.require(["events"], function (events) {
events.on("message", alert);
});
Event example
iframe 2
!
AP.require(["events"], function (events) {
events.emit("message", "hello world");
});
8

24. • Large applications need to keep state!
• Modelled on the history and HTML5 state functions!
• Only available on page modules!
Modifying the URL9

25. History Example
acHistory.pushState("example-state");
acHistory.getState();
acHistory.popState(function(e){
alert(e.oldURL + ' to ' + e.newURL);
});
9

26. • Do serve a static cache-able page for all.js!
• Do serve AUI from the CDN url in the connect docs
• Disable the resizer (if you can)!
• wrap with a class of “ac-content” if you can’t
Speed10
<script src="…/all.js" data-options="resize:false">

27. Questions?