WEBVTT 00:00:16.000 --> 00:00:19.400 MIKE MOORE: Hello. My name is Mike Moore, 00:00:19.439 --> 00:00:22.970 and I'm gonna talk about real-time Rails with Sync. 00:00:22.970 --> 00:00:28.500 So, hi. Hello. How's Rails Conf? 00:00:28.500 --> 00:00:30.750 My name is Mike Moore. You might know be 00:00:30.750 --> 00:00:33.579 as blowmage or blowmage depending on how you want 00:00:33.579 --> 00:00:36.230 to pronounce it. It doesn't matter. 00:00:36.230 --> 00:00:38.730 I am very happy to be here. I'm leaving 00:00:38.730 --> 00:00:41.220 in about an hour to fly home, so I'm 00:00:41.220 --> 00:00:44.380 only here for this. And I'm a hundred percent, 00:00:44.380 --> 00:00:47.180 totally prepared for this. I was not up all 00:00:47.180 --> 00:00:50.070 night. I did not make these slides twenty minutes 00:00:50.070 --> 00:00:52.000 ago. Yeah. 00:00:52.000 --> 00:00:58.920 So. Who likes live coding? Three people! All right. 00:00:58.920 --> 00:01:01.430 K. We're gonna talk about Sync. Sync is a 00:01:01.430 --> 00:01:05.509 fantastic little Rails engine written by Chris McCord. Is 00:01:05.509 --> 00:01:07.869 Chris, where's Chris? Is he here? There he is. 00:01:07.869 --> 00:01:09.090 If you don't like it - that guy right 00:01:09.090 --> 00:01:12.219 there. You can find it on the GitHub. That's 00:01:12.219 --> 00:01:15.149 at chrismccord slash sync. 00:01:15.149 --> 00:01:18.270 So yeah. Let's do this. 00:01:18.270 --> 00:01:24.210 All right. So I have a. I have an 00:01:24.210 --> 00:01:31.210 app. And I'm just gonna load it up here. 00:01:32.780 --> 00:01:36.380 And it's a very simple app. I was gonna 00:01:36.380 --> 00:01:39.439 have a little bit more interesting app to demonstrate 00:01:39.439 --> 00:01:41.979 this, but I ran into an issue. And maybe 00:01:41.979 --> 00:01:43.649 we'll talk about that at the end. If we 00:01:43.649 --> 00:01:45.670 have time. 00:01:45.670 --> 00:01:48.880 But this is a very simple bloggish type of 00:01:48.880 --> 00:01:52.939 application, where we've got posts, we've got comments, we've 00:01:52.939 --> 00:01:56.810 got users, and some tags. Oh, and also, this 00:01:56.810 --> 00:02:00.359 is the git repo for Sync. So please check 00:02:00.359 --> 00:02:01.329 it out. 00:02:01.329 --> 00:02:04.289 K, so. I want to just demonstrate this very 00:02:04.289 --> 00:02:06.829 simple Rails application. We'll go look at a little 00:02:06.829 --> 00:02:09.649 bit of code, and we're going to, we're gonna 00:02:09.649 --> 00:02:12.600 add Sync to this application, and we're gonna turn 00:02:12.600 --> 00:02:17.460 it from a very classic, kind of CRUD-y Rails 00:02:17.460 --> 00:02:19.740 application into real time. 00:02:19.740 --> 00:02:24.590 So. A little, one note before we start on 00:02:24.590 --> 00:02:28.980 code quality, this app is intentionally unfactored. So there 00:02:28.980 --> 00:02:32.470 is lots of places where you might apply some 00:02:32.470 --> 00:02:35.340 design in an application that I have not, for 00:02:35.340 --> 00:02:37.360 this. But, the reason for that is so that 00:02:37.360 --> 00:02:40.670 I can, we can refactor it to Sync a 00:02:40.670 --> 00:02:43.170 little bit easier, without having to unfactor it along 00:02:43.170 --> 00:02:43.920 the way. 00:02:43.920 --> 00:02:45.920 So, we'll go ahead and get started. So we 00:02:45.920 --> 00:02:50.070 have a series of posts. And then when you 00:02:50.070 --> 00:02:52.600 click on a post, you go to the post's 00:02:52.600 --> 00:02:56.930 show action. On that post's show action, we've got 00:02:56.930 --> 00:03:00.930 a series of comments. That is no different than 00:03:00.930 --> 00:03:05.680 going to slash comments, other than it just looks 00:03:05.680 --> 00:03:08.120 a little bit different. So. We're not gonna need 00:03:08.120 --> 00:03:10.460 to be looking at the comments on the actual 00:03:10.460 --> 00:03:13.580 resource. We're gonna be looking at it on the 00:03:13.580 --> 00:03:19.630 post resource. And that's it. So, you know, say, 00:03:19.630 --> 00:03:24.520 Hello RailsConf. Woo. Oh. Also, disclaimer, I cannot type 00:03:24.520 --> 00:03:29.090 in public. So this is gonna be very interesting. 00:03:29.090 --> 00:03:30.240 So I can go ahead and I can add 00:03:30.240 --> 00:03:34.920 a comment. I can delete a comment, because it's 00:03:34.920 --> 00:03:39.450 owned by me. I can go into posts that 00:03:39.450 --> 00:03:42.950 I own and I can edit those posts. So 00:03:42.950 --> 00:03:45.500 like that, right. Pretty simple. 00:03:45.500 --> 00:03:52.500 OK. So let's bump this out a little bit. 00:03:52.610 --> 00:03:56.060 So here is our application. You, same thing as 00:03:56.060 --> 00:03:59.340 we saw before. Our home controller is the, the 00:03:59.340 --> 00:04:03.130 home page. That showed the Jumbotron there. And this 00:04:03.130 --> 00:04:06.819 is all very bootstrappy. I'm sorry. 00:04:06.819 --> 00:04:10.490 Here's our posts controller. Almost straight out of the 00:04:10.490 --> 00:04:17.490 box Rails resource here. Our comments controller is nested 00:04:18.930 --> 00:04:23.870 underneath our posts controller. We've got a little bit 00:04:23.870 --> 00:04:29.430 of additional calls here for access. Those are defined 00:04:29.430 --> 00:04:32.710 in helpers. This may not be how you would 00:04:32.710 --> 00:04:35.670 do this in a real application, but for demonstration 00:04:35.670 --> 00:04:39.170 purposes it, it fits the need. And I can 00:04:39.170 --> 00:04:42.740 use these methods in the controller and also in 00:04:42.740 --> 00:04:45.150 the views. 00:04:45.150 --> 00:04:48.190 OK. So let's take a look at the routes. 00:04:48.190 --> 00:04:50.150 So you see we're not, we're not, we're not 00:04:50.150 --> 00:04:56.130 cheating. So we've got nested comments under posts. We've 00:04:56.130 --> 00:04:58.040 also got tags. Let's take a look at tags 00:04:58.040 --> 00:05:01.840 real quick. Tags are just a string attached to 00:05:01.840 --> 00:05:05.370 these various posts, and so if you click on 00:05:05.370 --> 00:05:07.740 the Rails tag, you see there are three of 00:05:07.740 --> 00:05:10.970 the four posts that are tagged with Rails. And 00:05:10.970 --> 00:05:15.190 then there is a list. So. 00:05:15.190 --> 00:05:18.600 Let's say that we have this application, and we 00:05:18.600 --> 00:05:21.570 want to make it more awesome than it is 00:05:21.570 --> 00:05:24.910 today. One of the things we really want is 00:05:24.910 --> 00:05:28.810 we want to approximate what some of the apps 00:05:28.810 --> 00:05:33.800 that are using heavy Javascript MVC frameworks are accomplishing 00:05:33.800 --> 00:05:38.250 with, with their responsiveness, and just kind of like 00:05:38.250 --> 00:05:41.400 updating the UI because something changed. 00:05:41.400 --> 00:05:46.290 And so instead of basically rewriting our entire frontend, 00:05:46.290 --> 00:05:49.230 our entire presentation layer, and then also creating an 00:05:49.230 --> 00:05:53.940 API to support that Javascript presentation layer, it's my 00:05:53.940 --> 00:05:58.400 conjecture that, conj- it's my assertion here that we 00:05:58.400 --> 00:06:02.050 can use Rails the way Rails is intended to 00:06:02.050 --> 00:06:06.220 be used, but still gain a good sub, a 00:06:06.220 --> 00:06:10.190 good, large portion of, of this type of functionality. 00:06:10.190 --> 00:06:10.889 So. 00:06:10.889 --> 00:06:14.070 Let's go ahead and jump in. 00:06:14.070 --> 00:06:17.530 All right, so the first thing we want to 00:06:17.530 --> 00:06:22.020 do is open the gemfile and we want to 00:06:22.020 --> 00:06:27.530 add a few gems. The first one is faye. 00:06:27.530 --> 00:06:28.980 And the reason we need to add faye is 00:06:28.980 --> 00:06:34.130 just for, for development. So we're gonna use faye 00:06:34.130 --> 00:06:36.350 for our browser to talk over websocket back to 00:06:36.350 --> 00:06:40.800 the server. And then faye also needs thin, but 00:06:40.800 --> 00:06:44.480 we don't like thin very much, so we're gonna 00:06:44.480 --> 00:06:49.770 not require it by default. And then the last 00:06:49.770 --> 00:06:53.490 one is Sync. K. 00:06:53.490 --> 00:06:58.440 So we'll bundle install that. Told you I couldn't 00:06:58.440 --> 00:07:02.290 type. There you go. 00:07:02.290 --> 00:07:04.270 So now we've got, we've added sync to the 00:07:04.270 --> 00:07:07.620 application. We need to go a couple steps further. 00:07:07.620 --> 00:07:09.860 The first is, in our application file, we need 00:07:09.860 --> 00:07:15.220 to add the Javascript for Sync. And so this 00:07:15.220 --> 00:07:17.970 will be loaded as part of our normal application 00:07:17.970 --> 00:07:22.250 Javascript everywhere. It will get pulled in by the, 00:07:22.250 --> 00:07:26.820 the, by the asset pipeline. And then also we 00:07:26.820 --> 00:07:31.120 need to go into our layout, our main application 00:07:31.120 --> 00:07:35.080 layout, and there's another Javascript tag that we need 00:07:35.080 --> 00:07:40.830 to add. And that is going to be, we're 00:07:40.830 --> 00:07:45.949 gonna use a little helper from Sync, adapter Javascript 00:07:45.949 --> 00:07:51.150 url. 00:07:51.150 --> 00:07:53.030 And we'll talk about what all these mean, hopefully 00:07:53.030 --> 00:07:56.949 by the end of this. OK. Now we're good 00:07:56.949 --> 00:08:00.389 to go. So what we need to do, before 00:08:00.389 --> 00:08:04.030 we do anything else, is we need to start 00:08:04.030 --> 00:08:08.810 up faye to run our web socket connections. So 00:08:08.810 --> 00:08:10.639 we can do that pretty easily. We can just 00:08:10.639 --> 00:08:14.949 say rack up Sync. 00:08:14.949 --> 00:08:21.949 Oh. I'm sorry. One more thing. We need to 00:08:24.040 --> 00:08:31.040 just take a look at our generators. Oh, gosh. 00:08:31.110 --> 00:08:35.130 K. There is now this install generator that was 00:08:35.130 --> 00:08:38.610 added by, by sync, so let's go ahead and 00:08:38.610 --> 00:08:41.729 run that generator. That will create a rackup file 00:08:41.729 --> 00:08:43.700 and a configuration file. 00:08:43.700 --> 00:08:50.540 So. Now that we have that, we can, we 00:08:50.540 --> 00:08:54.930 can run this. Now this is going to run 00:08:54.930 --> 00:08:58.070 faye in the background, and then here we can 00:08:58.070 --> 00:09:01.810 just run our application. Come back over here and 00:09:01.810 --> 00:09:04.100 refresh and nothing has changed, but it all continues 00:09:04.100 --> 00:09:07.960 to work. So faye is running, but we're not 00:09:07.960 --> 00:09:10.200 actually talking to it. But we know that it, 00:09:10.200 --> 00:09:13.550 it's up. So. That's the important first step. 00:09:13.550 --> 00:09:17.279 I don't particularly like having to open up two 00:09:17.279 --> 00:09:19.760 consoles, so one of the things I will do 00:09:19.760 --> 00:09:22.510 is I'm gonna create a new file called, a 00:09:22.510 --> 00:09:29.330 new proc file, and then inside of it I'm 00:09:29.330 --> 00:09:36.330 gonna have a web entry. So you can't see 00:09:38.010 --> 00:09:40.290 this, but this, I have to scooch down to, 00:09:40.290 --> 00:09:41.620 so you can hear me, and it's killing my 00:09:41.620 --> 00:09:41.770 back. 00:09:41.770 --> 00:09:48.770 AUDIENCE: I think you can just stand up and 00:09:48.930 --> 00:09:51.060 do it. 00:09:51.060 --> 00:09:58.060 M.M.: Are you sure? All right. Exec, so rackup, 00:09:59.089 --> 00:10:06.000 sync conf, sync ru. OK. 00:10:06.000 --> 00:10:07.370 The other thing we need to do is come 00:10:07.370 --> 00:10:14.370 back over here and add foreman. K. So, so 00:10:16.690 --> 00:10:20.240 install that. Foreman is a gem written by Heroku, 00:10:20.240 --> 00:10:21.870 and so if you have lots of services that 00:10:21.870 --> 00:10:25.600 you are coordinating, Foreman's a good way to, to 00:10:25.600 --> 00:10:27.860 start all of those. So now instead of going 00:10:27.860 --> 00:10:31.600 to multiple terminals to open up, open this up, 00:10:31.600 --> 00:10:35.730 I can just say Foreman start, and it will 00:10:35.730 --> 00:10:40.190 start both. So that's kind of handy. 00:10:40.190 --> 00:10:43.060 All right. Let's take a look at one of 00:10:43.060 --> 00:10:48.620 these, one of these pages. What I want is 00:10:48.620 --> 00:10:50.300 I want to be able to come over here 00:10:50.300 --> 00:10:53.330 onto this page and I want to add a 00:10:53.330 --> 00:10:55.430 new comment, and then I want people to see 00:10:55.430 --> 00:11:01.610 it as soon as it shows up, right. 00:11:01.610 --> 00:11:04.980 So if I say see me, my, my browser 00:11:04.980 --> 00:11:08.680 refreshes. But all of these browsers over here won't 00:11:08.680 --> 00:11:15.680 necessarily. So let's go to this guy. K. 00:11:24.430 --> 00:11:31.430 So if I, for example, delete this one, it 00:11:33.770 --> 00:11:35.470 still shows up in these other browsers. And I 00:11:35.470 --> 00:11:38.170 would really like it if it would disappear as 00:11:38.170 --> 00:11:45.170 soon as we ask it to. So let's make 00:11:45.300 --> 00:11:48.740 that happen. To do that, we are going to 00:11:48.740 --> 00:11:55.390 register our ActiveRecord models to be synced in browsers. 00:11:55.390 --> 00:11:56.740 And Sync is going to take care of all 00:11:56.740 --> 00:12:00.029 of the communication from our Rails application, all the 00:12:00.029 --> 00:12:01.779 way down to the browsers for us. 00:12:01.779 --> 00:12:05.140 So, to do that, there's a couple of things 00:12:05.140 --> 00:12:09.940 we want to change. First is, we map up 00:12:09.940 --> 00:12:14.470 our comment model. And we're gonna add this little 00:12:14.470 --> 00:12:17.339 declaration called sync_all to it. This is going to 00:12:17.339 --> 00:12:20.209 insert the sync DSL into the model. So now 00:12:20.209 --> 00:12:22.430 whenever the model changes, it will try to notify 00:12:22.430 --> 00:12:25.990 the browsers that something has changed. We also, we 00:12:25.990 --> 00:12:30.640 need to open up our controller, and we need 00:12:30.640 --> 00:12:37.640 to enable sync here as well. K. 00:12:38.430 --> 00:12:41.360 And this is, again, just to, so the controller 00:12:41.360 --> 00:12:43.209 knows to look for all of the messages from 00:12:43.209 --> 00:12:48.589 the models that something has updated and respond appropriately. 00:12:48.589 --> 00:12:53.870 Let's take a look at the post show action. 00:12:53.870 --> 00:12:58.279 Like I said, this is a mess of HTML. 00:12:58.279 --> 00:13:00.040 This is not necessarily how I would do it, 00:13:00.040 --> 00:13:03.360 but this is how it is. We've got kind 00:13:03.360 --> 00:13:06.300 of two main areas of the page. The first 00:13:06.300 --> 00:13:08.420 is at the top, where you've got all the 00:13:08.420 --> 00:13:11.980 content for the blog post. So the title, the 00:13:11.980 --> 00:13:15.779 user, those tags that are on the, the blog 00:13:15.779 --> 00:13:19.649 post. Some editing links, if they are there, and 00:13:19.649 --> 00:13:23.459 then also the markdown of the body. OK. 00:13:23.459 --> 00:13:26.290 Then after that we've got our comments section, which 00:13:26.290 --> 00:13:29.040 is going to iterate through the comments, and because 00:13:29.040 --> 00:13:31.830 we're showing, and then we're rendering a partial for 00:13:31.830 --> 00:13:36.920 the comment. And then after that, there's also another 00:13:36.920 --> 00:13:40.209 area to add a new comment, if you can. 00:13:40.209 --> 00:13:41.410 So if you're logged in, you should be able 00:13:41.410 --> 00:13:43.730 to comment. And if you're not logged in, you 00:13:43.730 --> 00:13:47.600 shouldn't. And that's what that add comment helper there 00:13:47.600 --> 00:13:49.600 is guarding for us. 00:13:49.600 --> 00:13:52.019 So, we want to make, we just want to 00:13:52.019 --> 00:13:55.160 make this sync. It's pretty easy. What we're gonna 00:13:55.160 --> 00:13:57.890 do, we're gonna change this from render to sync 00:13:57.890 --> 00:14:04.890 partial, and then we're gonna say that our resource 00:14:06.940 --> 00:14:08.760 is our comment. So we've made it just a 00:14:08.760 --> 00:14:12.450 little more verbose than what it was before, but 00:14:12.450 --> 00:14:14.250 sync needs that. 00:14:14.250 --> 00:14:17.149 The next thing we're gonna do is we're gonna 00:14:17.149 --> 00:14:20.540 add a new directory under app/views called sync, and 00:14:20.540 --> 00:14:25.820 under sync we're gonna add another folder called comments. 00:14:25.820 --> 00:14:28.060 And under comments, we're gonna add a new file, 00:14:28.060 --> 00:14:31.779 and that's gonna be called comments dot html dot 00:14:31.779 --> 00:14:34.810 erb. That's gonna be our partial, K. 00:14:34.810 --> 00:14:39.430 So, when we say sync partial here, instead of 00:14:39.430 --> 00:14:41.269 looking at our normal template, it's gonna go look 00:14:41.269 --> 00:14:44.300 for the one in the sync directory. And for 00:14:44.300 --> 00:14:47.910 the most part, we're just gonna take our trusty 00:14:47.910 --> 00:14:51.209 old partial that we're using right now and copy 00:14:51.209 --> 00:14:52.899 and paste that. We can kind of just trim 00:14:52.899 --> 00:14:55.260 some of this out. One of the caveats of 00:14:55.260 --> 00:14:59.610 using sync is that we can't really do stuff 00:14:59.610 --> 00:15:02.700 like this. We can't ask about the current context 00:15:02.700 --> 00:15:04.649 in which it's running, because this will get pushed 00:15:04.649 --> 00:15:08.420 out to everybody. So this, the same strategy you 00:15:08.420 --> 00:15:13.260 have for caching templates, caching partials within your application, 00:15:13.260 --> 00:15:15.820 you're gonna apply that same strategy to the real 00:15:15.820 --> 00:15:17.370 time updates as well. 00:15:17.370 --> 00:15:20.100 And so stuff like this is probably just, just 00:15:20.100 --> 00:15:23.029 gonna have to go, right. We can have the 00:15:23.029 --> 00:15:25.490 user name, we have have what the body is. 00:15:25.490 --> 00:15:28.959 But we really can't have all those editing options. 00:15:28.959 --> 00:15:32.980 AUDIENCE: [indecipherable - 00:15:35] 00:15:32.980 --> 00:15:39.980 M.M.: Oh, did I? Thank you. 00:15:41.019 --> 00:15:48.019 Let's rename this. So comment instead of comments. So 00:15:48.579 --> 00:15:51.779 that's our first step. The next change we want 00:15:51.779 --> 00:15:54.380 to make is, whenever a new comment comes, we 00:15:54.380 --> 00:15:58.040 want that to show up underneath, and so instead 00:15:58.040 --> 00:16:00.430 of calling sync, we're gonna call sync.new. This is 00:16:00.430 --> 00:16:04.250 going to watch for new comments. 00:16:04.250 --> 00:16:09.139 In here, the resource is going to have to 00:16:09.139 --> 00:16:14.029 be a comment dot new, is that right? We 00:16:14.029 --> 00:16:19.680 can probably go a little bit further and say 00:16:19.680 --> 00:16:24.010 posts.comment dot new. K. All right. 00:16:24.010 --> 00:16:26.060 So that's not a lot of changes. What we've 00:16:26.060 --> 00:16:28.170 done is we've added sync to the repository, to 00:16:28.170 --> 00:16:32.550 the application. We've registered all the Javascript. We've went 00:16:32.550 --> 00:16:36.720 in, went ahead, moved some of our html from 00:16:36.720 --> 00:16:41.170 the original locations to a new location under sync 00:16:41.170 --> 00:16:44.690 and instead of calling render, we're gonna call sync 00:16:44.690 --> 00:16:45.600 and sync new. 00:16:45.600 --> 00:16:47.060 AUDIENCE: [indecipherable - 00:16:47] 00:16:47.060 --> 00:16:48.510 M.M.: What's that? 00:16:48.510 --> 00:16:49.970 AUDIENCE: [indecipherable - 00:16:49] 00:16:49.970 --> 00:16:54.709 M.M.: Post, yes. Thank you. Live coding, ladies and 00:16:54.709 --> 00:16:55.440 gentlemen. 00:16:55.440 --> 00:16:59.510 Yeah. I transposed the plural. There you go. 00:16:59.510 --> 00:17:00.839 AUDIENCE: Pair programming to scale. 00:17:00.839 --> 00:17:01.740 M.M.: Pair programming to scale. All right. 00:17:01.740 --> 00:17:03.070 So let's see if this works. What I'm gonna 00:17:03.070 --> 00:17:05.260 do is I'm gonna refresh this page. I'm gonna 00:17:05.260 --> 00:17:07.130 refresh this page. I'm gonna refresh this page. Now 00:17:07.130 --> 00:17:13.160 Firefox is not logged in. Safari here is logged 00:17:13.160 --> 00:17:15.669 in here by Stanley, who's back there somewhere, and 00:17:15.669 --> 00:17:19.819 then Chrome is logged in by me. So let's 00:17:19.819 --> 00:17:22.130 see if this works. Who wants to place a 00:17:22.130 --> 00:17:22.679 bet? 00:17:22.679 --> 00:17:25.419 Does this work? Anybody know? 00:17:25.419 --> 00:17:30.340 All right. Let's see if it works. All right. 00:17:30.340 --> 00:17:37.340 There we go. Does this work? K. Yay! 00:17:38.640 --> 00:17:41.850 So what's nice about this approach is that this 00:17:41.850 --> 00:17:44.120 is gonna go out no matter how many clients 00:17:44.120 --> 00:17:49.910 you've got connected, theoretically. Every time your, your assets 00:17:49.910 --> 00:17:52.400 change, your resources change in your application, they can 00:17:52.400 --> 00:17:54.590 be notified in real time. K. 00:17:54.590 --> 00:17:55.900 And we didn't have to write a whole bunch 00:17:55.900 --> 00:17:58.820 of Javascript. We didn't have to change how we 00:17:58.820 --> 00:18:02.270 were architecting our presentation layer. We're gonna use the, 00:18:02.270 --> 00:18:08.290 the same infrastructure that we're using today. All right. 00:18:08.290 --> 00:18:12.270 OK. Now, because of this, I kind of lost 00:18:12.270 --> 00:18:16.240 my ability to, to edit. And I would like 00:18:16.240 --> 00:18:19.030 to have that back. So what I want to 00:18:19.030 --> 00:18:25.950 do is, in this loop, where we're saying, you 00:18:25.950 --> 00:18:28.520 know, we're gonna add this missing partial, what I 00:18:28.520 --> 00:18:29.850 really want to do is I want to say, 00:18:29.850 --> 00:18:36.850 if you can edit the comment, right. And that's 00:18:37.360 --> 00:18:42.440 current user. What I really want to say is 00:18:42.440 --> 00:18:45.200 that if I can edit, I want to have 00:18:45.200 --> 00:18:52.200 the same partial I had before, right. But, if 00:18:53.490 --> 00:18:57.270 I can't, then I want to use the one 00:18:57.270 --> 00:19:00.190 that is going to be synced. K. 00:19:00.190 --> 00:19:07.190 K. So, it's a small change. But what it's, 00:19:09.210 --> 00:19:12.960 what it's saying is, is that, if I have 00:19:12.960 --> 00:19:14.790 permissions to edit it, I don't want it to 00:19:14.790 --> 00:19:16.169 be syncing, I don't want to be notified if 00:19:16.169 --> 00:19:18.710 it changes, because I am likely the browser that's 00:19:18.710 --> 00:19:21.169 gonna be changing it. And, and I really want 00:19:21.169 --> 00:19:24.730 the tools to be able to edit and delete. 00:19:24.730 --> 00:19:27.540 So I'm gonna just come back here and refresh 00:19:27.540 --> 00:19:31.740 this UI, and you'll notice now, because of that, 00:19:31.740 --> 00:19:34.419 I have my tools back. My edit and delete. 00:19:34.419 --> 00:19:38.470 So I can come back over here and say 00:19:38.470 --> 00:19:45.470 yes, it does work. See, that updates there. It 00:19:45.850 --> 00:19:50.840 looks like we've got a little bug. 00:19:50.840 --> 00:19:56.330 And then eventually I can actually delete it as 00:19:56.330 --> 00:20:03.330 well. And it gets rid of it. K. 00:20:03.500 --> 00:20:08.870 And there's another bug with this. Do you guys 00:20:08.870 --> 00:20:15.090 want to see what it is? It's pretty fun. 00:20:15.090 --> 00:20:18.590 Here is a, well, let's go to this one. 00:20:18.590 --> 00:20:19.960 Here is a blog post that doesn't have any 00:20:19.960 --> 00:20:23.090 comments yet. I'm gonna go onto this different blog 00:20:23.090 --> 00:20:28.289 post, right, and, say we gotta bug. When I 00:20:28.289 --> 00:20:30.870 do that, my comment is showing up on this 00:20:30.870 --> 00:20:33.669 different blog post, right. Because it's, right now we're 00:20:33.669 --> 00:20:36.419 looking for all comments whenever it gets updated, we're 00:20:36.419 --> 00:20:38.340 gonna add it to this page. So what we 00:20:38.340 --> 00:20:39.770 need to do is we need to scope these 00:20:39.770 --> 00:20:42.549 comments to this page. So let's add that really 00:20:42.549 --> 00:20:43.500 quick. 00:20:43.500 --> 00:20:50.500 We're gonna come back here to, come back here 00:20:55.130 --> 00:20:57.880 to our comment model, and we're gonna add a 00:20:57.880 --> 00:21:03.780 new scope. Now, this is gonna be different than 00:21:03.780 --> 00:21:07.630 a normal scope. Might be a redundancy, but sync 00:21:07.630 --> 00:21:12.960 needs it. So let's add it, called by_posts. And 00:21:12.960 --> 00:21:15.370 it's gonna take a lambda, and we're gonna give 00:21:15.370 --> 00:21:20.660 it a post and we're gonna say where post 00:21:20.660 --> 00:21:24.160 id is post id. K. 00:21:24.160 --> 00:21:31.160 K. So we've just added a scope for post. 00:21:32.289 --> 00:21:38.010 Then we're gonna come over here into our sync 00:21:38.010 --> 00:21:45.010 partials. And we're going to add that scope here. 00:21:45.530 --> 00:21:52.530 So let's, let's see scope dot by_posts. And let's 00:22:00.370 --> 00:22:06.870 also add that to this one. K. 00:22:06.870 --> 00:22:11.610 So now if we refresh this, come over here, 00:22:11.610 --> 00:22:16.200 and now I'm logged in as Stanley. I say, 00:22:16.200 --> 00:22:19.570 oh hi. It shows up here, which is what 00:22:19.570 --> 00:22:21.360 we expect, but on this other one it does 00:22:21.360 --> 00:22:24.160 not, K. And if I refresh this we'll get 00:22:24.160 --> 00:22:28.980 rid of that comment. So scoping is, is easy 00:22:28.980 --> 00:22:33.860 as declaring a new scope on your model, in 00:22:33.860 --> 00:22:36.600 the same syntax that we're using for normal scopes. 00:22:36.600 --> 00:22:39.820 And then whenever we render out our partials, we 00:22:39.820 --> 00:22:42.010 just have to, we have to reference that scope. 00:22:42.010 --> 00:22:42.010 M.M.: Why do we need what? 00:22:48.289 --> 00:22:53.470 M.M.: The scope in both? Cause there are two 00:22:53.470 --> 00:22:56.230 different partials. It, it would be possible to- 00:22:56.230 --> 00:22:58.860 AUDIENCE: [indecipherable - 00:22:59] 00:22:58.860 --> 00:23:02.919 M.M.: No. It affects both. The scope affects both. 00:23:02.919 --> 00:23:05.429 The reason why there are two partials, here, is 00:23:05.429 --> 00:23:08.580 that whenever a new comment comes into existence, we 00:23:08.580 --> 00:23:10.080 want that to be listed. So we can move 00:23:10.080 --> 00:23:17.080 that around, theoretically, I believe, if. Whoa. 00:23:22.470 --> 00:23:29.470 Nevermind. Let's not touch that. Live coding. 00:23:31.570 --> 00:23:38.570 All right. So sync is a pretty cool little 00:23:38.640 --> 00:23:41.340 library. It does quite a lot for us. What 00:23:41.340 --> 00:23:44.150 it's going to do, is it's going to hold 00:23:44.150 --> 00:23:48.010 a connection via web socket to a server, and 00:23:48.010 --> 00:23:50.840 then it's going to put mechanisms within Rails to 00:23:50.840 --> 00:23:55.049 talk to that, that web socket, and then when 00:23:55.049 --> 00:23:58.750 our resources change, it will render those templates and 00:23:58.750 --> 00:24:01.090 push that out to that web socket, which the 00:24:01.090 --> 00:24:04.390 clients will then pull down, K. So without re, 00:24:04.390 --> 00:24:08.510 without rearchitecting our presentation tier, we are able to 00:24:08.510 --> 00:24:11.710 take advantage of real time, and able to do 00:24:11.710 --> 00:24:15.929 it without a major change to how we're organizing 00:24:15.929 --> 00:24:19.350 or architecting our templates, our files. 00:24:19.350 --> 00:24:22.820 We can go just a little bit further, as 00:24:22.820 --> 00:24:29.380 well. So let's open a Rails console, K, and 00:24:29.380 --> 00:24:36.380 we'll say. Just get, just a comment out of 00:24:37.179 --> 00:24:43.909 here. All right. So I got this comment right 00:24:43.909 --> 00:24:46.409 here, which is Jason saying that he's watching, but 00:24:46.409 --> 00:24:48.100 he's kind of on a delay because he's not 00:24:48.100 --> 00:24:50.559 actually in the room, K. 00:24:50.559 --> 00:24:54.929 What we can say here is sync model dot 00:24:54.929 --> 00:24:58.809 enable, and this will allow all changes that happen 00:24:58.809 --> 00:25:01.669 within our process, that's not running on the web 00:25:01.669 --> 00:25:03.960 server, still a Rails process, but we're not actually 00:25:03.960 --> 00:25:06.580 on running on the web server. It's a separate 00:25:06.580 --> 00:25:09.289 process. Maybe a background job. But now all of 00:25:09.289 --> 00:25:11.750 our changes that we make can also be reflected 00:25:11.750 --> 00:25:14.100 in real time as well. 00:25:14.100 --> 00:25:20.640 So let's pull this guy over. And watch that 00:25:20.640 --> 00:25:24.559 happen. So we can change this to, what should 00:25:24.559 --> 00:25:31.559 Jason say? Say, I don't know, real time. K, 00:25:35.350 --> 00:25:38.140 so let's pull him out. You see that his 00:25:38.140 --> 00:25:40.580 text is right here. I'm watching, kind of. When 00:25:40.580 --> 00:25:43.840 I call save it will change, and it updates 00:25:43.840 --> 00:25:50.750 right here, in real time. And duplicate. Why? Chris? 00:25:50.750 --> 00:25:51.950 Why? 00:25:51.950 --> 00:25:53.140 Applettes. 00:25:53.140 --> 00:25:57.940 AUDIENCE: Wait till afterwards. 00:25:57.940 --> 00:26:02.730 M.M.: Afterwards? All right. 00:26:02.730 --> 00:26:06.080 OK. Let's continue and add this to some of 00:26:06.080 --> 00:26:11.850 the other pages as well. So let's go to 00:26:11.850 --> 00:26:14.059 post. Let's do the same thing. We want to 00:26:14.059 --> 00:26:20.659 sync our posts as well. And our posts controller, 00:26:20.659 --> 00:26:25.240 we want to enable sync here as. 00:26:25.240 --> 00:26:30.750 Enable sync on our post controller and in our 00:26:30.750 --> 00:26:34.120 posts model. So let's go ahead and take a 00:26:34.120 --> 00:26:39.640 look at our post index page. Our index page, 00:26:39.640 --> 00:26:41.340 where we're listing all the posts, we're gonna go 00:26:41.340 --> 00:26:45.970 through and render the post. And then, if we 00:26:45.970 --> 00:26:51.159 have, if we can, we'll add, we'll have a 00:26:51.159 --> 00:26:53.760 button to add a new post. If we look 00:26:53.760 --> 00:26:57.370 at that post partial, you notice here, again, we've 00:26:57.370 --> 00:26:59.610 got some logic in here determining whether or not 00:26:59.610 --> 00:27:01.809 we can edit it, or whether or not we 00:27:01.809 --> 00:27:04.150 can remove it. 00:27:04.150 --> 00:27:07.380 So this logic is problematic when we're talking about 00:27:07.380 --> 00:27:09.710 a cache template that's gonna get pushed out to 00:27:09.710 --> 00:27:12.030 everybody, cause not everybody's gonna have the same amount 00:27:12.030 --> 00:27:14.370 of permissions. So what we'll have to do is 00:27:14.370 --> 00:27:17.070 we'll have to just take that out. And I'm 00:27:17.070 --> 00:27:20.110 gonna take it out and put it into the 00:27:20.110 --> 00:27:21.820 index template. 00:27:21.820 --> 00:27:26.200 Well. Actually, I'm just gonna take it out of, 00:27:26.200 --> 00:27:31.029 of this view altogether. So, again, in order to 00:27:31.029 --> 00:27:34.029 change our template from a static template to a 00:27:34.029 --> 00:27:41.029 real time template, we're gonna say sync and partial 00:27:43.500 --> 00:27:48.789 is a post. And then our resource is also 00:27:48.789 --> 00:27:53.659 gonna be that same post, and then, if we 00:27:53.659 --> 00:27:56.870 get a new post, it just lists him down 00:27:56.870 --> 00:28:00.490 below. We don't, probably don't need to scope on 00:28:00.490 --> 00:28:03.770 this one. The big problem we have is all 00:28:03.770 --> 00:28:09.169 of this edit information. So let's go over here 00:28:09.169 --> 00:28:12.200 to posts and get rid of that guy. So 00:28:12.200 --> 00:28:15.559 I'm just gonna remove some, some code here. I'm 00:28:15.559 --> 00:28:19.120 gonna remove all of this editing. Anything that's gonna 00:28:19.120 --> 00:28:21.270 talk to current user, the current request is not 00:28:21.270 --> 00:28:27.169 gonna work. So let's get rid of that. 00:28:27.169 --> 00:28:34.169 And now let's take a look at, take a 00:28:36.580 --> 00:28:43.580 look at our, our post pages. I don't know 00:28:45.039 --> 00:28:50.400 what that is. 00:28:50.400 --> 00:28:52.320 We're asking for posts, it doesn't exist outside of 00:28:52.320 --> 00:28:57.159 that block. So we're gonna say post dot new. 00:28:57.159 --> 00:29:04.159 OK. So, again, user not logged in, user logged 00:29:05.029 --> 00:29:09.159 in, and as a different user logged in. So 00:29:09.159 --> 00:29:11.500 if I come over here, I want to add 00:29:11.500 --> 00:29:18.500 new post. See if it works. And let's add 00:29:22.799 --> 00:29:23.289 that. 00:29:23.289 --> 00:29:25.990 So, Stanley added this post. It shows up immediately 00:29:25.990 --> 00:29:29.419 on, on Mike's browser. And it also shows up 00:29:29.419 --> 00:29:33.090 in the not logged in browser. Let's come over 00:29:33.090 --> 00:29:40.090 here. We'll, we'll say congrats. Now. 00:29:45.980 --> 00:29:49.409 This browser over the right, the comment is not 00:29:49.409 --> 00:29:55.620 updating, right. Let's go back over here. So here, 00:29:55.620 --> 00:30:02.620 we've got one comment. Stanley says, I know. And 00:30:03.659 --> 00:30:07.529 that, that one comment here is still not updated. 00:30:07.529 --> 00:30:10.750 So we've got changes happening on a sub-resource, but 00:30:10.750 --> 00:30:15.470 it's not changing our template. Thankfully there's a really 00:30:15.470 --> 00:30:19.590 nice DSL to make that happen. So we'll go 00:30:19.590 --> 00:30:23.230 to our comment controll- or, comment object, and we'll 00:30:23.230 --> 00:30:28.510 say sync touch post. K. 00:30:28.510 --> 00:30:31.390 So this is similar to normal touch. If you 00:30:31.390 --> 00:30:34.529 want, have a resource that you want to touch 00:30:34.529 --> 00:30:38.350 through an association whenever it updates, it works just 00:30:38.350 --> 00:30:41.200 the same, only it's a special one that'll work 00:30:41.200 --> 00:30:46.090 for sync. So let's save that and refresh all 00:30:46.090 --> 00:30:51.679 of these browsers. K. So now they all have 00:30:51.679 --> 00:30:55.320 two comments. OK. 00:30:55.320 --> 00:31:02.070 I come over here. Let's have Stanley add one 00:31:02.070 --> 00:31:09.070 more, add one more comment. Man, Chris. Now the 00:31:09.200 --> 00:31:14.890 comments are updating multiple times. I'm curious to why 00:31:14.890 --> 00:31:19.760 that is. It wasn't doing that an hour ago. 00:31:19.760 --> 00:31:26.760 What did I miss? OK. 00:31:27.669 --> 00:31:32.210 There's one more, there's one more review of posts 00:31:32.210 --> 00:31:38.130 here, and that is the actual post page. So 00:31:38.130 --> 00:31:45.130 we can edit this. So let's say it sort 00:31:45.480 --> 00:31:48.960 of works, but now this page isn't updating and 00:31:48.960 --> 00:31:51.580 this page isn't updating, right. So we, I've updated 00:31:51.580 --> 00:31:54.559 this post, but the other browsers aren't updating on 00:31:54.559 --> 00:31:57.029 the show page. The reason for that is because 00:31:57.029 --> 00:32:00.179 we're not syncing the template on that page. So 00:32:00.179 --> 00:32:03.909 really quick we'll see, we'll show you just how 00:32:03.909 --> 00:32:05.570 easy it is to do that. We'll come over 00:32:05.570 --> 00:32:09.760 here to show. We have this same information where 00:32:09.760 --> 00:32:13.730 we're pawing out all of these links determining, you 00:32:13.730 --> 00:32:16.980 know, whether or not we can edit. I'm gonna 00:32:16.980 --> 00:32:19.159 punt on that. I'm just gonna put that down 00:32:19.159 --> 00:32:23.000 below. So it's not gonna be part of any 00:32:23.000 --> 00:32:24.740 template. So if you hit this page and you 00:32:24.740 --> 00:32:27.590 can edit it, we're going to show you those 00:32:27.590 --> 00:32:32.179 links. But it's gonna be outside of the, outside 00:32:32.179 --> 00:32:34.190 of the, the partial. 00:32:34.190 --> 00:32:39.250 So I'm just gonna sit. We're gonna sync a 00:32:39.250 --> 00:32:46.250 new partial and it's gonna be called, oh my 00:32:48.870 --> 00:32:55.870 gosh. I cannot type. It really is so uncomfortable. 00:32:59.190 --> 00:33:02.230 So a new partial, we're gonna call this postfull, 00:33:02.230 --> 00:33:06.460 because we have the full body embedded in it. 00:33:06.460 --> 00:33:09.220 And the resource is going to be that post 00:33:09.220 --> 00:33:12.840 object. And then that's really it. We come back 00:33:12.840 --> 00:33:17.080 here to our sync directory under posts, create a 00:33:17.080 --> 00:33:24.080 new file, and we'll save this as postfull. 00:33:26.789 --> 00:33:30.580 And then we'll come back, restart all of these 00:33:30.580 --> 00:33:37.580 browsers, and come back here and edit this and 00:33:39.909 --> 00:33:46.909 so it really does work. What? 00:33:47.159 --> 00:33:52.010 What am I missing? 00:33:52.010 --> 00:33:56.860 AUDIENCE: [indecipherable - 00:34:01] 00:33:56.860 --> 00:34:03.860 M.M.: I did refresh the browsers. Let's refresh it 00:34:05.409 --> 00:34:08.099 one more time. 00:34:08.099 --> 00:34:12.579 AUDIENCE: Did you try rebooting? 00:34:12.579 --> 00:34:17.799 M.M.: Huh. All right. Again. It worked an hour 00:34:17.799 --> 00:34:19.389 ago. 00:34:19.389 --> 00:34:25.208 So, that's sync. I'm out of time. But we've 00:34:25.208 --> 00:34:29.949 used this on some internal apps dealing with monitoring. 00:34:29.949 --> 00:34:34.279 And instead of pulling, continually asking for new information, 00:34:34.279 --> 00:34:37.009 just organizing a Rails app like you always have 00:34:37.009 --> 00:34:40.099 with templates and having those templates update whenever resource 00:34:40.099 --> 00:34:43.518 is changed has been just a really, really great, 00:34:43.518 --> 00:34:47.319 fantastic thing. There are caveats. It's a little touchy, 00:34:47.319 --> 00:34:49.449 as you can see. But it's definitely been getting 00:34:49.449 --> 00:34:51.719 better over time. 00:34:51.719 --> 00:34:53.349 I would just like to leave you with this 00:34:53.349 --> 00:34:58.259 little pitch, that Rails has benefited, over the years, 00:34:58.259 --> 00:35:04.759 from being first to, to popularize certain approaches for 00:35:04.759 --> 00:35:07.499 web development. It was there at the very beginning 00:35:07.499 --> 00:35:09.140 with Ajax. It was there are the very beginning 00:35:09.140 --> 00:35:13.049 with REST. I, I strongly feel that if we 00:35:13.049 --> 00:35:16.229 are not able to do real time information within 00:35:16.229 --> 00:35:19.670 Rails that people will move on from Rails. And 00:35:19.670 --> 00:35:22.319 I totally think that you don't need to. I 00:35:22.319 --> 00:35:24.950 know that there's a lot of functionality that is 00:35:24.950 --> 00:35:26.890 very difficult to do with Rails as it is 00:35:26.890 --> 00:35:29.430 today, and so people are looking outside of Rails 00:35:29.430 --> 00:35:32.969 for the presentation. But there are so many advantages 00:35:32.969 --> 00:35:36.940 to rendering your html on the server that we 00:35:36.940 --> 00:35:38.459 just need to think a little bit differently and 00:35:38.459 --> 00:35:39.579 a little bit better about it. 00:35:39.580 --> 00:35:42.080 So, I'll open it up to questions.