[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:17.08,0:00:18.45,Default,,0000,0000,0000,,BRAD GESSLER: All right. So, while these are,
Dialogue: 0,0:00:18.54,0:00:20.13,Default,,0000,0000,0000,,these responses are coming in.
Dialogue: 0,0:00:20.13,0:00:23.35,Default,,0000,0000,0000,,It looks like quite a few people have
Dialogue: 0,0:00:23.36,0:00:27.01,Default,,0000,0000,0000,,either handcrafted html and css applications.
Dialogue: 0,0:00:27.01,0:00:30.90,Default,,0000,0000,0000,,I'm not sure if they're single-page application,
Dialogue: 0,0:00:30.90,0:00:34.17,Default,,0000,0000,0000,,or just deploy straight-up Rails applications
Dialogue: 0,0:00:34.18,0:00:36.38,Default,,0000,0000,0000,,or all the logic on the server-side.
Dialogue: 0,0:00:36.40,0:00:39.62,Default,,0000,0000,0000,,So that's good. I, I hope you'll learn
Dialogue: 0,0:00:39.62,0:00:42.39,Default,,0000,0000,0000,,something new today about how my company,
Dialogue: 0,0:00:42.39,0:00:43.93,Default,,0000,0000,0000,,Poll Everywhere, which the,
Dialogue: 0,0:00:43.94,0:00:45.15,Default,,0000,0000,0000,,the product is what you're seeing.
Dialogue: 0,0:00:45.15,0:00:48.06,Default,,0000,0000,0000,,We're a software as a service company.
Dialogue: 0,0:00:48.06,0:00:51.52,Default,,0000,0000,0000,,We just sell this to presenters based on audience\Nsize.
Dialogue: 0,0:00:51.52,0:00:56.55,Default,,0000,0000,0000,,So, I'm gonna fire up the slides here. All
Dialogue: 0,0:00:56.55,0:01:00.94,Default,,0000,0000,0000,,right. My display settings are working, so\Nthis is
Dialogue: 0,0:01:00.94,0:01:05.07,Default,,0000,0000,0000,,good. All right, so Middleman. The missing\Nview in
Dialogue: 0,0:01:05.07,0:01:07.47,Default,,0000,0000,0000,,the Rails API stack.
Dialogue: 0,0:01:07.50,0:01:10.44,Default,,0000,0000,0000,,Let's just jump into it. So, as I said
Dialogue: 0,0:01:10.44,0:01:13.24,Default,,0000,0000,0000,,before, I am Brad Gessler, CTO and co-founder\Nof
Dialogue: 0,0:01:13.24,0:01:15.76,Default,,0000,0000,0000,,Poll Everywhere. We started this company about\Nsix years
Dialogue: 0,0:01:15.76,0:01:19.24,Default,,0000,0000,0000,,ago now. So, we were mobile first, whatever\Nthat
Dialogue: 0,0:01:19.24,0:01:22.55,Default,,0000,0000,0000,,meant, SMS. So we went through all the pains
Dialogue: 0,0:01:22.55,0:01:25.85,Default,,0000,0000,0000,,of having to upgrade, if you will, to the
Dialogue: 0,0:01:25.86,0:01:31.52,Default,,0000,0000,0000,,second vintage of mobile first, which is mobile,\Nbasically
Dialogue: 0,0:01:31.52,0:01:34.23,Default,,0000,0000,0000,,a mobile website. We had a lot of fun
Dialogue: 0,0:01:34.23,0:01:38.56,Default,,0000,0000,0000,,doing that and, and learning things the hard\Nway.
Dialogue: 0,0:01:38.56,0:01:41.08,Default,,0000,0000,0000,,But first, what is middleman? How many of\Nyou
Dialogue: 0,0:01:41.08,0:01:43.10,Default,,0000,0000,0000,,have heard of Jekyll in this room? That seems
Dialogue: 0,0:01:43.10,0:01:46.38,Default,,0000,0000,0000,,to be the, the predominant static website\Ngenerator. And
Dialogue: 0,0:01:46.38,0:01:48.47,Default,,0000,0000,0000,,if you go to the Ruby toolbox and you
Dialogue: 0,0:01:48.47,0:01:50.68,Default,,0000,0000,0000,,ask Ruby toolbox for, hey, what should I use
Dialogue: 0,0:01:50.68,0:01:52.97,Default,,0000,0000,0000,,to generate a static website? You're going\Nto get
Dialogue: 0,0:01:52.97,0:01:56.95,Default,,0000,0000,0000,,Jekyll. But it's, it's not like Jekyll, in\Nthe
Dialogue: 0,0:01:56.98,0:01:59.59,Default,,0000,0000,0000,,sense that it uses a lot of the more
Dialogue: 0,0:01:59.59,0:02:03.09,Default,,0000,0000,0000,,modern, basically RubyGems inside of what\Nyou see in
Dialogue: 0,0:02:03.09,0:02:05.62,Default,,0000,0000,0000,,Rails 4 and Rails 3, which is, the fact
Dialogue: 0,0:02:05.62,0:02:09.24,Default,,0000,0000,0000,,that it uses tilt to manage all of the
Dialogue: 0,0:02:09.24,0:02:12.59,Default,,0000,0000,0000,,template and, and sass and all that good stuff.
Dialogue: 0,0:02:12.60,0:02:14.68,Default,,0000,0000,0000,,So, if you're looking for a tool to build
Dialogue: 0,0:02:14.68,0:02:16.99,Default,,0000,0000,0000,,a static site, don't be scared off by the
Dialogue: 0,0:02:16.99,0:02:20.70,Default,,0000,0000,0000,,fact that middleman is catching up with Jekyll.\NAnd
Dialogue: 0,0:02:20.72,0:02:23.64,Default,,0000,0000,0000,,you should feel a lot better about that after
Dialogue: 0,0:02:23.64,0:02:24.73,Default,,0000,0000,0000,,this talk.
Dialogue: 0,0:02:24.73,0:02:30.49,Default,,0000,0000,0000,,So, middleman is extraordinarily well-documented.\NThomas Reynolds built middleman.
Dialogue: 0,0:02:30.50,0:02:34.08,Default,,0000,0000,0000,,He's the, the guy behind this. And he also
Dialogue: 0,0:02:34.08,0:02:35.91,Default,,0000,0000,0000,,built an amazing website with a lot of great
Dialogue: 0,0:02:35.91,0:02:38.62,Default,,0000,0000,0000,,documentation behind it. So if you go to,\NI
Dialogue: 0,0:02:38.62,0:02:42.43,Default,,0000,0000,0000,,believe it's middlemanapp dot com, you can\Nget a
Dialogue: 0,0:02:42.43,0:02:46.12,Default,,0000,0000,0000,,sense of, of everything that, that this static\Nsite
Dialogue: 0,0:02:46.12,0:02:48.03,Default,,0000,0000,0000,,generator involves.
Dialogue: 0,0:02:48.04,0:02:51.27,Default,,0000,0000,0000,,Another really nice thing about this static\Nsite generator
Dialogue: 0,0:02:51.28,0:02:54.22,Default,,0000,0000,0000,,is that it's, it's very modular. So it actually
Dialogue: 0,0:02:54.22,0:02:56.25,Default,,0000,0000,0000,,uses rack in its gut, so if you understand
Dialogue: 0,0:02:56.25,0:02:58.30,Default,,0000,0000,0000,,rack, you can write a lot of extensions using
Dialogue: 0,0:02:58.30,0:03:01.66,Default,,0000,0000,0000,,rack, which is kind of crazy. A static site
Dialogue: 0,0:03:01.68,0:03:04.88,Default,,0000,0000,0000,,generator using rack to, to do certain things.
Dialogue: 0,0:03:04.88,0:03:08.74,Default,,0000,0000,0000,,And there's also a, an extension framework,\Nwhere you
Dialogue: 0,0:03:08.74,0:03:11.53,Default,,0000,0000,0000,,can roll things out, like, a middleman blog,\Nif
Dialogue: 0,0:03:11.53,0:03:15.03,Default,,0000,0000,0000,,you so please. So, middleman blog in middleman\Nis
Dialogue: 0,0:03:15.03,0:03:18.86,Default,,0000,0000,0000,,essentially a, a drop and replacement for\NJekyll. With
Dialogue: 0,0:03:18.86,0:03:20.81,Default,,0000,0000,0000,,a few other things. If you're used to writing
Dialogue: 0,0:03:20.82,0:03:22.95,Default,,0000,0000,0000,,GitHub-flavored markdown, there's a few tweaks\Nthat you have
Dialogue: 0,0:03:22.96,0:03:24.87,Default,,0000,0000,0000,,to make there to, to get that whole thing
Dialogue: 0,0:03:24.87,0:03:26.52,Default,,0000,0000,0000,,working.
Dialogue: 0,0:03:26.52,0:03:30.77,Default,,0000,0000,0000,,So, getting started with middleman is actually\Nvery similar
Dialogue: 0,0:03:30.78,0:03:33.68,Default,,0000,0000,0000,,to what it's like getting started in a Rails
Dialogue: 0,0:03:33.68,0:03:37.81,Default,,0000,0000,0000,,application. You install the gem, you initialize\Nthe application,
Dialogue: 0,0:03:37.81,0:03:40.41,Default,,0000,0000,0000,,it creates all of this boilerplate code. You\Ncan
Dialogue: 0,0:03:40.41,0:03:42.91,Default,,0000,0000,0000,,see from this directory structure you have\Nyour configuration
Dialogue: 0,0:03:42.91,0:03:46.87,Default,,0000,0000,0000,,file, default index.html.erb. You get a layout\Nfile and
Dialogue: 0,0:03:46.88,0:03:49.82,Default,,0000,0000,0000,,then you have all of your assets. Stylesheets\Nand
Dialogue: 0,0:03:49.82,0:03:53.14,Default,,0000,0000,0000,,JavaScripts. And then you spin up the server,\Nand
Dialogue: 0,0:03:53.14,0:03:56.29,Default,,0000,0000,0000,,it boots extremely fast. So, in under a second,
Dialogue: 0,0:03:56.29,0:03:59.57,Default,,0000,0000,0000,,you can hit this server and things are just
Dialogue: 0,0:03:59.60,0:04:01.54,Default,,0000,0000,0000,,working.
Dialogue: 0,0:04:01.54,0:04:05.13,Default,,0000,0000,0000,,So, the thing that I like a lot about
Dialogue: 0,0:04:05.13,0:04:07.51,Default,,0000,0000,0000,,middleman is that it's very easy to come into
Dialogue: 0,0:04:07.51,0:04:11.10,Default,,0000,0000,0000,,middleman from Rails. I said earlier that\Nthis uses
Dialogue: 0,0:04:11.10,0:04:14.05,Default,,0000,0000,0000,,tilt, so you can bring all the same gems
Dialogue: 0,0:04:14.05,0:04:17.31,Default,,0000,0000,0000,,and really the same toolset that you hopefully\Nhave
Dialogue: 0,0:04:17.32,0:04:20.22,Default,,0000,0000,0000,,come to love inside of Rails into middleman\Nand
Dialogue: 0,0:04:20.24,0:04:25.46,Default,,0000,0000,0000,,start using it without too much of a problem.
Dialogue: 0,0:04:25.46,0:04:27.32,Default,,0000,0000,0000,,So the other interesting thing about middleman\Nis that
Dialogue: 0,0:04:27.32,0:04:31.38,Default,,0000,0000,0000,,it's multi-environment aware. This is, I pulled\Nthis from
Dialogue: 0,0:04:31.38,0:04:34.71,Default,,0000,0000,0000,,a default middleman configuration from the\Nboilerplate and simplified
Dialogue: 0,0:04:34.71,0:04:36.51,Default,,0000,0000,0000,,it a bit. But here you, you get an
Dialogue: 0,0:04:36.51,0:04:39.07,Default,,0000,0000,0000,,idea that in your development environment,\Nyou can put
Dialogue: 0,0:04:39.08,0:04:42.61,Default,,0000,0000,0000,,extensions in there and activate them. Like\Nlive reload.
Dialogue: 0,0:04:42.61,0:04:45.28,Default,,0000,0000,0000,,And you can pull these extensions off of that
Dialogue: 0,0:04:45.28,0:04:49.95,Default,,0000,0000,0000,,directory that is on the middleman website.\NAnd then
Dialogue: 0,0:04:49.95,0:04:52.62,Default,,0000,0000,0000,,your production environment in middleman is\Ncalled your build
Dialogue: 0,0:04:52.64,0:04:53.63,Default,,0000,0000,0000,,environment.
Dialogue: 0,0:04:53.63,0:04:56.95,Default,,0000,0000,0000,,So, in there, you're going to activate certain\Nextensions,
Dialogue: 0,0:04:56.96,0:05:01.59,Default,,0000,0000,0000,,like minifying css, JavaScript, having an\Nasset hash so
Dialogue: 0,0:05:01.59,0:05:04.35,Default,,0000,0000,0000,,that you can basically hash your assets and\Ndo
Dialogue: 0,0:05:04.35,0:05:06.40,Default,,0000,0000,0000,,what you do in Rails where you, you give
Dialogue: 0,0:05:06.42,0:05:09.52,Default,,0000,0000,0000,,your asset path a, a hash and a path,
Dialogue: 0,0:05:09.52,0:05:12.33,Default,,0000,0000,0000,,so that you can cache it.
Dialogue: 0,0:05:12.33,0:05:15.29,Default,,0000,0000,0000,,So, once you have this configuration setup\Nand your
Dialogue: 0,0:05:15.29,0:05:18.09,Default,,0000,0000,0000,,webpages and stuff are, are ready to go, you
Dialogue: 0,0:05:18.10,0:05:21.22,Default,,0000,0000,0000,,have to deploy it somehow. And this is another
Dialogue: 0,0:05:21.24,0:05:24.15,Default,,0000,0000,0000,,area where middleman really shines is that,\Ndeployments are
Dialogue: 0,0:05:24.15,0:05:28.01,Default,,0000,0000,0000,,incredibly easy. It's two steps easy. There\Nis the
Dialogue: 0,0:05:28.01,0:05:29.94,Default,,0000,0000,0000,,build command, which takes all of the templates\Nand
Dialogue: 0,0:05:29.94,0:05:33.48,Default,,0000,0000,0000,,files and whatnot, and it basically compiles\Na bunch
Dialogue: 0,0:05:33.50,0:05:38.13,Default,,0000,0000,0000,,of html, css, and JavaScript files into a\Nbuild
Dialogue: 0,0:05:38.13,0:05:40.87,Default,,0000,0000,0000,,directory. And then the, the best part about\Nit
Dialogue: 0,0:05:40.87,0:05:42.47,Default,,0000,0000,0000,,is that getting that build directory up to\Nyour
Dialogue: 0,0:05:42.47,0:05:45.39,Default,,0000,0000,0000,,web server is as simple as rsync. Or, if
Dialogue: 0,0:05:45.40,0:05:47.00,Default,,0000,0000,0000,,you want to throwback to the days of using
Dialogue: 0,0:05:47.00,0:05:51.52,Default,,0000,0000,0000,,DreamWeaver, you could use FTP to upload it.\NOr
Dialogue: 0,0:05:51.52,0:05:54.17,Default,,0000,0000,0000,,SFTP if you're into the whole security thing.
Dialogue: 0,0:05:54.17,0:05:58.10,Default,,0000,0000,0000,,I developed a, a gem called shart, appropriately,\Nhoping
Dialogue: 0,0:05:58.10,0:06:00.95,Default,,0000,0000,0000,,that it would make for an awkward IT conversation
Dialogue: 0,0:06:00.96,0:06:03.78,Default,,0000,0000,0000,,in some corporate environment, where you can\Ndeploy your
Dialogue: 0,0:06:03.78,0:06:06.27,Default,,0000,0000,0000,,middleman website up to an S3 bucket, and\Nyou
Dialogue: 0,0:06:06.28,0:06:08.40,Default,,0000,0000,0000,,can actually set the headers that are going\Nto
Dialogue: 0,0:06:08.40,0:06:13.54,Default,,0000,0000,0000,,emitted from that S3 bucket. Mostly caching\Nheaders on,
Dialogue: 0,0:06:13.54,0:06:15.05,Default,,0000,0000,0000,,on certain assets.
Dialogue: 0,0:06:15.05,0:06:16.84,Default,,0000,0000,0000,,So there's a ton of tools you can use,
Dialogue: 0,0:06:16.86,0:06:19.00,Default,,0000,0000,0000,,and there's a ton of deployment targets that\Nyou
Dialogue: 0,0:06:19.00,0:06:21.12,Default,,0000,0000,0000,,can choose from for middleman. If you do go
Dialogue: 0,0:06:21.12,0:06:23.18,Default,,0000,0000,0000,,the route of deploying to S3, it's an incredibly
Dialogue: 0,0:06:23.18,0:06:26.91,Default,,0000,0000,0000,,cheap way to really run your website. You\Njust
Dialogue: 0,0:06:26.91,0:06:29.04,Default,,0000,0000,0000,,pay a couple cents a month for a, a
Dialogue: 0,0:06:29.04,0:06:33.15,Default,,0000,0000,0000,,personal website. And it's also incredibly\Nscalable, whenever you're
Dialogue: 0,0:06:33.16,0:06:35.92,Default,,0000,0000,0000,,deploying to an S3 endpoint.
Dialogue: 0,0:06:35.92,0:06:40.36,Default,,0000,0000,0000,,So. Yippie. You have a static website. You\Nknow,
Dialogue: 0,0:06:40.36,0:06:42.23,Default,,0000,0000,0000,,why should you care about middleman? How is\Nthis
Dialogue: 0,0:06:42.23,0:06:48.00,Default,,0000,0000,0000,,going to, to help you scale your application?
Dialogue: 0,0:06:48.00,0:06:49.98,Default,,0000,0000,0000,,Before I dive into that, it's really important\Nto
Dialogue: 0,0:06:49.98,0:06:54.42,Default,,0000,0000,0000,,kind of understand the place that middleman\Nwill have
Dialogue: 0,0:06:54.42,0:06:58.22,Default,,0000,0000,0000,,in this spectrum of dynacism, is what I call
Dialogue: 0,0:06:58.22,0:07:00.11,Default,,0000,0000,0000,,it. And it turns out dynacism is not actually
Dialogue: 0,0:07:00.12,0:07:02.93,Default,,0000,0000,0000,,a word, so. I had to ignore the, the
Dialogue: 0,0:07:02.93,0:07:04.20,Default,,0000,0000,0000,,spellchecker on this thing.
Dialogue: 0,0:07:04.20,0:07:08.08,Default,,0000,0000,0000,,And it looks something like this. So the graph
Dialogue: 0,0:07:08.08,0:07:10.93,Default,,0000,0000,0000,,that you saw earlier was actually a static\Nweb
Dialogue: 0,0:07:10.93,0:07:14.41,Default,,0000,0000,0000,,application. And if you access PollIt dot\Ncom slash
Dialogue: 0,0:07:14.41,0:07:16.92,Default,,0000,0000,0000,,brad on your smart phone, that was another\Nstatic
Dialogue: 0,0:07:16.94,0:07:18.22,Default,,0000,0000,0000,,web application.
Dialogue: 0,0:07:18.22,0:07:22.75,Default,,0000,0000,0000,,So, that's a very dynamic application, though,\Nin that
Dialogue: 0,0:07:22.75,0:07:25.28,Default,,0000,0000,0000,,the chart has to move and animate and pull
Dialogue: 0,0:07:25.28,0:07:27.64,Default,,0000,0000,0000,,this data from the server in real time. In
Dialogue: 0,0:07:27.66,0:07:30.07,Default,,0000,0000,0000,,under, you know, a second, it has to get
Dialogue: 0,0:07:30.07,0:07:32.49,Default,,0000,0000,0000,,from all of your phones, whether it comes\Nfrom
Dialogue: 0,0:07:32.49,0:07:34.68,Default,,0000,0000,0000,,SMS or your smart phone, we have to get
Dialogue: 0,0:07:34.68,0:07:36.44,Default,,0000,0000,0000,,it up on that graph in a really short
Dialogue: 0,0:07:36.44,0:07:38.30,Default,,0000,0000,0000,,amount of time.
Dialogue: 0,0:07:38.30,0:07:42.18,Default,,0000,0000,0000,,So that is arguably a highly dynamic application.\NAnd
Dialogue: 0,0:07:42.18,0:07:44.63,Default,,0000,0000,0000,,we also have to make things really smooth\Nand
Dialogue: 0,0:07:44.64,0:07:47.78,Default,,0000,0000,0000,,seem very fluid, because that's just what\Nyou have
Dialogue: 0,0:07:47.78,0:07:51.35,Default,,0000,0000,0000,,to do for presentations like this. So as we
Dialogue: 0,0:07:51.36,0:07:56.77,Default,,0000,0000,0000,,go down the dynacism spectrum, you have your\NGUI-oriented
Dialogue: 0,0:07:56.77,0:07:57.51,Default,,0000,0000,0000,,applications.
Dialogue: 0,0:07:57.51,0:08:00.62,Default,,0000,0000,0000,,So, Google spreadsheets - you're probably\Nvery familiar with
Dialogue: 0,0:08:00.64,0:08:03.09,Default,,0000,0000,0000,,that. Who hasn't used it? You're doing a lot
Dialogue: 0,0:08:03.09,0:08:05.47,Default,,0000,0000,0000,,of actions, a lot of very short actions, and
Dialogue: 0,0:08:05.48,0:08:08.92,Default,,0000,0000,0000,,you don't want to build applications where\Nyou click
Dialogue: 0,0:08:08.92,0:08:09.96,Default,,0000,0000,0000,,a button and then you have to wait for
Dialogue: 0,0:08:09.96,0:08:12.95,Default,,0000,0000,0000,,a response to come back to a server. The,
Dialogue: 0,0:08:12.95,0:08:15.66,Default,,0000,0000,0000,,basically the functions of the GUI are very\Ntightly-coupled
Dialogue: 0,0:08:15.66,0:08:18.36,Default,,0000,0000,0000,,with what comes out of that.
Dialogue: 0,0:08:18.36,0:08:20.86,Default,,0000,0000,0000,,So we kind of start moving down into document-oriented
Dialogue: 0,0:08:20.86,0:08:23.91,Default,,0000,0000,0000,,web apps, like an invoicing application or\NBase Camp
Dialogue: 0,0:08:23.92,0:08:25.88,Default,,0000,0000,0000,,where you can, you start to get into Rails
Dialogue: 0,0:08:25.88,0:08:28.85,Default,,0000,0000,0000,,territory, where Rails is, it's kind of the\Nsweet
Dialogue: 0,0:08:28.86,0:08:32.89,Default,,0000,0000,0000,,spot between these highly dynamic applications\Nor these highly
Dialogue: 0,0:08:32.89,0:08:35.14,Default,,0000,0000,0000,,static applications.
Dialogue: 0,0:08:35.14,0:08:38.25,Default,,0000,0000,0000,,So moving down into the blogging platform\Nworld, you
Dialogue: 0,0:08:38.25,0:08:41.90,Default,,0000,0000,0000,,may have something like Subtle or PostHaven,\Nthat is
Dialogue: 0,0:08:41.90,0:08:44.23,Default,,0000,0000,0000,,backed by mySQL, but for the most part it's
Dialogue: 0,0:08:44.24,0:08:48.84,Default,,0000,0000,0000,,just storing these documents in a database\Nserver, just
Dialogue: 0,0:08:48.84,0:08:51.98,Default,,0000,0000,0000,,for the convenience of administering many\Nusers in a
Dialogue: 0,0:08:51.98,0:08:54.43,Default,,0000,0000,0000,,multi-tendency environment.
Dialogue: 0,0:08:54.44,0:08:56.30,Default,,0000,0000,0000,,And then you go on down to your personal
Dialogue: 0,0:08:56.30,0:08:57.94,Default,,0000,0000,0000,,blog, and maybe some of you have a GitHub
Dialogue: 0,0:08:57.94,0:09:01.02,Default,,0000,0000,0000,,site. Maybe you're using Jekyll for that.\NMaybe you're
Dialogue: 0,0:09:01.02,0:09:04.98,Default,,0000,0000,0000,,using middleman. All the way down to informational\Nwebsites,
Dialogue: 0,0:09:04.98,0:09:07.80,Default,,0000,0000,0000,,like a mom and pop shop or Steve's plumping
Dialogue: 0,0:09:07.80,0:09:08.41,Default,,0000,0000,0000,,services.
Dialogue: 0,0:09:08.41,0:09:10.52,Default,,0000,0000,0000,,If somebody wants to make a killing, go out
Dialogue: 0,0:09:10.52,0:09:13.68,Default,,0000,0000,0000,,there and sell these restaurants that have\Nflash websites,
Dialogue: 0,0:09:13.70,0:09:16.20,Default,,0000,0000,0000,,sell them on a middleman website so that we
Dialogue: 0,0:09:16.20,0:09:17.97,Default,,0000,0000,0000,,can get some html out there and have less
Dialogue: 0,0:09:17.98,0:09:21.84,Default,,0000,0000,0000,,flash on the internet.
Dialogue: 0,0:09:21.84,0:09:24.75,Default,,0000,0000,0000,,So, where does middleman kind of fit into\Nall
Dialogue: 0,0:09:24.75,0:09:28.38,Default,,0000,0000,0000,,of this? If you're working on a green-filled\Napplication,
Dialogue: 0,0:09:28.38,0:09:30.81,Default,,0000,0000,0000,,it's pretty easy to get started right away.\NKind
Dialogue: 0,0:09:30.81,0:09:33.41,Default,,0000,0000,0000,,of what you hear about doing today is, you
Dialogue: 0,0:09:33.42,0:09:36.55,Default,,0000,0000,0000,,build your single page html application over\Nhere and
Dialogue: 0,0:09:36.55,0:09:38.82,Default,,0000,0000,0000,,you build your smaller kind of API off to
Dialogue: 0,0:09:38.84,0:09:41.05,Default,,0000,0000,0000,,the side using Sinatra or some type of, of
Dialogue: 0,0:09:41.05,0:09:42.75,Default,,0000,0000,0000,,microframework.
Dialogue: 0,0:09:42.75,0:09:46.40,Default,,0000,0000,0000,,But, since we've been around as a company\Nfor,
Dialogue: 0,0:09:46.40,0:09:50.27,Default,,0000,0000,0000,,well, since 2008, we actually started out\Nusing Rails
Dialogue: 0,0:09:50.27,0:09:53.61,Default,,0000,0000,0000,,1 point 2, I believe. It was before REST
Dialogue: 0,0:09:53.64,0:09:57.04,Default,,0000,0000,0000,,was even a thing in Rails. So we had
Dialogue: 0,0:09:57.04,0:10:00.31,Default,,0000,0000,0000,,this green-filled application. We spin this\Nthing up. It
Dialogue: 0,0:10:00.31,0:10:01.96,Default,,0000,0000,0000,,was great. We were able to move pretty fast
Dialogue: 0,0:10:01.96,0:10:05.03,Default,,0000,0000,0000,,inside of this framework. And we just set\Nup
Dialogue: 0,0:10:05.03,0:10:07.93,Default,,0000,0000,0000,,this application at polleverywhere dot com.\NThe real time
Dialogue: 0,0:10:07.94,0:10:10.35,Default,,0000,0000,0000,,components we had, I don't know if anybody\Nremembers
Dialogue: 0,0:10:10.35,0:10:14.06,Default,,0000,0000,0000,,RJS, but that was basically how we would make
Dialogue: 0,0:10:14.06,0:10:17.05,Default,,0000,0000,0000,,things appear in, in real time on Rails, was
Dialogue: 0,0:10:17.06,0:10:21.40,Default,,0000,0000,0000,,through these kind of, in retrospect, horrendous\Nhelpers that
Dialogue: 0,0:10:21.42,0:10:24.64,Default,,0000,0000,0000,,would emit JavaScript from the server and\Nrun on
Dialogue: 0,0:10:24.64,0:10:25.83,Default,,0000,0000,0000,,your web page.
Dialogue: 0,0:10:25.83,0:10:28.19,Default,,0000,0000,0000,,So, we got a lot of mileage out of
Dialogue: 0,0:10:28.19,0:10:30.49,Default,,0000,0000,0000,,that. But it wasn't, it wasn't really enough.\NWe
Dialogue: 0,0:10:30.50,0:10:33.38,Default,,0000,0000,0000,,needed something that was more visually appealing\Nthan just
Dialogue: 0,0:10:33.38,0:10:36.71,Default,,0000,0000,0000,,updating some numbers on a table. So that's\Nwhen
Dialogue: 0,0:10:36.71,0:10:39.80,Default,,0000,0000,0000,,we turned to flex, because they happened to\Nhave
Dialogue: 0,0:10:39.80,0:10:43.65,Default,,0000,0000,0000,,this bar chart library that everything updated\Nin real
Dialogue: 0,0:10:43.65,0:10:45.26,Default,,0000,0000,0000,,time. There was just a lot of stuff that
Dialogue: 0,0:10:45.26,0:10:46.92,Default,,0000,0000,0000,,worked out of the box.
Dialogue: 0,0:10:46.92,0:10:49.38,Default,,0000,0000,0000,,And it also just happened, out of sheer dumb
Dialogue: 0,0:10:49.38,0:10:54.29,Default,,0000,0000,0000,,luck, that flash was installed on 99-some-odd-percent\Nof, just
Dialogue: 0,0:10:54.30,0:10:56.98,Default,,0000,0000,0000,,all machines out on the internet. But even\Nmore
Dialogue: 0,0:10:56.98,0:11:00.30,Default,,0000,0000,0000,,compelling is that you could embed a flash\Nasset
Dialogue: 0,0:11:00.30,0:11:04.82,Default,,0000,0000,0000,,into a PowerPoint slide because of good-old\NActiveX.
Dialogue: 0,0:11:04.82,0:11:06.91,Default,,0000,0000,0000,,So we did this kind of weird hack where
Dialogue: 0,0:11:06.92,0:11:10.55,Default,,0000,0000,0000,,we would embed these swifts that we would\Ngenerate.
Dialogue: 0,0:11:10.55,0:11:13.19,Default,,0000,0000,0000,,These Flex applications, and we would actually\Nembed them
Dialogue: 0,0:11:13.19,0:11:15.97,Default,,0000,0000,0000,,into a PowerPoint slide and send those out\Nup
Dialogue: 0,0:11:15.98,0:11:17.72,Default,,0000,0000,0000,,on the server so that people could download\Nthese
Dialogue: 0,0:11:17.74,0:11:21.93,Default,,0000,0000,0000,,polls embedded right into PowerPoint slides.\NSo whenever they
Dialogue: 0,0:11:21.93,0:11:24.76,Default,,0000,0000,0000,,opened it, nothing really had to be loaded\Nup
Dialogue: 0,0:11:24.76,0:11:28.02,Default,,0000,0000,0000,,over the conference wifi connections in their\Nslide. The
Dialogue: 0,0:11:28.02,0:11:30.33,Default,,0000,0000,0000,,swift application would just connect out to\Nour Rails
Dialogue: 0,0:11:30.33,0:11:33.58,Default,,0000,0000,0000,,app and start pulling data out of it.
Dialogue: 0,0:11:33.58,0:11:36.73,Default,,0000,0000,0000,,So we initially had this flex application\Nin the
Dialogue: 0,0:11:36.73,0:11:41.83,Default,,0000,0000,0000,,same code repository as we did our Rails application.
Dialogue: 0,0:11:41.86,0:11:44.06,Default,,0000,0000,0000,,So as we started to build more customers,\Nthings
Dialogue: 0,0:11:44.06,0:11:47.18,Default,,0000,0000,0000,,became more complex, and we were able to afford
Dialogue: 0,0:11:47.18,0:11:49.39,Default,,0000,0000,0000,,a contractor who came in and just started\Nshredding
Dialogue: 0,0:11:49.39,0:11:50.89,Default,,0000,0000,0000,,it on this Flex app and really making a
Dialogue: 0,0:11:50.90,0:11:53.90,Default,,0000,0000,0000,,lot of progress. To the point where we started
Dialogue: 0,0:11:53.90,0:11:57.33,Default,,0000,0000,0000,,getting annoyed at just how many commit messages\Nthat
Dialogue: 0,0:11:57.33,0:11:59.28,Default,,0000,0000,0000,,he would have in our, I believe it was
Dialogue: 0,0:11:59.28,0:12:02.44,Default,,0000,0000,0000,,actually SVN at the time. So we broke that
Dialogue: 0,0:12:02.44,0:12:05.27,Default,,0000,0000,0000,,out into a, a separate application. And we\Nwere
Dialogue: 0,0:12:05.27,0:12:08.48,Default,,0000,0000,0000,,able to move a lot quicker, in the fact
Dialogue: 0,0:12:08.48,0:12:10.07,Default,,0000,0000,0000,,that we got to separate deployments.
Dialogue: 0,0:12:10.08,0:12:11.98,Default,,0000,0000,0000,,So, we had this contractor working over here\Non
Dialogue: 0,0:12:11.98,0:12:13.66,Default,,0000,0000,0000,,the Flex app, and he was able to deploy
Dialogue: 0,0:12:13.66,0:12:15.88,Default,,0000,0000,0000,,those Swift assets out to production. And\Nmeanwhile the
Dialogue: 0,0:12:15.88,0:12:19.20,Default,,0000,0000,0000,,Rails app team was able to do their work
Dialogue: 0,0:12:19.20,0:12:21.77,Default,,0000,0000,0000,,and, kind of, push their updates out through\Na
Dialogue: 0,0:12:21.78,0:12:24.30,Default,,0000,0000,0000,,separate release cycle. And, of course, at\Nthe time,
Dialogue: 0,0:12:24.30,0:12:27.18,Default,,0000,0000,0000,,it was a lot easier for Flex to work
Dialogue: 0,0:12:27.18,0:12:30.55,Default,,0000,0000,0000,,with XML, so we had a very fashionable XML
Dialogue: 0,0:12:30.55,0:12:31.75,Default,,0000,0000,0000,,API.
Dialogue: 0,0:12:31.75,0:12:35.26,Default,,0000,0000,0000,,So, time went on, and mobile started to change.
Dialogue: 0,0:12:35.26,0:12:38.62,Default,,0000,0000,0000,,It wasn't just about SMS anymore. So we had
Dialogue: 0,0:12:38.62,0:12:41.87,Default,,0000,0000,0000,,to think about the smart phone thing that\Nwas,
Dialogue: 0,0:12:41.87,0:12:44.39,Default,,0000,0000,0000,,that was taking off. Really it was the advent
Dialogue: 0,0:12:44.42,0:12:46.18,Default,,0000,0000,0000,,of the iPhone.
Dialogue: 0,0:12:46.18,0:12:49.17,Default,,0000,0000,0000,,So, having a lot of really good luck in
Dialogue: 0,0:12:49.17,0:12:52.60,Default,,0000,0000,0000,,the past with frameworks, including Rails\Nand, and some
Dialogue: 0,0:12:52.60,0:12:55.23,Default,,0000,0000,0000,,of the visual components that Flex gave us,\Nnaturally
Dialogue: 0,0:12:55.23,0:13:00.24,Default,,0000,0000,0000,,we gravitated towards using jQuery mobile.\NAnd the other
Dialogue: 0,0:13:00.24,0:13:02.56,Default,,0000,0000,0000,,thing, dot mobe extension, was this thing\Nthat I
Dialogue: 0,0:13:02.56,0:13:07.39,Default,,0000,0000,0000,,saw on RailsCasts about this new-fangled way\Nto kind
Dialogue: 0,0:13:07.40,0:13:09.23,Default,,0000,0000,0000,,of say, hey, this dot mobe format is gonna
Dialogue: 0,0:13:09.24,0:13:11.56,Default,,0000,0000,0000,,serve up this, this mobile stuff that's kind\Nof
Dialogue: 0,0:13:11.56,0:13:13.05,Default,,0000,0000,0000,,like html.
Dialogue: 0,0:13:13.05,0:13:16.79,Default,,0000,0000,0000,,So, it turned out that was a really bad
Dialogue: 0,0:13:16.79,0:13:20.62,Default,,0000,0000,0000,,idea. The way that jQuery mobile worked got\Nus
Dialogue: 0,0:13:20.62,0:13:22.62,Default,,0000,0000,0000,,about 80% of the way there, but the other
Dialogue: 0,0:13:22.62,0:13:26.88,Default,,0000,0000,0000,,20% was just extraordinarily painful. The\NjQuery mobile framework
Dialogue: 0,0:13:26.88,0:13:30.90,Default,,0000,0000,0000,,was extremely opinionated. It wanted data\Nin a certain
Dialogue: 0,0:13:30.90,0:13:32.22,Default,,0000,0000,0000,,way. It wanted the DOM to be structured a
Dialogue: 0,0:13:32.24,0:13:34.61,Default,,0000,0000,0000,,certain way. It felt kind of clunky and we
Dialogue: 0,0:13:34.61,0:13:36.65,Default,,0000,0000,0000,,just felt like we were kind of stuck inside
Dialogue: 0,0:13:36.65,0:13:40.26,Default,,0000,0000,0000,,of the, the jQuery mobile world.
Dialogue: 0,0:13:40.28,0:13:43.59,Default,,0000,0000,0000,,So, our team had to, had to do some
Dialogue: 0,0:13:43.60,0:13:46.18,Default,,0000,0000,0000,,soul searching on this front. And what we\Ndecided,
Dialogue: 0,0:13:46.18,0:13:48.88,Default,,0000,0000,0000,,at the time, was, you know, instead of trying
Dialogue: 0,0:13:48.88,0:13:52.21,Default,,0000,0000,0000,,to pick a framework, let's actually focus\Nat the
Dialogue: 0,0:13:52.21,0:13:55.10,Default,,0000,0000,0000,,specific problems that we're trying to solve,\Nand let's
Dialogue: 0,0:13:55.10,0:13:57.54,Default,,0000,0000,0000,,focus on picking libraries.
Dialogue: 0,0:13:57.54,0:14:00.57,Default,,0000,0000,0000,,So, that made our thinking a lot more clear,
Dialogue: 0,0:14:00.57,0:14:03.25,Default,,0000,0000,0000,,and we were able to pick exactly what we
Dialogue: 0,0:14:03.25,0:14:06.82,Default,,0000,0000,0000,,needed it. Or, yeah, pick exactly what we\Nneed,
Dialogue: 0,0:14:06.82,0:14:08.62,Default,,0000,0000,0000,,and bring it in our application where we needed
Dialogue: 0,0:14:08.62,0:14:09.26,Default,,0000,0000,0000,,it.
Dialogue: 0,0:14:09.26,0:14:11.32,Default,,0000,0000,0000,,So, at the time, as well, there was still
Dialogue: 0,0:14:11.34,0:14:14.60,Default,,0000,0000,0000,,a lot going on in the JavaScript MVC world.
Dialogue: 0,0:14:14.60,0:14:16.83,Default,,0000,0000,0000,,You had sproutcore was one, was one of the
Dialogue: 0,0:14:16.83,0:14:20.10,Default,,0000,0000,0000,,frameworks that we looked at. And that was\Nnot
Dialogue: 0,0:14:20.10,0:14:23.38,Default,,0000,0000,0000,,really that good-looking in terms of where\Nwe came
Dialogue: 0,0:14:23.40,0:14:25.00,Default,,0000,0000,0000,,from with jQuery mobile.
Dialogue: 0,0:14:25.00,0:14:28.79,Default,,0000,0000,0000,,So, we decided to go full speed ahead and
Dialogue: 0,0:14:28.79,0:14:31.73,Default,,0000,0000,0000,,use backbone.js, which was, I think, at version\Npoint
Dialogue: 0,0:14:31.74,0:14:33.38,Default,,0000,0000,0000,,eight at the time. And we knew that we
Dialogue: 0,0:14:33.38,0:14:35.79,Default,,0000,0000,0000,,would probably be swapping out libraries,\Nbecause the space
Dialogue: 0,0:14:35.79,0:14:38.06,Default,,0000,0000,0000,,was still maturing very rapidly, and there\Nwere a
Dialogue: 0,0:14:38.06,0:14:41.03,Default,,0000,0000,0000,,lot of changes. So this approach really let\Nus
Dialogue: 0,0:14:41.03,0:14:43.81,Default,,0000,0000,0000,,hand-pick the libraries we need and swap them\Nout
Dialogue: 0,0:14:43.82,0:14:45.94,Default,,0000,0000,0000,,as something else kind of pulled ahead of,\Nyou
Dialogue: 0,0:14:45.94,0:14:48.28,Default,,0000,0000,0000,,know, another library.
Dialogue: 0,0:14:48.28,0:14:50.74,Default,,0000,0000,0000,,So we ended up with this single page mobile
Dialogue: 0,0:14:50.74,0:14:53.94,Default,,0000,0000,0000,,application that we built entirely inside\Nof middleman. So
Dialogue: 0,0:14:53.94,0:14:57.26,Default,,0000,0000,0000,,middleman was handling all of the assets that,\Nthat
Dialogue: 0,0:14:57.26,0:14:59.82,Default,,0000,0000,0000,,this application was using. And it uses kind\Nof
Dialogue: 0,0:14:59.82,0:15:02.99,Default,,0000,0000,0000,,the standard sprockets pipeline that, that\Nyou have in
Dialogue: 0,0:15:03.00,0:15:05.60,Default,,0000,0000,0000,,Rails. So whenever you build this thing, we\Nhave
Dialogue: 0,0:15:05.60,0:15:08.15,Default,,0000,0000,0000,,three files. We upload it to our EngineX server,
Dialogue: 0,0:15:08.15,0:15:11.79,Default,,0000,0000,0000,,and we were pretty happy with how this stuff
Dialogue: 0,0:15:11.80,0:15:15.64,Default,,0000,0000,0000,,ends up working out on production, especially\Nfor deployments.
Dialogue: 0,0:15:15.64,0:15:18.11,Default,,0000,0000,0000,,So, if you go down this route of building
Dialogue: 0,0:15:18.11,0:15:21.25,Default,,0000,0000,0000,,these single-page web applications, one thing\Nthat you need
Dialogue: 0,0:15:21.26,0:15:25.62,Default,,0000,0000,0000,,to be very aware of is CORS. So whenever
Dialogue: 0,0:15:25.62,0:15:28.78,Default,,0000,0000,0000,,you went to the pollit dot com single-page\Nsite
Dialogue: 0,0:15:28.78,0:15:32.29,Default,,0000,0000,0000,,on your phone, that was actually making a\NAJAX
Dialogue: 0,0:15:32.29,0:15:36.49,Default,,0000,0000,0000,,request to our polleverywhere dot com host\Nto an
Dialogue: 0,0:15:36.49,0:15:38.53,Default,,0000,0000,0000,,API endpoint on there.
Dialogue: 0,0:15:38.54,0:15:40.37,Default,,0000,0000,0000,,So in order to do that without CORS is
Dialogue: 0,0:15:40.38,0:15:43.44,Default,,0000,0000,0000,,you get all these cross-domain errors for\NAJAX. But
Dialogue: 0,0:15:43.44,0:15:45.90,Default,,0000,0000,0000,,what CORS lets you do is, the pollit dot
Dialogue: 0,0:15:45.90,0:15:49.24,Default,,0000,0000,0000,,com host says, hey, polleverywhere dot com,\NI'm from
Dialogue: 0,0:15:49.24,0:15:51.56,Default,,0000,0000,0000,,a different domain. I want to make these types
Dialogue: 0,0:15:51.56,0:15:55.40,Default,,0000,0000,0000,,of HTTP requests. A GET request, a POST request,
Dialogue: 0,0:15:55.40,0:15:57.52,Default,,0000,0000,0000,,and, oh, by the way, I want access to
Dialogue: 0,0:15:57.52,0:16:00.17,Default,,0000,0000,0000,,these headers. So our polleverywhere dot com\Nservice says,
Dialogue: 0,0:16:00.17,0:16:02.53,Default,,0000,0000,0000,,OK, you're on our whitelist, polleverywhere\Ndot com, so
Dialogue: 0,0:16:02.54,0:16:05.36,Default,,0000,0000,0000,,here you go. Here's the data. Great. You want
Dialogue: 0,0:16:05.36,0:16:08.94,Default,,0000,0000,0000,,to POST something. I'll accept that request.\NAnd if
Dialogue: 0,0:16:08.94,0:16:12.82,Default,,0000,0000,0000,,another domain tried to access it, it would\Njust
Dialogue: 0,0:16:12.82,0:16:15.48,Default,,0000,0000,0000,,give them the cross-domain error.
Dialogue: 0,0:16:15.48,0:16:17.40,Default,,0000,0000,0000,,So that's how we, we got around that issue.
Dialogue: 0,0:16:17.40,0:16:20.54,Default,,0000,0000,0000,,And then another really great thing about\Nthe way
Dialogue: 0,0:16:20.54,0:16:22.96,Default,,0000,0000,0000,,that we deploy this mobile app is, it's really
Dialogue: 0,0:16:22.96,0:16:26.41,Default,,0000,0000,0000,,easy to deploy this to a CDN. You actually
Dialogue: 0,0:16:26.41,0:16:29.45,Default,,0000,0000,0000,,have these assets that you can push out to
Dialogue: 0,0:16:29.46,0:16:32.77,Default,,0000,0000,0000,,other servers. So you can't really do that\Nwith
Dialogue: 0,0:16:32.77,0:16:34.89,Default,,0000,0000,0000,,a Rails app, per se. You can't just take
Dialogue: 0,0:16:34.89,0:16:37.11,Default,,0000,0000,0000,,it and stick it over here on this file
Dialogue: 0,0:16:37.12,0:16:39.61,Default,,0000,0000,0000,,system on this server without having to boot\Na
Dialogue: 0,0:16:39.62,0:16:43.60,Default,,0000,0000,0000,,bunch of stuff and go through all that.
Dialogue: 0,0:16:43.60,0:16:47.25,Default,,0000,0000,0000,,So another interesting kind of feature of\Nthat is
Dialogue: 0,0:16:47.25,0:16:49.77,Default,,0000,0000,0000,,that you can deploy to floppy discs. So when's
Dialogue: 0,0:16:49.77,0:16:54.32,Default,,0000,0000,0000,,the last time that anybody's seen one of these?
Dialogue: 0,0:16:54.34,0:16:56.43,Default,,0000,0000,0000,,And we have these readers here. You pick these
Dialogue: 0,0:16:56.43,0:16:59.40,Default,,0000,0000,0000,,up for about fifteen bucks off of Amazon.\NAnd
Dialogue: 0,0:16:59.40,0:17:01.18,Default,,0000,0000,0000,,what I'm actually going to do is a live
Dialogue: 0,0:17:01.18,0:17:05.12,Default,,0000,0000,0000,,hardware demo. Possibly the only one at RailsConf.\NAnd
Dialogue: 0,0:17:05.12,0:17:09.83,Default,,0000,0000,0000,,let's plug this in. The really surprising\Nthing, to
Dialogue: 0,0:17:09.83,0:17:15.73,Default,,0000,0000,0000,,me, was that Mac OS actually recognizes floppy\Ndrives.
Dialogue: 0,0:17:15.74,0:17:21.69,Default,,0000,0000,0000,,So let's plug this guy in here. Op.
Dialogue: 0,0:17:21.92,0:17:28.92,Default,,0000,0000,0000,,Devices. I think that's devices. Oh, I got\Nto
Dialogue: 0,0:17:32.52,0:17:39.52,Default,,0000,0000,0000,,put the disc in. All right. So you can
Dialogue: 0,0:17:44.64,0:17:50.18,Default,,0000,0000,0000,,hear the, hear the disc spinning. Oh, let's\Nsee.
Dialogue: 0,0:17:50.20,0:17:54.49,Default,,0000,0000,0000,,There it is. Boy, that's hard to see up
Dialogue: 0,0:17:54.49,0:17:58.49,Default,,0000,0000,0000,,here. All right. So here's the application.\NWe'll just
Dialogue: 0,0:17:58.49,0:18:03.41,Default,,0000,0000,0000,,launch this.
Dialogue: 0,0:18:03.41,0:18:09.72,Default,,0000,0000,0000,,[laughter]
Dialogue: 0,0:18:11.62,0:18:15.00,Default,,0000,0000,0000,,So hopefully your network connection is faster\Nthan a,
Dialogue: 0,0:18:15.02,0:18:18.15,Default,,0000,0000,0000,,a floppy disc, but if you have a customer
Dialogue: 0,0:18:18.15,0:18:20.37,Default,,0000,0000,0000,,living somewhere remote and the only way to\Nget
Dialogue: 0,0:18:20.37,0:18:22.72,Default,,0000,0000,0000,,something to them is by Pony Express, you\Ncan
Dialogue: 0,0:18:22.74,0:18:26.00,Default,,0000,0000,0000,,just put this floppy disc in a satchel and,
Dialogue: 0,0:18:26.00,0:18:29.07,Default,,0000,0000,0000,,and send the pony on its way.
Dialogue: 0,0:18:29.07,0:18:31.77,Default,,0000,0000,0000,,The really fun thing is opening network inspector\Non
Dialogue: 0,0:18:31.77,0:18:35.03,Default,,0000,0000,0000,,this and seeing how Chrome measures this.\NIs it
Dialogue: 0,0:18:35.04,0:18:37.41,Default,,0000,0000,0000,,latency, or is the file really taking that\Nlong
Dialogue: 0,0:18:37.42,0:18:38.17,Default,,0000,0000,0000,,to load?
Dialogue: 0,0:18:38.17,0:18:41.31,Default,,0000,0000,0000,,So, here you go. You just saw a web
Dialogue: 0,0:18:41.32,0:18:46.46,Default,,0000,0000,0000,,application booted from a floppy disc. I can\Ngo
Dialogue: 0,0:18:46.46,0:18:53.46,Default,,0000,0000,0000,,to my pollev page and submit a vote. So,
Dialogue: 0,0:18:54.62,0:18:58.27,Default,,0000,0000,0000,,we joke about coming up with a floppy.js library,
Dialogue: 0,0:18:58.27,0:19:00.55,Default,,0000,0000,0000,,because if you can see the inspector down\Nthere,
Dialogue: 0,0:19:00.55,0:19:02.86,Default,,0000,0000,0000,,I don't know if it shows, but the retina
Dialogue: 0,0:19:02.88,0:19:04.99,Default,,0000,0000,0000,,assets aren't loaded. Those were too big to\Nfit
Dialogue: 0,0:19:04.99,0:19:07.56,Default,,0000,0000,0000,,on this floppy disc, so we came up with
Dialogue: 0,0:19:07.56,0:19:11.10,Default,,0000,0000,0000,,some fun ideas to span our JavaScript across\Nfloppy
Dialogue: 0,0:19:11.10,0:19:14.37,Default,,0000,0000,0000,,discs. But we had better things to do like
Dialogue: 0,0:19:14.37,0:19:16.79,Default,,0000,0000,0000,,fix bugs in production.
Dialogue: 0,0:19:16.79,0:19:21.17,Default,,0000,0000,0000,,So, great. You can put this on floppy discs.
Dialogue: 0,0:19:21.20,0:19:22.81,Default,,0000,0000,0000,,But I think more importantly there is, you\Ncan
Dialogue: 0,0:19:22.81,0:19:25.77,Default,,0000,0000,0000,,put them inside of phone gap or Cordova apps
Dialogue: 0,0:19:25.77,0:19:27.45,Default,,0000,0000,0000,,or we have some customers that they want to
Dialogue: 0,0:19:27.46,0:19:30.79,Default,,0000,0000,0000,,bundle our voting application with one of\Ntheir mobile
Dialogue: 0,0:19:30.80,0:19:33.08,Default,,0000,0000,0000,,applications. So we can say, here is our html
Dialogue: 0,0:19:33.08,0:19:35.90,Default,,0000,0000,0000,,assets, you can put them within your application,\Nand
Dialogue: 0,0:19:35.90,0:19:38.02,Default,,0000,0000,0000,,then whenever there's three-hundred people\Nsitting in a conference
Dialogue: 0,0:19:38.02,0:19:44.03,Default,,0000,0000,0000,,room, it won't overload the wifi.
Dialogue: 0,0:19:44.03,0:19:47.42,Default,,0000,0000,0000,,So, caching aside, there's, there's another\Ncomponent to this.
Dialogue: 0,0:19:47.42,0:19:51.17,Default,,0000,0000,0000,,Flex, Flex started getting old. It started\Ngetting outdated.
Dialogue: 0,0:19:51.18,0:19:53.04,Default,,0000,0000,0000,,The writing was on the wall that this stuff
Dialogue: 0,0:19:53.04,0:19:55.76,Default,,0000,0000,0000,,was going to die. So, you know, we set
Dialogue: 0,0:19:55.76,0:19:57.47,Default,,0000,0000,0000,,out to write a utilization app, it was very
Dialogue: 0,0:19:57.47,0:19:59.70,Default,,0000,0000,0000,,natural for us to think, oh, you know what,
Dialogue: 0,0:19:59.70,0:20:01.82,Default,,0000,0000,0000,,let's use middleman. We want this thing to\Nwork
Dialogue: 0,0:20:01.82,0:20:05.19,Default,,0000,0000,0000,,on tablets, iPhones, and everywhere, so naturally\Nwe're going
Dialogue: 0,0:20:05.19,0:20:06.55,Default,,0000,0000,0000,,to use - oh, what do we call it
Dialogue: 0,0:20:06.55,0:20:08.53,Default,,0000,0000,0000,,today? HTML5. Let's use that.
Dialogue: 0,0:20:08.56,0:20:11.89,Default,,0000,0000,0000,,Let's use that HTML5 thing to talk to our
Dialogue: 0,0:20:11.89,0:20:15.44,Default,,0000,0000,0000,,JSON API. And that worked great. We got this
Dialogue: 0,0:20:15.44,0:20:19.14,Default,,0000,0000,0000,,application out there. It's actually what\Nyou saw today,
Dialogue: 0,0:20:19.14,0:20:21.50,Default,,0000,0000,0000,,it's that HTML5 application. We have all the\Nbenefits
Dialogue: 0,0:20:21.50,0:20:24.84,Default,,0000,0000,0000,,of caching and the CDN and whatnot. But, but
Dialogue: 0,0:20:24.84,0:20:27.79,Default,,0000,0000,0000,,something came up. Whenever we were looking\Nat these
Dialogue: 0,0:20:27.79,0:20:30.93,Default,,0000,0000,0000,,visualizations day in and day out, we just\Nsaid,
Dialogue: 0,0:20:30.94,0:20:33.37,Default,,0000,0000,0000,,jeez, these feel really slow, because we were\Nusing
Dialogue: 0,0:20:33.37,0:20:35.23,Default,,0000,0000,0000,,short polling. We were hitting our server\Nonce every
Dialogue: 0,0:20:35.23,0:20:38.03,Default,,0000,0000,0000,,couple of seconds to get the new data from
Dialogue: 0,0:20:38.06,0:20:41.52,Default,,0000,0000,0000,,our server to, to update on the graph.
Dialogue: 0,0:20:41.52,0:20:42.88,Default,,0000,0000,0000,,So we decided we wanted to do better than
Dialogue: 0,0:20:42.88,0:20:46.39,Default,,0000,0000,0000,,that. We rolled out a Stream API. We actually
Dialogue: 0,0:20:46.39,0:20:48.83,Default,,0000,0000,0000,,wrote our own server at the time, because\Nsocket
Dialogue: 0,0:20:48.84,0:20:51.44,Default,,0000,0000,0000,,io wasn't quite what we wanted. I, I actually
Dialogue: 0,0:20:51.44,0:20:54.95,Default,,0000,0000,0000,,gave a talk in 2012 about this, about streaming
Dialogue: 0,0:20:54.95,0:20:58.06,Default,,0000,0000,0000,,resources. So we threw up that streaming API\Nserver,
Dialogue: 0,0:20:58.06,0:20:59.56,Default,,0000,0000,0000,,but there were some problems with it.
Dialogue: 0,0:20:59.56,0:21:02.51,Default,,0000,0000,0000,,Back in 2012, when I gave that talk, we
Dialogue: 0,0:21:02.52,0:21:06.19,Default,,0000,0000,0000,,were using AMQP on the backend of this thing.
Dialogue: 0,0:21:06.19,0:21:08.16,Default,,0000,0000,0000,,And there were just a lot of stability issues
Dialogue: 0,0:21:08.16,0:21:10.21,Default,,0000,0000,0000,,with that. It wasn't quite working with the,\Nwith
Dialogue: 0,0:21:10.22,0:21:13.19,Default,,0000,0000,0000,,the grain of the web and how resources work
Dialogue: 0,0:21:13.19,0:21:15.79,Default,,0000,0000,0000,,and, and how caching and all that stuff works.
Dialogue: 0,0:21:15.79,0:21:19.17,Default,,0000,0000,0000,,So, we had these stability issues that we\Nwere
Dialogue: 0,0:21:19.18,0:21:22.12,Default,,0000,0000,0000,,trying to deal with, and what was really nice
Dialogue: 0,0:21:22.12,0:21:25.00,Default,,0000,0000,0000,,about having these client-side applications,\Nis we were able
Dialogue: 0,0:21:25.00,0:21:27.43,Default,,0000,0000,0000,,to spit up our stream server on its own
Dialogue: 0,0:21:27.44,0:21:30.78,Default,,0000,0000,0000,,host, its own completely different host, and\Nisolate it.
Dialogue: 0,0:21:30.78,0:21:32.08,Default,,0000,0000,0000,,Our team had a lot of learning to do
Dialogue: 0,0:21:32.08,0:21:35.15,Default,,0000,0000,0000,,to understand how to, not only build these\Nreal
Dialogue: 0,0:21:35.15,0:21:37.59,Default,,0000,0000,0000,,time web applications, how to operate them.\NHow to
Dialogue: 0,0:21:37.59,0:21:38.83,Default,,0000,0000,0000,,scale them.
Dialogue: 0,0:21:38.83,0:21:41.36,Default,,0000,0000,0000,,So whenever we rolled this thing out, we'd\Nhave
Dialogue: 0,0:21:41.36,0:21:45.18,Default,,0000,0000,0000,,crashes, and our client-side application was\Nable to seamlessly,
Dialogue: 0,0:21:45.18,0:21:49.83,Default,,0000,0000,0000,,basically fail over to HTTP short polling.\NSo over
Dialogue: 0,0:21:49.86,0:21:52.26,Default,,0000,0000,0000,,time, our team got much better at just kind
Dialogue: 0,0:21:52.26,0:21:58.56,Default,,0000,0000,0000,,of managing all these pieces. And we had client-side
Dialogue: 0,0:21:58.56,0:22:02.10,Default,,0000,0000,0000,,SOA going on there. So, you can also, with
Dialogue: 0,0:22:02.10,0:22:04.17,Default,,0000,0000,0000,,CORS, if there's several APIs that you have\Nout
Dialogue: 0,0:22:04.17,0:22:08.17,Default,,0000,0000,0000,,there, you can consume those from your JavaScript\Nand
Dialogue: 0,0:22:08.17,0:22:11.21,Default,,0000,0000,0000,,kind of munch all that stuff together client\Nside
Dialogue: 0,0:22:11.21,0:22:13.56,Default,,0000,0000,0000,,and just do whatever it is that you please
Dialogue: 0,0:22:13.56,0:22:15.12,Default,,0000,0000,0000,,with that data.
Dialogue: 0,0:22:15.14,0:22:18.59,Default,,0000,0000,0000,,So, we had so much success with all these
Dialogue: 0,0:22:18.59,0:22:22.57,Default,,0000,0000,0000,,middleman, these single-page middleman applications,\Nthat we started to
Dialogue: 0,0:22:22.58,0:22:25.03,Default,,0000,0000,0000,,build all of our other applications in these.\NSo
Dialogue: 0,0:22:25.03,0:22:28.49,Default,,0000,0000,0000,,our approach towards native integrations has\Nbeen, basically, let's
Dialogue: 0,0:22:28.49,0:22:31.39,Default,,0000,0000,0000,,build a special web browser that has these\Ncertain
Dialogue: 0,0:22:31.42,0:22:34.48,Default,,0000,0000,0000,,hooks into JavaScript so that our web developers\Ncan,
Dialogue: 0,0:22:34.48,0:22:39.09,Default,,0000,0000,0000,,can be more productive and interact more with\Nbasically
Dialogue: 0,0:22:39.09,0:22:40.88,Default,,0000,0000,0000,,the native application.
Dialogue: 0,0:22:40.88,0:22:43.29,Default,,0000,0000,0000,,So we can control a lot of different things
Dialogue: 0,0:22:43.30,0:22:47.29,Default,,0000,0000,0000,,with these integrations from JavaScript. So\Nwe start having
Dialogue: 0,0:22:47.29,0:22:50.88,Default,,0000,0000,0000,,all these backbone applications pop up. Now,\Nif you've
Dialogue: 0,0:22:50.88,0:22:54.26,Default,,0000,0000,0000,,dealt with several applications, you may be\Nthinking, jeez,
Dialogue: 0,0:22:54.26,0:22:57.08,Default,,0000,0000,0000,,you know, you're probably repeating yourself\Nwith a lot
Dialogue: 0,0:22:57.08,0:22:58.74,Default,,0000,0000,0000,,of different things. So how do you get a
Dialogue: 0,0:22:58.74,0:23:02.85,Default,,0000,0000,0000,,handle on this stuff in this world of sprockets
Dialogue: 0,0:23:02.85,0:23:04.98,Default,,0000,0000,0000,,and middleman?
Dialogue: 0,0:23:04.98,0:23:06.91,Default,,0000,0000,0000,,So what we did is we took all of
Dialogue: 0,0:23:06.92,0:23:09.71,Default,,0000,0000,0000,,kind of the common components of this, the\Nsession
Dialogue: 0,0:23:09.72,0:23:13.27,Default,,0000,0000,0000,,components, the models and backbone. We pulled\Nall these
Dialogue: 0,0:23:13.27,0:23:17.56,Default,,0000,0000,0000,,into this one asset gem that then everything\Nconsumes
Dialogue: 0,0:23:17.56,0:23:21.18,Default,,0000,0000,0000,,from there. So to make those gems, it's just
Dialogue: 0,0:23:21.18,0:23:24.89,Default,,0000,0000,0000,,like making any other gem. You just say bundler
Dialogue: 0,0:23:24.89,0:23:26.87,Default,,0000,0000,0000,,gem and then whatever the name is of your
Dialogue: 0,0:23:26.87,0:23:30.07,Default,,0000,0000,0000,,gem. Here we have pollitassets. And the kind\Nof
Dialogue: 0,0:23:30.08,0:23:32.51,Default,,0000,0000,0000,,different thing about this gem is that, you\Ncheck
Dialogue: 0,0:23:32.52,0:23:34.25,Default,,0000,0000,0000,,is sprockets is there. And if it is, then
Dialogue: 0,0:23:34.25,0:23:37.15,Default,,0000,0000,0000,,you start appending all these paths toward\Nthe assets
Dialogue: 0,0:23:37.15,0:23:38.21,Default,,0000,0000,0000,,where your asset gem lives.
Dialogue: 0,0:23:38.22,0:23:42.82,Default,,0000,0000,0000,,So, for example, in our lib/assets JavaScripts\Ngem, we
Dialogue: 0,0:23:42.84,0:23:46.07,Default,,0000,0000,0000,,have a user backbone model. We have a poll
Dialogue: 0,0:23:46.07,0:23:50.69,Default,,0000,0000,0000,,backbone model. The stylesheets. We actually\Nuse font icons
Dialogue: 0,0:23:50.70,0:23:53.29,Default,,0000,0000,0000,,everywhere, so that we can fit all this stuff
Dialogue: 0,0:23:53.29,0:23:55.50,Default,,0000,0000,0000,,on a floppy drive.
Dialogue: 0,0:23:55.50,0:23:59.04,Default,,0000,0000,0000,,So, we can have all these assets located here,
Dialogue: 0,0:23:59.04,0:24:01.97,Default,,0000,0000,0000,,which whenever all the other applications\Nconsume that, they
Dialogue: 0,0:24:01.97,0:24:04.22,Default,,0000,0000,0000,,can have a consistent look and feel that uses
Dialogue: 0,0:24:04.22,0:24:06.31,Default,,0000,0000,0000,,kind of the visual language that we want to
Dialogue: 0,0:24:06.32,0:24:09.35,Default,,0000,0000,0000,,use throughout all of our applications and\Nall the
Dialogue: 0,0:24:09.35,0:24:11.01,Default,,0000,0000,0000,,different platforms.
Dialogue: 0,0:24:11.01,0:24:13.48,Default,,0000,0000,0000,,And of course you have your vendor JavaScript\Nassets.
Dialogue: 0,0:24:13.50,0:24:15.99,Default,,0000,0000,0000,,So if you have four different projects out\Nthere,
Dialogue: 0,0:24:15.99,0:24:18.68,Default,,0000,0000,0000,,you're probably using four different versions\Nof jQuery. This
Dialogue: 0,0:24:18.68,0:24:20.52,Default,,0000,0000,0000,,lets us use one version of jQuery and one
Dialogue: 0,0:24:20.52,0:24:23.83,Default,,0000,0000,0000,,version of backbone.
Dialogue: 0,0:24:23.83,0:24:26.70,Default,,0000,0000,0000,,The way that we manage these in our development
Dialogue: 0,0:24:26.70,0:24:30.14,Default,,0000,0000,0000,,environment is just through bundler. So you\Ncan imagine
Dialogue: 0,0:24:30.14,0:24:32.58,Default,,0000,0000,0000,,if you have one version of jQuery, well what
Dialogue: 0,0:24:32.58,0:24:35.00,Default,,0000,0000,0000,,happens whenever you bump from the one dot\Nx
Dialogue: 0,0:24:35.02,0:24:36.75,Default,,0000,0000,0000,,to two dot x? You're probably gonna break\Na
Dialogue: 0,0:24:36.75,0:24:39.50,Default,,0000,0000,0000,,lot of stuff.
Dialogue: 0,0:24:39.52,0:24:42.15,Default,,0000,0000,0000,,But we actually don't have that problem, because\Nlike
Dialogue: 0,0:24:42.15,0:24:44.69,Default,,0000,0000,0000,,with RubyGems, you don't really care if there's\Nan
Dialogue: 0,0:24:44.70,0:24:47.36,Default,,0000,0000,0000,,upgrade happening. What you care about is\Nthat you're
Dialogue: 0,0:24:47.36,0:24:50.56,Default,,0000,0000,0000,,getting the version that you asked for in\Nyour
Dialogue: 0,0:24:50.56,0:24:55.60,Default,,0000,0000,0000,,gem bundle. So we're able to control that\Nby
Dialogue: 0,0:24:55.60,0:24:59.67,Default,,0000,0000,0000,,pushing our pollev assets up to a basic Git
Dialogue: 0,0:24:59.67,0:25:02.73,Default,,0000,0000,0000,,repository, and we reference that from this\Ngemfile. You
Dialogue: 0,0:25:02.73,0:25:04.87,Default,,0000,0000,0000,,don't actually see the, the git reference\Nin there,
Dialogue: 0,0:25:04.88,0:25:07.20,Default,,0000,0000,0000,,but you can see that, in this case, we're
Dialogue: 0,0:25:07.20,0:25:09.32,Default,,0000,0000,0000,,saying, hey, I want to use the new feature
Dialogue: 0,0:25:09.32,0:25:13.67,Default,,0000,0000,0000,,branch of pollev assets. The assets path thing\Nabove
Dialogue: 0,0:25:13.67,0:25:17.05,Default,,0000,0000,0000,,that is a nice little hack so that if
Dialogue: 0,0:25:17.06,0:25:22.11,Default,,0000,0000,0000,,you're making changes to the pollev assets\Nproject, you
Dialogue: 0,0:25:22.11,0:25:23.79,Default,,0000,0000,0000,,can pull those locally so that you don't have
Dialogue: 0,0:25:23.79,0:25:26.02,Default,,0000,0000,0000,,to run bundle update every time.
Dialogue: 0,0:25:26.04,0:25:28.36,Default,,0000,0000,0000,,And what's cool about middleman is, if you're\Ndeveloping
Dialogue: 0,0:25:28.36,0:25:31.53,Default,,0000,0000,0000,,these pollev assets locally, whenever you\Nreload middleman, it
Dialogue: 0,0:25:31.53,0:25:35.17,Default,,0000,0000,0000,,actually picks up the changes from the, the\Nassets
Dialogue: 0,0:25:35.18,0:25:37.53,Default,,0000,0000,0000,,gem. You don't have to reboot the server or
Dialogue: 0,0:25:37.54,0:25:40.21,Default,,0000,0000,0000,,do anything crazy like that.
Dialogue: 0,0:25:40.21,0:25:44.25,Default,,0000,0000,0000,,So, the way that we can build new features
Dialogue: 0,0:25:44.25,0:25:46.58,Default,,0000,0000,0000,,now, let's say that, let's say the worst case
Dialogue: 0,0:25:46.58,0:25:48.38,Default,,0000,0000,0000,,scenario, I have to build a new API to
Dialogue: 0,0:25:48.40,0:25:52.02,Default,,0000,0000,0000,,support a new feature. I can branch my Rails
Dialogue: 0,0:25:52.02,0:25:54.26,Default,,0000,0000,0000,,app project, and I can say, hey, branch this
Dialogue: 0,0:25:54.26,0:25:57.85,Default,,0000,0000,0000,,off. It's called new feature. I'm gonna add\Nsome
Dialogue: 0,0:25:57.85,0:25:59.51,Default,,0000,0000,0000,,kind of new visualization to it that needs\Na
Dialogue: 0,0:25:59.51,0:26:01.88,Default,,0000,0000,0000,,new API. So I can build that API out
Dialogue: 0,0:26:01.90,0:26:04.24,Default,,0000,0000,0000,,on my server. I can develop that locally.\NAnd
Dialogue: 0,0:26:04.24,0:26:07.51,Default,,0000,0000,0000,,I can point my middleman project at my local
Dialogue: 0,0:26:07.51,0:26:08.54,Default,,0000,0000,0000,,server.
Dialogue: 0,0:26:08.54,0:26:09.83,Default,,0000,0000,0000,,And I can branch it in here and I
Dialogue: 0,0:26:09.84,0:26:12.56,Default,,0000,0000,0000,,can branch pollev assets, and basically have\Nthree different
Dialogue: 0,0:26:12.56,0:26:16.07,Default,,0000,0000,0000,,branches or, sorry, one branch and three different\Nrepos,
Dialogue: 0,0:26:16.07,0:26:18.56,Default,,0000,0000,0000,,all working on the same feature. And then\Nwhenever
Dialogue: 0,0:26:18.56,0:26:22.99,Default,,0000,0000,0000,,I go to deploy, obviously deploy the API server
Dialogue: 0,0:26:22.99,0:26:25.78,Default,,0000,0000,0000,,functionality first, and then it would go\Non to
Dialogue: 0,0:26:25.80,0:26:29.00,Default,,0000,0000,0000,,roll out these middleman single page websites.
Dialogue: 0,0:26:29.00,0:26:34.06,Default,,0000,0000,0000,,So, does it work? I think so. It's, it's
Dialogue: 0,0:26:34.06,0:26:37.03,Default,,0000,0000,0000,,worked really well for us. We have to deal
Dialogue: 0,0:26:37.03,0:26:40.99,Default,,0000,0000,0000,,with some weird kind of bandwidth constrained\Nenvironments, where
Dialogue: 0,0:26:41.00,0:26:46.18,Default,,0000,0000,0000,,you can't trust conference wifi connections.\NAnd it also,
Dialogue: 0,0:26:46.18,0:26:48.08,Default,,0000,0000,0000,,I realized that it worked really well for\Nus
Dialogue: 0,0:26:48.08,0:26:51.89,Default,,0000,0000,0000,,when, about two months ago, Microsoft wanted\Nto launch
Dialogue: 0,0:26:51.89,0:26:58.60,Default,,0000,0000,0000,,their PowerPoint 2013 store inside of the\NMicrosoft Office
Dialogue: 0,0:26:58.60,0:27:00.47,Default,,0000,0000,0000,,Applications. They actually have an app store\Ninside of
Dialogue: 0,0:27:00.48,0:27:02.72,Default,,0000,0000,0000,,there. And we were able to pull a bunch
Dialogue: 0,0:27:02.72,0:27:06.24,Default,,0000,0000,0000,,of assets from our mobile application into\Nour sprockets
Dialogue: 0,0:27:06.24,0:27:09.55,Default,,0000,0000,0000,,asset gem and reuse all of that stuff, most
Dialogue: 0,0:27:09.55,0:27:12.65,Default,,0000,0000,0000,,of it, in the PowerPoint 2013 app. And then
Dialogue: 0,0:27:12.66,0:27:15.88,Default,,0000,0000,0000,,we were able to quickly make some customizations\Nto
Dialogue: 0,0:27:15.88,0:27:17.61,Default,,0000,0000,0000,,that whole user experience to make it fit\Nin
Dialogue: 0,0:27:17.61,0:27:20.33,Default,,0000,0000,0000,,with Office 2013 a little bit better.
Dialogue: 0,0:27:20.34,0:27:22.92,Default,,0000,0000,0000,,And, of course, whenever you're running a\Nsingle-page JavaScript
Dialogue: 0,0:27:22.92,0:27:26.73,Default,,0000,0000,0000,,application inside of this little web iframe,\Nessentially in
Dialogue: 0,0:27:26.73,0:27:30.96,Default,,0000,0000,0000,,Office, it feels very close. It feels very\Nnative.
Dialogue: 0,0:27:30.96,0:27:32.47,Default,,0000,0000,0000,,So that, that worked pretty well for us. But
Dialogue: 0,0:27:32.47,0:27:35.92,Default,,0000,0000,0000,,I think, even better than that, than reusing\Nfunctionality
Dialogue: 0,0:27:35.92,0:27:38.99,Default,,0000,0000,0000,,is, inevitably, whenever you work on some\Nof these
Dialogue: 0,0:27:38.99,0:27:41.00,Default,,0000,0000,0000,,projects, you make some kind of improvement.\NSomething just
Dialogue: 0,0:27:41.02,0:27:44.23,Default,,0000,0000,0000,,feels better about maybe handling a login\Nor some
Dialogue: 0,0:27:44.23,0:27:46.24,Default,,0000,0000,0000,,kind of status code or something.
Dialogue: 0,0:27:46.24,0:27:48.57,Default,,0000,0000,0000,,So these improvements that we make in these\Nindividual
Dialogue: 0,0:27:48.58,0:27:50.83,Default,,0000,0000,0000,,projects, we're able to pull them back into\Nthe
Dialogue: 0,0:27:50.83,0:27:53.55,Default,,0000,0000,0000,,sprockets assets gem and then push them back\Nout
Dialogue: 0,0:27:53.56,0:27:55.44,Default,,0000,0000,0000,,to all of our other projects. So all these
Dialogue: 0,0:27:55.44,0:27:58.02,Default,,0000,0000,0000,,other projects you see up here benefit from\Nthe
Dialogue: 0,0:27:58.02,0:28:02.66,Default,,0000,0000,0000,,PowerPoint 2013 app, and that just keep, kind\Nof
Dialogue: 0,0:28:02.66,0:28:04.36,Default,,0000,0000,0000,,reinforces itself. Reinforcing itself.
Dialogue: 0,0:28:04.36,0:28:07.59,Default,,0000,0000,0000,,So, in a sense, the sprockets assets gem turns
Dialogue: 0,0:28:07.59,0:28:11.15,Default,,0000,0000,0000,,into this little, perfect little framework\Nfor your organization
Dialogue: 0,0:28:11.15,0:28:14.42,Default,,0000,0000,0000,,that's extracted in the right way, where it's\Nbeing
Dialogue: 0,0:28:14.42,0:28:17.28,Default,,0000,0000,0000,,extracted from stuff that's actually being\Nused and being
Dialogue: 0,0:28:17.30,0:28:21.76,Default,,0000,0000,0000,,proven as successful by customers.
Dialogue: 0,0:28:21.76,0:28:26.44,Default,,0000,0000,0000,,So, that's a pretty good overview of one of
Dialogue: 0,0:28:26.44,0:28:29.85,Default,,0000,0000,0000,,the more complex middleman deployments I would\Nsay is
Dialogue: 0,0:28:29.85,0:28:33.09,Default,,0000,0000,0000,,out there, and just managing kind of multiple\Nprojects.
Dialogue: 0,0:28:33.10,0:28:36.31,Default,,0000,0000,0000,,One of the downsides and also plus sides of
Dialogue: 0,0:28:36.31,0:28:40.87,Default,,0000,0000,0000,,middleman is that there's no out-of-the-box\NJavaScript MVC app
Dialogue: 0,0:28:40.87,0:28:44.79,Default,,0000,0000,0000,,solution in there. So in the case of backbone,
Dialogue: 0,0:28:44.79,0:28:46.89,Default,,0000,0000,0000,,it's up to you to organize all the assets
Dialogue: 0,0:28:46.90,0:28:49.71,Default,,0000,0000,0000,,in some way that, that makes sense. And different
Dialogue: 0,0:28:49.72,0:28:52.52,Default,,0000,0000,0000,,JavaScript frameworks have, some are more\Norganized than others.
Dialogue: 0,0:28:52.52,0:28:56.22,Default,,0000,0000,0000,,So that's both a blessing and a curse.
Dialogue: 0,0:28:56.22,0:28:58.67,Default,,0000,0000,0000,,It worked out for us because there really\Nwasn't
Dialogue: 0,0:28:58.68,0:28:59.84,Default,,0000,0000,0000,,a framework. We kind of came up with our
Dialogue: 0,0:28:59.84,0:29:01.48,Default,,0000,0000,0000,,own and we didn't have to deal with, with
Dialogue: 0,0:29:01.48,0:29:04.71,Default,,0000,0000,0000,,somebody else's bad framework.
Dialogue: 0,0:29:04.71,0:29:08.91,Default,,0000,0000,0000,,So, that was the overview of the highly dynamic
Dialogue: 0,0:29:08.91,0:29:11.19,Default,,0000,0000,0000,,website, which has all these static
Dialogue: 0,0:29:11.20,0:29:13.96,Default,,0000,0000,0000,,applications stashed everywhere.
Dialogue: 0,0:29:13.96,0:29:17.99,Default,,0000,0000,0000,,What about static websites? The other side\Nof the
Dialogue: 0,0:29:17.99,0:29:21.28,Default,,0000,0000,0000,,kind of token where Rails fills the middle\Nground?
Dialogue: 0,0:29:21.28,0:29:25.70,Default,,0000,0000,0000,,So, we're developing a lot of content for,\Nfor
Dialogue: 0,0:29:25.72,0:29:29.61,Default,,0000,0000,0000,,our website. There's an explosion of use cases\Nand
Dialogue: 0,0:29:29.61,0:29:32.56,Default,,0000,0000,0000,,all sorts of stuff that we have to implement.
Dialogue: 0,0:29:32.56,0:29:34.50,Default,,0000,0000,0000,,So one thing that we'll probably do on this
Dialogue: 0,0:29:34.50,0:29:39.36,Default,,0000,0000,0000,,front is extract out a content directory from\NRails
Dialogue: 0,0:29:39.36,0:29:42.32,Default,,0000,0000,0000,,app. How many of you have a, in your
Dialogue: 0,0:29:42.32,0:29:44.20,Default,,0000,0000,0000,,Rails app, it starts out. You have kind of
Dialogue: 0,0:29:44.20,0:29:46.33,Default,,0000,0000,0000,,the home page, and then it turns into this
Dialogue: 0,0:29:46.33,0:29:48.65,Default,,0000,0000,0000,,directory called content, and then you have\Nall these
Dialogue: 0,0:29:48.65,0:29:50.99,Default,,0000,0000,0000,,content pages. Maybe you end up with twenty\Nor
Dialogue: 0,0:29:51.00,0:29:53.00,Default,,0000,0000,0000,,thirty of them one day and, before you notice
Dialogue: 0,0:29:53.00,0:29:55.67,Default,,0000,0000,0000,,this big junk drawer of content, and you have
Dialogue: 0,0:29:55.67,0:29:56.87,Default,,0000,0000,0000,,to look in your routes file and kind of
Dialogue: 0,0:29:56.87,0:29:58.48,Default,,0000,0000,0000,,make sense of all this stuff.
Dialogue: 0,0:29:58.48,0:30:02.87,Default,,0000,0000,0000,,So, in middleman, you don't, the directory\Nstructure is
Dialogue: 0,0:30:02.88,0:30:05.46,Default,,0000,0000,0000,,the routing structure. So that stuff checks\Nout a
Dialogue: 0,0:30:05.46,0:30:07.52,Default,,0000,0000,0000,,lot nicer. And it's just much easier to handle
Dialogue: 0,0:30:07.54,0:30:11.06,Default,,0000,0000,0000,,this content. And there's also much better\Nsupport in
Dialogue: 0,0:30:11.06,0:30:14.34,Default,,0000,0000,0000,,there for different things like image compression.\NYou can
Dialogue: 0,0:30:14.34,0:30:18.44,Default,,0000,0000,0000,,png crush everything. So if you have designers\Nbuilding
Dialogue: 0,0:30:18.44,0:30:21.42,Default,,0000,0000,0000,,image assets and they don't understand the\Ntechnicalities of
Dialogue: 0,0:30:21.42,0:30:24.66,Default,,0000,0000,0000,,making pngs much smaller, middleman can take\Ncare of
Dialogue: 0,0:30:24.66,0:30:26.40,Default,,0000,0000,0000,,that in its asset pipeline.
Dialogue: 0,0:30:26.40,0:30:30.97,Default,,0000,0000,0000,,And, of course, on a static website like that,
Dialogue: 0,0:30:30.97,0:30:34.42,Default,,0000,0000,0000,,you still have some dynamic components. You\Ncan't just
Dialogue: 0,0:30:34.42,0:30:37.45,Default,,0000,0000,0000,,throw a static website out there and just\Ntell
Dialogue: 0,0:30:37.46,0:30:40.98,Default,,0000,0000,0000,,everybody, like, oh, no, forget about login\Nstate. There's
Dialogue: 0,0:30:40.98,0:30:42.88,Default,,0000,0000,0000,,some common things that people want to see,\Nso
Dialogue: 0,0:30:42.88,0:30:45.21,Default,,0000,0000,0000,,you can take care of that with JavaScript,\Nand
Dialogue: 0,0:30:45.22,0:30:46.73,Default,,0000,0000,0000,,you can run all that stuff client-side.
Dialogue: 0,0:30:46.73,0:30:49.10,Default,,0000,0000,0000,,So you can have some really lightweight JS\Nthat
Dialogue: 0,0:30:49.10,0:30:50.60,Default,,0000,0000,0000,,checks with the server. Maybe it checks for\Nthe
Dialogue: 0,0:30:50.60,0:30:53.76,Default,,0000,0000,0000,,presence of a cookie to see if, if the
Dialogue: 0,0:30:53.76,0:30:56.11,Default,,0000,0000,0000,,user's logged in or not. And then, of course,
Dialogue: 0,0:30:56.12,0:30:57.79,Default,,0000,0000,0000,,if you have a contact us form or anything
Dialogue: 0,0:30:57.79,0:31:02.02,Default,,0000,0000,0000,,like that, you would test these integration\Npoints with
Dialogue: 0,0:31:02.02,0:31:04.30,Default,,0000,0000,0000,,Rails so that whenever somebody types in stuff\Ninto
Dialogue: 0,0:31:04.30,0:31:06.17,Default,,0000,0000,0000,,a form and submits it, it hits your Rails
Dialogue: 0,0:31:06.18,0:31:07.81,Default,,0000,0000,0000,,app and hopefully it doesn't blow up.
Dialogue: 0,0:31:07.81,0:31:10.60,Default,,0000,0000,0000,,And, of course, you have other JavaScript\Napplications, like
Dialogue: 0,0:31:10.60,0:31:13.49,Default,,0000,0000,0000,,Google Analytics, Optimize the Stripe.
Dialogue: 0,0:31:13.50,0:31:14.91,Default,,0000,0000,0000,,All these little JavaScript-y
Dialogue: 0,0:31:14.91,0:31:18.78,Default,,0000,0000,0000,,tools that you can throw in there. And, you
Dialogue: 0,0:31:18.80,0:31:21.47,Default,,0000,0000,0000,,know, it makes it a little more dynamic.
Dialogue: 0,0:31:21.47,0:31:23.16,Default,,0000,0000,0000,,So the nice thing about a static website is
Dialogue: 0,0:31:23.16,0:31:26.69,Default,,0000,0000,0000,,that you can't get taken down that easily,\Nespecially
Dialogue: 0,0:31:26.70,0:31:28.27,Default,,0000,0000,0000,,if you have this stuff up in an S3
Dialogue: 0,0:31:28.27,0:31:31.49,Default,,0000,0000,0000,,bucket or stashed in CDNs. I was at a
Dialogue: 0,0:31:31.49,0:31:33.20,Default,,0000,0000,0000,,middleman meet up about a year ago, and the
Dialogue: 0,0:31:33.22,0:31:35.88,Default,,0000,0000,0000,,folks from nest dot com were there. And they
Dialogue: 0,0:31:35.88,0:31:38.36,Default,,0000,0000,0000,,said they were using some CNS or some, some
Dialogue: 0,0:31:38.36,0:31:40.87,Default,,0000,0000,0000,,dynamic backend, and they kept being mentioned\Nin the
Dialogue: 0,0:31:40.87,0:31:43.97,Default,,0000,0000,0000,,press. And their website kept getting really\Nslow.
Dialogue: 0,0:31:43.98,0:31:45.78,Default,,0000,0000,0000,,So they looked at a few things and I
Dialogue: 0,0:31:45.78,0:31:48.31,Default,,0000,0000,0000,,think one option involved just throwing hardware\Nat the
Dialogue: 0,0:31:48.31,0:31:51.34,Default,,0000,0000,0000,,problem. And they decided that wasn't sane.\NLet's just
Dialogue: 0,0:31:51.34,0:31:54.04,Default,,0000,0000,0000,,build a static website with middleman and\Npush this
Dialogue: 0,0:31:54.04,0:31:56.48,Default,,0000,0000,0000,,stuff out there on a really simple server.\NAnd
Dialogue: 0,0:31:56.48,0:31:58.64,Default,,0000,0000,0000,,they no longer had any of these problems where
Dialogue: 0,0:31:58.64,0:32:00.34,Default,,0000,0000,0000,,their site would get taken down from a, an
Dialogue: 0,0:32:00.34,0:32:04.27,Default,,0000,0000,0000,,influx of, of traffic.
Dialogue: 0,0:32:04.27,0:32:06.51,Default,,0000,0000,0000,,So there's a lot of things to think about
Dialogue: 0,0:32:06.52,0:32:09.83,Default,,0000,0000,0000,,whenever you're building these middleman applications.
Dialogue: 0,0:32:09.84,0:32:10.48,Default,,0000,0000,0000,,I could probably
Dialogue: 0,0:32:10.48,0:32:12.48,Default,,0000,0000,0000,,give another two or three talks just on these
Dialogue: 0,0:32:12.48,0:32:15.65,Default,,0000,0000,0000,,items alone. If you want, ask me questions\Nabout
Dialogue: 0,0:32:15.65,0:32:19.17,Default,,0000,0000,0000,,this stuff later. But I don't have time to
Dialogue: 0,0:32:19.17,0:32:20.44,Default,,0000,0000,0000,,cover that now.
Dialogue: 0,0:32:20.44,0:32:22.95,Default,,0000,0000,0000,,And, of course, I encourage you to get out
Dialogue: 0,0:32:22.95,0:32:25.68,Default,,0000,0000,0000,,there. Build your next website with middleman,\Neven if
Dialogue: 0,0:32:25.70,0:32:28.16,Default,,0000,0000,0000,,it's a personal website or a blog or something.
Dialogue: 0,0:32:28.16,0:32:31.84,Default,,0000,0000,0000,,Try it out. If you're working on single web
Dialogue: 0,0:32:31.84,0:32:34.66,Default,,0000,0000,0000,,page applications, you could take your handcrafted\Nstuff and
Dialogue: 0,0:32:34.66,0:32:36.69,Default,,0000,0000,0000,,throw it into middleman and start using that.\NStart
Dialogue: 0,0:32:36.70,0:32:38.76,Default,,0000,0000,0000,,using the asset pipeline.
Dialogue: 0,0:32:38.76,0:32:41.40,Default,,0000,0000,0000,,A lot of these ideas that I've talked about
Dialogue: 0,0:32:41.40,0:32:43.57,Default,,0000,0000,0000,,today, and some of the things I didn't talk
Dialogue: 0,0:32:43.57,0:32:45.85,Default,,0000,0000,0000,,about, our company polleverything is
Dialogue: 0,0:32:45.86,0:32:47.19,Default,,0000,0000,0000,,actually abstracting out this
Dialogue: 0,0:32:47.19,0:32:50.53,Default,,0000,0000,0000,,framework and we're going to be releasing\Nthese bits
Dialogue: 0,0:32:50.54,0:32:53.77,Default,,0000,0000,0000,,into gitfannypack, or fannypack is gonna be\Nthe name
Dialogue: 0,0:32:53.77,0:32:56.54,Default,,0000,0000,0000,,of this, this kind of framework that uses\Nmiddleman
Dialogue: 0,0:32:56.54,0:32:59.24,Default,,0000,0000,0000,,and deals with stuff like testing, binding\Nto different
Dialogue: 0,0:32:59.24,0:33:01.94,Default,,0000,0000,0000,,environments and all that stuff.
Dialogue: 0,0:33:01.94,0:33:04.45,Default,,0000,0000,0000,,And, of course, if you want to work on
Dialogue: 0,0:33:04.46,0:33:06.47,Default,,0000,0000,0000,,this stuff every day and get paid for it,
Dialogue: 0,0:33:06.47,0:33:12.15,Default,,0000,0000,0000,,you can join at team at polleverywhere. So,\Nthat's
Dialogue: 0,0:33:12.16,0:33:15.90,Default,,0000,0000,0000,,my talk. I'm Brad Gessler. I'll be posting\Nslides,
Dialogue: 0,0:33:15.90,0:33:19.39,Default,,0000,0000,0000,,links, and, and code, up on Twitter whenever\NI'm
Dialogue: 0,0:33:19.39,0:33:22.28,Default,,0000,0000,0000,,not working on these slides. Thanks.