0:00:16.000,0:00:19.400
MIKE MOORE: Hello. My name is Mike Moore,

0:00:19.439,0:00:22.970
and I'm gonna talk about real-time Rails with[br]Sync.

0:00:22.970,0:00:28.500
So, hi. Hello. How's Rails Conf?

0:00:28.500,0:00:30.750
My name is Mike Moore. You might know be

0:00:30.750,0:00:33.579
as blowmage or blowmage depending on how you[br]want

0:00:33.579,0:00:36.230
to pronounce it. It doesn't matter.

0:00:36.230,0:00:38.730
I am very happy to be here. I'm leaving

0:00:38.730,0:00:41.220
in about an hour to fly home, so I'm

0:00:41.220,0:00:44.380
only here for this. And I'm a hundred percent,

0:00:44.380,0:00:47.180
totally prepared for this. I was not up all

0:00:47.180,0:00:50.070
night. I did not make these slides twenty[br]minutes

0:00:50.070,0:00:52.000
ago. Yeah.

0:00:52.000,0:00:58.920
So. Who likes live coding? Three people! All[br]right.

0:00:58.920,0:01:01.430
K. We're gonna talk about Sync. Sync is a

0:01:01.430,0:01:05.509
fantastic little Rails engine written by Chris[br]McCord. Is

0:01:05.509,0:01:07.869
Chris, where's Chris? Is he here? There he[br]is.

0:01:07.869,0:01:09.090
If you don't like it - that guy right

0:01:09.090,0:01:12.219
there. You can find it on the GitHub. That's

0:01:12.219,0:01:15.149
at chrismccord slash sync.

0:01:15.149,0:01:18.270
So yeah. Let's do this.

0:01:18.270,0:01:24.210
All right. So I have a. I have an

0:01:24.210,0:01:31.210
app. And I'm just gonna load it up here.

0:01:32.780,0:01:36.380
And it's a very simple app. I was gonna

0:01:36.380,0:01:39.439
have a little bit more interesting app to[br]demonstrate

0:01:39.439,0:01:41.979
this, but I ran into an issue. And maybe

0:01:41.979,0:01:43.649
we'll talk about that at the end. If we

0:01:43.649,0:01:45.670
have time.

0:01:45.670,0:01:48.880
But this is a very simple bloggish type of

0:01:48.880,0:01:52.939
application, where we've got posts, we've[br]got comments, we've

0:01:52.939,0:01:56.810
got users, and some tags. Oh, and also, this

0:01:56.810,0:02:00.359
is the git repo for Sync. So please check

0:02:00.359,0:02:01.329
it out.

0:02:01.329,0:02:04.289
K, so. I want to just demonstrate this very

0:02:04.289,0:02:06.829
simple Rails application. We'll go look at[br]a little

0:02:06.829,0:02:09.649
bit of code, and we're going to, we're gonna

0:02:09.649,0:02:12.600
add Sync to this application, and we're gonna[br]turn

0:02:12.600,0:02:17.460
it from a very classic, kind of CRUD-y Rails

0:02:17.460,0:02:19.740
application into real time.

0:02:19.740,0:02:24.590
So. A little, one note before we start on

0:02:24.590,0:02:28.980
code quality, this app is intentionally unfactored.[br]So there

0:02:28.980,0:02:32.470
is lots of places where you might apply some

0:02:32.470,0:02:35.340
design in an application that I have not,[br]for

0:02:35.340,0:02:37.360
this. But, the reason for that is so that

0:02:37.360,0:02:40.670
I can, we can refactor it to Sync a

0:02:40.670,0:02:43.170
little bit easier, without having to unfactor[br]it along

0:02:43.170,0:02:43.920
the way.

0:02:43.920,0:02:45.920
So, we'll go ahead and get started. So we

0:02:45.920,0:02:50.070
have a series of posts. And then when you

0:02:50.070,0:02:52.600
click on a post, you go to the post's

0:02:52.600,0:02:56.930
show action. On that post's show action, we've[br]got

0:02:56.930,0:03:00.930
a series of comments. That is no different[br]than

0:03:00.930,0:03:05.680
going to slash comments, other than it just[br]looks

0:03:05.680,0:03:08.120
a little bit different. So. We're not gonna[br]need

0:03:08.120,0:03:10.460
to be looking at the comments on the actual

0:03:10.460,0:03:13.580
resource. We're gonna be looking at it on[br]the

0:03:13.580,0:03:19.630
post resource. And that's it. So, you know,[br]say,

0:03:19.630,0:03:24.520
Hello RailsConf. Woo. Oh. Also, disclaimer,[br]I cannot type

0:03:24.520,0:03:29.090
in public. So this is gonna be very interesting.

0:03:29.090,0:03:30.240
So I can go ahead and I can add

0:03:30.240,0:03:34.920
a comment. I can delete a comment, because[br]it's

0:03:34.920,0:03:39.450
owned by me. I can go into posts that

0:03:39.450,0:03:42.950
I own and I can edit those posts. So

0:03:42.950,0:03:45.500
like that, right. Pretty simple.

0:03:45.500,0:03:52.500
OK. So let's bump this out a little bit.

0:03:52.610,0:03:56.060
So here is our application. You, same thing[br]as

0:03:56.060,0:03:59.340
we saw before. Our home controller is the,[br]the

0:03:59.340,0:04:03.130
home page. That showed the Jumbotron there.[br]And this

0:04:03.130,0:04:06.819
is all very bootstrappy. I'm sorry.

0:04:06.819,0:04:10.490
Here's our posts controller. Almost straight[br]out of the

0:04:10.490,0:04:17.490
box Rails resource here. Our comments controller[br]is nested

0:04:18.930,0:04:23.870
underneath our posts controller. We've got[br]a little bit

0:04:23.870,0:04:29.430
of additional calls here for access. Those[br]are defined

0:04:29.430,0:04:32.710
in helpers. This may not be how you would

0:04:32.710,0:04:35.670
do this in a real application, but for demonstration

0:04:35.670,0:04:39.170
purposes it, it fits the need. And I can

0:04:39.170,0:04:42.740
use these methods in the controller and also[br]in

0:04:42.740,0:04:45.150
the views.

0:04:45.150,0:04:48.190
OK. So let's take a look at the routes.

0:04:48.190,0:04:50.150
So you see we're not, we're not, we're not

0:04:50.150,0:04:56.130
cheating. So we've got nested comments under[br]posts. We've

0:04:56.130,0:04:58.040
also got tags. Let's take a look at tags

0:04:58.040,0:05:01.840
real quick. Tags are just a string attached[br]to

0:05:01.840,0:05:05.370
these various posts, and so if you click on

0:05:05.370,0:05:07.740
the Rails tag, you see there are three of

0:05:07.740,0:05:10.970
the four posts that are tagged with Rails.[br]And

0:05:10.970,0:05:15.190
then there is a list. So.

0:05:15.190,0:05:18.600
Let's say that we have this application, and[br]we

0:05:18.600,0:05:21.570
want to make it more awesome than it is

0:05:21.570,0:05:24.910
today. One of the things we really want is

0:05:24.910,0:05:28.810
we want to approximate what some of the apps

0:05:28.810,0:05:33.800
that are using heavy Javascript MVC frameworks[br]are accomplishing

0:05:33.800,0:05:38.250
with, with their responsiveness, and just[br]kind of like

0:05:38.250,0:05:41.400
updating the UI because something changed.

0:05:41.400,0:05:46.290
And so instead of basically rewriting our[br]entire frontend,

0:05:46.290,0:05:49.230
our entire presentation layer, and then also[br]creating an

0:05:49.230,0:05:53.940
API to support that Javascript presentation[br]layer, it's my

0:05:53.940,0:05:58.400
conjecture that, conj- it's my assertion here[br]that we

0:05:58.400,0:06:02.050
can use Rails the way Rails is intended to

0:06:02.050,0:06:06.220
be used, but still gain a good sub, a

0:06:06.220,0:06:10.190
good, large portion of, of this type of functionality.

0:06:10.190,0:06:10.889
So.

0:06:10.889,0:06:14.070
Let's go ahead and jump in.

0:06:14.070,0:06:17.530
All right, so the first thing we want to

0:06:17.530,0:06:22.020
do is open the gemfile and we want to

0:06:22.020,0:06:27.530
add a few gems. The first one is faye.

0:06:27.530,0:06:28.980
And the reason we need to add faye is

0:06:28.980,0:06:34.130
just for, for development. So we're gonna[br]use faye

0:06:34.130,0:06:36.350
for our browser to talk over websocket back[br]to

0:06:36.350,0:06:40.800
the server. And then faye also needs thin,[br]but

0:06:40.800,0:06:44.480
we don't like thin very much, so we're gonna

0:06:44.480,0:06:49.770
not require it by default. And then the last

0:06:49.770,0:06:53.490
one is Sync. K.

0:06:53.490,0:06:58.440
So we'll bundle install that. Told you I couldn't

0:06:58.440,0:07:02.290
type. There you go.

0:07:02.290,0:07:04.270
So now we've got, we've added sync to the

0:07:04.270,0:07:07.620
application. We need to go a couple steps[br]further.

0:07:07.620,0:07:09.860
The first is, in our application file, we[br]need

0:07:09.860,0:07:15.220
to add the Javascript for Sync. And so this

0:07:15.220,0:07:17.970
will be loaded as part of our normal application

0:07:17.970,0:07:22.250
Javascript everywhere. It will get pulled[br]in by the,

0:07:22.250,0:07:26.820
the, by the asset pipeline. And then also[br]we

0:07:26.820,0:07:31.120
need to go into our layout, our main application

0:07:31.120,0:07:35.080
layout, and there's another Javascript tag[br]that we need

0:07:35.080,0:07:40.830
to add. And that is going to be, we're

0:07:40.830,0:07:45.949
gonna use a little helper from Sync, adapter[br]Javascript

0:07:45.949,0:07:51.150
url.

0:07:51.150,0:07:53.030
And we'll talk about what all these mean,[br]hopefully

0:07:53.030,0:07:56.949
by the end of this. OK. Now we're good

0:07:56.949,0:08:00.389
to go. So what we need to do, before

0:08:00.389,0:08:04.030
we do anything else, is we need to start

0:08:04.030,0:08:08.810
up faye to run our web socket connections.[br]So

0:08:08.810,0:08:10.639
we can do that pretty easily. We can just

0:08:10.639,0:08:14.949
say rack up Sync.

0:08:14.949,0:08:21.949
Oh. I'm sorry. One more thing. We need to

0:08:24.040,0:08:31.040
just take a look at our generators. Oh, gosh.

0:08:31.110,0:08:35.130
K. There is now this install generator that[br]was

0:08:35.130,0:08:38.610
added by, by sync, so let's go ahead and

0:08:38.610,0:08:41.729
run that generator. That will create a rackup[br]file

0:08:41.729,0:08:43.700
and a configuration file.

0:08:43.700,0:08:50.540
So. Now that we have that, we can, we

0:08:50.540,0:08:54.930
can run this. Now this is going to run

0:08:54.930,0:08:58.070
faye in the background, and then here we can

0:08:58.070,0:09:01.810
just run our application. Come back over here[br]and

0:09:01.810,0:09:04.100
refresh and nothing has changed, but it all[br]continues

0:09:04.100,0:09:07.960
to work. So faye is running, but we're not

0:09:07.960,0:09:10.200
actually talking to it. But we know that it,

0:09:10.200,0:09:13.550
it's up. So. That's the important first step.

0:09:13.550,0:09:17.279
I don't particularly like having to open up[br]two

0:09:17.279,0:09:19.760
consoles, so one of the things I will do

0:09:19.760,0:09:22.510
is I'm gonna create a new file called, a

0:09:22.510,0:09:29.330
new proc file, and then inside of it I'm

0:09:29.330,0:09:36.330
gonna have a web entry. So you can't see

0:09:38.010,0:09:40.290
this, but this, I have to scooch down to,

0:09:40.290,0:09:41.620
so you can hear me, and it's killing my

0:09:41.620,0:09:41.770
back.

0:09:41.770,0:09:48.770
AUDIENCE: I think you can just stand up and

0:09:48.930,0:09:51.060
do it.

0:09:51.060,0:09:58.060
M.M.: Are you sure? All right. Exec, so rackup,

0:09:59.089,0:10:06.000
sync conf, sync ru. OK.

0:10:06.000,0:10:07.370
The other thing we need to do is come

0:10:07.370,0:10:14.370
back over here and add foreman. K. So, so

0:10:16.690,0:10:20.240
install that. Foreman is a gem written by[br]Heroku,

0:10:20.240,0:10:21.870
and so if you have lots of services that

0:10:21.870,0:10:25.600
you are coordinating, Foreman's a good way[br]to, to

0:10:25.600,0:10:27.860
start all of those. So now instead of going

0:10:27.860,0:10:31.600
to multiple terminals to open up, open this[br]up,

0:10:31.600,0:10:35.730
I can just say Foreman start, and it will

0:10:35.730,0:10:40.190
start both. So that's kind of handy.

0:10:40.190,0:10:43.060
All right. Let's take a look at one of

0:10:43.060,0:10:48.620
these, one of these pages. What I want is

0:10:48.620,0:10:50.300
I want to be able to come over here

0:10:50.300,0:10:53.330
onto this page and I want to add a

0:10:53.330,0:10:55.430
new comment, and then I want people to see

0:10:55.430,0:11:01.610
it as soon as it shows up, right.

0:11:01.610,0:11:04.980
So if I say see me, my, my browser

0:11:04.980,0:11:08.680
refreshes. But all of these browsers over[br]here won't

0:11:08.680,0:11:15.680
necessarily. So let's go to this guy. K.

0:11:24.430,0:11:31.430
So if I, for example, delete this one, it

0:11:33.770,0:11:35.470
still shows up in these other browsers. And[br]I

0:11:35.470,0:11:38.170
would really like it if it would disappear[br]as

0:11:38.170,0:11:45.170
soon as we ask it to. So let's make

0:11:45.300,0:11:48.740
that happen. To do that, we are going to

0:11:48.740,0:11:55.390
register our ActiveRecord models to be synced[br]in browsers.

0:11:55.390,0:11:56.740
And Sync is going to take care of all

0:11:56.740,0:12:00.029
of the communication from our Rails application,[br]all the

0:12:00.029,0:12:01.779
way down to the browsers for us.

0:12:01.779,0:12:05.140
So, to do that, there's a couple of things

0:12:05.140,0:12:09.940
we want to change. First is, we map up

0:12:09.940,0:12:14.470
our comment model. And we're gonna add this[br]little

0:12:14.470,0:12:17.339
declaration called sync_all to it. This is[br]going to

0:12:17.339,0:12:20.209
insert the sync DSL into the model. So now

0:12:20.209,0:12:22.430
whenever the model changes, it will try to[br]notify

0:12:22.430,0:12:25.990
the browsers that something has changed. We[br]also, we

0:12:25.990,0:12:30.640
need to open up our controller, and we need

0:12:30.640,0:12:37.640
to enable sync here as well. K.

0:12:38.430,0:12:41.360
And this is, again, just to, so the controller

0:12:41.360,0:12:43.209
knows to look for all of the messages from

0:12:43.209,0:12:48.589
the models that something has updated and[br]respond appropriately.

0:12:48.589,0:12:53.870
Let's take a look at the post show action.

0:12:53.870,0:12:58.279
Like I said, this is a mess of HTML.

0:12:58.279,0:13:00.040
This is not necessarily how I would do it,

0:13:00.040,0:13:03.360
but this is how it is. We've got kind

0:13:03.360,0:13:06.300
of two main areas of the page. The first

0:13:06.300,0:13:08.420
is at the top, where you've got all the

0:13:08.420,0:13:11.980
content for the blog post. So the title, the

0:13:11.980,0:13:15.779
user, those tags that are on the, the blog

0:13:15.779,0:13:19.649
post. Some editing links, if they are there,[br]and

0:13:19.649,0:13:23.459
then also the markdown of the body. OK.

0:13:23.459,0:13:26.290
Then after that we've got our comments section,[br]which

0:13:26.290,0:13:29.040
is going to iterate through the comments,[br]and because

0:13:29.040,0:13:31.830
we're showing, and then we're rendering a[br]partial for

0:13:31.830,0:13:36.920
the comment. And then after that, there's[br]also another

0:13:36.920,0:13:40.209
area to add a new comment, if you can.

0:13:40.209,0:13:41.410
So if you're logged in, you should be able

0:13:41.410,0:13:43.730
to comment. And if you're not logged in, you

0:13:43.730,0:13:47.600
shouldn't. And that's what that add comment[br]helper there

0:13:47.600,0:13:49.600
is guarding for us.

0:13:49.600,0:13:52.019
So, we want to make, we just want to

0:13:52.019,0:13:55.160
make this sync. It's pretty easy. What we're[br]gonna

0:13:55.160,0:13:57.890
do, we're gonna change this from render to[br]sync

0:13:57.890,0:14:04.890
partial, and then we're gonna say that our[br]resource

0:14:06.940,0:14:08.760
is our comment. So we've made it just a

0:14:08.760,0:14:12.450
little more verbose than what it was before,[br]but

0:14:12.450,0:14:14.250
sync needs that.

0:14:14.250,0:14:17.149
The next thing we're gonna do is we're gonna

0:14:17.149,0:14:20.540
add a new directory under app/views called[br]sync, and

0:14:20.540,0:14:25.820
under sync we're gonna add another folder[br]called comments.

0:14:25.820,0:14:28.060
And under comments, we're gonna add a new[br]file,

0:14:28.060,0:14:31.779
and that's gonna be called comments dot html[br]dot

0:14:31.779,0:14:34.810
erb. That's gonna be our partial, K.

0:14:34.810,0:14:39.430
So, when we say sync partial here, instead[br]of

0:14:39.430,0:14:41.269
looking at our normal template, it's gonna[br]go look

0:14:41.269,0:14:44.300
for the one in the sync directory. And for

0:14:44.300,0:14:47.910
the most part, we're just gonna take our trusty

0:14:47.910,0:14:51.209
old partial that we're using right now and[br]copy

0:14:51.209,0:14:52.899
and paste that. We can kind of just trim

0:14:52.899,0:14:55.260
some of this out. One of the caveats of

0:14:55.260,0:14:59.610
using sync is that we can't really do stuff

0:14:59.610,0:15:02.700
like this. We can't ask about the current[br]context

0:15:02.700,0:15:04.649
in which it's running, because this will get[br]pushed

0:15:04.649,0:15:08.420
out to everybody. So this, the same strategy[br]you

0:15:08.420,0:15:13.260
have for caching templates, caching partials[br]within your application,

0:15:13.260,0:15:15.820
you're gonna apply that same strategy to the[br]real

0:15:15.820,0:15:17.370
time updates as well.

0:15:17.370,0:15:20.100
And so stuff like this is probably just, just

0:15:20.100,0:15:23.029
gonna have to go, right. We can have the

0:15:23.029,0:15:25.490
user name, we have have what the body is.

0:15:25.490,0:15:28.959
But we really can't have all those editing[br]options.

0:15:28.959,0:15:32.980
AUDIENCE: [indecipherable - 00:15:35]

0:15:32.980,0:15:39.980
M.M.: Oh, did I? Thank you.

0:15:41.019,0:15:48.019
Let's rename this. So comment instead of comments.[br]So

0:15:48.579,0:15:51.779
that's our first step. The next change we[br]want

0:15:51.779,0:15:54.380
to make is, whenever a new comment comes,[br]we

0:15:54.380,0:15:58.040
want that to show up underneath, and so instead

0:15:58.040,0:16:00.430
of calling sync, we're gonna call sync.new.[br]This is

0:16:00.430,0:16:04.250
going to watch for new comments.

0:16:04.250,0:16:09.139
In here, the resource is going to have to

0:16:09.139,0:16:14.029
be a comment dot new, is that right? We

0:16:14.029,0:16:19.680
can probably go a little bit further and say

0:16:19.680,0:16:24.010
posts.comment dot new. K. All right.

0:16:24.010,0:16:26.060
So that's not a lot of changes. What we've

0:16:26.060,0:16:28.170
done is we've added sync to the repository,[br]to

0:16:28.170,0:16:32.550
the application. We've registered all the[br]Javascript. We've went

0:16:32.550,0:16:36.720
in, went ahead, moved some of our html from

0:16:36.720,0:16:41.170
the original locations to a new location under[br]sync

0:16:41.170,0:16:44.690
and instead of calling render, we're gonna[br]call sync

0:16:44.690,0:16:45.600
and sync new.

0:16:45.600,0:16:47.060
AUDIENCE: [indecipherable - 00:16:47]

0:16:47.060,0:16:48.510
M.M.: What's that?

0:16:48.510,0:16:49.970
AUDIENCE: [indecipherable - 00:16:49]

0:16:49.970,0:16:54.709
M.M.: Post, yes. Thank you. Live coding, ladies[br]and

0:16:54.709,0:16:55.440
gentlemen.

0:16:55.440,0:16:59.510
Yeah. I transposed the plural. There you go.

0:16:59.510,0:17:00.839
AUDIENCE: Pair programming to scale.

0:17:00.839,0:17:01.740
M.M.: Pair programming to scale. All right.

0:17:01.740,0:17:03.070
So let's see if this works. What I'm gonna

0:17:03.070,0:17:05.260
do is I'm gonna refresh this page. I'm gonna

0:17:05.260,0:17:07.130
refresh this page. I'm gonna refresh this[br]page. Now

0:17:07.130,0:17:13.160
Firefox is not logged in. Safari here is logged

0:17:13.160,0:17:15.669
in here by Stanley, who's back there somewhere,[br]and

0:17:15.669,0:17:19.819
then Chrome is logged in by me. So let's

0:17:19.819,0:17:22.130
see if this works. Who wants to place a

0:17:22.130,0:17:22.679
bet?

0:17:22.679,0:17:25.419
Does this work? Anybody know?

0:17:25.419,0:17:30.340
All right. Let's see if it works. All right.

0:17:30.340,0:17:37.340
There we go. Does this work? K. Yay!

0:17:38.640,0:17:41.850
So what's nice about this approach is that[br]this

0:17:41.850,0:17:44.120
is gonna go out no matter how many clients

0:17:44.120,0:17:49.910
you've got connected, theoretically. Every[br]time your, your assets

0:17:49.910,0:17:52.400
change, your resources change in your application,[br]they can

0:17:52.400,0:17:54.590
be notified in real time. K.

0:17:54.590,0:17:55.900
And we didn't have to write a whole bunch

0:17:55.900,0:17:58.820
of Javascript. We didn't have to change how[br]we

0:17:58.820,0:18:02.270
were architecting our presentation layer.[br]We're gonna use the,

0:18:02.270,0:18:08.290
the same infrastructure that we're using today.[br]All right.

0:18:08.290,0:18:12.270
OK. Now, because of this, I kind of lost

0:18:12.270,0:18:16.240
my ability to, to edit. And I would like

0:18:16.240,0:18:19.030
to have that back. So what I want to

0:18:19.030,0:18:25.950
do is, in this loop, where we're saying, you

0:18:25.950,0:18:28.520
know, we're gonna add this missing partial,[br]what I

0:18:28.520,0:18:29.850
really want to do is I want to say,

0:18:29.850,0:18:36.850
if you can edit the comment, right. And that's

0:18:37.360,0:18:42.440
current user. What I really want to say is

0:18:42.440,0:18:45.200
that if I can edit, I want to have

0:18:45.200,0:18:52.200
the same partial I had before, right. But,[br]if

0:18:53.490,0:18:57.270
I can't, then I want to use the one

0:18:57.270,0:19:00.190
that is going to be synced. K.

0:19:00.190,0:19:07.190
K. So, it's a small change. But what it's,

0:19:09.210,0:19:12.960
what it's saying is, is that, if I have

0:19:12.960,0:19:14.790
permissions to edit it, I don't want it to

0:19:14.790,0:19:16.169
be syncing, I don't want to be notified if

0:19:16.169,0:19:18.710
it changes, because I am likely the browser[br]that's

0:19:18.710,0:19:21.169
gonna be changing it. And, and I really want

0:19:21.169,0:19:24.730
the tools to be able to edit and delete.

0:19:24.730,0:19:27.540
So I'm gonna just come back here and refresh

0:19:27.540,0:19:31.740
this UI, and you'll notice now, because of[br]that,

0:19:31.740,0:19:34.419
I have my tools back. My edit and delete.

0:19:34.419,0:19:38.470
So I can come back over here and say

0:19:38.470,0:19:45.470
yes, it does work. See, that updates there.[br]It

0:19:45.850,0:19:50.840
looks like we've got a little bug.

0:19:50.840,0:19:56.330
And then eventually I can actually delete[br]it as

0:19:56.330,0:20:03.330
well. And it gets rid of it. K.

0:20:03.500,0:20:08.870
And there's another bug with this. Do you[br]guys

0:20:08.870,0:20:15.090
want to see what it is? It's pretty fun.

0:20:15.090,0:20:18.590
Here is a, well, let's go to this one.

0:20:18.590,0:20:19.960
Here is a blog post that doesn't have any

0:20:19.960,0:20:23.090
comments yet. I'm gonna go onto this different[br]blog

0:20:23.090,0:20:28.289
post, right, and, say we gotta bug. When I

0:20:28.289,0:20:30.870
do that, my comment is showing up on this

0:20:30.870,0:20:33.669
different blog post, right. Because it's,[br]right now we're

0:20:33.669,0:20:36.419
looking for all comments whenever it gets[br]updated, we're

0:20:36.419,0:20:38.340
gonna add it to this page. So what we

0:20:38.340,0:20:39.770
need to do is we need to scope these

0:20:39.770,0:20:42.549
comments to this page. So let's add that really

0:20:42.549,0:20:43.500
quick.

0:20:43.500,0:20:50.500
We're gonna come back here to, come back here

0:20:55.130,0:20:57.880
to our comment model, and we're gonna add[br]a

0:20:57.880,0:21:03.780
new scope. Now, this is gonna be different[br]than

0:21:03.780,0:21:07.630
a normal scope. Might be a redundancy, but[br]sync

0:21:07.630,0:21:12.960
needs it. So let's add it, called by_posts.[br]And

0:21:12.960,0:21:15.370
it's gonna take a lambda, and we're gonna[br]give

0:21:15.370,0:21:20.660
it a post and we're gonna say where post

0:21:20.660,0:21:24.160
id is post id. K.

0:21:24.160,0:21:31.160
K. So we've just added a scope for post.

0:21:32.289,0:21:38.010
Then we're gonna come over here into our sync

0:21:38.010,0:21:45.010
partials. And we're going to add that scope[br]here.

0:21:45.530,0:21:52.530
So let's, let's see scope dot by_posts. And[br]let's

0:22:00.370,0:22:06.870
also add that to this one. K.

0:22:06.870,0:22:11.610
So now if we refresh this, come over here,

0:22:11.610,0:22:16.200
and now I'm logged in as Stanley. I say,

0:22:16.200,0:22:19.570
oh hi. It shows up here, which is what

0:22:19.570,0:22:21.360
we expect, but on this other one it does

0:22:21.360,0:22:24.160
not, K. And if I refresh this we'll get

0:22:24.160,0:22:28.980
rid of that comment. So scoping is, is easy

0:22:28.980,0:22:33.860
as declaring a new scope on your model, in

0:22:33.860,0:22:36.600
the same syntax that we're using for normal[br]scopes.

0:22:36.600,0:22:39.820
And then whenever we render out our partials,[br]we

0:22:39.820,0:22:42.010
just have to, we have to reference that scope.

0:22:42.010,0:22:42.010
M.M.: Why do we need what?

0:22:48.289,0:22:53.470
M.M.: The scope in both? Cause there are two

0:22:53.470,0:22:56.230
different partials. It, it would be possible[br]to-

0:22:56.230,0:22:58.860
AUDIENCE: [indecipherable - 00:22:59]

0:22:58.860,0:23:02.919
M.M.: No. It affects both. The scope affects[br]both.

0:23:02.919,0:23:05.429
The reason why there are two partials, here,[br]is

0:23:05.429,0:23:08.580
that whenever a new comment comes into existence,[br]we

0:23:08.580,0:23:10.080
want that to be listed. So we can move

0:23:10.080,0:23:17.080
that around, theoretically, I believe, if.[br]Whoa.

0:23:22.470,0:23:29.470
Nevermind. Let's not touch that. Live coding.

0:23:31.570,0:23:38.570
All right. So sync is a pretty cool little

0:23:38.640,0:23:41.340
library. It does quite a lot for us. What

0:23:41.340,0:23:44.150
it's going to do, is it's going to hold

0:23:44.150,0:23:48.010
a connection via web socket to a server, and

0:23:48.010,0:23:50.840
then it's going to put mechanisms within Rails[br]to

0:23:50.840,0:23:55.049
talk to that, that web socket, and then when

0:23:55.049,0:23:58.750
our resources change, it will render those[br]templates and

0:23:58.750,0:24:01.090
push that out to that web socket, which the

0:24:01.090,0:24:04.390
clients will then pull down, K. So without[br]re,

0:24:04.390,0:24:08.510
without rearchitecting our presentation tier,[br]we are able to

0:24:08.510,0:24:11.710
take advantage of real time, and able to do

0:24:11.710,0:24:15.929
it without a major change to how we're organizing

0:24:15.929,0:24:19.350
or architecting our templates, our files.

0:24:19.350,0:24:22.820
We can go just a little bit further, as

0:24:22.820,0:24:29.380
well. So let's open a Rails console, K, and

0:24:29.380,0:24:36.380
we'll say. Just get, just a comment out of

0:24:37.179,0:24:43.909
here. All right. So I got this comment right

0:24:43.909,0:24:46.409
here, which is Jason saying that he's watching,[br]but

0:24:46.409,0:24:48.100
he's kind of on a delay because he's not

0:24:48.100,0:24:50.559
actually in the room, K.

0:24:50.559,0:24:54.929
What we can say here is sync model dot

0:24:54.929,0:24:58.809
enable, and this will allow all changes that[br]happen

0:24:58.809,0:25:01.669
within our process, that's not running on[br]the web

0:25:01.669,0:25:03.960
server, still a Rails process, but we're not[br]actually

0:25:03.960,0:25:06.580
on running on the web server. It's a separate

0:25:06.580,0:25:09.289
process. Maybe a background job. But now all[br]of

0:25:09.289,0:25:11.750
our changes that we make can also be reflected

0:25:11.750,0:25:14.100
in real time as well.

0:25:14.100,0:25:20.640
So let's pull this guy over. And watch that

0:25:20.640,0:25:24.559
happen. So we can change this to, what should

0:25:24.559,0:25:31.559
Jason say? Say, I don't know, real time. K,

0:25:35.350,0:25:38.140
so let's pull him out. You see that his

0:25:38.140,0:25:40.580
text is right here. I'm watching, kind of.[br]When

0:25:40.580,0:25:43.840
I call save it will change, and it updates

0:25:43.840,0:25:50.750
right here, in real time. And duplicate. Why?[br]Chris?

0:25:50.750,0:25:51.950
Why?

0:25:51.950,0:25:53.140
Applettes.

0:25:53.140,0:25:57.940
AUDIENCE: Wait till afterwards.

0:25:57.940,0:26:02.730
M.M.: Afterwards? All right.

0:26:02.730,0:26:06.080
OK. Let's continue and add this to some of

0:26:06.080,0:26:11.850
the other pages as well. So let's go to

0:26:11.850,0:26:14.059
post. Let's do the same thing. We want to

0:26:14.059,0:26:20.659
sync our posts as well. And our posts controller,

0:26:20.659,0:26:25.240
we want to enable sync here as.

0:26:25.240,0:26:30.750
Enable sync on our post controller and in[br]our

0:26:30.750,0:26:34.120
posts model. So let's go ahead and take a

0:26:34.120,0:26:39.640
look at our post index page. Our index page,

0:26:39.640,0:26:41.340
where we're listing all the posts, we're gonna[br]go

0:26:41.340,0:26:45.970
through and render the post. And then, if[br]we

0:26:45.970,0:26:51.159
have, if we can, we'll add, we'll have a

0:26:51.159,0:26:53.760
button to add a new post. If we look

0:26:53.760,0:26:57.370
at that post partial, you notice here, again,[br]we've

0:26:57.370,0:26:59.610
got some logic in here determining whether[br]or not

0:26:59.610,0:27:01.809
we can edit it, or whether or not we

0:27:01.809,0:27:04.150
can remove it.

0:27:04.150,0:27:07.380
So this logic is problematic when we're talking[br]about

0:27:07.380,0:27:09.710
a cache template that's gonna get pushed out[br]to

0:27:09.710,0:27:12.030
everybody, cause not everybody's gonna have[br]the same amount

0:27:12.030,0:27:14.370
of permissions. So what we'll have to do is

0:27:14.370,0:27:17.070
we'll have to just take that out. And I'm

0:27:17.070,0:27:20.110
gonna take it out and put it into the

0:27:20.110,0:27:21.820
index template.

0:27:21.820,0:27:26.200
Well. Actually, I'm just gonna take it out[br]of,

0:27:26.200,0:27:31.029
of this view altogether. So, again, in order[br]to

0:27:31.029,0:27:34.029
change our template from a static template[br]to a

0:27:34.029,0:27:41.029
real time template, we're gonna say sync and[br]partial

0:27:43.500,0:27:48.789
is a post. And then our resource is also

0:27:48.789,0:27:53.659
gonna be that same post, and then, if we

0:27:53.659,0:27:56.870
get a new post, it just lists him down

0:27:56.870,0:28:00.490
below. We don't, probably don't need to scope[br]on

0:28:00.490,0:28:03.770
this one. The big problem we have is all

0:28:03.770,0:28:09.169
of this edit information. So let's go over[br]here

0:28:09.169,0:28:12.200
to posts and get rid of that guy. So

0:28:12.200,0:28:15.559
I'm just gonna remove some, some code here.[br]I'm

0:28:15.559,0:28:19.120
gonna remove all of this editing. Anything[br]that's gonna

0:28:19.120,0:28:21.270
talk to current user, the current request[br]is not

0:28:21.270,0:28:27.169
gonna work. So let's get rid of that.

0:28:27.169,0:28:34.169
And now let's take a look at, take a

0:28:36.580,0:28:43.580
look at our, our post pages. I don't know

0:28:45.039,0:28:50.400
what that is.

0:28:50.400,0:28:52.320
We're asking for posts, it doesn't exist outside[br]of

0:28:52.320,0:28:57.159
that block. So we're gonna say post dot new.

0:28:57.159,0:29:04.159
OK. So, again, user not logged in, user logged

0:29:05.029,0:29:09.159
in, and as a different user logged in. So

0:29:09.159,0:29:11.500
if I come over here, I want to add

0:29:11.500,0:29:18.500
new post. See if it works. And let's add

0:29:22.799,0:29:23.289
that.

0:29:23.289,0:29:25.990
So, Stanley added this post. It shows up immediately

0:29:25.990,0:29:29.419
on, on Mike's browser. And it also shows up

0:29:29.419,0:29:33.090
in the not logged in browser. Let's come over

0:29:33.090,0:29:40.090
here. We'll, we'll say congrats. Now.

0:29:45.980,0:29:49.409
This browser over the right, the comment is[br]not

0:29:49.409,0:29:55.620
updating, right. Let's go back over here.[br]So here,

0:29:55.620,0:30:02.620
we've got one comment. Stanley says, I know.[br]And

0:30:03.659,0:30:07.529
that, that one comment here is still not updated.

0:30:07.529,0:30:10.750
So we've got changes happening on a sub-resource,[br]but

0:30:10.750,0:30:15.470
it's not changing our template. Thankfully[br]there's a really

0:30:15.470,0:30:19.590
nice DSL to make that happen. So we'll go

0:30:19.590,0:30:23.230
to our comment controll- or, comment object,[br]and we'll

0:30:23.230,0:30:28.510
say sync touch post. K.

0:30:28.510,0:30:31.390
So this is similar to normal touch. If you

0:30:31.390,0:30:34.529
want, have a resource that you want to touch

0:30:34.529,0:30:38.350
through an association whenever it updates,[br]it works just

0:30:38.350,0:30:41.200
the same, only it's a special one that'll[br]work

0:30:41.200,0:30:46.090
for sync. So let's save that and refresh all

0:30:46.090,0:30:51.679
of these browsers. K. So now they all have

0:30:51.679,0:30:55.320
two comments. OK.

0:30:55.320,0:31:02.070
I come over here. Let's have Stanley add one

0:31:02.070,0:31:09.070
more, add one more comment. Man, Chris. Now[br]the

0:31:09.200,0:31:14.890
comments are updating multiple times. I'm[br]curious to why

0:31:14.890,0:31:19.760
that is. It wasn't doing that an hour ago.

0:31:19.760,0:31:26.760
What did I miss? OK.

0:31:27.669,0:31:32.210
There's one more, there's one more review[br]of posts

0:31:32.210,0:31:38.130
here, and that is the actual post page. So

0:31:38.130,0:31:45.130
we can edit this. So let's say it sort

0:31:45.480,0:31:48.960
of works, but now this page isn't updating[br]and

0:31:48.960,0:31:51.580
this page isn't updating, right. So we, I've[br]updated

0:31:51.580,0:31:54.559
this post, but the other browsers aren't updating[br]on

0:31:54.559,0:31:57.029
the show page. The reason for that is because

0:31:57.029,0:32:00.179
we're not syncing the template on that page.[br]So

0:32:00.179,0:32:03.909
really quick we'll see, we'll show you just[br]how

0:32:03.909,0:32:05.570
easy it is to do that. We'll come over

0:32:05.570,0:32:09.760
here to show. We have this same information[br]where

0:32:09.760,0:32:13.730
we're pawing out all of these links determining,[br]you

0:32:13.730,0:32:16.980
know, whether or not we can edit. I'm gonna

0:32:16.980,0:32:19.159
punt on that. I'm just gonna put that down

0:32:19.159,0:32:23.000
below. So it's not gonna be part of any

0:32:23.000,0:32:24.740
template. So if you hit this page and you

0:32:24.740,0:32:27.590
can edit it, we're going to show you those

0:32:27.590,0:32:32.179
links. But it's gonna be outside of the, outside

0:32:32.179,0:32:34.190
of the, the partial.

0:32:34.190,0:32:39.250
So I'm just gonna sit. We're gonna sync a

0:32:39.250,0:32:46.250
new partial and it's gonna be called, oh my

0:32:48.870,0:32:55.870
gosh. I cannot type. It really is so uncomfortable.

0:32:59.190,0:33:02.230
So a new partial, we're gonna call this postfull,

0:33:02.230,0:33:06.460
because we have the full body embedded in[br]it.

0:33:06.460,0:33:09.220
And the resource is going to be that post

0:33:09.220,0:33:12.840
object. And then that's really it. We come[br]back

0:33:12.840,0:33:17.080
here to our sync directory under posts, create[br]a

0:33:17.080,0:33:24.080
new file, and we'll save this as postfull.

0:33:26.789,0:33:30.580
And then we'll come back, restart all of these

0:33:30.580,0:33:37.580
browsers, and come back here and edit this[br]and

0:33:39.909,0:33:46.909
so it really does work. What?

0:33:47.159,0:33:52.010
What am I missing?

0:33:52.010,0:33:56.860
AUDIENCE: [indecipherable - 00:34:01]

0:33:56.860,0:34:03.860
M.M.: I did refresh the browsers. Let's refresh[br]it

0:34:05.409,0:34:08.099
one more time.

0:34:08.099,0:34:12.579
AUDIENCE: Did you try rebooting?

0:34:12.579,0:34:17.799
M.M.: Huh. All right. Again. It worked an[br]hour

0:34:17.799,0:34:19.389
ago.

0:34:19.389,0:34:25.208
So, that's sync. I'm out of time. But we've

0:34:25.208,0:34:29.949
used this on some internal apps dealing with[br]monitoring.

0:34:29.949,0:34:34.279
And instead of pulling, continually asking[br]for new information,

0:34:34.279,0:34:37.009
just organizing a Rails app like you always[br]have

0:34:37.009,0:34:40.099
with templates and having those templates[br]update whenever resource

0:34:40.099,0:34:43.518
is changed has been just a really, really[br]great,

0:34:43.518,0:34:47.319
fantastic thing. There are caveats. It's a[br]little touchy,

0:34:47.319,0:34:49.449
as you can see. But it's definitely been getting

0:34:49.449,0:34:51.719
better over time.

0:34:51.719,0:34:53.349
I would just like to leave you with this

0:34:53.349,0:34:58.259
little pitch, that Rails has benefited, over[br]the years,

0:34:58.259,0:35:04.759
from being first to, to popularize certain[br]approaches for

0:35:04.759,0:35:07.499
web development. It was there at the very[br]beginning

0:35:07.499,0:35:09.140
with Ajax. It was there are the very beginning

0:35:09.140,0:35:13.049
with REST. I, I strongly feel that if we

0:35:13.049,0:35:16.229
are not able to do real time information within

0:35:16.229,0:35:19.670
Rails that people will move on from Rails.[br]And

0:35:19.670,0:35:22.319
I totally think that you don't need to. I

0:35:22.319,0:35:24.950
know that there's a lot of functionality that[br]is

0:35:24.950,0:35:26.890
very difficult to do with Rails as it is

0:35:26.890,0:35:29.430
today, and so people are looking outside of[br]Rails

0:35:29.430,0:35:32.969
for the presentation. But there are so many[br]advantages

0:35:32.969,0:35:36.940
to rendering your html on the server that[br]we

0:35:36.940,0:35:38.459
just need to think a little bit differently[br]and

0:35:38.459,0:35:39.579
a little bit better about it.

0:35:39.580,0:35:42.080
So, I'll open it up to questions.