JavaScript Heavy Applications

Thoughts on JavaScript heavy applications in Rails

Transcript

1. Coming to Grips With JavaScript Heavy Applications JS HEAVY APPS
2. WORKFLOW
3. LET'S GET OUR HOUSE IN ORDER.
4. SCOPING.
5. var load = function() { $.getJSON("/bootstrap", function(json) { // bootstrap }); }; $(document).ready(load); SCOPING.
6. (function() { var load = function() { $.getJSON("/bootstrap", function(json) { // bootstrap }); }; $(document).ready(load); })(); BUILD.
7. (function() { var load = function() { $.getJSON("/bootstrap", function(json) { // bootstrap }); }; $(document).ready(load); })(); BUILD.
11. JSHINT.
15. JSHINT OPTIONS.
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.
18. BROKEN WINDOWS.
28. CONFIRM CODE QUALITY EVERYWHERE.
29. TESTING
37. BUILDING.
38. (function() { var load = function() { $.getJSON("/bootstrap", function(json) { // bootstrap }); }; $(document).ready(load); })(); BUILD.
39. SOURCEURL.
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.
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.
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.
52. DEFAULT JS TOOLING COULD BE A LOT NICER.
53. INFRASTRUCTURE IS LARGELY IN PLACE.
54. SOME CLEANUP IS NECESSARY TO MAKE IT NICE.
55. HOW RAILS TALKS TO JAVASCRIPT
56. WHY DO WE LIKE RAILS?
57. BOILERPLATE. ActiveRecord Database render :json
58. CONVENTIONS. ActiveRecord Database primary key: id table name: comments foreign key: post_id
59. CONVENTIONS. render :json ActiveRecord attributes.to_json
60. SAME PROBLEM. ActiveRecord Database render :json browser client
61. Person = Model.extend({ fullName: function() { return this.firstName + ' ' + this.lastName } }); data = { "firstName": "Yehuda", "lastName": "Katz" } IN YOUR HEAD.
62. class PeopleController def show render json: Person.find(params[:id]) end end IN YOUR HEAD.
63. ▪ Include the root? ▪ Include other resources in a response? ▪ "Sideloading" ▪ How to represent associations? ▪ Avoiding duplication ▪ Lazily populated ▪ Bulk loading? IN REALITY.
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.
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.
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.
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.
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.
75. THANK YOU.
76. QUESTIONS?
77. @WYCATS YEHUDAKATZ.COM