JavaScript Heavy Applications

Slide 1

Slide 1 text

Coming to Grips With JavaScript Heavy Applications JS HEAVY APPS

Slide 2

Slide 2 text

WORKFLOW

Slide 3

Slide 3 text

LET'S GET OUR HOUSE IN ORDER.

Slide 4

Slide 4 text

SCOPING.

Slide 5

Slide 5 text

var load = function() { $.getJSON("/bootstrap", function(json) { // bootstrap }); }; $(document).ready(load); SCOPING.

Slide 6

Slide 6 text

(function() { var load = function() { $.getJSON("/bootstrap", function(json) { // bootstrap }); }; $(document).ready(load); })(); BUILD.

Slide 7

Slide 7 text

(function() { var load = function() { $.getJSON("/bootstrap", function(json) { // bootstrap }); }; $(document).ready(load); })(); BUILD.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

JSHINT.

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

JSHINT OPTIONS.

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

■ 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.

Slide 18

Slide 18 text

BROKEN WINDOWS.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

CONFIRM CODE QUALITY EVERYWHERE.

Slide 29

Slide 29 text

TESTING

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

BUILDING.

Slide 38

Slide 38 text

(function() { var load = function() { $.getJSON("/bootstrap", function(json) { // bootstrap }); }; $(document).ready(load); })(); BUILD.

Slide 39

Slide 39 text

SOURCEURL.

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

DEFAULT JS TOOLING COULD BE A LOT NICER.

Slide 53

Slide 53 text

INFRASTRUCTURE IS LARGELY IN PLACE.

Slide 54

Slide 54 text

SOME CLEANUP IS NECESSARY TO MAKE IT NICE.

Slide 55

Slide 55 text

HOW RAILS TALKS TO JAVASCRIPT

Slide 56

Slide 56 text

WHY DO WE LIKE RAILS?

Slide 57

Slide 57 text

BOILERPLATE. ActiveRecord Database render :json

Slide 58

Slide 58 text

CONVENTIONS. ActiveRecord Database primary key: id table name: comments foreign key: post_id

Slide 59

Slide 59 text

CONVENTIONS. render :json ActiveRecord attributes.to_json

Slide 60

Slide 60 text

SAME PROBLEM. ActiveRecord Database render :json browser client

Slide 61

Slide 61 text

Person = Model.extend({ fullName: function() { return this.firstName + ' ' + this.lastName } }); data = { "firstName": "Yehuda", "lastName": "Katz" } IN YOUR HEAD.

Slide 62

Slide 62 text

class PeopleController def show render json: Person.find(params[:id]) end end IN YOUR HEAD.

Slide 63

Slide 63 text

■ Include the root? ■ Include other resources in a response? ■ "Sideloading" ■ How to represent associations? ■ Avoiding duplication ■ Lazily populated ■ Bulk loading? IN REALITY.

Slide 64

Slide 64 text

{ "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.

Slide 65

Slide 65 text

{ "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.

Slide 66

Slide 66 text

{ "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.

Slide 67

Slide 67 text

{ "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.

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

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.