Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OPTIMERA STHLM! Stefan Pettersson

1,127 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

OPTIMERA STHLM! Stefan Pettersson

  1. 1. Faster websites with AJAX REST and architecture Optimera STHLM 2010-05-31
  2. 2. Stefan Pettersson
  3. 3. Stefan Pettersson @stpe stefpet@gmail.com http://stpe.se
  4. 4. HTML CSS JavaScript
  5. 5. <a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript
  6. 6. <a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly
  7. 7. <a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer DB
  8. 8. <a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer HEAVY Java? DB
  9. 9. <a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer Weird .NET? DB
  10. 10. <a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer Chaotic PHP? DB
  11. 11. <a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer Maybe MVC...? DB
  12. 12. View Model Controller
  13. 13. 2001?
  14. 14. C C C C C
  15. 15. V V V V V V V V C C C C C
  16. 16. V V V V V V V V V V C C C C C
  17. 17. V V V V V V V V M M V M M M M M V M M M C C C C C
  18. 18. V V V V V V V V DAO M DAO M V M M DAO M M M V DAO DAO M M DAO M DAO DAO DAO DAO C C C C C
  19. 19. V V V V V V V V PM PM PM PM DAO M DAO M V PM PM PM M M PM DAO M M M V DAO DAO M PM M DAO M DAO PM DAO DAO DAO C C C C C
  20. 20. Jaha?
  21. 21. Separation of concerns
  22. 22. Presentationslogik i browsern
  23. 23. Separera data från flöde
  24. 24. AJAX + REST
  25. 25. Enklare arkitektur
  26. 26. Flexiblare arkitektur
  27. 27. Snabbare sidor
  28. 28. HTML CSS JavaScript RESTful Web Web Server Service DB
  29. 29. HTML CSS JavaScript Template RESTful Web Web Server Service DB
  30. 30. HTML CSS JavaScript Template Data RESTful Web Web Server Service DB
  31. 31. Template?
  32. 32. The fundamentalist way...
  33. 33. <!DOCTYPE html> <html> <head> <title>ThinServer</title> <script src=”bootstrap.js”></script> </head> <body> </body> </html>
  34. 34. REST
  35. 35. Representational State Transfer
  36. 36. No bullshit web services!
  37. 37. HTTP
  38. 38. http://server.com/item/17/
  39. 39. XML
  40. 40. JSON
  41. 41. AJAX
  42. 42. XMLHttpRequest // get XHR object (older IE needs workaround) var xhr = new XMLHttpRequest(); xhr.open('GET', '/item/17/', true); xhr.onreadystatechange = function(event) { if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(xhr.responseText); } else { console.log("Fail"); } } }; // initiate request xhr.send(null);
  43. 43. Same Domain Policy
  44. 44. JSONP
  45. 45. {“data”: [1, 2, 3]}
  46. 46. callback({“data”: [1, 2, 3]});
  47. 47. callback({“data”: [1, 2, 3]}); <script type=”text/javascript” src=”http://d.com/item/17/?callback=callback”> </script>
  48. 48. Browser Data RESTful Web Service
  49. 49. Browser Data RESTful Web Service Database
  50. 50. Browser Data RESTful Web Service Enterprise SOA Producers Consumers Queues Buses
  51. 51. Browser Data RESTful Web Service NoSQL
  52. 52. Browser Data RESTful Web Service
  53. 53. Internal System Data RESTful Web Service
  54. 54. Web Server Data RESTful Web Service
  55. 55. Mobile Data RESTful Web Service
  56. 56. One more thing...
  57. 57. document.write is evil
  58. 58. Friendly IFrame
  59. 59. http://blogg.aftonbladet.se/dev/
  60. 60. Stefan Pettersson CEO @ Expansive Worlds AB http://www.expansiveworlds.com

×