[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:16.00,0:00:19.40,Default,,0000,0000,0000,,MIKE MOORE: Hello. My name is Mike Moore,
Dialogue: 0,0:00:19.44,0:00:22.97,Default,,0000,0000,0000,,and I'm gonna talk about real-time Rails with\NSync.
Dialogue: 0,0:00:22.97,0:00:28.50,Default,,0000,0000,0000,,So, hi. Hello. How's Rails Conf?
Dialogue: 0,0:00:28.50,0:00:30.75,Default,,0000,0000,0000,,My name is Mike Moore. You might know be
Dialogue: 0,0:00:30.75,0:00:33.58,Default,,0000,0000,0000,,as blowmage or blowmage depending on how you\Nwant
Dialogue: 0,0:00:33.58,0:00:36.23,Default,,0000,0000,0000,,to pronounce it. It doesn't matter.
Dialogue: 0,0:00:36.23,0:00:38.73,Default,,0000,0000,0000,,I am very happy to be here. I'm leaving
Dialogue: 0,0:00:38.73,0:00:41.22,Default,,0000,0000,0000,,in about an hour to fly home, so I'm
Dialogue: 0,0:00:41.22,0:00:44.38,Default,,0000,0000,0000,,only here for this. And I'm a hundred percent,
Dialogue: 0,0:00:44.38,0:00:47.18,Default,,0000,0000,0000,,totally prepared for this. I was not up all
Dialogue: 0,0:00:47.18,0:00:50.07,Default,,0000,0000,0000,,night. I did not make these slides twenty\Nminutes
Dialogue: 0,0:00:50.07,0:00:52.00,Default,,0000,0000,0000,,ago. Yeah.
Dialogue: 0,0:00:52.00,0:00:58.92,Default,,0000,0000,0000,,So. Who likes live coding? Three people! All\Nright.
Dialogue: 0,0:00:58.92,0:01:01.43,Default,,0000,0000,0000,,K. We're gonna talk about Sync. Sync is a
Dialogue: 0,0:01:01.43,0:01:05.51,Default,,0000,0000,0000,,fantastic little Rails engine written by Chris\NMcCord. Is
Dialogue: 0,0:01:05.51,0:01:07.87,Default,,0000,0000,0000,,Chris, where's Chris? Is he here? There he\Nis.
Dialogue: 0,0:01:07.87,0:01:09.09,Default,,0000,0000,0000,,If you don't like it - that guy right
Dialogue: 0,0:01:09.09,0:01:12.22,Default,,0000,0000,0000,,there. You can find it on the GitHub. That's
Dialogue: 0,0:01:12.22,0:01:15.15,Default,,0000,0000,0000,,at chrismccord slash sync.
Dialogue: 0,0:01:15.15,0:01:18.27,Default,,0000,0000,0000,,So yeah. Let's do this.
Dialogue: 0,0:01:18.27,0:01:24.21,Default,,0000,0000,0000,,All right. So I have a. I have an
Dialogue: 0,0:01:24.21,0:01:31.21,Default,,0000,0000,0000,,app. And I'm just gonna load it up here.
Dialogue: 0,0:01:32.78,0:01:36.38,Default,,0000,0000,0000,,And it's a very simple app. I was gonna
Dialogue: 0,0:01:36.38,0:01:39.44,Default,,0000,0000,0000,,have a little bit more interesting app to\Ndemonstrate
Dialogue: 0,0:01:39.44,0:01:41.98,Default,,0000,0000,0000,,this, but I ran into an issue. And maybe
Dialogue: 0,0:01:41.98,0:01:43.65,Default,,0000,0000,0000,,we'll talk about that at the end. If we
Dialogue: 0,0:01:43.65,0:01:45.67,Default,,0000,0000,0000,,have time.
Dialogue: 0,0:01:45.67,0:01:48.88,Default,,0000,0000,0000,,But this is a very simple bloggish type of
Dialogue: 0,0:01:48.88,0:01:52.94,Default,,0000,0000,0000,,application, where we've got posts, we've\Ngot comments, we've
Dialogue: 0,0:01:52.94,0:01:56.81,Default,,0000,0000,0000,,got users, and some tags. Oh, and also, this
Dialogue: 0,0:01:56.81,0:02:00.36,Default,,0000,0000,0000,,is the git repo for Sync. So please check
Dialogue: 0,0:02:00.36,0:02:01.33,Default,,0000,0000,0000,,it out.
Dialogue: 0,0:02:01.33,0:02:04.29,Default,,0000,0000,0000,,K, so. I want to just demonstrate this very
Dialogue: 0,0:02:04.29,0:02:06.83,Default,,0000,0000,0000,,simple Rails application. We'll go look at\Na little
Dialogue: 0,0:02:06.83,0:02:09.65,Default,,0000,0000,0000,,bit of code, and we're going to, we're gonna
Dialogue: 0,0:02:09.65,0:02:12.60,Default,,0000,0000,0000,,add Sync to this application, and we're gonna\Nturn
Dialogue: 0,0:02:12.60,0:02:17.46,Default,,0000,0000,0000,,it from a very classic, kind of CRUD-y Rails
Dialogue: 0,0:02:17.46,0:02:19.74,Default,,0000,0000,0000,,application into real time.
Dialogue: 0,0:02:19.74,0:02:24.59,Default,,0000,0000,0000,,So. A little, one note before we start on
Dialogue: 0,0:02:24.59,0:02:28.98,Default,,0000,0000,0000,,code quality, this app is intentionally unfactored.\NSo there
Dialogue: 0,0:02:28.98,0:02:32.47,Default,,0000,0000,0000,,is lots of places where you might apply some
Dialogue: 0,0:02:32.47,0:02:35.34,Default,,0000,0000,0000,,design in an application that I have not,\Nfor
Dialogue: 0,0:02:35.34,0:02:37.36,Default,,0000,0000,0000,,this. But, the reason for that is so that
Dialogue: 0,0:02:37.36,0:02:40.67,Default,,0000,0000,0000,,I can, we can refactor it to Sync a
Dialogue: 0,0:02:40.67,0:02:43.17,Default,,0000,0000,0000,,little bit easier, without having to unfactor\Nit along
Dialogue: 0,0:02:43.17,0:02:43.92,Default,,0000,0000,0000,,the way.
Dialogue: 0,0:02:43.92,0:02:45.92,Default,,0000,0000,0000,,So, we'll go ahead and get started. So we
Dialogue: 0,0:02:45.92,0:02:50.07,Default,,0000,0000,0000,,have a series of posts. And then when you
Dialogue: 0,0:02:50.07,0:02:52.60,Default,,0000,0000,0000,,click on a post, you go to the post's
Dialogue: 0,0:02:52.60,0:02:56.93,Default,,0000,0000,0000,,show action. On that post's show action, we've\Ngot
Dialogue: 0,0:02:56.93,0:03:00.93,Default,,0000,0000,0000,,a series of comments. That is no different\Nthan
Dialogue: 0,0:03:00.93,0:03:05.68,Default,,0000,0000,0000,,going to slash comments, other than it just\Nlooks
Dialogue: 0,0:03:05.68,0:03:08.12,Default,,0000,0000,0000,,a little bit different. So. We're not gonna\Nneed
Dialogue: 0,0:03:08.12,0:03:10.46,Default,,0000,0000,0000,,to be looking at the comments on the actual
Dialogue: 0,0:03:10.46,0:03:13.58,Default,,0000,0000,0000,,resource. We're gonna be looking at it on\Nthe
Dialogue: 0,0:03:13.58,0:03:19.63,Default,,0000,0000,0000,,post resource. And that's it. So, you know,\Nsay,
Dialogue: 0,0:03:19.63,0:03:24.52,Default,,0000,0000,0000,,Hello RailsConf. Woo. Oh. Also, disclaimer,\NI cannot type
Dialogue: 0,0:03:24.52,0:03:29.09,Default,,0000,0000,0000,,in public. So this is gonna be very interesting.
Dialogue: 0,0:03:29.09,0:03:30.24,Default,,0000,0000,0000,,So I can go ahead and I can add
Dialogue: 0,0:03:30.24,0:03:34.92,Default,,0000,0000,0000,,a comment. I can delete a comment, because\Nit's
Dialogue: 0,0:03:34.92,0:03:39.45,Default,,0000,0000,0000,,owned by me. I can go into posts that
Dialogue: 0,0:03:39.45,0:03:42.95,Default,,0000,0000,0000,,I own and I can edit those posts. So
Dialogue: 0,0:03:42.95,0:03:45.50,Default,,0000,0000,0000,,like that, right. Pretty simple.
Dialogue: 0,0:03:45.50,0:03:52.50,Default,,0000,0000,0000,,OK. So let's bump this out a little bit.
Dialogue: 0,0:03:52.61,0:03:56.06,Default,,0000,0000,0000,,So here is our application. You, same thing\Nas
Dialogue: 0,0:03:56.06,0:03:59.34,Default,,0000,0000,0000,,we saw before. Our home controller is the,\Nthe
Dialogue: 0,0:03:59.34,0:04:03.13,Default,,0000,0000,0000,,home page. That showed the Jumbotron there.\NAnd this
Dialogue: 0,0:04:03.13,0:04:06.82,Default,,0000,0000,0000,,is all very bootstrappy. I'm sorry.
Dialogue: 0,0:04:06.82,0:04:10.49,Default,,0000,0000,0000,,Here's our posts controller. Almost straight\Nout of the
Dialogue: 0,0:04:10.49,0:04:17.49,Default,,0000,0000,0000,,box Rails resource here. Our comments controller\Nis nested
Dialogue: 0,0:04:18.93,0:04:23.87,Default,,0000,0000,0000,,underneath our posts controller. We've got\Na little bit
Dialogue: 0,0:04:23.87,0:04:29.43,Default,,0000,0000,0000,,of additional calls here for access. Those\Nare defined
Dialogue: 0,0:04:29.43,0:04:32.71,Default,,0000,0000,0000,,in helpers. This may not be how you would
Dialogue: 0,0:04:32.71,0:04:35.67,Default,,0000,0000,0000,,do this in a real application, but for demonstration
Dialogue: 0,0:04:35.67,0:04:39.17,Default,,0000,0000,0000,,purposes it, it fits the need. And I can
Dialogue: 0,0:04:39.17,0:04:42.74,Default,,0000,0000,0000,,use these methods in the controller and also\Nin
Dialogue: 0,0:04:42.74,0:04:45.15,Default,,0000,0000,0000,,the views.
Dialogue: 0,0:04:45.15,0:04:48.19,Default,,0000,0000,0000,,OK. So let's take a look at the routes.
Dialogue: 0,0:04:48.19,0:04:50.15,Default,,0000,0000,0000,,So you see we're not, we're not, we're not
Dialogue: 0,0:04:50.15,0:04:56.13,Default,,0000,0000,0000,,cheating. So we've got nested comments under\Nposts. We've
Dialogue: 0,0:04:56.13,0:04:58.04,Default,,0000,0000,0000,,also got tags. Let's take a look at tags
Dialogue: 0,0:04:58.04,0:05:01.84,Default,,0000,0000,0000,,real quick. Tags are just a string attached\Nto
Dialogue: 0,0:05:01.84,0:05:05.37,Default,,0000,0000,0000,,these various posts, and so if you click on
Dialogue: 0,0:05:05.37,0:05:07.74,Default,,0000,0000,0000,,the Rails tag, you see there are three of
Dialogue: 0,0:05:07.74,0:05:10.97,Default,,0000,0000,0000,,the four posts that are tagged with Rails.\NAnd
Dialogue: 0,0:05:10.97,0:05:15.19,Default,,0000,0000,0000,,then there is a list. So.
Dialogue: 0,0:05:15.19,0:05:18.60,Default,,0000,0000,0000,,Let's say that we have this application, and\Nwe
Dialogue: 0,0:05:18.60,0:05:21.57,Default,,0000,0000,0000,,want to make it more awesome than it is
Dialogue: 0,0:05:21.57,0:05:24.91,Default,,0000,0000,0000,,today. One of the things we really want is
Dialogue: 0,0:05:24.91,0:05:28.81,Default,,0000,0000,0000,,we want to approximate what some of the apps
Dialogue: 0,0:05:28.81,0:05:33.80,Default,,0000,0000,0000,,that are using heavy Javascript MVC frameworks\Nare accomplishing
Dialogue: 0,0:05:33.80,0:05:38.25,Default,,0000,0000,0000,,with, with their responsiveness, and just\Nkind of like
Dialogue: 0,0:05:38.25,0:05:41.40,Default,,0000,0000,0000,,updating the UI because something changed.
Dialogue: 0,0:05:41.40,0:05:46.29,Default,,0000,0000,0000,,And so instead of basically rewriting our\Nentire frontend,
Dialogue: 0,0:05:46.29,0:05:49.23,Default,,0000,0000,0000,,our entire presentation layer, and then also\Ncreating an
Dialogue: 0,0:05:49.23,0:05:53.94,Default,,0000,0000,0000,,API to support that Javascript presentation\Nlayer, it's my
Dialogue: 0,0:05:53.94,0:05:58.40,Default,,0000,0000,0000,,conjecture that, conj- it's my assertion here\Nthat we
Dialogue: 0,0:05:58.40,0:06:02.05,Default,,0000,0000,0000,,can use Rails the way Rails is intended to
Dialogue: 0,0:06:02.05,0:06:06.22,Default,,0000,0000,0000,,be used, but still gain a good sub, a
Dialogue: 0,0:06:06.22,0:06:10.19,Default,,0000,0000,0000,,good, large portion of, of this type of functionality.
Dialogue: 0,0:06:10.19,0:06:10.89,Default,,0000,0000,0000,,So.
Dialogue: 0,0:06:10.89,0:06:14.07,Default,,0000,0000,0000,,Let's go ahead and jump in.
Dialogue: 0,0:06:14.07,0:06:17.53,Default,,0000,0000,0000,,All right, so the first thing we want to
Dialogue: 0,0:06:17.53,0:06:22.02,Default,,0000,0000,0000,,do is open the gemfile and we want to
Dialogue: 0,0:06:22.02,0:06:27.53,Default,,0000,0000,0000,,add a few gems. The first one is faye.
Dialogue: 0,0:06:27.53,0:06:28.98,Default,,0000,0000,0000,,And the reason we need to add faye is
Dialogue: 0,0:06:28.98,0:06:34.13,Default,,0000,0000,0000,,just for, for development. So we're gonna\Nuse faye
Dialogue: 0,0:06:34.13,0:06:36.35,Default,,0000,0000,0000,,for our browser to talk over websocket back\Nto
Dialogue: 0,0:06:36.35,0:06:40.80,Default,,0000,0000,0000,,the server. And then faye also needs thin,\Nbut
Dialogue: 0,0:06:40.80,0:06:44.48,Default,,0000,0000,0000,,we don't like thin very much, so we're gonna
Dialogue: 0,0:06:44.48,0:06:49.77,Default,,0000,0000,0000,,not require it by default. And then the last
Dialogue: 0,0:06:49.77,0:06:53.49,Default,,0000,0000,0000,,one is Sync. K.
Dialogue: 0,0:06:53.49,0:06:58.44,Default,,0000,0000,0000,,So we'll bundle install that. Told you I couldn't
Dialogue: 0,0:06:58.44,0:07:02.29,Default,,0000,0000,0000,,type. There you go.
Dialogue: 0,0:07:02.29,0:07:04.27,Default,,0000,0000,0000,,So now we've got, we've added sync to the
Dialogue: 0,0:07:04.27,0:07:07.62,Default,,0000,0000,0000,,application. We need to go a couple steps\Nfurther.
Dialogue: 0,0:07:07.62,0:07:09.86,Default,,0000,0000,0000,,The first is, in our application file, we\Nneed
Dialogue: 0,0:07:09.86,0:07:15.22,Default,,0000,0000,0000,,to add the Javascript for Sync. And so this
Dialogue: 0,0:07:15.22,0:07:17.97,Default,,0000,0000,0000,,will be loaded as part of our normal application
Dialogue: 0,0:07:17.97,0:07:22.25,Default,,0000,0000,0000,,Javascript everywhere. It will get pulled\Nin by the,
Dialogue: 0,0:07:22.25,0:07:26.82,Default,,0000,0000,0000,,the, by the asset pipeline. And then also\Nwe
Dialogue: 0,0:07:26.82,0:07:31.12,Default,,0000,0000,0000,,need to go into our layout, our main application
Dialogue: 0,0:07:31.12,0:07:35.08,Default,,0000,0000,0000,,layout, and there's another Javascript tag\Nthat we need
Dialogue: 0,0:07:35.08,0:07:40.83,Default,,0000,0000,0000,,to add. And that is going to be, we're
Dialogue: 0,0:07:40.83,0:07:45.95,Default,,0000,0000,0000,,gonna use a little helper from Sync, adapter\NJavascript
Dialogue: 0,0:07:45.95,0:07:51.15,Default,,0000,0000,0000,,url.
Dialogue: 0,0:07:51.15,0:07:53.03,Default,,0000,0000,0000,,And we'll talk about what all these mean,\Nhopefully
Dialogue: 0,0:07:53.03,0:07:56.95,Default,,0000,0000,0000,,by the end of this. OK. Now we're good
Dialogue: 0,0:07:56.95,0:08:00.39,Default,,0000,0000,0000,,to go. So what we need to do, before
Dialogue: 0,0:08:00.39,0:08:04.03,Default,,0000,0000,0000,,we do anything else, is we need to start
Dialogue: 0,0:08:04.03,0:08:08.81,Default,,0000,0000,0000,,up faye to run our web socket connections.\NSo
Dialogue: 0,0:08:08.81,0:08:10.64,Default,,0000,0000,0000,,we can do that pretty easily. We can just
Dialogue: 0,0:08:10.64,0:08:14.95,Default,,0000,0000,0000,,say rack up Sync.
Dialogue: 0,0:08:14.95,0:08:21.95,Default,,0000,0000,0000,,Oh. I'm sorry. One more thing. We need to
Dialogue: 0,0:08:24.04,0:08:31.04,Default,,0000,0000,0000,,just take a look at our generators. Oh, gosh.
Dialogue: 0,0:08:31.11,0:08:35.13,Default,,0000,0000,0000,,K. There is now this install generator that\Nwas
Dialogue: 0,0:08:35.13,0:08:38.61,Default,,0000,0000,0000,,added by, by sync, so let's go ahead and
Dialogue: 0,0:08:38.61,0:08:41.73,Default,,0000,0000,0000,,run that generator. That will create a rackup\Nfile
Dialogue: 0,0:08:41.73,0:08:43.70,Default,,0000,0000,0000,,and a configuration file.
Dialogue: 0,0:08:43.70,0:08:50.54,Default,,0000,0000,0000,,So. Now that we have that, we can, we
Dialogue: 0,0:08:50.54,0:08:54.93,Default,,0000,0000,0000,,can run this. Now this is going to run
Dialogue: 0,0:08:54.93,0:08:58.07,Default,,0000,0000,0000,,faye in the background, and then here we can
Dialogue: 0,0:08:58.07,0:09:01.81,Default,,0000,0000,0000,,just run our application. Come back over here\Nand
Dialogue: 0,0:09:01.81,0:09:04.10,Default,,0000,0000,0000,,refresh and nothing has changed, but it all\Ncontinues
Dialogue: 0,0:09:04.10,0:09:07.96,Default,,0000,0000,0000,,to work. So faye is running, but we're not
Dialogue: 0,0:09:07.96,0:09:10.20,Default,,0000,0000,0000,,actually talking to it. But we know that it,
Dialogue: 0,0:09:10.20,0:09:13.55,Default,,0000,0000,0000,,it's up. So. That's the important first step.
Dialogue: 0,0:09:13.55,0:09:17.28,Default,,0000,0000,0000,,I don't particularly like having to open up\Ntwo
Dialogue: 0,0:09:17.28,0:09:19.76,Default,,0000,0000,0000,,consoles, so one of the things I will do
Dialogue: 0,0:09:19.76,0:09:22.51,Default,,0000,0000,0000,,is I'm gonna create a new file called, a
Dialogue: 0,0:09:22.51,0:09:29.33,Default,,0000,0000,0000,,new proc file, and then inside of it I'm
Dialogue: 0,0:09:29.33,0:09:36.33,Default,,0000,0000,0000,,gonna have a web entry. So you can't see
Dialogue: 0,0:09:38.01,0:09:40.29,Default,,0000,0000,0000,,this, but this, I have to scooch down to,
Dialogue: 0,0:09:40.29,0:09:41.62,Default,,0000,0000,0000,,so you can hear me, and it's killing my
Dialogue: 0,0:09:41.62,0:09:41.77,Default,,0000,0000,0000,,back.
Dialogue: 0,0:09:41.77,0:09:48.77,Default,,0000,0000,0000,,AUDIENCE: I think you can just stand up and
Dialogue: 0,0:09:48.93,0:09:51.06,Default,,0000,0000,0000,,do it.
Dialogue: 0,0:09:51.06,0:09:58.06,Default,,0000,0000,0000,,M.M.: Are you sure? All right. Exec, so rackup,
Dialogue: 0,0:09:59.09,0:10:06.00,Default,,0000,0000,0000,,sync conf, sync ru. OK.
Dialogue: 0,0:10:06.00,0:10:07.37,Default,,0000,0000,0000,,The other thing we need to do is come
Dialogue: 0,0:10:07.37,0:10:14.37,Default,,0000,0000,0000,,back over here and add foreman. K. So, so
Dialogue: 0,0:10:16.69,0:10:20.24,Default,,0000,0000,0000,,install that. Foreman is a gem written by\NHeroku,
Dialogue: 0,0:10:20.24,0:10:21.87,Default,,0000,0000,0000,,and so if you have lots of services that
Dialogue: 0,0:10:21.87,0:10:25.60,Default,,0000,0000,0000,,you are coordinating, Foreman's a good way\Nto, to
Dialogue: 0,0:10:25.60,0:10:27.86,Default,,0000,0000,0000,,start all of those. So now instead of going
Dialogue: 0,0:10:27.86,0:10:31.60,Default,,0000,0000,0000,,to multiple terminals to open up, open this\Nup,
Dialogue: 0,0:10:31.60,0:10:35.73,Default,,0000,0000,0000,,I can just say Foreman start, and it will
Dialogue: 0,0:10:35.73,0:10:40.19,Default,,0000,0000,0000,,start both. So that's kind of handy.
Dialogue: 0,0:10:40.19,0:10:43.06,Default,,0000,0000,0000,,All right. Let's take a look at one of
Dialogue: 0,0:10:43.06,0:10:48.62,Default,,0000,0000,0000,,these, one of these pages. What I want is
Dialogue: 0,0:10:48.62,0:10:50.30,Default,,0000,0000,0000,,I want to be able to come over here
Dialogue: 0,0:10:50.30,0:10:53.33,Default,,0000,0000,0000,,onto this page and I want to add a
Dialogue: 0,0:10:53.33,0:10:55.43,Default,,0000,0000,0000,,new comment, and then I want people to see
Dialogue: 0,0:10:55.43,0:11:01.61,Default,,0000,0000,0000,,it as soon as it shows up, right.
Dialogue: 0,0:11:01.61,0:11:04.98,Default,,0000,0000,0000,,So if I say see me, my, my browser
Dialogue: 0,0:11:04.98,0:11:08.68,Default,,0000,0000,0000,,refreshes. But all of these browsers over\Nhere won't
Dialogue: 0,0:11:08.68,0:11:15.68,Default,,0000,0000,0000,,necessarily. So let's go to this guy. K.
Dialogue: 0,0:11:24.43,0:11:31.43,Default,,0000,0000,0000,,So if I, for example, delete this one, it
Dialogue: 0,0:11:33.77,0:11:35.47,Default,,0000,0000,0000,,still shows up in these other browsers. And\NI
Dialogue: 0,0:11:35.47,0:11:38.17,Default,,0000,0000,0000,,would really like it if it would disappear\Nas
Dialogue: 0,0:11:38.17,0:11:45.17,Default,,0000,0000,0000,,soon as we ask it to. So let's make
Dialogue: 0,0:11:45.30,0:11:48.74,Default,,0000,0000,0000,,that happen. To do that, we are going to
Dialogue: 0,0:11:48.74,0:11:55.39,Default,,0000,0000,0000,,register our ActiveRecord models to be synced\Nin browsers.
Dialogue: 0,0:11:55.39,0:11:56.74,Default,,0000,0000,0000,,And Sync is going to take care of all
Dialogue: 0,0:11:56.74,0:12:00.03,Default,,0000,0000,0000,,of the communication from our Rails application,\Nall the
Dialogue: 0,0:12:00.03,0:12:01.78,Default,,0000,0000,0000,,way down to the browsers for us.
Dialogue: 0,0:12:01.78,0:12:05.14,Default,,0000,0000,0000,,So, to do that, there's a couple of things
Dialogue: 0,0:12:05.14,0:12:09.94,Default,,0000,0000,0000,,we want to change. First is, we map up
Dialogue: 0,0:12:09.94,0:12:14.47,Default,,0000,0000,0000,,our comment model. And we're gonna add this\Nlittle
Dialogue: 0,0:12:14.47,0:12:17.34,Default,,0000,0000,0000,,declaration called sync_all to it. This is\Ngoing to
Dialogue: 0,0:12:17.34,0:12:20.21,Default,,0000,0000,0000,,insert the sync DSL into the model. So now
Dialogue: 0,0:12:20.21,0:12:22.43,Default,,0000,0000,0000,,whenever the model changes, it will try to\Nnotify
Dialogue: 0,0:12:22.43,0:12:25.99,Default,,0000,0000,0000,,the browsers that something has changed. We\Nalso, we
Dialogue: 0,0:12:25.99,0:12:30.64,Default,,0000,0000,0000,,need to open up our controller, and we need
Dialogue: 0,0:12:30.64,0:12:37.64,Default,,0000,0000,0000,,to enable sync here as well. K.
Dialogue: 0,0:12:38.43,0:12:41.36,Default,,0000,0000,0000,,And this is, again, just to, so the controller
Dialogue: 0,0:12:41.36,0:12:43.21,Default,,0000,0000,0000,,knows to look for all of the messages from
Dialogue: 0,0:12:43.21,0:12:48.59,Default,,0000,0000,0000,,the models that something has updated and\Nrespond appropriately.
Dialogue: 0,0:12:48.59,0:12:53.87,Default,,0000,0000,0000,,Let's take a look at the post show action.
Dialogue: 0,0:12:53.87,0:12:58.28,Default,,0000,0000,0000,,Like I said, this is a mess of HTML.
Dialogue: 0,0:12:58.28,0:13:00.04,Default,,0000,0000,0000,,This is not necessarily how I would do it,
Dialogue: 0,0:13:00.04,0:13:03.36,Default,,0000,0000,0000,,but this is how it is. We've got kind
Dialogue: 0,0:13:03.36,0:13:06.30,Default,,0000,0000,0000,,of two main areas of the page. The first
Dialogue: 0,0:13:06.30,0:13:08.42,Default,,0000,0000,0000,,is at the top, where you've got all the
Dialogue: 0,0:13:08.42,0:13:11.98,Default,,0000,0000,0000,,content for the blog post. So the title, the
Dialogue: 0,0:13:11.98,0:13:15.78,Default,,0000,0000,0000,,user, those tags that are on the, the blog
Dialogue: 0,0:13:15.78,0:13:19.65,Default,,0000,0000,0000,,post. Some editing links, if they are there,\Nand
Dialogue: 0,0:13:19.65,0:13:23.46,Default,,0000,0000,0000,,then also the markdown of the body. OK.
Dialogue: 0,0:13:23.46,0:13:26.29,Default,,0000,0000,0000,,Then after that we've got our comments section,\Nwhich
Dialogue: 0,0:13:26.29,0:13:29.04,Default,,0000,0000,0000,,is going to iterate through the comments,\Nand because
Dialogue: 0,0:13:29.04,0:13:31.83,Default,,0000,0000,0000,,we're showing, and then we're rendering a\Npartial for
Dialogue: 0,0:13:31.83,0:13:36.92,Default,,0000,0000,0000,,the comment. And then after that, there's\Nalso another
Dialogue: 0,0:13:36.92,0:13:40.21,Default,,0000,0000,0000,,area to add a new comment, if you can.
Dialogue: 0,0:13:40.21,0:13:41.41,Default,,0000,0000,0000,,So if you're logged in, you should be able
Dialogue: 0,0:13:41.41,0:13:43.73,Default,,0000,0000,0000,,to comment. And if you're not logged in, you
Dialogue: 0,0:13:43.73,0:13:47.60,Default,,0000,0000,0000,,shouldn't. And that's what that add comment\Nhelper there
Dialogue: 0,0:13:47.60,0:13:49.60,Default,,0000,0000,0000,,is guarding for us.
Dialogue: 0,0:13:49.60,0:13:52.02,Default,,0000,0000,0000,,So, we want to make, we just want to
Dialogue: 0,0:13:52.02,0:13:55.16,Default,,0000,0000,0000,,make this sync. It's pretty easy. What we're\Ngonna
Dialogue: 0,0:13:55.16,0:13:57.89,Default,,0000,0000,0000,,do, we're gonna change this from render to\Nsync
Dialogue: 0,0:13:57.89,0:14:04.89,Default,,0000,0000,0000,,partial, and then we're gonna say that our\Nresource
Dialogue: 0,0:14:06.94,0:14:08.76,Default,,0000,0000,0000,,is our comment. So we've made it just a
Dialogue: 0,0:14:08.76,0:14:12.45,Default,,0000,0000,0000,,little more verbose than what it was before,\Nbut
Dialogue: 0,0:14:12.45,0:14:14.25,Default,,0000,0000,0000,,sync needs that.
Dialogue: 0,0:14:14.25,0:14:17.15,Default,,0000,0000,0000,,The next thing we're gonna do is we're gonna
Dialogue: 0,0:14:17.15,0:14:20.54,Default,,0000,0000,0000,,add a new directory under app/views called\Nsync, and
Dialogue: 0,0:14:20.54,0:14:25.82,Default,,0000,0000,0000,,under sync we're gonna add another folder\Ncalled comments.
Dialogue: 0,0:14:25.82,0:14:28.06,Default,,0000,0000,0000,,And under comments, we're gonna add a new\Nfile,
Dialogue: 0,0:14:28.06,0:14:31.78,Default,,0000,0000,0000,,and that's gonna be called comments dot html\Ndot
Dialogue: 0,0:14:31.78,0:14:34.81,Default,,0000,0000,0000,,erb. That's gonna be our partial, K.
Dialogue: 0,0:14:34.81,0:14:39.43,Default,,0000,0000,0000,,So, when we say sync partial here, instead\Nof
Dialogue: 0,0:14:39.43,0:14:41.27,Default,,0000,0000,0000,,looking at our normal template, it's gonna\Ngo look
Dialogue: 0,0:14:41.27,0:14:44.30,Default,,0000,0000,0000,,for the one in the sync directory. And for
Dialogue: 0,0:14:44.30,0:14:47.91,Default,,0000,0000,0000,,the most part, we're just gonna take our trusty
Dialogue: 0,0:14:47.91,0:14:51.21,Default,,0000,0000,0000,,old partial that we're using right now and\Ncopy
Dialogue: 0,0:14:51.21,0:14:52.90,Default,,0000,0000,0000,,and paste that. We can kind of just trim
Dialogue: 0,0:14:52.90,0:14:55.26,Default,,0000,0000,0000,,some of this out. One of the caveats of
Dialogue: 0,0:14:55.26,0:14:59.61,Default,,0000,0000,0000,,using sync is that we can't really do stuff
Dialogue: 0,0:14:59.61,0:15:02.70,Default,,0000,0000,0000,,like this. We can't ask about the current\Ncontext
Dialogue: 0,0:15:02.70,0:15:04.65,Default,,0000,0000,0000,,in which it's running, because this will get\Npushed
Dialogue: 0,0:15:04.65,0:15:08.42,Default,,0000,0000,0000,,out to everybody. So this, the same strategy\Nyou
Dialogue: 0,0:15:08.42,0:15:13.26,Default,,0000,0000,0000,,have for caching templates, caching partials\Nwithin your application,
Dialogue: 0,0:15:13.26,0:15:15.82,Default,,0000,0000,0000,,you're gonna apply that same strategy to the\Nreal
Dialogue: 0,0:15:15.82,0:15:17.37,Default,,0000,0000,0000,,time updates as well.
Dialogue: 0,0:15:17.37,0:15:20.10,Default,,0000,0000,0000,,And so stuff like this is probably just, just
Dialogue: 0,0:15:20.10,0:15:23.03,Default,,0000,0000,0000,,gonna have to go, right. We can have the
Dialogue: 0,0:15:23.03,0:15:25.49,Default,,0000,0000,0000,,user name, we have have what the body is.
Dialogue: 0,0:15:25.49,0:15:28.96,Default,,0000,0000,0000,,But we really can't have all those editing\Noptions.
Dialogue: 0,0:15:28.96,0:15:32.98,Default,,0000,0000,0000,,AUDIENCE: [indecipherable - 00:15:35]
Dialogue: 0,0:15:32.98,0:15:39.98,Default,,0000,0000,0000,,M.M.: Oh, did I? Thank you.
Dialogue: 0,0:15:41.02,0:15:48.02,Default,,0000,0000,0000,,Let's rename this. So comment instead of comments.\NSo
Dialogue: 0,0:15:48.58,0:15:51.78,Default,,0000,0000,0000,,that's our first step. The next change we\Nwant
Dialogue: 0,0:15:51.78,0:15:54.38,Default,,0000,0000,0000,,to make is, whenever a new comment comes,\Nwe
Dialogue: 0,0:15:54.38,0:15:58.04,Default,,0000,0000,0000,,want that to show up underneath, and so instead
Dialogue: 0,0:15:58.04,0:16:00.43,Default,,0000,0000,0000,,of calling sync, we're gonna call sync.new.\NThis is
Dialogue: 0,0:16:00.43,0:16:04.25,Default,,0000,0000,0000,,going to watch for new comments.
Dialogue: 0,0:16:04.25,0:16:09.14,Default,,0000,0000,0000,,In here, the resource is going to have to
Dialogue: 0,0:16:09.14,0:16:14.03,Default,,0000,0000,0000,,be a comment dot new, is that right? We
Dialogue: 0,0:16:14.03,0:16:19.68,Default,,0000,0000,0000,,can probably go a little bit further and say
Dialogue: 0,0:16:19.68,0:16:24.01,Default,,0000,0000,0000,,posts.comment dot new. K. All right.
Dialogue: 0,0:16:24.01,0:16:26.06,Default,,0000,0000,0000,,So that's not a lot of changes. What we've
Dialogue: 0,0:16:26.06,0:16:28.17,Default,,0000,0000,0000,,done is we've added sync to the repository,\Nto
Dialogue: 0,0:16:28.17,0:16:32.55,Default,,0000,0000,0000,,the application. We've registered all the\NJavascript. We've went
Dialogue: 0,0:16:32.55,0:16:36.72,Default,,0000,0000,0000,,in, went ahead, moved some of our html from
Dialogue: 0,0:16:36.72,0:16:41.17,Default,,0000,0000,0000,,the original locations to a new location under\Nsync
Dialogue: 0,0:16:41.17,0:16:44.69,Default,,0000,0000,0000,,and instead of calling render, we're gonna\Ncall sync
Dialogue: 0,0:16:44.69,0:16:45.60,Default,,0000,0000,0000,,and sync new.
Dialogue: 0,0:16:45.60,0:16:47.06,Default,,0000,0000,0000,,AUDIENCE: [indecipherable - 00:16:47]
Dialogue: 0,0:16:47.06,0:16:48.51,Default,,0000,0000,0000,,M.M.: What's that?
Dialogue: 0,0:16:48.51,0:16:49.97,Default,,0000,0000,0000,,AUDIENCE: [indecipherable - 00:16:49]
Dialogue: 0,0:16:49.97,0:16:54.71,Default,,0000,0000,0000,,M.M.: Post, yes. Thank you. Live coding, ladies\Nand
Dialogue: 0,0:16:54.71,0:16:55.44,Default,,0000,0000,0000,,gentlemen.
Dialogue: 0,0:16:55.44,0:16:59.51,Default,,0000,0000,0000,,Yeah. I transposed the plural. There you go.
Dialogue: 0,0:16:59.51,0:17:00.84,Default,,0000,0000,0000,,AUDIENCE: Pair programming to scale.
Dialogue: 0,0:17:00.84,0:17:01.74,Default,,0000,0000,0000,,M.M.: Pair programming to scale. All right.
Dialogue: 0,0:17:01.74,0:17:03.07,Default,,0000,0000,0000,,So let's see if this works. What I'm gonna
Dialogue: 0,0:17:03.07,0:17:05.26,Default,,0000,0000,0000,,do is I'm gonna refresh this page. I'm gonna
Dialogue: 0,0:17:05.26,0:17:07.13,Default,,0000,0000,0000,,refresh this page. I'm gonna refresh this\Npage. Now
Dialogue: 0,0:17:07.13,0:17:13.16,Default,,0000,0000,0000,,Firefox is not logged in. Safari here is logged
Dialogue: 0,0:17:13.16,0:17:15.67,Default,,0000,0000,0000,,in here by Stanley, who's back there somewhere,\Nand
Dialogue: 0,0:17:15.67,0:17:19.82,Default,,0000,0000,0000,,then Chrome is logged in by me. So let's
Dialogue: 0,0:17:19.82,0:17:22.13,Default,,0000,0000,0000,,see if this works. Who wants to place a
Dialogue: 0,0:17:22.13,0:17:22.68,Default,,0000,0000,0000,,bet?
Dialogue: 0,0:17:22.68,0:17:25.42,Default,,0000,0000,0000,,Does this work? Anybody know?
Dialogue: 0,0:17:25.42,0:17:30.34,Default,,0000,0000,0000,,All right. Let's see if it works. All right.
Dialogue: 0,0:17:30.34,0:17:37.34,Default,,0000,0000,0000,,There we go. Does this work? K. Yay!
Dialogue: 0,0:17:38.64,0:17:41.85,Default,,0000,0000,0000,,So what's nice about this approach is that\Nthis
Dialogue: 0,0:17:41.85,0:17:44.12,Default,,0000,0000,0000,,is gonna go out no matter how many clients
Dialogue: 0,0:17:44.12,0:17:49.91,Default,,0000,0000,0000,,you've got connected, theoretically. Every\Ntime your, your assets
Dialogue: 0,0:17:49.91,0:17:52.40,Default,,0000,0000,0000,,change, your resources change in your application,\Nthey can
Dialogue: 0,0:17:52.40,0:17:54.59,Default,,0000,0000,0000,,be notified in real time. K.
Dialogue: 0,0:17:54.59,0:17:55.90,Default,,0000,0000,0000,,And we didn't have to write a whole bunch
Dialogue: 0,0:17:55.90,0:17:58.82,Default,,0000,0000,0000,,of Javascript. We didn't have to change how\Nwe
Dialogue: 0,0:17:58.82,0:18:02.27,Default,,0000,0000,0000,,were architecting our presentation layer.\NWe're gonna use the,
Dialogue: 0,0:18:02.27,0:18:08.29,Default,,0000,0000,0000,,the same infrastructure that we're using today.\NAll right.
Dialogue: 0,0:18:08.29,0:18:12.27,Default,,0000,0000,0000,,OK. Now, because of this, I kind of lost
Dialogue: 0,0:18:12.27,0:18:16.24,Default,,0000,0000,0000,,my ability to, to edit. And I would like
Dialogue: 0,0:18:16.24,0:18:19.03,Default,,0000,0000,0000,,to have that back. So what I want to
Dialogue: 0,0:18:19.03,0:18:25.95,Default,,0000,0000,0000,,do is, in this loop, where we're saying, you
Dialogue: 0,0:18:25.95,0:18:28.52,Default,,0000,0000,0000,,know, we're gonna add this missing partial,\Nwhat I
Dialogue: 0,0:18:28.52,0:18:29.85,Default,,0000,0000,0000,,really want to do is I want to say,
Dialogue: 0,0:18:29.85,0:18:36.85,Default,,0000,0000,0000,,if you can edit the comment, right. And that's
Dialogue: 0,0:18:37.36,0:18:42.44,Default,,0000,0000,0000,,current user. What I really want to say is
Dialogue: 0,0:18:42.44,0:18:45.20,Default,,0000,0000,0000,,that if I can edit, I want to have
Dialogue: 0,0:18:45.20,0:18:52.20,Default,,0000,0000,0000,,the same partial I had before, right. But,\Nif
Dialogue: 0,0:18:53.49,0:18:57.27,Default,,0000,0000,0000,,I can't, then I want to use the one
Dialogue: 0,0:18:57.27,0:19:00.19,Default,,0000,0000,0000,,that is going to be synced. K.
Dialogue: 0,0:19:00.19,0:19:07.19,Default,,0000,0000,0000,,K. So, it's a small change. But what it's,
Dialogue: 0,0:19:09.21,0:19:12.96,Default,,0000,0000,0000,,what it's saying is, is that, if I have
Dialogue: 0,0:19:12.96,0:19:14.79,Default,,0000,0000,0000,,permissions to edit it, I don't want it to
Dialogue: 0,0:19:14.79,0:19:16.17,Default,,0000,0000,0000,,be syncing, I don't want to be notified if
Dialogue: 0,0:19:16.17,0:19:18.71,Default,,0000,0000,0000,,it changes, because I am likely the browser\Nthat's
Dialogue: 0,0:19:18.71,0:19:21.17,Default,,0000,0000,0000,,gonna be changing it. And, and I really want
Dialogue: 0,0:19:21.17,0:19:24.73,Default,,0000,0000,0000,,the tools to be able to edit and delete.
Dialogue: 0,0:19:24.73,0:19:27.54,Default,,0000,0000,0000,,So I'm gonna just come back here and refresh
Dialogue: 0,0:19:27.54,0:19:31.74,Default,,0000,0000,0000,,this UI, and you'll notice now, because of\Nthat,
Dialogue: 0,0:19:31.74,0:19:34.42,Default,,0000,0000,0000,,I have my tools back. My edit and delete.
Dialogue: 0,0:19:34.42,0:19:38.47,Default,,0000,0000,0000,,So I can come back over here and say
Dialogue: 0,0:19:38.47,0:19:45.47,Default,,0000,0000,0000,,yes, it does work. See, that updates there.\NIt
Dialogue: 0,0:19:45.85,0:19:50.84,Default,,0000,0000,0000,,looks like we've got a little bug.
Dialogue: 0,0:19:50.84,0:19:56.33,Default,,0000,0000,0000,,And then eventually I can actually delete\Nit as
Dialogue: 0,0:19:56.33,0:20:03.33,Default,,0000,0000,0000,,well. And it gets rid of it. K.
Dialogue: 0,0:20:03.50,0:20:08.87,Default,,0000,0000,0000,,And there's another bug with this. Do you\Nguys
Dialogue: 0,0:20:08.87,0:20:15.09,Default,,0000,0000,0000,,want to see what it is? It's pretty fun.
Dialogue: 0,0:20:15.09,0:20:18.59,Default,,0000,0000,0000,,Here is a, well, let's go to this one.
Dialogue: 0,0:20:18.59,0:20:19.96,Default,,0000,0000,0000,,Here is a blog post that doesn't have any
Dialogue: 0,0:20:19.96,0:20:23.09,Default,,0000,0000,0000,,comments yet. I'm gonna go onto this different\Nblog
Dialogue: 0,0:20:23.09,0:20:28.29,Default,,0000,0000,0000,,post, right, and, say we gotta bug. When I
Dialogue: 0,0:20:28.29,0:20:30.87,Default,,0000,0000,0000,,do that, my comment is showing up on this
Dialogue: 0,0:20:30.87,0:20:33.67,Default,,0000,0000,0000,,different blog post, right. Because it's,\Nright now we're
Dialogue: 0,0:20:33.67,0:20:36.42,Default,,0000,0000,0000,,looking for all comments whenever it gets\Nupdated, we're
Dialogue: 0,0:20:36.42,0:20:38.34,Default,,0000,0000,0000,,gonna add it to this page. So what we
Dialogue: 0,0:20:38.34,0:20:39.77,Default,,0000,0000,0000,,need to do is we need to scope these
Dialogue: 0,0:20:39.77,0:20:42.55,Default,,0000,0000,0000,,comments to this page. So let's add that really
Dialogue: 0,0:20:42.55,0:20:43.50,Default,,0000,0000,0000,,quick.
Dialogue: 0,0:20:43.50,0:20:50.50,Default,,0000,0000,0000,,We're gonna come back here to, come back here
Dialogue: 0,0:20:55.13,0:20:57.88,Default,,0000,0000,0000,,to our comment model, and we're gonna add\Na
Dialogue: 0,0:20:57.88,0:21:03.78,Default,,0000,0000,0000,,new scope. Now, this is gonna be different\Nthan
Dialogue: 0,0:21:03.78,0:21:07.63,Default,,0000,0000,0000,,a normal scope. Might be a redundancy, but\Nsync
Dialogue: 0,0:21:07.63,0:21:12.96,Default,,0000,0000,0000,,needs it. So let's add it, called by_posts.\NAnd
Dialogue: 0,0:21:12.96,0:21:15.37,Default,,0000,0000,0000,,it's gonna take a lambda, and we're gonna\Ngive
Dialogue: 0,0:21:15.37,0:21:20.66,Default,,0000,0000,0000,,it a post and we're gonna say where post
Dialogue: 0,0:21:20.66,0:21:24.16,Default,,0000,0000,0000,,id is post id. K.
Dialogue: 0,0:21:24.16,0:21:31.16,Default,,0000,0000,0000,,K. So we've just added a scope for post.
Dialogue: 0,0:21:32.29,0:21:38.01,Default,,0000,0000,0000,,Then we're gonna come over here into our sync
Dialogue: 0,0:21:38.01,0:21:45.01,Default,,0000,0000,0000,,partials. And we're going to add that scope\Nhere.
Dialogue: 0,0:21:45.53,0:21:52.53,Default,,0000,0000,0000,,So let's, let's see scope dot by_posts. And\Nlet's
Dialogue: 0,0:22:00.37,0:22:06.87,Default,,0000,0000,0000,,also add that to this one. K.
Dialogue: 0,0:22:06.87,0:22:11.61,Default,,0000,0000,0000,,So now if we refresh this, come over here,
Dialogue: 0,0:22:11.61,0:22:16.20,Default,,0000,0000,0000,,and now I'm logged in as Stanley. I say,
Dialogue: 0,0:22:16.20,0:22:19.57,Default,,0000,0000,0000,,oh hi. It shows up here, which is what
Dialogue: 0,0:22:19.57,0:22:21.36,Default,,0000,0000,0000,,we expect, but on this other one it does
Dialogue: 0,0:22:21.36,0:22:24.16,Default,,0000,0000,0000,,not, K. And if I refresh this we'll get
Dialogue: 0,0:22:24.16,0:22:28.98,Default,,0000,0000,0000,,rid of that comment. So scoping is, is easy
Dialogue: 0,0:22:28.98,0:22:33.86,Default,,0000,0000,0000,,as declaring a new scope on your model, in
Dialogue: 0,0:22:33.86,0:22:36.60,Default,,0000,0000,0000,,the same syntax that we're using for normal\Nscopes.
Dialogue: 0,0:22:36.60,0:22:39.82,Default,,0000,0000,0000,,And then whenever we render out our partials,\Nwe
Dialogue: 0,0:22:39.82,0:22:42.01,Default,,0000,0000,0000,,just have to, we have to reference that scope.
Dialogue: 0,0:22:42.01,0:22:42.01,Default,,0000,0000,0000,,M.M.: Why do we need what?
Dialogue: 0,0:22:48.29,0:22:53.47,Default,,0000,0000,0000,,M.M.: The scope in both? Cause there are two
Dialogue: 0,0:22:53.47,0:22:56.23,Default,,0000,0000,0000,,different partials. It, it would be possible\Nto-
Dialogue: 0,0:22:56.23,0:22:58.86,Default,,0000,0000,0000,,AUDIENCE: [indecipherable - 00:22:59]
Dialogue: 0,0:22:58.86,0:23:02.92,Default,,0000,0000,0000,,M.M.: No. It affects both. The scope affects\Nboth.
Dialogue: 0,0:23:02.92,0:23:05.43,Default,,0000,0000,0000,,The reason why there are two partials, here,\Nis
Dialogue: 0,0:23:05.43,0:23:08.58,Default,,0000,0000,0000,,that whenever a new comment comes into existence,\Nwe
Dialogue: 0,0:23:08.58,0:23:10.08,Default,,0000,0000,0000,,want that to be listed. So we can move
Dialogue: 0,0:23:10.08,0:23:17.08,Default,,0000,0000,0000,,that around, theoretically, I believe, if.\NWhoa.
Dialogue: 0,0:23:22.47,0:23:29.47,Default,,0000,0000,0000,,Nevermind. Let's not touch that. Live coding.
Dialogue: 0,0:23:31.57,0:23:38.57,Default,,0000,0000,0000,,All right. So sync is a pretty cool little
Dialogue: 0,0:23:38.64,0:23:41.34,Default,,0000,0000,0000,,library. It does quite a lot for us. What
Dialogue: 0,0:23:41.34,0:23:44.15,Default,,0000,0000,0000,,it's going to do, is it's going to hold
Dialogue: 0,0:23:44.15,0:23:48.01,Default,,0000,0000,0000,,a connection via web socket to a server, and
Dialogue: 0,0:23:48.01,0:23:50.84,Default,,0000,0000,0000,,then it's going to put mechanisms within Rails\Nto
Dialogue: 0,0:23:50.84,0:23:55.05,Default,,0000,0000,0000,,talk to that, that web socket, and then when
Dialogue: 0,0:23:55.05,0:23:58.75,Default,,0000,0000,0000,,our resources change, it will render those\Ntemplates and
Dialogue: 0,0:23:58.75,0:24:01.09,Default,,0000,0000,0000,,push that out to that web socket, which the
Dialogue: 0,0:24:01.09,0:24:04.39,Default,,0000,0000,0000,,clients will then pull down, K. So without\Nre,
Dialogue: 0,0:24:04.39,0:24:08.51,Default,,0000,0000,0000,,without rearchitecting our presentation tier,\Nwe are able to
Dialogue: 0,0:24:08.51,0:24:11.71,Default,,0000,0000,0000,,take advantage of real time, and able to do
Dialogue: 0,0:24:11.71,0:24:15.93,Default,,0000,0000,0000,,it without a major change to how we're organizing
Dialogue: 0,0:24:15.93,0:24:19.35,Default,,0000,0000,0000,,or architecting our templates, our files.
Dialogue: 0,0:24:19.35,0:24:22.82,Default,,0000,0000,0000,,We can go just a little bit further, as
Dialogue: 0,0:24:22.82,0:24:29.38,Default,,0000,0000,0000,,well. So let's open a Rails console, K, and
Dialogue: 0,0:24:29.38,0:24:36.38,Default,,0000,0000,0000,,we'll say. Just get, just a comment out of
Dialogue: 0,0:24:37.18,0:24:43.91,Default,,0000,0000,0000,,here. All right. So I got this comment right
Dialogue: 0,0:24:43.91,0:24:46.41,Default,,0000,0000,0000,,here, which is Jason saying that he's watching,\Nbut
Dialogue: 0,0:24:46.41,0:24:48.10,Default,,0000,0000,0000,,he's kind of on a delay because he's not
Dialogue: 0,0:24:48.10,0:24:50.56,Default,,0000,0000,0000,,actually in the room, K.
Dialogue: 0,0:24:50.56,0:24:54.93,Default,,0000,0000,0000,,What we can say here is sync model dot
Dialogue: 0,0:24:54.93,0:24:58.81,Default,,0000,0000,0000,,enable, and this will allow all changes that\Nhappen
Dialogue: 0,0:24:58.81,0:25:01.67,Default,,0000,0000,0000,,within our process, that's not running on\Nthe web
Dialogue: 0,0:25:01.67,0:25:03.96,Default,,0000,0000,0000,,server, still a Rails process, but we're not\Nactually
Dialogue: 0,0:25:03.96,0:25:06.58,Default,,0000,0000,0000,,on running on the web server. It's a separate
Dialogue: 0,0:25:06.58,0:25:09.29,Default,,0000,0000,0000,,process. Maybe a background job. But now all\Nof
Dialogue: 0,0:25:09.29,0:25:11.75,Default,,0000,0000,0000,,our changes that we make can also be reflected
Dialogue: 0,0:25:11.75,0:25:14.10,Default,,0000,0000,0000,,in real time as well.
Dialogue: 0,0:25:14.10,0:25:20.64,Default,,0000,0000,0000,,So let's pull this guy over. And watch that
Dialogue: 0,0:25:20.64,0:25:24.56,Default,,0000,0000,0000,,happen. So we can change this to, what should
Dialogue: 0,0:25:24.56,0:25:31.56,Default,,0000,0000,0000,,Jason say? Say, I don't know, real time. K,
Dialogue: 0,0:25:35.35,0:25:38.14,Default,,0000,0000,0000,,so let's pull him out. You see that his
Dialogue: 0,0:25:38.14,0:25:40.58,Default,,0000,0000,0000,,text is right here. I'm watching, kind of.\NWhen
Dialogue: 0,0:25:40.58,0:25:43.84,Default,,0000,0000,0000,,I call save it will change, and it updates
Dialogue: 0,0:25:43.84,0:25:50.75,Default,,0000,0000,0000,,right here, in real time. And duplicate. Why?\NChris?
Dialogue: 0,0:25:50.75,0:25:51.95,Default,,0000,0000,0000,,Why?
Dialogue: 0,0:25:51.95,0:25:53.14,Default,,0000,0000,0000,,Applettes.
Dialogue: 0,0:25:53.14,0:25:57.94,Default,,0000,0000,0000,,AUDIENCE: Wait till afterwards.
Dialogue: 0,0:25:57.94,0:26:02.73,Default,,0000,0000,0000,,M.M.: Afterwards? All right.
Dialogue: 0,0:26:02.73,0:26:06.08,Default,,0000,0000,0000,,OK. Let's continue and add this to some of
Dialogue: 0,0:26:06.08,0:26:11.85,Default,,0000,0000,0000,,the other pages as well. So let's go to
Dialogue: 0,0:26:11.85,0:26:14.06,Default,,0000,0000,0000,,post. Let's do the same thing. We want to
Dialogue: 0,0:26:14.06,0:26:20.66,Default,,0000,0000,0000,,sync our posts as well. And our posts controller,
Dialogue: 0,0:26:20.66,0:26:25.24,Default,,0000,0000,0000,,we want to enable sync here as.
Dialogue: 0,0:26:25.24,0:26:30.75,Default,,0000,0000,0000,,Enable sync on our post controller and in\Nour
Dialogue: 0,0:26:30.75,0:26:34.12,Default,,0000,0000,0000,,posts model. So let's go ahead and take a
Dialogue: 0,0:26:34.12,0:26:39.64,Default,,0000,0000,0000,,look at our post index page. Our index page,
Dialogue: 0,0:26:39.64,0:26:41.34,Default,,0000,0000,0000,,where we're listing all the posts, we're gonna\Ngo
Dialogue: 0,0:26:41.34,0:26:45.97,Default,,0000,0000,0000,,through and render the post. And then, if\Nwe
Dialogue: 0,0:26:45.97,0:26:51.16,Default,,0000,0000,0000,,have, if we can, we'll add, we'll have a
Dialogue: 0,0:26:51.16,0:26:53.76,Default,,0000,0000,0000,,button to add a new post. If we look
Dialogue: 0,0:26:53.76,0:26:57.37,Default,,0000,0000,0000,,at that post partial, you notice here, again,\Nwe've
Dialogue: 0,0:26:57.37,0:26:59.61,Default,,0000,0000,0000,,got some logic in here determining whether\Nor not
Dialogue: 0,0:26:59.61,0:27:01.81,Default,,0000,0000,0000,,we can edit it, or whether or not we
Dialogue: 0,0:27:01.81,0:27:04.15,Default,,0000,0000,0000,,can remove it.
Dialogue: 0,0:27:04.15,0:27:07.38,Default,,0000,0000,0000,,So this logic is problematic when we're talking\Nabout
Dialogue: 0,0:27:07.38,0:27:09.71,Default,,0000,0000,0000,,a cache template that's gonna get pushed out\Nto
Dialogue: 0,0:27:09.71,0:27:12.03,Default,,0000,0000,0000,,everybody, cause not everybody's gonna have\Nthe same amount
Dialogue: 0,0:27:12.03,0:27:14.37,Default,,0000,0000,0000,,of permissions. So what we'll have to do is
Dialogue: 0,0:27:14.37,0:27:17.07,Default,,0000,0000,0000,,we'll have to just take that out. And I'm
Dialogue: 0,0:27:17.07,0:27:20.11,Default,,0000,0000,0000,,gonna take it out and put it into the
Dialogue: 0,0:27:20.11,0:27:21.82,Default,,0000,0000,0000,,index template.
Dialogue: 0,0:27:21.82,0:27:26.20,Default,,0000,0000,0000,,Well. Actually, I'm just gonna take it out\Nof,
Dialogue: 0,0:27:26.20,0:27:31.03,Default,,0000,0000,0000,,of this view altogether. So, again, in order\Nto
Dialogue: 0,0:27:31.03,0:27:34.03,Default,,0000,0000,0000,,change our template from a static template\Nto a
Dialogue: 0,0:27:34.03,0:27:41.03,Default,,0000,0000,0000,,real time template, we're gonna say sync and\Npartial
Dialogue: 0,0:27:43.50,0:27:48.79,Default,,0000,0000,0000,,is a post. And then our resource is also
Dialogue: 0,0:27:48.79,0:27:53.66,Default,,0000,0000,0000,,gonna be that same post, and then, if we
Dialogue: 0,0:27:53.66,0:27:56.87,Default,,0000,0000,0000,,get a new post, it just lists him down
Dialogue: 0,0:27:56.87,0:28:00.49,Default,,0000,0000,0000,,below. We don't, probably don't need to scope\Non
Dialogue: 0,0:28:00.49,0:28:03.77,Default,,0000,0000,0000,,this one. The big problem we have is all
Dialogue: 0,0:28:03.77,0:28:09.17,Default,,0000,0000,0000,,of this edit information. So let's go over\Nhere
Dialogue: 0,0:28:09.17,0:28:12.20,Default,,0000,0000,0000,,to posts and get rid of that guy. So
Dialogue: 0,0:28:12.20,0:28:15.56,Default,,0000,0000,0000,,I'm just gonna remove some, some code here.\NI'm
Dialogue: 0,0:28:15.56,0:28:19.12,Default,,0000,0000,0000,,gonna remove all of this editing. Anything\Nthat's gonna
Dialogue: 0,0:28:19.12,0:28:21.27,Default,,0000,0000,0000,,talk to current user, the current request\Nis not
Dialogue: 0,0:28:21.27,0:28:27.17,Default,,0000,0000,0000,,gonna work. So let's get rid of that.
Dialogue: 0,0:28:27.17,0:28:34.17,Default,,0000,0000,0000,,And now let's take a look at, take a
Dialogue: 0,0:28:36.58,0:28:43.58,Default,,0000,0000,0000,,look at our, our post pages. I don't know
Dialogue: 0,0:28:45.04,0:28:50.40,Default,,0000,0000,0000,,what that is.
Dialogue: 0,0:28:50.40,0:28:52.32,Default,,0000,0000,0000,,We're asking for posts, it doesn't exist outside\Nof
Dialogue: 0,0:28:52.32,0:28:57.16,Default,,0000,0000,0000,,that block. So we're gonna say post dot new.
Dialogue: 0,0:28:57.16,0:29:04.16,Default,,0000,0000,0000,,OK. So, again, user not logged in, user logged
Dialogue: 0,0:29:05.03,0:29:09.16,Default,,0000,0000,0000,,in, and as a different user logged in. So
Dialogue: 0,0:29:09.16,0:29:11.50,Default,,0000,0000,0000,,if I come over here, I want to add
Dialogue: 0,0:29:11.50,0:29:18.50,Default,,0000,0000,0000,,new post. See if it works. And let's add
Dialogue: 0,0:29:22.80,0:29:23.29,Default,,0000,0000,0000,,that.
Dialogue: 0,0:29:23.29,0:29:25.99,Default,,0000,0000,0000,,So, Stanley added this post. It shows up immediately
Dialogue: 0,0:29:25.99,0:29:29.42,Default,,0000,0000,0000,,on, on Mike's browser. And it also shows up
Dialogue: 0,0:29:29.42,0:29:33.09,Default,,0000,0000,0000,,in the not logged in browser. Let's come over
Dialogue: 0,0:29:33.09,0:29:40.09,Default,,0000,0000,0000,,here. We'll, we'll say congrats. Now.
Dialogue: 0,0:29:45.98,0:29:49.41,Default,,0000,0000,0000,,This browser over the right, the comment is\Nnot
Dialogue: 0,0:29:49.41,0:29:55.62,Default,,0000,0000,0000,,updating, right. Let's go back over here.\NSo here,
Dialogue: 0,0:29:55.62,0:30:02.62,Default,,0000,0000,0000,,we've got one comment. Stanley says, I know.\NAnd
Dialogue: 0,0:30:03.66,0:30:07.53,Default,,0000,0000,0000,,that, that one comment here is still not updated.
Dialogue: 0,0:30:07.53,0:30:10.75,Default,,0000,0000,0000,,So we've got changes happening on a sub-resource,\Nbut
Dialogue: 0,0:30:10.75,0:30:15.47,Default,,0000,0000,0000,,it's not changing our template. Thankfully\Nthere's a really
Dialogue: 0,0:30:15.47,0:30:19.59,Default,,0000,0000,0000,,nice DSL to make that happen. So we'll go
Dialogue: 0,0:30:19.59,0:30:23.23,Default,,0000,0000,0000,,to our comment controll- or, comment object,\Nand we'll
Dialogue: 0,0:30:23.23,0:30:28.51,Default,,0000,0000,0000,,say sync touch post. K.
Dialogue: 0,0:30:28.51,0:30:31.39,Default,,0000,0000,0000,,So this is similar to normal touch. If you
Dialogue: 0,0:30:31.39,0:30:34.53,Default,,0000,0000,0000,,want, have a resource that you want to touch
Dialogue: 0,0:30:34.53,0:30:38.35,Default,,0000,0000,0000,,through an association whenever it updates,\Nit works just
Dialogue: 0,0:30:38.35,0:30:41.20,Default,,0000,0000,0000,,the same, only it's a special one that'll\Nwork
Dialogue: 0,0:30:41.20,0:30:46.09,Default,,0000,0000,0000,,for sync. So let's save that and refresh all
Dialogue: 0,0:30:46.09,0:30:51.68,Default,,0000,0000,0000,,of these browsers. K. So now they all have
Dialogue: 0,0:30:51.68,0:30:55.32,Default,,0000,0000,0000,,two comments. OK.
Dialogue: 0,0:30:55.32,0:31:02.07,Default,,0000,0000,0000,,I come over here. Let's have Stanley add one
Dialogue: 0,0:31:02.07,0:31:09.07,Default,,0000,0000,0000,,more, add one more comment. Man, Chris. Now\Nthe
Dialogue: 0,0:31:09.20,0:31:14.89,Default,,0000,0000,0000,,comments are updating multiple times. I'm\Ncurious to why
Dialogue: 0,0:31:14.89,0:31:19.76,Default,,0000,0000,0000,,that is. It wasn't doing that an hour ago.
Dialogue: 0,0:31:19.76,0:31:26.76,Default,,0000,0000,0000,,What did I miss? OK.
Dialogue: 0,0:31:27.67,0:31:32.21,Default,,0000,0000,0000,,There's one more, there's one more review\Nof posts
Dialogue: 0,0:31:32.21,0:31:38.13,Default,,0000,0000,0000,,here, and that is the actual post page. So
Dialogue: 0,0:31:38.13,0:31:45.13,Default,,0000,0000,0000,,we can edit this. So let's say it sort
Dialogue: 0,0:31:45.48,0:31:48.96,Default,,0000,0000,0000,,of works, but now this page isn't updating\Nand
Dialogue: 0,0:31:48.96,0:31:51.58,Default,,0000,0000,0000,,this page isn't updating, right. So we, I've\Nupdated
Dialogue: 0,0:31:51.58,0:31:54.56,Default,,0000,0000,0000,,this post, but the other browsers aren't updating\Non
Dialogue: 0,0:31:54.56,0:31:57.03,Default,,0000,0000,0000,,the show page. The reason for that is because
Dialogue: 0,0:31:57.03,0:32:00.18,Default,,0000,0000,0000,,we're not syncing the template on that page.\NSo
Dialogue: 0,0:32:00.18,0:32:03.91,Default,,0000,0000,0000,,really quick we'll see, we'll show you just\Nhow
Dialogue: 0,0:32:03.91,0:32:05.57,Default,,0000,0000,0000,,easy it is to do that. We'll come over
Dialogue: 0,0:32:05.57,0:32:09.76,Default,,0000,0000,0000,,here to show. We have this same information\Nwhere
Dialogue: 0,0:32:09.76,0:32:13.73,Default,,0000,0000,0000,,we're pawing out all of these links determining,\Nyou
Dialogue: 0,0:32:13.73,0:32:16.98,Default,,0000,0000,0000,,know, whether or not we can edit. I'm gonna
Dialogue: 0,0:32:16.98,0:32:19.16,Default,,0000,0000,0000,,punt on that. I'm just gonna put that down
Dialogue: 0,0:32:19.16,0:32:23.00,Default,,0000,0000,0000,,below. So it's not gonna be part of any
Dialogue: 0,0:32:23.00,0:32:24.74,Default,,0000,0000,0000,,template. So if you hit this page and you
Dialogue: 0,0:32:24.74,0:32:27.59,Default,,0000,0000,0000,,can edit it, we're going to show you those
Dialogue: 0,0:32:27.59,0:32:32.18,Default,,0000,0000,0000,,links. But it's gonna be outside of the, outside
Dialogue: 0,0:32:32.18,0:32:34.19,Default,,0000,0000,0000,,of the, the partial.
Dialogue: 0,0:32:34.19,0:32:39.25,Default,,0000,0000,0000,,So I'm just gonna sit. We're gonna sync a
Dialogue: 0,0:32:39.25,0:32:46.25,Default,,0000,0000,0000,,new partial and it's gonna be called, oh my
Dialogue: 0,0:32:48.87,0:32:55.87,Default,,0000,0000,0000,,gosh. I cannot type. It really is so uncomfortable.
Dialogue: 0,0:32:59.19,0:33:02.23,Default,,0000,0000,0000,,So a new partial, we're gonna call this postfull,
Dialogue: 0,0:33:02.23,0:33:06.46,Default,,0000,0000,0000,,because we have the full body embedded in\Nit.
Dialogue: 0,0:33:06.46,0:33:09.22,Default,,0000,0000,0000,,And the resource is going to be that post
Dialogue: 0,0:33:09.22,0:33:12.84,Default,,0000,0000,0000,,object. And then that's really it. We come\Nback
Dialogue: 0,0:33:12.84,0:33:17.08,Default,,0000,0000,0000,,here to our sync directory under posts, create\Na
Dialogue: 0,0:33:17.08,0:33:24.08,Default,,0000,0000,0000,,new file, and we'll save this as postfull.
Dialogue: 0,0:33:26.79,0:33:30.58,Default,,0000,0000,0000,,And then we'll come back, restart all of these
Dialogue: 0,0:33:30.58,0:33:37.58,Default,,0000,0000,0000,,browsers, and come back here and edit this\Nand
Dialogue: 0,0:33:39.91,0:33:46.91,Default,,0000,0000,0000,,so it really does work. What?
Dialogue: 0,0:33:47.16,0:33:52.01,Default,,0000,0000,0000,,What am I missing?
Dialogue: 0,0:33:52.01,0:33:56.86,Default,,0000,0000,0000,,AUDIENCE: [indecipherable - 00:34:01]
Dialogue: 0,0:33:56.86,0:34:03.86,Default,,0000,0000,0000,,M.M.: I did refresh the browsers. Let's refresh\Nit
Dialogue: 0,0:34:05.41,0:34:08.10,Default,,0000,0000,0000,,one more time.
Dialogue: 0,0:34:08.10,0:34:12.58,Default,,0000,0000,0000,,AUDIENCE: Did you try rebooting?
Dialogue: 0,0:34:12.58,0:34:17.80,Default,,0000,0000,0000,,M.M.: Huh. All right. Again. It worked an\Nhour
Dialogue: 0,0:34:17.80,0:34:19.39,Default,,0000,0000,0000,,ago.
Dialogue: 0,0:34:19.39,0:34:25.21,Default,,0000,0000,0000,,So, that's sync. I'm out of time. But we've
Dialogue: 0,0:34:25.21,0:34:29.95,Default,,0000,0000,0000,,used this on some internal apps dealing with\Nmonitoring.
Dialogue: 0,0:34:29.95,0:34:34.28,Default,,0000,0000,0000,,And instead of pulling, continually asking\Nfor new information,
Dialogue: 0,0:34:34.28,0:34:37.01,Default,,0000,0000,0000,,just organizing a Rails app like you always\Nhave
Dialogue: 0,0:34:37.01,0:34:40.10,Default,,0000,0000,0000,,with templates and having those templates\Nupdate whenever resource
Dialogue: 0,0:34:40.10,0:34:43.52,Default,,0000,0000,0000,,is changed has been just a really, really\Ngreat,
Dialogue: 0,0:34:43.52,0:34:47.32,Default,,0000,0000,0000,,fantastic thing. There are caveats. It's a\Nlittle touchy,
Dialogue: 0,0:34:47.32,0:34:49.45,Default,,0000,0000,0000,,as you can see. But it's definitely been getting
Dialogue: 0,0:34:49.45,0:34:51.72,Default,,0000,0000,0000,,better over time.
Dialogue: 0,0:34:51.72,0:34:53.35,Default,,0000,0000,0000,,I would just like to leave you with this
Dialogue: 0,0:34:53.35,0:34:58.26,Default,,0000,0000,0000,,little pitch, that Rails has benefited, over\Nthe years,
Dialogue: 0,0:34:58.26,0:35:04.76,Default,,0000,0000,0000,,from being first to, to popularize certain\Napproaches for
Dialogue: 0,0:35:04.76,0:35:07.50,Default,,0000,0000,0000,,web development. It was there at the very\Nbeginning
Dialogue: 0,0:35:07.50,0:35:09.14,Default,,0000,0000,0000,,with Ajax. It was there are the very beginning
Dialogue: 0,0:35:09.14,0:35:13.05,Default,,0000,0000,0000,,with REST. I, I strongly feel that if we
Dialogue: 0,0:35:13.05,0:35:16.23,Default,,0000,0000,0000,,are not able to do real time information within
Dialogue: 0,0:35:16.23,0:35:19.67,Default,,0000,0000,0000,,Rails that people will move on from Rails.\NAnd
Dialogue: 0,0:35:19.67,0:35:22.32,Default,,0000,0000,0000,,I totally think that you don't need to. I
Dialogue: 0,0:35:22.32,0:35:24.95,Default,,0000,0000,0000,,know that there's a lot of functionality that\Nis
Dialogue: 0,0:35:24.95,0:35:26.89,Default,,0000,0000,0000,,very difficult to do with Rails as it is
Dialogue: 0,0:35:26.89,0:35:29.43,Default,,0000,0000,0000,,today, and so people are looking outside of\NRails
Dialogue: 0,0:35:29.43,0:35:32.97,Default,,0000,0000,0000,,for the presentation. But there are so many\Nadvantages
Dialogue: 0,0:35:32.97,0:35:36.94,Default,,0000,0000,0000,,to rendering your html on the server that\Nwe
Dialogue: 0,0:35:36.94,0:35:38.46,Default,,0000,0000,0000,,just need to think a little bit differently\Nand
Dialogue: 0,0:35:38.46,0:35:39.58,Default,,0000,0000,0000,,a little bit better about it.
Dialogue: 0,0:35:39.58,0:35:42.08,Default,,0000,0000,0000,,So, I'll open it up to questions.