JavaScript Heavy Applications

JavaScript Heavy Applications

Thoughts on JavaScript heavy applications in Rails

428167a3ec72235ba971162924492609?s=128

Yehuda Katz

May 03, 2012
Tweet

Transcript

  1. 6.

    (function() { var load = function() { $.getJSON("/bootstrap", function(json) {

    // bootstrap }); }; $(document).ready(load); })(); BUILD.
  2. 7.

    (function() { var load = function() { $.getJSON("/bootstrap", function(json) {

    // bootstrap }); }; $(document).ready(load); })(); BUILD.
  3. 8.
  4. 9.
  5. 10.
  6. 11.
  7. 12.
  8. 13.
  9. 14.
  10. 16.
  11. 17.

    ▪ Every le gets a scratchpad scope. ▪ Setting or

    getting an unexpected global is an editor error. ▪ You can control "unexpected global" on a per-project or per- le scope. NET RESULT.
  12. 19.
  13. 20.
  14. 21.
  15. 22.
  16. 23.
  17. 24.
  18. 25.
  19. 26.
  20. 27.
  21. 29.
  22. 30.
  23. 31.
  24. 32.
  25. 33.
  26. 34.
  27. 35.
  28. 36.
  29. 37.
  30. 38.

    (function() { var load = function() { $.getJSON("/bootstrap", function(json) {

    // bootstrap }); }; $(document).ready(load); })(); BUILD.
  31. 40.
  32. 41.
  33. 42.
  34. 43.

    register("app.js", "(function() {\nvar load = function() {\n $.getJSON("/bootstrap", function(json) {\n

    // bootstrap\n }); \n};\n\n$(document).ready(load);\n});\n//@ sourceURL=app.js"); BUILD.
  35. 44.

    register("app.js", "(function() {\nvar load = function() {\n $.getJSON("/bootstrap", function(json) {\n

    // bootstrap\n }); \n};\n\n$(document).ready(load);\n});\n//@ sourceURL=app.js"); registered = { "app.js": ... }; BUILD.
  36. 45.

    register("app.js", "(function() {\nvar load = function() {\n $.getJSON("/bootstrap", function(json) {\n

    // bootstrap\n }); \n};\n\n$(document).ready(load);\n});\n//@ sourceURL=app.js"); registered = { "app.js": ... }; require("app.js"); // jQuery.globalEval(registered["app.js"]); BUILD.
  37. 46.
  38. 47.
  39. 48.
  40. 49.
  41. 50.
  42. 51.
  43. 61.

    Person = Model.extend({ fullName: function() { return this.firstName + '

    ' + this.lastName } }); data = { "firstName": "Yehuda", "lastName": "Katz" } IN YOUR HEAD.
  44. 63.

    ▪ Include the root? ▪ Include other resources in a

    response? ▪ "Sideloading" ▪ How to represent associations? ▪ Avoiding duplication ▪ Lazily populated ▪ Bulk loading? IN REALITY.
  45. 64.

    { "post": { "id": 1, "title": "First post", "body": "Body

    of the first post", "author_id": 1, "comments": [ 1, 2 ] }, "comments": [ { "id": 1, "body": "first!", "author_id": 1 }, { "id": 2, "body": "second", "author_id": 2 } }], "authors": [ { "id": 1, "name": "Yehuda Katz" }, { "id": 2, "name": "Tom Dale" } ] } MY OPINION.
  46. 65.

    { "post": { "href": "/posts/1", "title": "First post", "body": "Body

    of the first post", "author_href": "/people/1", "comments": [ "/comments/1", "/comments/2" ] }, "comments": [ { "href": "/comments/1", "body": "first!", "author_href": "/people/1" }, { "id": "/comments/2", "body": "second", "author_href": "/people/2" } }], "authors": [ { "href": "/people/1", "name": "Yehuda Katz" }, { "href": "/people/2", "name": "Tom Dale" } ] } USING HREFS.
  47. 66.

    { "posts": [{ "id": 1, "title": "First post", "body": "Body

    of the first post", "author_id": 1, }, { "id": 2, "title": "Second post", "body": "Body of the second post", "author_id": 2 }, { "id": 3, "title": "Third post", "body": "Body of the third post", "author_id": 1 }], "authors": [ { "id": 1, "name": "Yehuda Katz" }, { "id": 2, "name": "Tom Dale" } ] } MY OPINION.
  48. 67.

    { "posts": [{ "href": "/posts/1", "title": "First post", "body": "Body

    of the first post", "author_href": "/people/1", }, { "href": "/posts/2", "title": "Second post", "body": "Body of the second post", "author_href": "/people/2" }, { "href": "/posts/3", "title": "Third post", "body": "Body of the third post", "author_id": "/people/1" }], "authors": [ { "href": "/people/1", "name": "Yehuda Katz" }, { "href": "/people/2", "name": "Tom Dale" } ] } USING HREFS.
  49. 68.
  50. 69.
  51. 70.
  52. 71.
  53. 72.
  54. 73.
  55. 74.

    GETTING THIS FINISHED AND PACKAGED NICELY IS MY PASSION THESE

    DAYS. I hope I have illustrated that significant workflow improvements are possible and desirable. My biggest gripe with the Rails asset pipeline work so far is that it hasn't really tried to reach for the kinds of workflow improvements we have come to expect from Rails. Concatenating files is nice, but it barely scratches the surface.