AtlasCamp 2014: 10 Things a Front End Developer Should Know About Connect

1,230 views
1,101 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,230
On SlideShare
0
From Embeds
0
Number of Embeds
569
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

AtlasCamp 2014: 10 Things a Front End Developer Should Know About Connect

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

×