1 00:00:16,000 --> 00:00:19,400 MIKE MOORE: Hello. My name is Mike Moore, 2 00:00:19,439 --> 00:00:22,970 and I'm gonna talk about real-time Rails with Sync. 3 00:00:22,970 --> 00:00:28,500 So, hi. Hello. How's Rails Conf? 4 00:00:28,500 --> 00:00:30,750 My name is Mike Moore. You might know be 5 00:00:30,750 --> 00:00:33,579 as blowmage or blowmage depending on how you want 6 00:00:33,579 --> 00:00:36,230 to pronounce it. It doesn't matter. 7 00:00:36,230 --> 00:00:38,730 I am very happy to be here. I'm leaving 8 00:00:38,730 --> 00:00:41,220 in about an hour to fly home, so I'm 9 00:00:41,220 --> 00:00:44,380 only here for this. And I'm a hundred percent, 10 00:00:44,380 --> 00:00:47,180 totally prepared for this. I was not up all 11 00:00:47,180 --> 00:00:50,070 night. I did not make these slides twenty minutes 12 00:00:50,070 --> 00:00:52,000 ago. Yeah. 13 00:00:52,000 --> 00:00:58,920 So. Who likes live coding? Three people! All right. 14 00:00:58,920 --> 00:01:01,430 K. We're gonna talk about Sync. Sync is a 15 00:01:01,430 --> 00:01:05,509 fantastic little Rails engine written by Chris McCord. Is 16 00:01:05,509 --> 00:01:07,869 Chris, where's Chris? Is he here? There he is. 17 00:01:07,869 --> 00:01:09,090 If you don't like it - that guy right 18 00:01:09,090 --> 00:01:12,219 there. You can find it on the GitHub. That's 19 00:01:12,219 --> 00:01:15,149 at chrismccord slash sync. 20 00:01:15,149 --> 00:01:18,270 So yeah. Let's do this. 21 00:01:18,270 --> 00:01:24,210 All right. So I have a. I have an 22 00:01:24,210 --> 00:01:31,210 app. And I'm just gonna load it up here. 23 00:01:32,780 --> 00:01:36,380 And it's a very simple app. I was gonna 24 00:01:36,380 --> 00:01:39,439 have a little bit more interesting app to demonstrate 25 00:01:39,439 --> 00:01:41,979 this, but I ran into an issue. And maybe 26 00:01:41,979 --> 00:01:43,649 we'll talk about that at the end. If we 27 00:01:43,649 --> 00:01:45,670 have time. 28 00:01:45,670 --> 00:01:48,880 But this is a very simple bloggish type of 29 00:01:48,880 --> 00:01:52,939 application, where we've got posts, we've got comments, we've 30 00:01:52,939 --> 00:01:56,810 got users, and some tags. Oh, and also, this 31 00:01:56,810 --> 00:02:00,359 is the git repo for Sync. So please check 32 00:02:00,359 --> 00:02:01,329 it out. 33 00:02:01,329 --> 00:02:04,289 K, so. I want to just demonstrate this very 34 00:02:04,289 --> 00:02:06,829 simple Rails application. We'll go look at a little 35 00:02:06,829 --> 00:02:09,649 bit of code, and we're going to, we're gonna 36 00:02:09,649 --> 00:02:12,600 add Sync to this application, and we're gonna turn 37 00:02:12,600 --> 00:02:17,460 it from a very classic, kind of CRUD-y Rails 38 00:02:17,460 --> 00:02:19,740 application into real time. 39 00:02:19,740 --> 00:02:24,590 So. A little, one note before we start on 40 00:02:24,590 --> 00:02:28,980 code quality, this app is intentionally unfactored. So there 41 00:02:28,980 --> 00:02:32,470 is lots of places where you might apply some 42 00:02:32,470 --> 00:02:35,340 design in an application that I have not, for 43 00:02:35,340 --> 00:02:37,360 this. But, the reason for that is so that 44 00:02:37,360 --> 00:02:40,670 I can, we can refactor it to Sync a 45 00:02:40,670 --> 00:02:43,170 little bit easier, without having to unfactor it along 46 00:02:43,170 --> 00:02:43,920 the way. 47 00:02:43,920 --> 00:02:45,920 So, we'll go ahead and get started. So we 48 00:02:45,920 --> 00:02:50,070 have a series of posts. And then when you 49 00:02:50,070 --> 00:02:52,600 click on a post, you go to the post's 50 00:02:52,600 --> 00:02:56,930 show action. On that post's show action, we've got 51 00:02:56,930 --> 00:03:00,930 a series of comments. That is no different than 52 00:03:00,930 --> 00:03:05,680 going to slash comments, other than it just looks 53 00:03:05,680 --> 00:03:08,120 a little bit different. So. We're not gonna need 54 00:03:08,120 --> 00:03:10,460 to be looking at the comments on the actual 55 00:03:10,460 --> 00:03:13,580 resource. We're gonna be looking at it on the 56 00:03:13,580 --> 00:03:19,630 post resource. And that's it. So, you know, say, 57 00:03:19,630 --> 00:03:24,520 Hello RailsConf. Woo. Oh. Also, disclaimer, I cannot type 58 00:03:24,520 --> 00:03:29,090 in public. So this is gonna be very interesting. 59 00:03:29,090 --> 00:03:30,240 So I can go ahead and I can add 60 00:03:30,240 --> 00:03:34,920 a comment. I can delete a comment, because it's 61 00:03:34,920 --> 00:03:39,450 owned by me. I can go into posts that 62 00:03:39,450 --> 00:03:42,950 I own and I can edit those posts. So 63 00:03:42,950 --> 00:03:45,500 like that, right. Pretty simple. 64 00:03:45,500 --> 00:03:52,500 OK. So let's bump this out a little bit. 65 00:03:52,610 --> 00:03:56,060 So here is our application. You, same thing as 66 00:03:56,060 --> 00:03:59,340 we saw before. Our home controller is the, the 67 00:03:59,340 --> 00:04:03,130 home page. That showed the Jumbotron there. And this 68 00:04:03,130 --> 00:04:06,819 is all very bootstrappy. I'm sorry. 69 00:04:06,819 --> 00:04:10,490 Here's our posts controller. Almost straight out of the 70 00:04:10,490 --> 00:04:17,490 box Rails resource here. Our comments controller is nested 71 00:04:18,930 --> 00:04:23,870 underneath our posts controller. We've got a little bit 72 00:04:23,870 --> 00:04:29,430 of additional calls here for access. Those are defined 73 00:04:29,430 --> 00:04:32,710 in helpers. This may not be how you would 74 00:04:32,710 --> 00:04:35,670 do this in a real application, but for demonstration 75 00:04:35,670 --> 00:04:39,170 purposes it, it fits the need. And I can 76 00:04:39,170 --> 00:04:42,740 use these methods in the controller and also in 77 00:04:42,740 --> 00:04:45,150 the views. 78 00:04:45,150 --> 00:04:48,190 OK. So let's take a look at the routes. 79 00:04:48,190 --> 00:04:50,150 So you see we're not, we're not, we're not 80 00:04:50,150 --> 00:04:56,130 cheating. So we've got nested comments under posts. We've 81 00:04:56,130 --> 00:04:58,040 also got tags. Let's take a look at tags 82 00:04:58,040 --> 00:05:01,840 real quick. Tags are just a string attached to 83 00:05:01,840 --> 00:05:05,370 these various posts, and so if you click on 84 00:05:05,370 --> 00:05:07,740 the Rails tag, you see there are three of 85 00:05:07,740 --> 00:05:10,970 the four posts that are tagged with Rails. And 86 00:05:10,970 --> 00:05:15,190 then there is a list. So. 87 00:05:15,190 --> 00:05:18,600 Let's say that we have this application, and we 88 00:05:18,600 --> 00:05:21,570 want to make it more awesome than it is 89 00:05:21,570 --> 00:05:24,910 today. One of the things we really want is 90 00:05:24,910 --> 00:05:28,810 we want to approximate what some of the apps 91 00:05:28,810 --> 00:05:33,800 that are using heavy Javascript MVC frameworks are accomplishing 92 00:05:33,800 --> 00:05:38,250 with, with their responsiveness, and just kind of like 93 00:05:38,250 --> 00:05:41,400 updating the UI because something changed. 94 00:05:41,400 --> 00:05:46,290 And so instead of basically rewriting our entire frontend, 95 00:05:46,290 --> 00:05:49,230 our entire presentation layer, and then also creating an 96 00:05:49,230 --> 00:05:53,940 API to support that Javascript presentation layer, it's my 97 00:05:53,940 --> 00:05:58,400 conjecture that, conj- it's my assertion here that we 98 00:05:58,400 --> 00:06:02,050 can use Rails the way Rails is intended to 99 00:06:02,050 --> 00:06:06,220 be used, but still gain a good sub, a 100 00:06:06,220 --> 00:06:10,190 good, large portion of, of this type of functionality. 101 00:06:10,190 --> 00:06:10,889 So. 102 00:06:10,889 --> 00:06:14,070 Let's go ahead and jump in. 103 00:06:14,070 --> 00:06:17,530 All right, so the first thing we want to 104 00:06:17,530 --> 00:06:22,020 do is open the gemfile and we want to 105 00:06:22,020 --> 00:06:27,530 add a few gems. The first one is faye. 106 00:06:27,530 --> 00:06:28,980 And the reason we need to add faye is 107 00:06:28,980 --> 00:06:34,130 just for, for development. So we're gonna use faye 108 00:06:34,130 --> 00:06:36,350 for our browser to talk over websocket back to 109 00:06:36,350 --> 00:06:40,800 the server. And then faye also needs thin, but 110 00:06:40,800 --> 00:06:44,480 we don't like thin very much, so we're gonna 111 00:06:44,480 --> 00:06:49,770 not require it by default. And then the last 112 00:06:49,770 --> 00:06:53,490 one is Sync. K. 113 00:06:53,490 --> 00:06:58,440 So we'll bundle install that. Told you I couldn't 114 00:06:58,440 --> 00:07:02,290 type. There you go. 115 00:07:02,290 --> 00:07:04,270 So now we've got, we've added sync to the 116 00:07:04,270 --> 00:07:07,620 application. We need to go a couple steps further. 117 00:07:07,620 --> 00:07:09,860 The first is, in our application file, we need 118 00:07:09,860 --> 00:07:15,220 to add the Javascript for Sync. And so this 119 00:07:15,220 --> 00:07:17,970 will be loaded as part of our normal application 120 00:07:17,970 --> 00:07:22,250 Javascript everywhere. It will get pulled in by the, 121 00:07:22,250 --> 00:07:26,820 the, by the asset pipeline. And then also we 122 00:07:26,820 --> 00:07:31,120 need to go into our layout, our main application 123 00:07:31,120 --> 00:07:35,080 layout, and there's another Javascript tag that we need 124 00:07:35,080 --> 00:07:40,830 to add. And that is going to be, we're 125 00:07:40,830 --> 00:07:45,949 gonna use a little helper from Sync, adapter Javascript 126 00:07:45,949 --> 00:07:51,150 url. 127 00:07:51,150 --> 00:07:53,030 And we'll talk about what all these mean, hopefully 128 00:07:53,030 --> 00:07:56,949 by the end of this. OK. Now we're good 129 00:07:56,949 --> 00:08:00,389 to go. So what we need to do, before 130 00:08:00,389 --> 00:08:04,030 we do anything else, is we need to start 131 00:08:04,030 --> 00:08:08,810 up faye to run our web socket connections. So 132 00:08:08,810 --> 00:08:10,639 we can do that pretty easily. We can just 133 00:08:10,639 --> 00:08:14,949 say rack up Sync. 134 00:08:14,949 --> 00:08:21,949 Oh. I'm sorry. One more thing. We need to 135 00:08:24,040 --> 00:08:31,040 just take a look at our generators. Oh, gosh. 136 00:08:31,110 --> 00:08:35,130 K. There is now this install generator that was 137 00:08:35,130 --> 00:08:38,610 added by, by sync, so let's go ahead and 138 00:08:38,610 --> 00:08:41,729 run that generator. That will create a rackup file 139 00:08:41,729 --> 00:08:43,700 and a configuration file. 140 00:08:43,700 --> 00:08:50,540 So. Now that we have that, we can, we 141 00:08:50,540 --> 00:08:54,930 can run this. Now this is going to run 142 00:08:54,930 --> 00:08:58,070 faye in the background, and then here we can 143 00:08:58,070 --> 00:09:01,810 just run our application. Come back over here and 144 00:09:01,810 --> 00:09:04,100 refresh and nothing has changed, but it all continues 145 00:09:04,100 --> 00:09:07,960 to work. So faye is running, but we're not 146 00:09:07,960 --> 00:09:10,200 actually talking to it. But we know that it, 147 00:09:10,200 --> 00:09:13,550 it's up. So. That's the important first step. 148 00:09:13,550 --> 00:09:17,279 I don't particularly like having to open up two 149 00:09:17,279 --> 00:09:19,760 consoles, so one of the things I will do 150 00:09:19,760 --> 00:09:22,510 is I'm gonna create a new file called, a 151 00:09:22,510 --> 00:09:29,330 new proc file, and then inside of it I'm 152 00:09:29,330 --> 00:09:36,330 gonna have a web entry. So you can't see 153 00:09:38,010 --> 00:09:40,290 this, but this, I have to scooch down to, 154 00:09:40,290 --> 00:09:41,620 so you can hear me, and it's killing my 155 00:09:41,620 --> 00:09:41,770 back. 156 00:09:41,770 --> 00:09:48,770 AUDIENCE: I think you can just stand up and 157 00:09:48,930 --> 00:09:51,060 do it. 158 00:09:51,060 --> 00:09:58,060 M.M.: Are you sure? All right. Exec, so rackup, 159 00:09:59,089 --> 00:10:06,000 sync conf, sync ru. OK. 160 00:10:06,000 --> 00:10:07,370 The other thing we need to do is come 161 00:10:07,370 --> 00:10:14,370 back over here and add foreman. K. So, so 162 00:10:16,690 --> 00:10:20,240 install that. Foreman is a gem written by Heroku, 163 00:10:20,240 --> 00:10:21,870 and so if you have lots of services that 164 00:10:21,870 --> 00:10:25,600 you are coordinating, Foreman's a good way to, to 165 00:10:25,600 --> 00:10:27,860 start all of those. So now instead of going 166 00:10:27,860 --> 00:10:31,600 to multiple terminals to open up, open this up, 167 00:10:31,600 --> 00:10:35,730 I can just say Foreman start, and it will 168 00:10:35,730 --> 00:10:40,190 start both. So that's kind of handy. 169 00:10:40,190 --> 00:10:43,060 All right. Let's take a look at one of 170 00:10:43,060 --> 00:10:48,620 these, one of these pages. What I want is 171 00:10:48,620 --> 00:10:50,300 I want to be able to come over here 172 00:10:50,300 --> 00:10:53,330 onto this page and I want to add a 173 00:10:53,330 --> 00:10:55,430 new comment, and then I want people to see 174 00:10:55,430 --> 00:11:01,610 it as soon as it shows up, right. 175 00:11:01,610 --> 00:11:04,980 So if I say see me, my, my browser 176 00:11:04,980 --> 00:11:08,680 refreshes. But all of these browsers over here won't 177 00:11:08,680 --> 00:11:15,680 necessarily. So let's go to this guy. K. 178 00:11:24,430 --> 00:11:31,430 So if I, for example, delete this one, it 179 00:11:33,770 --> 00:11:35,470 still shows up in these other browsers. And I 180 00:11:35,470 --> 00:11:38,170 would really like it if it would disappear as 181 00:11:38,170 --> 00:11:45,170 soon as we ask it to. So let's make 182 00:11:45,300 --> 00:11:48,740 that happen. To do that, we are going to 183 00:11:48,740 --> 00:11:55,390 register our ActiveRecord models to be synced in browsers. 184 00:11:55,390 --> 00:11:56,740 And Sync is going to take care of all 185 00:11:56,740 --> 00:12:00,029 of the communication from our Rails application, all the 186 00:12:00,029 --> 00:12:01,779 way down to the browsers for us. 187 00:12:01,779 --> 00:12:05,140 So, to do that, there's a couple of things 188 00:12:05,140 --> 00:12:09,940 we want to change. First is, we map up 189 00:12:09,940 --> 00:12:14,470 our comment model. And we're gonna add this little 190 00:12:14,470 --> 00:12:17,339 declaration called sync_all to it. This is going to 191 00:12:17,339 --> 00:12:20,209 insert the sync DSL into the model. So now 192 00:12:20,209 --> 00:12:22,430 whenever the model changes, it will try to notify 193 00:12:22,430 --> 00:12:25,990 the browsers that something has changed. We also, we 194 00:12:25,990 --> 00:12:30,640 need to open up our controller, and we need 195 00:12:30,640 --> 00:12:37,640 to enable sync here as well. K. 196 00:12:38,430 --> 00:12:41,360 And this is, again, just to, so the controller 197 00:12:41,360 --> 00:12:43,209 knows to look for all of the messages from 198 00:12:43,209 --> 00:12:48,589 the models that something has updated and respond appropriately. 199 00:12:48,589 --> 00:12:53,870 Let's take a look at the post show action. 200 00:12:53,870 --> 00:12:58,279 Like I said, this is a mess of HTML. 201 00:12:58,279 --> 00:13:00,040 This is not necessarily how I would do it, 202 00:13:00,040 --> 00:13:03,360 but this is how it is. We've got kind 203 00:13:03,360 --> 00:13:06,300 of two main areas of the page. The first 204 00:13:06,300 --> 00:13:08,420 is at the top, where you've got all the 205 00:13:08,420 --> 00:13:11,980 content for the blog post. So the title, the 206 00:13:11,980 --> 00:13:15,779 user, those tags that are on the, the blog 207 00:13:15,779 --> 00:13:19,649 post. Some editing links, if they are there, and 208 00:13:19,649 --> 00:13:23,459 then also the markdown of the body. OK. 209 00:13:23,459 --> 00:13:26,290 Then after that we've got our comments section, which 210 00:13:26,290 --> 00:13:29,040 is going to iterate through the comments, and because 211 00:13:29,040 --> 00:13:31,830 we're showing, and then we're rendering a partial for 212 00:13:31,830 --> 00:13:36,920 the comment. And then after that, there's also another 213 00:13:36,920 --> 00:13:40,209 area to add a new comment, if you can. 214 00:13:40,209 --> 00:13:41,410 So if you're logged in, you should be able 215 00:13:41,410 --> 00:13:43,730 to comment. And if you're not logged in, you 216 00:13:43,730 --> 00:13:47,600 shouldn't. And that's what that add comment helper there 217 00:13:47,600 --> 00:13:49,600 is guarding for us. 218 00:13:49,600 --> 00:13:52,019 So, we want to make, we just want to 219 00:13:52,019 --> 00:13:55,160 make this sync. It's pretty easy. What we're gonna 220 00:13:55,160 --> 00:13:57,890 do, we're gonna change this from render to sync 221 00:13:57,890 --> 00:14:04,890 partial, and then we're gonna say that our resource 222 00:14:06,940 --> 00:14:08,760 is our comment. So we've made it just a 223 00:14:08,760 --> 00:14:12,450 little more verbose than what it was before, but 224 00:14:12,450 --> 00:14:14,250 sync needs that. 225 00:14:14,250 --> 00:14:17,149 The next thing we're gonna do is we're gonna 226 00:14:17,149 --> 00:14:20,540 add a new directory under app/views called sync, and 227 00:14:20,540 --> 00:14:25,820 under sync we're gonna add another folder called comments. 228 00:14:25,820 --> 00:14:28,060 And under comments, we're gonna add a new file, 229 00:14:28,060 --> 00:14:31,779 and that's gonna be called comments dot html dot 230 00:14:31,779 --> 00:14:34,810 erb. That's gonna be our partial, K. 231 00:14:34,810 --> 00:14:39,430 So, when we say sync partial here, instead of 232 00:14:39,430 --> 00:14:41,269 looking at our normal template, it's gonna go look 233 00:14:41,269 --> 00:14:44,300 for the one in the sync directory. And for 234 00:14:44,300 --> 00:14:47,910 the most part, we're just gonna take our trusty 235 00:14:47,910 --> 00:14:51,209 old partial that we're using right now and copy 236 00:14:51,209 --> 00:14:52,899 and paste that. We can kind of just trim 237 00:14:52,899 --> 00:14:55,260 some of this out. One of the caveats of 238 00:14:55,260 --> 00:14:59,610 using sync is that we can't really do stuff 239 00:14:59,610 --> 00:15:02,700 like this. We can't ask about the current context 240 00:15:02,700 --> 00:15:04,649 in which it's running, because this will get pushed 241 00:15:04,649 --> 00:15:08,420 out to everybody. So this, the same strategy you 242 00:15:08,420 --> 00:15:13,260 have for caching templates, caching partials within your application, 243 00:15:13,260 --> 00:15:15,820 you're gonna apply that same strategy to the real 244 00:15:15,820 --> 00:15:17,370 time updates as well. 245 00:15:17,370 --> 00:15:20,100 And so stuff like this is probably just, just 246 00:15:20,100 --> 00:15:23,029 gonna have to go, right. We can have the 247 00:15:23,029 --> 00:15:25,490 user name, we have have what the body is. 248 00:15:25,490 --> 00:15:28,959 But we really can't have all those editing options. 249 00:15:28,959 --> 00:15:32,980 AUDIENCE: [indecipherable - 00:15:35] 250 00:15:32,980 --> 00:15:39,980 M.M.: Oh, did I? Thank you. 251 00:15:41,019 --> 00:15:48,019 Let's rename this. So comment instead of comments. So 252 00:15:48,579 --> 00:15:51,779 that's our first step. The next change we want 253 00:15:51,779 --> 00:15:54,380 to make is, whenever a new comment comes, we 254 00:15:54,380 --> 00:15:58,040 want that to show up underneath, and so instead 255 00:15:58,040 --> 00:16:00,430 of calling sync, we're gonna call sync.new. This is 256 00:16:00,430 --> 00:16:04,250 going to watch for new comments. 257 00:16:04,250 --> 00:16:09,139 In here, the resource is going to have to 258 00:16:09,139 --> 00:16:14,029 be a comment dot new, is that right? We 259 00:16:14,029 --> 00:16:19,680 can probably go a little bit further and say 260 00:16:19,680 --> 00:16:24,010 posts.comment dot new. K. All right. 261 00:16:24,010 --> 00:16:26,060 So that's not a lot of changes. What we've 262 00:16:26,060 --> 00:16:28,170 done is we've added sync to the repository, to 263 00:16:28,170 --> 00:16:32,550 the application. We've registered all the Javascript. We've went 264 00:16:32,550 --> 00:16:36,720 in, went ahead, moved some of our html from 265 00:16:36,720 --> 00:16:41,170 the original locations to a new location under sync 266 00:16:41,170 --> 00:16:44,690 and instead of calling render, we're gonna call sync 267 00:16:44,690 --> 00:16:45,600 and sync new. 268 00:16:45,600 --> 00:16:47,060 AUDIENCE: [indecipherable - 00:16:47] 269 00:16:47,060 --> 00:16:48,510 M.M.: What's that? 270 00:16:48,510 --> 00:16:49,970 AUDIENCE: [indecipherable - 00:16:49] 271 00:16:49,970 --> 00:16:54,709 M.M.: Post, yes. Thank you. Live coding, ladies and 272 00:16:54,709 --> 00:16:55,440 gentlemen. 273 00:16:55,440 --> 00:16:59,510 Yeah. I transposed the plural. There you go. 274 00:16:59,510 --> 00:17:00,839 AUDIENCE: Pair programming to scale. 275 00:17:00,839 --> 00:17:01,740 M.M.: Pair programming to scale. All right. 276 00:17:01,740 --> 00:17:03,070 So let's see if this works. What I'm gonna 277 00:17:03,070 --> 00:17:05,260 do is I'm gonna refresh this page. I'm gonna 278 00:17:05,260 --> 00:17:07,130 refresh this page. I'm gonna refresh this page. Now 279 00:17:07,130 --> 00:17:13,160 Firefox is not logged in. Safari here is logged 280 00:17:13,160 --> 00:17:15,669 in here by Stanley, who's back there somewhere, and 281 00:17:15,669 --> 00:17:19,819 then Chrome is logged in by me. So let's 282 00:17:19,819 --> 00:17:22,130 see if this works. Who wants to place a 283 00:17:22,130 --> 00:17:22,679 bet? 284 00:17:22,679 --> 00:17:25,419 Does this work? Anybody know? 285 00:17:25,419 --> 00:17:30,340 All right. Let's see if it works. All right. 286 00:17:30,340 --> 00:17:37,340 There we go. Does this work? K. Yay! 287 00:17:38,640 --> 00:17:41,850 So what's nice about this approach is that this 288 00:17:41,850 --> 00:17:44,120 is gonna go out no matter how many clients 289 00:17:44,120 --> 00:17:49,910 you've got connected, theoretically. Every time your, your assets 290 00:17:49,910 --> 00:17:52,400 change, your resources change in your application, they can 291 00:17:52,400 --> 00:17:54,590 be notified in real time. K. 292 00:17:54,590 --> 00:17:55,900 And we didn't have to write a whole bunch 293 00:17:55,900 --> 00:17:58,820 of Javascript. We didn't have to change how we 294 00:17:58,820 --> 00:18:02,270 were architecting our presentation layer. We're gonna use the, 295 00:18:02,270 --> 00:18:08,290 the same infrastructure that we're using today. All right. 296 00:18:08,290 --> 00:18:12,270 OK. Now, because of this, I kind of lost 297 00:18:12,270 --> 00:18:16,240 my ability to, to edit. And I would like 298 00:18:16,240 --> 00:18:19,030 to have that back. So what I want to 299 00:18:19,030 --> 00:18:25,950 do is, in this loop, where we're saying, you 300 00:18:25,950 --> 00:18:28,520 know, we're gonna add this missing partial, what I 301 00:18:28,520 --> 00:18:29,850 really want to do is I want to say, 302 00:18:29,850 --> 00:18:36,850 if you can edit the comment, right. And that's 303 00:18:37,360 --> 00:18:42,440 current user. What I really want to say is 304 00:18:42,440 --> 00:18:45,200 that if I can edit, I want to have 305 00:18:45,200 --> 00:18:52,200 the same partial I had before, right. But, if 306 00:18:53,490 --> 00:18:57,270 I can't, then I want to use the one 307 00:18:57,270 --> 00:19:00,190 that is going to be synced. K. 308 00:19:00,190 --> 00:19:07,190 K. So, it's a small change. But what it's, 309 00:19:09,210 --> 00:19:12,960 what it's saying is, is that, if I have 310 00:19:12,960 --> 00:19:14,790 permissions to edit it, I don't want it to 311 00:19:14,790 --> 00:19:16,169 be syncing, I don't want to be notified if 312 00:19:16,169 --> 00:19:18,710 it changes, because I am likely the browser that's 313 00:19:18,710 --> 00:19:21,169 gonna be changing it. And, and I really want 314 00:19:21,169 --> 00:19:24,730 the tools to be able to edit and delete. 315 00:19:24,730 --> 00:19:27,540 So I'm gonna just come back here and refresh 316 00:19:27,540 --> 00:19:31,740 this UI, and you'll notice now, because of that, 317 00:19:31,740 --> 00:19:34,419 I have my tools back. My edit and delete. 318 00:19:34,419 --> 00:19:38,470 So I can come back over here and say 319 00:19:38,470 --> 00:19:45,470 yes, it does work. See, that updates there. It 320 00:19:45,850 --> 00:19:50,840 looks like we've got a little bug. 321 00:19:50,840 --> 00:19:56,330 And then eventually I can actually delete it as 322 00:19:56,330 --> 00:20:03,330 well. And it gets rid of it. K. 323 00:20:03,500 --> 00:20:08,870 And there's another bug with this. Do you guys 324 00:20:08,870 --> 00:20:15,090 want to see what it is? It's pretty fun. 325 00:20:15,090 --> 00:20:18,590 Here is a, well, let's go to this one. 326 00:20:18,590 --> 00:20:19,960 Here is a blog post that doesn't have any 327 00:20:19,960 --> 00:20:23,090 comments yet. I'm gonna go onto this different blog 328 00:20:23,090 --> 00:20:28,289 post, right, and, say we gotta bug. When I 329 00:20:28,289 --> 00:20:30,870 do that, my comment is showing up on this 330 00:20:30,870 --> 00:20:33,669 different blog post, right. Because it's, right now we're 331 00:20:33,669 --> 00:20:36,419 looking for all comments whenever it gets updated, we're 332 00:20:36,419 --> 00:20:38,340 gonna add it to this page. So what we 333 00:20:38,340 --> 00:20:39,770 need to do is we need to scope these 334 00:20:39,770 --> 00:20:42,549 comments to this page. So let's add that really 335 00:20:42,549 --> 00:20:43,500 quick. 336 00:20:43,500 --> 00:20:50,500 We're gonna come back here to, come back here 337 00:20:55,130 --> 00:20:57,880 to our comment model, and we're gonna add a 338 00:20:57,880 --> 00:21:03,780 new scope. Now, this is gonna be different than 339 00:21:03,780 --> 00:21:07,630 a normal scope. Might be a redundancy, but sync 340 00:21:07,630 --> 00:21:12,960 needs it. So let's add it, called by_posts. And 341 00:21:12,960 --> 00:21:15,370 it's gonna take a lambda, and we're gonna give 342 00:21:15,370 --> 00:21:20,660 it a post and we're gonna say where post 343 00:21:20,660 --> 00:21:24,160 id is post id. K. 344 00:21:24,160 --> 00:21:31,160 K. So we've just added a scope for post. 345 00:21:32,289 --> 00:21:38,010 Then we're gonna come over here into our sync 346 00:21:38,010 --> 00:21:45,010 partials. And we're going to add that scope here. 347 00:21:45,530 --> 00:21:52,530 So let's, let's see scope dot by_posts. And let's 348 00:22:00,370 --> 00:22:06,870 also add that to this one. K. 349 00:22:06,870 --> 00:22:11,610 So now if we refresh this, come over here, 350 00:22:11,610 --> 00:22:16,200 and now I'm logged in as Stanley. I say, 351 00:22:16,200 --> 00:22:19,570 oh hi. It shows up here, which is what 352 00:22:19,570 --> 00:22:21,360 we expect, but on this other one it does 353 00:22:21,360 --> 00:22:24,160 not, K. And if I refresh this we'll get 354 00:22:24,160 --> 00:22:28,980 rid of that comment. So scoping is, is easy 355 00:22:28,980 --> 00:22:33,860 as declaring a new scope on your model, in 356 00:22:33,860 --> 00:22:36,600 the same syntax that we're using for normal scopes. 357 00:22:36,600 --> 00:22:39,820 And then whenever we render out our partials, we 358 00:22:39,820 --> 00:22:42,010 just have to, we have to reference that scope. 359 00:22:42,010 --> 00:22:42,010 M.M.: Why do we need what? 360 00:22:48,289 --> 00:22:53,470 M.M.: The scope in both? Cause there are two 361 00:22:53,470 --> 00:22:56,230 different partials. It, it would be possible to- 362 00:22:56,230 --> 00:22:58,860 AUDIENCE: [indecipherable - 00:22:59] 363 00:22:58,860 --> 00:23:02,919 M.M.: No. It affects both. The scope affects both. 364 00:23:02,919 --> 00:23:05,429 The reason why there are two partials, here, is 365 00:23:05,429 --> 00:23:08,580 that whenever a new comment comes into existence, we 366 00:23:08,580 --> 00:23:10,080 want that to be listed. So we can move 367 00:23:10,080 --> 00:23:17,080 that around, theoretically, I believe, if. Whoa. 368 00:23:22,470 --> 00:23:29,470 Nevermind. Let's not touch that. Live coding. 369 00:23:31,570 --> 00:23:38,570 All right. So sync is a pretty cool little 370 00:23:38,640 --> 00:23:41,340 library. It does quite a lot for us. What 371 00:23:41,340 --> 00:23:44,150 it's going to do, is it's going to hold 372 00:23:44,150 --> 00:23:48,010 a connection via web socket to a server, and 373 00:23:48,010 --> 00:23:50,840 then it's going to put mechanisms within Rails to 374 00:23:50,840 --> 00:23:55,049 talk to that, that web socket, and then when 375 00:23:55,049 --> 00:23:58,750 our resources change, it will render those templates and 376 00:23:58,750 --> 00:24:01,090 push that out to that web socket, which the 377 00:24:01,090 --> 00:24:04,390 clients will then pull down, K. So without re, 378 00:24:04,390 --> 00:24:08,510 without rearchitecting our presentation tier, we are able to 379 00:24:08,510 --> 00:24:11,710 take advantage of real time, and able to do 380 00:24:11,710 --> 00:24:15,929 it without a major change to how we're organizing 381 00:24:15,929 --> 00:24:19,350 or architecting our templates, our files. 382 00:24:19,350 --> 00:24:22,820 We can go just a little bit further, as 383 00:24:22,820 --> 00:24:29,380 well. So let's open a Rails console, K, and 384 00:24:29,380 --> 00:24:36,380 we'll say. Just get, just a comment out of 385 00:24:37,179 --> 00:24:43,909 here. All right. So I got this comment right 386 00:24:43,909 --> 00:24:46,409 here, which is Jason saying that he's watching, but 387 00:24:46,409 --> 00:24:48,100 he's kind of on a delay because he's not 388 00:24:48,100 --> 00:24:50,559 actually in the room, K. 389 00:24:50,559 --> 00:24:54,929 What we can say here is sync model dot 390 00:24:54,929 --> 00:24:58,809 enable, and this will allow all changes that happen 391 00:24:58,809 --> 00:25:01,669 within our process, that's not running on the web 392 00:25:01,669 --> 00:25:03,960 server, still a Rails process, but we're not actually 393 00:25:03,960 --> 00:25:06,580 on running on the web server. It's a separate 394 00:25:06,580 --> 00:25:09,289 process. Maybe a background job. But now all of 395 00:25:09,289 --> 00:25:11,750 our changes that we make can also be reflected 396 00:25:11,750 --> 00:25:14,100 in real time as well. 397 00:25:14,100 --> 00:25:20,640 So let's pull this guy over. And watch that 398 00:25:20,640 --> 00:25:24,559 happen. So we can change this to, what should 399 00:25:24,559 --> 00:25:31,559 Jason say? Say, I don't know, real time. K, 400 00:25:35,350 --> 00:25:38,140 so let's pull him out. You see that his 401 00:25:38,140 --> 00:25:40,580 text is right here. I'm watching, kind of. When 402 00:25:40,580 --> 00:25:43,840 I call save it will change, and it updates 403 00:25:43,840 --> 00:25:50,750 right here, in real time. And duplicate. Why? Chris? 404 00:25:50,750 --> 00:25:51,950 Why? 405 00:25:51,950 --> 00:25:53,140 Applettes. 406 00:25:53,140 --> 00:25:57,940 AUDIENCE: Wait till afterwards. 407 00:25:57,940 --> 00:26:02,730 M.M.: Afterwards? All right. 408 00:26:02,730 --> 00:26:06,080 OK. Let's continue and add this to some of 409 00:26:06,080 --> 00:26:11,850 the other pages as well. So let's go to 410 00:26:11,850 --> 00:26:14,059 post. Let's do the same thing. We want to 411 00:26:14,059 --> 00:26:20,659 sync our posts as well. And our posts controller, 412 00:26:20,659 --> 00:26:25,240 we want to enable sync here as. 413 00:26:25,240 --> 00:26:30,750 Enable sync on our post controller and in our 414 00:26:30,750 --> 00:26:34,120 posts model. So let's go ahead and take a 415 00:26:34,120 --> 00:26:39,640 look at our post index page. Our index page, 416 00:26:39,640 --> 00:26:41,340 where we're listing all the posts, we're gonna go 417 00:26:41,340 --> 00:26:45,970 through and render the post. And then, if we 418 00:26:45,970 --> 00:26:51,159 have, if we can, we'll add, we'll have a 419 00:26:51,159 --> 00:26:53,760 button to add a new post. If we look 420 00:26:53,760 --> 00:26:57,370 at that post partial, you notice here, again, we've 421 00:26:57,370 --> 00:26:59,610 got some logic in here determining whether or not 422 00:26:59,610 --> 00:27:01,809 we can edit it, or whether or not we 423 00:27:01,809 --> 00:27:04,150 can remove it. 424 00:27:04,150 --> 00:27:07,380 So this logic is problematic when we're talking about 425 00:27:07,380 --> 00:27:09,710 a cache template that's gonna get pushed out to 426 00:27:09,710 --> 00:27:12,030 everybody, cause not everybody's gonna have the same amount 427 00:27:12,030 --> 00:27:14,370 of permissions. So what we'll have to do is 428 00:27:14,370 --> 00:27:17,070 we'll have to just take that out. And I'm 429 00:27:17,070 --> 00:27:20,110 gonna take it out and put it into the 430 00:27:20,110 --> 00:27:21,820 index template. 431 00:27:21,820 --> 00:27:26,200 Well. Actually, I'm just gonna take it out of, 432 00:27:26,200 --> 00:27:31,029 of this view altogether. So, again, in order to 433 00:27:31,029 --> 00:27:34,029 change our template from a static template to a 434 00:27:34,029 --> 00:27:41,029 real time template, we're gonna say sync and partial 435 00:27:43,500 --> 00:27:48,789 is a post. And then our resource is also 436 00:27:48,789 --> 00:27:53,659 gonna be that same post, and then, if we 437 00:27:53,659 --> 00:27:56,870 get a new post, it just lists him down 438 00:27:56,870 --> 00:28:00,490 below. We don't, probably don't need to scope on 439 00:28:00,490 --> 00:28:03,770 this one. The big problem we have is all 440 00:28:03,770 --> 00:28:09,169 of this edit information. So let's go over here 441 00:28:09,169 --> 00:28:12,200 to posts and get rid of that guy. So 442 00:28:12,200 --> 00:28:15,559 I'm just gonna remove some, some code here. I'm 443 00:28:15,559 --> 00:28:19,120 gonna remove all of this editing. Anything that's gonna 444 00:28:19,120 --> 00:28:21,270 talk to current user, the current request is not 445 00:28:21,270 --> 00:28:27,169 gonna work. So let's get rid of that. 446 00:28:27,169 --> 00:28:34,169 And now let's take a look at, take a 447 00:28:36,580 --> 00:28:43,580 look at our, our post pages. I don't know 448 00:28:45,039 --> 00:28:50,400 what that is. 449 00:28:50,400 --> 00:28:52,320 We're asking for posts, it doesn't exist outside of 450 00:28:52,320 --> 00:28:57,159 that block. So we're gonna say post dot new. 451 00:28:57,159 --> 00:29:04,159 OK. So, again, user not logged in, user logged 452 00:29:05,029 --> 00:29:09,159 in, and as a different user logged in. So 453 00:29:09,159 --> 00:29:11,500 if I come over here, I want to add 454 00:29:11,500 --> 00:29:18,500 new post. See if it works. And let's add 455 00:29:22,799 --> 00:29:23,289 that. 456 00:29:23,289 --> 00:29:25,990 So, Stanley added this post. It shows up immediately 457 00:29:25,990 --> 00:29:29,419 on, on Mike's browser. And it also shows up 458 00:29:29,419 --> 00:29:33,090 in the not logged in browser. Let's come over 459 00:29:33,090 --> 00:29:40,090 here. We'll, we'll say congrats. Now. 460 00:29:45,980 --> 00:29:49,409 This browser over the right, the comment is not 461 00:29:49,409 --> 00:29:55,620 updating, right. Let's go back over here. So here, 462 00:29:55,620 --> 00:30:02,620 we've got one comment. Stanley says, I know. And 463 00:30:03,659 --> 00:30:07,529 that, that one comment here is still not updated. 464 00:30:07,529 --> 00:30:10,750 So we've got changes happening on a sub-resource, but 465 00:30:10,750 --> 00:30:15,470 it's not changing our template. Thankfully there's a really 466 00:30:15,470 --> 00:30:19,590 nice DSL to make that happen. So we'll go 467 00:30:19,590 --> 00:30:23,230 to our comment controll- or, comment object, and we'll 468 00:30:23,230 --> 00:30:28,510 say sync touch post. K. 469 00:30:28,510 --> 00:30:31,390 So this is similar to normal touch. If you 470 00:30:31,390 --> 00:30:34,529 want, have a resource that you want to touch 471 00:30:34,529 --> 00:30:38,350 through an association whenever it updates, it works just 472 00:30:38,350 --> 00:30:41,200 the same, only it's a special one that'll work 473 00:30:41,200 --> 00:30:46,090 for sync. So let's save that and refresh all 474 00:30:46,090 --> 00:30:51,679 of these browsers. K. So now they all have 475 00:30:51,679 --> 00:30:55,320 two comments. OK. 476 00:30:55,320 --> 00:31:02,070 I come over here. Let's have Stanley add one 477 00:31:02,070 --> 00:31:09,070 more, add one more comment. Man, Chris. Now the 478 00:31:09,200 --> 00:31:14,890 comments are updating multiple times. I'm curious to why 479 00:31:14,890 --> 00:31:19,760 that is. It wasn't doing that an hour ago. 480 00:31:19,760 --> 00:31:26,760 What did I miss? OK. 481 00:31:27,669 --> 00:31:32,210 There's one more, there's one more review of posts 482 00:31:32,210 --> 00:31:38,130 here, and that is the actual post page. So 483 00:31:38,130 --> 00:31:45,130 we can edit this. So let's say it sort 484 00:31:45,480 --> 00:31:48,960 of works, but now this page isn't updating and 485 00:31:48,960 --> 00:31:51,580 this page isn't updating, right. So we, I've updated 486 00:31:51,580 --> 00:31:54,559 this post, but the other browsers aren't updating on 487 00:31:54,559 --> 00:31:57,029 the show page. The reason for that is because 488 00:31:57,029 --> 00:32:00,179 we're not syncing the template on that page. So 489 00:32:00,179 --> 00:32:03,909 really quick we'll see, we'll show you just how 490 00:32:03,909 --> 00:32:05,570 easy it is to do that. We'll come over 491 00:32:05,570 --> 00:32:09,760 here to show. We have this same information where 492 00:32:09,760 --> 00:32:13,730 we're pawing out all of these links determining, you 493 00:32:13,730 --> 00:32:16,980 know, whether or not we can edit. I'm gonna 494 00:32:16,980 --> 00:32:19,159 punt on that. I'm just gonna put that down 495 00:32:19,159 --> 00:32:23,000 below. So it's not gonna be part of any 496 00:32:23,000 --> 00:32:24,740 template. So if you hit this page and you 497 00:32:24,740 --> 00:32:27,590 can edit it, we're going to show you those 498 00:32:27,590 --> 00:32:32,179 links. But it's gonna be outside of the, outside 499 00:32:32,179 --> 00:32:34,190 of the, the partial. 500 00:32:34,190 --> 00:32:39,250 So I'm just gonna sit. We're gonna sync a 501 00:32:39,250 --> 00:32:46,250 new partial and it's gonna be called, oh my 502 00:32:48,870 --> 00:32:55,870 gosh. I cannot type. It really is so uncomfortable. 503 00:32:59,190 --> 00:33:02,230 So a new partial, we're gonna call this postfull, 504 00:33:02,230 --> 00:33:06,460 because we have the full body embedded in it. 505 00:33:06,460 --> 00:33:09,220 And the resource is going to be that post 506 00:33:09,220 --> 00:33:12,840 object. And then that's really it. We come back 507 00:33:12,840 --> 00:33:17,080 here to our sync directory under posts, create a 508 00:33:17,080 --> 00:33:24,080 new file, and we'll save this as postfull. 509 00:33:26,789 --> 00:33:30,580 And then we'll come back, restart all of these 510 00:33:30,580 --> 00:33:37,580 browsers, and come back here and edit this and 511 00:33:39,909 --> 00:33:46,909 so it really does work. What? 512 00:33:47,159 --> 00:33:52,010 What am I missing? 513 00:33:52,010 --> 00:33:56,860 AUDIENCE: [indecipherable - 00:34:01] 514 00:33:56,860 --> 00:34:03,860 M.M.: I did refresh the browsers. Let's refresh it 515 00:34:05,409 --> 00:34:08,099 one more time. 516 00:34:08,099 --> 00:34:12,579 AUDIENCE: Did you try rebooting? 517 00:34:12,579 --> 00:34:17,799 M.M.: Huh. All right. Again. It worked an hour 518 00:34:17,799 --> 00:34:19,389 ago. 519 00:34:19,389 --> 00:34:25,208 So, that's sync. I'm out of time. But we've 520 00:34:25,208 --> 00:34:29,949 used this on some internal apps dealing with monitoring. 521 00:34:29,949 --> 00:34:34,279 And instead of pulling, continually asking for new information, 522 00:34:34,279 --> 00:34:37,009 just organizing a Rails app like you always have 523 00:34:37,009 --> 00:34:40,099 with templates and having those templates update whenever resource 524 00:34:40,099 --> 00:34:43,518 is changed has been just a really, really great, 525 00:34:43,518 --> 00:34:47,319 fantastic thing. There are caveats. It's a little touchy, 526 00:34:47,319 --> 00:34:49,449 as you can see. But it's definitely been getting 527 00:34:49,449 --> 00:34:51,719 better over time. 528 00:34:51,719 --> 00:34:53,349 I would just like to leave you with this 529 00:34:53,349 --> 00:34:58,259 little pitch, that Rails has benefited, over the years, 530 00:34:58,259 --> 00:35:04,759 from being first to, to popularize certain approaches for 531 00:35:04,759 --> 00:35:07,499 web development. It was there at the very beginning 532 00:35:07,499 --> 00:35:09,140 with Ajax. It was there are the very beginning 533 00:35:09,140 --> 00:35:13,049 with REST. I, I strongly feel that if we 534 00:35:13,049 --> 00:35:16,229 are not able to do real time information within 535 00:35:16,229 --> 00:35:19,670 Rails that people will move on from Rails. And 536 00:35:19,670 --> 00:35:22,319 I totally think that you don't need to. I 537 00:35:22,319 --> 00:35:24,950 know that there's a lot of functionality that is 538 00:35:24,950 --> 00:35:26,890 very difficult to do with Rails as it is 539 00:35:26,890 --> 00:35:29,430 today, and so people are looking outside of Rails 540 00:35:29,430 --> 00:35:32,969 for the presentation. But there are so many advantages 541 00:35:32,969 --> 00:35:36,940 to rendering your html on the server that we 542 00:35:36,940 --> 00:35:38,459 just need to think a little bit differently and 543 00:35:38,459 --> 00:35:39,579 a little bit better about it. 544 00:35:39,580 --> 00:35:42,080 So, I'll open it up to questions.