Embed Size (px)
DESCRIPTION
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.
Citation preview
June 3-5, 2014 | Berlin, Germany
Chris Whittington, Javascript Developer, Atlassian
10 Things every front end developer should know about connect
• No Inheritance of:!• CSS!• Javascript!
• No Cookies / localStorage / indexDB!• No window resizing
Iframe sandbox?1
• History!• Cookies!• Resizing!• modifying product DOM
Connect allows…1
• Documentation!• Laid out per-module!
• Useful examples
Support & troubleshooting2
go.atlassian.com/connect
• use the drop down!• select the frame to target
Debugging an iframe2
Firefox version 30+2
Other browsers2
Internet explorer 9+ cd("frame1");
As a last resort window.frames[1].myFunction();
• Dialog!• Inline Dialog
Webitem target options3
Insert title here
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
!
"authentication": {
"type": "none"
}
No auth4
“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
• Query product data!• JIRA issues!• User data!
• Save custom JIRA issue properties!• Save Confluence page properties
Using the REST API6
AP.require("request", function(request){
request({
url: "/rest/api/2/issue/TEST-1",
success: function(responseText){
alert(responseText);
}
});
});
REST example6
• ACE and ACplay provide token support!• Tokens change per request!• Expire after 15 minutes
Ajax requests with state7
Token exchange
Browser ServerAJAX request containing token
Response with new token
Initial page load with token
7
Token exchange<meta name="acpt" content="{{token}}">
$.ajax({
url: "/my-content",
beforeSend: function( xhr ) {
xhr.setRequestHeader("x-acpt", token);
}
});
7
Updating the tokenvar token;
$.ajax({
url: "/my-content",
beforeSend: function( xhr ) {
xhr.setRequestHeader("x-acpt", token);
}
}).done( function(data, textStatus, jqXHR) {
token = jqXHR.getResponseHeader("x-acpt");
});
7
• Free yourself from callback hell!• Subscribe for pre-defined events!• Subscribe / emit custom events!• Send data between frames!
Events are your friends8
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
• Large applications need to keep state!• Modelled on the history and HTML5 state functions!• Only available on page modules!
Modifying the URL9
History Example
acHistory.pushState("example-state");
acHistory.getState();
acHistory.popState(function(e){ alert(e.oldURL + ' to ' + e.newURL); });
9
• 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">
Questions?
