Postie.js & HTML postMessage API

Useful links:

* postMessage docs on MDN: https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
* Postie.js on GitHub: https://github.com/paulspringett/postie.js
* CoffeeScript: http://coffeescript.org/

Transcript

1. Postie.js & the HTML5 postMessage API Thursday, 13 June 13
2. Paul Springett Ruby & JavaScript CoffeeScript developer @Simpleweb @paulspringett github.com/paulspringett Thursday, 13 June 13
3. What is the postMessage API? Thursday, 13 June 13
4. “window.postMessage is a method for safely enabling cross-origin communication.” — Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage Thursday, 13 June 13
5. Enables communication between DOM windows Where those DOM windows are on different domains Thursday, 13 June 13
6. When is it useful? Thursday, 13 June 13
7. Bookmarklets or 3rd party libs where cross-origin communication is required Popup windows (same-origin) Thursday, 13 June 13
8. 3rd party site server yourdomain.com acme.com Thursday, 13 June 13
9. 3rd party site server yourdomain.com acme.com AJAX Thursday, 13 June 13
10. 3rd party site server yourdomain.com acme.com AJAX Thursday, 13 June 13
11. 3rd party site server embedded page yourdomain.com yourdomain.com/embed.html acme.com AJAX Thursday, 13 June 13
12. 3rd party site server embedded page yourdomain.com yourdomain.com/embed.html acme.com AJAX AJAX postMessage Thursday, 13 June 13
13. What problems does this solve? Thursday, 13 June 13
14. No need for CORS (Cross-Origin Resource Sharing) Cookies Thursday, 13 June 13
15. Code time Thursday, 13 June 13
16. otherWindow.postMessage(“hello world”, “*”) Dispatch a message to another window message targetOrigin Thursday, 13 June 13
17. window.addEventListener(“message”, function(event) { event.message => “hello world” event.origin => “http://acme.com” event.source => window } , false); Receive the message Thursday, 13 June 13
18. Shortcomings of postMessage Thursday, 13 June 13
19. Can only send strings, no rich data No built in response or callback Thursday, 13 June 13
20. JSON.stringify & JSON.parse event.source Thursday, 13 June 13
21. Introducing Postie.js Thursday, 13 June 13
22. Provides request / response format using callbacks Send rich data (JSON) Handles creating iframe, onload Thursday, 13 June 13
23. 3rd party site server embedded page yourdomain.com yourdomain.com/embed.html acme.com AJAX AJAX postMessage Thursday, 13 June 13
24. var server = new Postie.Server({ getFoo: function(sendResponse) { sendResponse(“Here is your foo”); }, ... }); server.listen(); Setup the server Thursday, 13 June 13
25. var client = new Postie.Client( “http://yourdomain.com/embed.html” ); client.ready(function() { client._endpoints => [“getFoo”, “getUser”] }); Setup the client Thursday, 13 June 13
26. client.ready(function() { client.getFoo(function(response) { response => “Here is your foo” }); }); Make requests to the server Thursday, 13 June 13
27. var server = new Postie.Server({ getUser: function(userID, sendResponse) { $.getJSON(“/users”, { id: userID }, function(data, status, xhr) { sendResponse(data); } ); } }); server.listen(); Setup the server Thursday, 13 June 13
28. client.ready(function() { client.getUser(123, function(response) { response => {“id”:123, “name”:”Paul”} }); }); Make requests to the server Thursday, 13 June 13
29. Postie.js is CoffeeScript CoffeeScript is awesome, go try it out http://coffeescript.org/ http://js2coffee.org/ http://coffeescript.codeschool.com/ Thursday, 13 June 13
30. Questions? Thursday, 13 June 13