[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:16.66,0:00:18.39,Default,,0000,0000,0000,,Brandon:Oh, hi.
Dialogue: 0,0:00:18.39,0:00:20.88,Default,,0000,0000,0000,,A hush falls over the room\Nbecause I'm not paying attention.
Dialogue: 0,0:00:21.43,0:00:22.77,Default,,0000,0000,0000,,My slides came up. Hi.
Dialogue: 0,0:00:25.55,0:00:27.09,Default,,0000,0000,0000,,Really quick first,
Dialogue: 0,0:00:27.51,0:00:30.52,Default,,0000,0000,0000,,there are seats in the middle\Nif people can squish together,
Dialogue: 0,0:00:31.87,0:00:33.99,Default,,0000,0000,0000,,otherwise people are\Ngoing to be sitting in the
Dialogue: 0,0:00:33.99,0:00:37.35,Default,,0000,0000,0000,,aisles and the fire marshal\Nis going to get angry.
Dialogue: 0,0:00:38.65,0:00:41.85,Default,,0000,0000,0000,,I don't know that, I'm not a building guy.
Dialogue: 0,0:00:42.95,0:00:44.76,Default,,0000,0000,0000,,Hi everybody, sorry to\Nmake you move around
Dialogue: 0,0:00:44.76,0:00:46.35,Default,,0000,0000,0000,,but also maybe that will\Nwake you up a little bit.
Dialogue: 0,0:00:46.35,0:00:47.59,Default,,0000,0000,0000,,This is going to be a shot of espresso,
Dialogue: 0,0:00:47.59,0:00:48.96,Default,,0000,0000,0000,,we've got to go, go, go, go.
Dialogue: 0,0:00:49.07,0:00:51.89,Default,,0000,0000,0000,,I have a very serious talk\Nabout the heart of architecture.
Dialogue: 0,0:00:53.83,0:00:57.53,Default,,0000,0000,0000,,As you know, as DHH said at the\Nfirst talk, we are engineers.
Dialogue: 0,0:00:57.53,0:00:59.50,Default,,0000,0000,0000,,What we do is build bridges with code.
Dialogue: 0,0:01:01.70,0:01:04.74,Default,,0000,0000,0000,,We are architects, we build\Ncenturies old castles.
Dialogue: 0,0:01:05.77,0:01:09.04,Default,,0000,0000,0000,,We are craftspeople, we are\Nold-timey metal workers.
Dialogue: 0,0:01:09.39,0:01:10.85,Default,,0000,0000,0000,,And we live in the cloud.
Dialogue: 0,0:01:10.85,0:01:12.96,Default,,0000,0000,0000,,I think Javascript is ready\Nfor all of these things.
Dialogue: 0,0:01:13.63,0:01:16.81,Default,,0000,0000,0000,,I feel like Javascript is\Nready for Cloudgineering.
Dialogue: 0,0:01:20.57,0:01:22.16,Default,,0000,0000,0000,,If anybody knows what any of the things
Dialogue: 0,0:01:22.16,0:01:23.94,Default,,0000,0000,0000,,I said with the pretty pictures are,
Dialogue: 0,0:01:23.94,0:01:26.22,Default,,0000,0000,0000,,please grab me after the\Ntalk and explain them to me.
Dialogue: 0,0:01:26.68,0:01:29.15,Default,,0000,0000,0000,,I just say them to sound smart and serious
Dialogue: 0,0:01:29.15,0:01:31.12,Default,,0000,0000,0000,,about programming, it is serious business.
Dialogue: 0,0:01:31.12,0:01:32.22,Default,,0000,0000,0000,,Hi I'm Brandon Hayes,
Dialogue: 0,0:01:32.22,0:01:34.94,Default,,0000,0000,0000,,I work with Charles\Nactually at The Frontside.
Dialogue: 0,0:01:35.31,0:01:41.75,Default,,0000,0000,0000,,I'm a dedicated Cloudgineer\Nand no one ever asks which of
Dialogue: 0,0:01:41.75,0:01:44.09,Default,,0000,0000,0000,,us is the smart one when\Nwe converse together,
Dialogue: 0,0:01:44.09,0:01:45.55,Default,,0000,0000,0000,,which is a little weird.
Dialogue: 0,0:01:45.78,0:01:46.98,Default,,0000,0000,0000,,These are my credentials.
Dialogue: 0,0:01:46.98,0:01:49.35,Default,,0000,0000,0000,,As you can see I'm highly credentialed and
Dialogue: 0,0:01:49.35,0:01:51.35,Default,,0000,0000,0000,,ready to tell you all about programming.
Dialogue: 0,0:01:52.37,0:01:54.02,Default,,0000,0000,0000,,My wife gave me a few of these,
Dialogue: 0,0:01:54.02,0:01:55.85,Default,,0000,0000,0000,,most of them are actually true.
Dialogue: 0,0:02:00.27,0:02:02.35,Default,,0000,0000,0000,,I'm not here to talk about some
Dialogue: 0,0:02:02.35,0:02:06.90,Default,,0000,0000,0000,,core ideal or some big fancy thing.
Dialogue: 0,0:02:07.33,0:02:08.13,Default,,0000,0000,0000,,I live in the real world.
Dialogue: 0,0:02:08.72,0:02:12.97,Default,,0000,0000,0000,,I have to write programs that\Npeople want written fast and
Dialogue: 0,0:02:12.97,0:02:16.69,Default,,0000,0000,0000,,want them yesterday and it's\Nvery challenging some times.
Dialogue: 0,0:02:17.39,0:02:21.12,Default,,0000,0000,0000,,I understand that\Narchitecture is great but
Dialogue: 0,0:02:21.12,0:02:22.98,Default,,0000,0000,0000,,I don't have a lot of use\Nfor ivory tower people,
Dialogue: 0,0:02:22.98,0:02:25.28,Default,,0000,0000,0000,,I think the universe has\Nplenty of uncles in it.
Dialogue: 0,0:02:26.59,0:02:28.70,Default,,0000,0000,0000,,We live in a place,
Dialogue: 0,0:02:29.15,0:02:31.07,Default,,0000,0000,0000,,and I'm going to tell you a\Ntale about a couple of places.
Dialogue: 0,0:02:31.56,0:02:33.52,Default,,0000,0000,0000,,It's actually a meta talk about the
Dialogue: 0,0:02:33.52,0:02:35.10,Default,,0000,0000,0000,,ball of mud architecture pattern,
Dialogue: 0,0:02:35.10,0:02:36.71,Default,,0000,0000,0000,,that's one I can really get behind.
Dialogue: 0,0:02:36.93,0:02:39.56,Default,,0000,0000,0000,,If you're not familiar\Nwith this, Brian Foote,
Dialogue: 0,0:02:39.56,0:02:43.29,Default,,0000,0000,0000,,I believe in the late 1970s,\Ndescribed an architecture
Dialogue: 0,0:02:43.29,0:02:46.15,Default,,0000,0000,0000,,pattern that everyone here has\Nseen called the ball of mud.
Dialogue: 0,0:02:47.35,0:02:48.69,Default,,0000,0000,0000,,To do that I need to\Ntalk about city planning.
Dialogue: 0,0:02:50.01,0:02:51.74,Default,,0000,0000,0000,,Most cities are not designed for growth.
Dialogue: 0,0:02:52.32,0:02:53.98,Default,,0000,0000,0000,,Salt Lake City would be a rare exception.
Dialogue: 0,0:02:54.68,0:02:57.35,Default,,0000,0000,0000,,You'll see it handled its\Neventual growth pretty well.
Dialogue: 0,0:02:58.41,0:03:00.84,Default,,0000,0000,0000,,From layout to infrastructure\Nit seems to have avoided
Dialogue: 0,0:03:00.84,0:03:03.52,Default,,0000,0000,0000,,many of the problems\Nthat plague large cities.
Dialogue: 0,0:03:04.16,0:03:06.12,Default,,0000,0000,0000,,Our code does not live in Salt Lake City,
Dialogue: 0,0:03:06.12,0:03:07.38,Default,,0000,0000,0000,,they don't work like that.
Dialogue: 0,0:03:08.29,0:03:11.27,Default,,0000,0000,0000,,My current home town of\NAustin is a lot more typical.
Dialogue: 0,0:03:13.05,0:03:15.51,Default,,0000,0000,0000,,I look at that every day\Non my drive home while
Dialogue: 0,0:03:15.51,0:03:17.85,Default,,0000,0000,0000,,Charles rides his bike\Nhome, which is great.
Dialogue: 0,0:03:18.22,0:03:19.68,Default,,0000,0000,0000,,I get to sit in that every day for
Dialogue: 0,0:03:19.68,0:03:21.33,Default,,0000,0000,0000,,about 45 minutes on the way home.
Dialogue: 0,0:03:21.77,0:03:23.66,Default,,0000,0000,0000,,The city layout and\Ninfrastructure was not prepared
Dialogue: 0,0:03:23.66,0:03:25.82,Default,,0000,0000,0000,,for the kind of growth\Nthat they've experienced.
Dialogue: 0,0:03:26.16,0:03:28.49,Default,,0000,0000,0000,,That results in the dreaded urban sprawl.
Dialogue: 0,0:03:29.46,0:03:31.61,Default,,0000,0000,0000,,But we don't actually even live here.
Dialogue: 0,0:03:31.64,0:03:33.44,Default,,0000,0000,0000,,Let's be honest about our\Ncode for a minute people.
Dialogue: 0,0:03:34.05,0:03:35.13,Default,,0000,0000,0000,,We live here.
Dialogue: 0,0:03:37.76,0:03:39.53,Default,,0000,0000,0000,,It's not a sprawling metroplex
Dialogue: 0,0:03:39.53,0:03:40.93,Default,,0000,0000,0000,,or a beautifully planned city.
Dialogue: 0,0:03:40.93,0:03:42.56,Default,,0000,0000,0000,,We live in a favela.
Dialogue: 0,0:03:42.63,0:03:45.31,Default,,0000,0000,0000,,A favela is a Brazilian slum, basically.
Dialogue: 0,0:03:45.31,0:03:46.90,Default,,0000,0000,0000,,It looks like cool though, right?
Dialogue: 0,0:03:47.04,0:03:51.12,Default,,0000,0000,0000,,It's the definition of a\Nwalkable city -- well, hikeable.
Dialogue: 0,0:03:51.87,0:03:53.49,Default,,0000,0000,0000,,Let's zoom in.
Dialogue: 0,0:03:54.62,0:03:57.84,Default,,0000,0000,0000,,A favela is a Brazilian\Nshanty town made permanent.
Dialogue: 0,0:03:58.38,0:04:02.38,Default,,0000,0000,0000,,The structures require little\Nskill to create and they
Dialogue: 0,0:04:02.38,0:04:05.83,Default,,0000,0000,0000,,pop up everywhere out of\Nwhatever materials can be found.
Dialogue: 0,0:04:06.21,0:04:08.10,Default,,0000,0000,0000,,The problem is these structures are
Dialogue: 0,0:04:08.10,0:04:10.35,Default,,0000,0000,0000,,difficult to grow, to maintain or protect.
Dialogue: 0,0:04:10.90,0:04:13.32,Default,,0000,0000,0000,,There's little police\Npresence or fire presence,
Dialogue: 0,0:04:13.46,0:04:15.93,Default,,0000,0000,0000,,and safety and crime\Nissues are pretty rampant.
Dialogue: 0,0:04:17.24,0:04:19.35,Default,,0000,0000,0000,,Forget architecture stuff,
Dialogue: 0,0:04:19.35,0:04:21.41,Default,,0000,0000,0000,,we're going to go in to a code favela,
Dialogue: 0,0:04:21.87,0:04:23.35,Default,,0000,0000,0000,,it will look familiar to you.
Dialogue: 0,0:04:23.35,0:04:24.93,Default,,0000,0000,0000,,You've probably had some that made you
Dialogue: 0,0:04:24.93,0:04:26.90,Default,,0000,0000,0000,,nearly go crazy trying to maintain it.
Dialogue: 0,0:04:27.32,0:04:29.24,Default,,0000,0000,0000,,I apologize in advance\Nfor making you look at
Dialogue: 0,0:04:29.24,0:04:31.77,Default,,0000,0000,0000,,this but I really need\Nyou to feel my pain.
Dialogue: 0,0:04:34.02,0:04:36.91,Default,,0000,0000,0000,,That favela is a\Nmanifestation of the ball of
Dialogue: 0,0:04:36.91,0:04:39.15,Default,,0000,0000,0000,,mud pattern, which is\Nreally easy to create.
Dialogue: 0,0:04:39.23,0:04:42.14,Default,,0000,0000,0000,,You just need to build\Nsomething temporary,
Dialogue: 0,0:04:42.14,0:04:44.97,Default,,0000,0000,0000,,add to it, and then rely\Non it for your business.
Dialogue: 0,0:04:45.24,0:04:47.32,Default,,0000,0000,0000,,They're so easy to create\Nthat it's the dominant
Dialogue: 0,0:04:47.32,0:04:50.56,Default,,0000,0000,0000,,architecture pattern, I would\Ncontest, in software today.
Dialogue: 0,0:04:51.68,0:04:53.16,Default,,0000,0000,0000,,Let's talk about how this happens.
Dialogue: 0,0:04:53.87,0:04:55.21,Default,,0000,0000,0000,,Should be pretty easy right,
Dialogue: 0,0:04:55.21,0:04:56.68,Default,,0000,0000,0000,,you can probably make\Nthis happen this week.
Dialogue: 0,0:04:58.76,0:05:02.44,Default,,0000,0000,0000,,I need a show of hands.\NHow many of you hate being
Dialogue: 0,0:05:02.44,0:05:04.49,Default,,0000,0000,0000,,asked to raise your hands in a talk?
Dialogue: 0,0:05:05.68,0:05:08.48,Default,,0000,0000,0000,,I should see no hands, that is insane.
Dialogue: 0,0:05:09.52,0:05:11.42,Default,,0000,0000,0000,,How many of the rest of you have a
Dialogue: 0,0:05:11.42,0:05:13.50,Default,,0000,0000,0000,,prototype that is shipped to production?
Dialogue: 0,0:05:14.67,0:05:16.35,Default,,0000,0000,0000,,Pretty good balance there.
Dialogue: 0,0:05:20.44,0:05:21.77,Default,,0000,0000,0000,,They say, "This is a two week feature,
Dialogue: 0,0:05:21.77,0:05:23.10,Default,,0000,0000,0000,,"let's ship this thing in two weeks."
Dialogue: 0,0:05:23.37,0:05:24.48,Default,,0000,0000,0000,,I don't believe in two week features,
Dialogue: 0,0:05:24.48,0:05:25.87,Default,,0000,0000,0000,,I don't think that's actually a thing.
Dialogue: 0,0:05:26.34,0:05:28.54,Default,,0000,0000,0000,,We do try to cram features\Nin to two weeks and then make
Dialogue: 0,0:05:28.54,0:05:31.31,Default,,0000,0000,0000,,sacrifices to get them out the\Ndoor, or we inherit code from
Dialogue: 0,0:05:31.31,0:05:34.12,Default,,0000,0000,0000,,less experienced developers\Nand it has to ship.
Dialogue: 0,0:05:34.81,0:05:37.68,Default,,0000,0000,0000,,But mostly these shanty towns\Nstart as a quick prototype.
Dialogue: 0,0:05:38.92,0:05:40.79,Default,,0000,0000,0000,,Let's go ahead and build a shanty town.
Dialogue: 0,0:05:41.42,0:05:43.01,Default,,0000,0000,0000,,It starts off like pretty much any other.
Dialogue: 0,0:05:44.49,0:05:46.42,Default,,0000,0000,0000,,Let's say we're all working on Giffindor.
Dialogue: 0,0:05:46.77,0:05:48.73,Default,,0000,0000,0000,,It's a social network for animated gifs.
Dialogue: 0,0:05:49.89,0:05:52.14,Default,,0000,0000,0000,,The founder is a huge Harry\NPotter fan, cosplayer,
Dialogue: 0,0:05:52.15,0:05:54.62,Default,,0000,0000,0000,,the whole thing. Has the\Nglasses, it's adorable.
Dialogue: 0,0:05:54.67,0:05:55.94,Default,,0000,0000,0000,,Personally I'm more a Hufflepuff,
Dialogue: 0,0:05:55.94,0:05:57.26,Default,,0000,0000,0000,,this is not my website though.
Dialogue: 0,0:05:57.89,0:06:00.40,Default,,0000,0000,0000,,It's a vanilla server-side app in Rails.
Dialogue: 0,0:06:01.29,0:06:04.68,Default,,0000,0000,0000,,One note on pronunciation.\NI'm going to stake a stand.
Dialogue: 0,0:06:04.68,0:06:07.23,Default,,0000,0000,0000,,I'm going to say that gif is\Npronounced like GitHub Gist.
Dialogue: 0,0:06:09.18,0:06:11.46,Default,,0000,0000,0000,,I do the same thing\Nwith JSON and [JAY-sin].
Dialogue: 0,0:06:11.96,0:06:12.87,Default,,0000,0000,0000,,I like to make everybody mad.
Dialogue: 0,0:06:12.87,0:06:14.98,Default,,0000,0000,0000,,Mix tabs and spaces, people love me.
Dialogue: 0,0:06:15.93,0:06:16.62,Default,,0000,0000,0000,,Back to work.
Dialogue: 0,0:06:17.51,0:06:19.95,Default,,0000,0000,0000,,Let's just sprinkle in\Na little interactivity.
Dialogue: 0,0:06:21.01,0:06:22.39,Default,,0000,0000,0000,,Let's start with sprinkles, they're fun,
Dialogue: 0,0:06:22.39,0:06:23.71,Default,,0000,0000,0000,,sprinkles are fun, yay!
Dialogue: 0,0:06:25.52,0:06:28.44,Default,,0000,0000,0000,,Your boss calls. She says,\N"We want a better experience
Dialogue: 0,0:06:28.44,0:06:30.19,Default,,0000,0000,0000,,"on the site. Our users\Ndemand it. They should not
Dialogue: 0,0:06:30.19,0:06:32.44,Default,,0000,0000,0000,,"have to go through a\Npage refresh all the way
Dialogue: 0,0:06:32.44,0:06:34.70,Default,,0000,0000,0000,,"to the new page to submit\Na new animated gif."
Dialogue: 0,0:06:36.15,0:06:37.32,Default,,0000,0000,0000,,You look at your Javascript file.
Dialogue: 0,0:06:38.95,0:06:41.51,Default,,0000,0000,0000,,Nothing there, undaunted\Nyou march forward.
Dialogue: 0,0:06:42.12,0:06:44.66,Default,,0000,0000,0000,,Easy right? Just make a little HTML form
Dialogue: 0,0:06:44.66,0:06:46.94,Default,,0000,0000,0000,,on the page with show hide, all done.
Dialogue: 0,0:06:48.20,0:06:51.04,Default,,0000,0000,0000,,That worked, except it submits and
Dialogue: 0,0:06:51.04,0:06:52.87,Default,,0000,0000,0000,,does a full page refresh on submit.
Dialogue: 0,0:06:52.87,0:06:54.07,Default,,0000,0000,0000,,"Can you do that by AJAX,
Dialogue: 0,0:06:54.07,0:06:55.75,Default,,0000,0000,0000,,"it's kind of irritating to our users?"
Dialogue: 0,0:06:56.20,0:06:57.90,Default,,0000,0000,0000,,All right, that's what AJAX is for, right?
Dialogue: 0,0:06:57.95,0:06:59.97,Default,,0000,0000,0000,,We submit this thing via AJAX.
Dialogue: 0,0:07:00.87,0:07:03.10,Default,,0000,0000,0000,,That seems to work, all right.
Dialogue: 0,0:07:03.51,0:07:05.79,Default,,0000,0000,0000,,But now you actually\Nhave to add that new POST
Dialogue: 0,0:07:05.79,0:07:08.29,Default,,0000,0000,0000,,to the list of POSTs\Nthat are on that page.
Dialogue: 0,0:07:08.95,0:07:09.85,Default,,0000,0000,0000,,All right, no problem.
Dialogue: 0,0:07:10.44,0:07:12.27,Default,,0000,0000,0000,,Okay, a little bit of a problem.
Dialogue: 0,0:07:13.09,0:07:16.14,Default,,0000,0000,0000,,We're starting to duplicate\Nsome DOM code here in your
Dialogue: 0,0:07:16.14,0:07:18.88,Default,,0000,0000,0000,,Javascript so you get to\Nedit stuff in two places.
Dialogue: 0,0:07:19.30,0:07:23.62,Default,,0000,0000,0000,,A little duplication. We know,\Nwe don't de-duplicate first.
Dialogue: 0,0:07:24.84,0:07:26.62,Default,,0000,0000,0000,,You're agile so you agile that code right
Dialogue: 0,0:07:26.62,0:07:29.28,Default,,0000,0000,0000,,in there until this whole thing is agile!\N(laughter and applause)
Dialogue: 0,0:07:29.86,0:07:32.65,Default,,0000,0000,0000,,By the way that's a trademark\Nof Cloudgineering Inc.
Dialogue: 0,0:07:32.66,0:07:35.62,Default,,0000,0000,0000,,so do not use that without\Nwritten permission.
Dialogue: 0,0:07:37.20,0:07:39.79,Default,,0000,0000,0000,,So this sprinkle is starting\Nto turn in to a little more
Dialogue: 0,0:07:39.79,0:07:42.63,Default,,0000,0000,0000,,of a rain shower, a little\Nbit of a steady rain.
Dialogue: 0,0:07:42.63,0:07:45.13,Default,,0000,0000,0000,,But cheer up Keanu, we\Nshipped some software, right?
Dialogue: 0,0:07:46.38,0:07:49.42,Default,,0000,0000,0000,,Okay, sport. The product\Nmanager, who tends to look
Dialogue: 0,0:07:49.42,0:07:52.13,Default,,0000,0000,0000,,like Fred MacMurray for some\Nreason, is really happy.
Dialogue: 0,0:07:52.65,0:07:55.42,Default,,0000,0000,0000,,He has more ideas. He wants\Nusers to be able to click
Dialogue: 0,0:07:55.42,0:07:57.49,Default,,0000,0000,0000,,a cancel button so that\Nthey zero out the form,
Dialogue: 0,0:07:57.49,0:07:59.40,Default,,0000,0000,0000,,because if you open it\Nit's just stuck there.
Dialogue: 0,0:08:00.65,0:08:02.80,Default,,0000,0000,0000,,Dutifully you implement the cancel button
Dialogue: 0,0:08:02.80,0:08:04.71,Default,,0000,0000,0000,,and zero out the form with jQuery.
Dialogue: 0,0:08:04.93,0:08:07.85,Default,,0000,0000,0000,,Awesome, except now users\Nare hitting submit on
Dialogue: 0,0:08:07.85,0:08:10.13,Default,,0000,0000,0000,,empty and invalid forms,\Nso we need some sort of
Dialogue: 0,0:08:10.13,0:08:12.54,Default,,0000,0000,0000,,client-side validation to\Nprevent that from happening.
Dialogue: 0,0:08:12.70,0:08:14.29,Default,,0000,0000,0000,,It shouldn't be too hard to tell if
Dialogue: 0,0:08:14.29,0:08:17.09,Default,,0000,0000,0000,,somebody has attached\Nan animated gif link.
Dialogue: 0,0:08:19.03,0:08:21.96,Default,,0000,0000,0000,,It wasn't super, super\Neasy but it was relatively
Dialogue: 0,0:08:21.96,0:08:24.29,Default,,0000,0000,0000,,straight forward. We disable\Nthe submit button unless
Dialogue: 0,0:08:24.29,0:08:26.73,Default,,0000,0000,0000,,it's valid and show messages with jQuery.
Dialogue: 0,0:08:27.29,0:08:29.01,Default,,0000,0000,0000,,This is starting to look\Na little weird, right?
Dialogue: 0,0:08:29.03,0:08:30.77,Default,,0000,0000,0000,,It's starting to really come down.
Dialogue: 0,0:08:32.31,0:08:33.58,Default,,0000,0000,0000,,Poor Al Roker.
Dialogue: 0,0:08:34.79,0:08:36.70,Default,,0000,0000,0000,,Your CEO comes in to congratulate you
Dialogue: 0,0:08:36.70,0:08:38.26,Default,,0000,0000,0000,,on all the great work you've done.
Dialogue: 0,0:08:38.26,0:08:40.71,Default,,0000,0000,0000,,You've really shipped a lot\Nof code and agiled everything
Dialogue: 0,0:08:40.71,0:08:43.82,Default,,0000,0000,0000,,and you just need a\Ncouple more enhancements.
Dialogue: 0,0:08:44.06,0:08:46.93,Default,,0000,0000,0000,,Let's add an inline preview\Nfor that image so users know
Dialogue: 0,0:08:46.93,0:08:49.25,Default,,0000,0000,0000,,what they're about to\Npost before they post it,
Dialogue: 0,0:08:49.30,0:08:51.76,Default,,0000,0000,0000,,and a little character\Ncount that doesn't ding them
Dialogue: 0,0:08:51.76,0:08:53.98,Default,,0000,0000,0000,,for long urls. We want\Na smart character count.
Dialogue: 0,0:08:55.60,0:08:57.29,Default,,0000,0000,0000,,That's working but\Nactually broke a couple of
Dialogue: 0,0:08:57.29,0:08:59.81,Default,,0000,0000,0000,,other things about the state of this form.
Dialogue: 0,0:09:00.01,0:09:03.48,Default,,0000,0000,0000,,We do some double checking\Nand enable or disable submit.
Dialogue: 0,0:09:04.70,0:09:06.73,Default,,0000,0000,0000,,Now you're caught\Nbetween these two worlds.
Dialogue: 0,0:09:06.73,0:09:09.52,Default,,0000,0000,0000,,You want to craft code that\Nyou can be proud of and that
Dialogue: 0,0:09:09.64,0:09:12.52,Default,,0000,0000,0000,,lets you feel good about\Nthe things that you do,
Dialogue: 0,0:09:12.62,0:09:14.48,Default,,0000,0000,0000,,but you also want to\Nbe able to ship stuff.
Dialogue: 0,0:09:14.48,0:09:16.69,Default,,0000,0000,0000,,Your business needs you to\Nmove fast and break things.
Dialogue: 0,0:09:16.70,0:09:20.40,Default,,0000,0000,0000,,You need to get stuff done,\NGSD. Craftsmanship, ship it.
Dialogue: 0,0:09:20.52,0:09:22.30,Default,,0000,0000,0000,,I say craftmanship it.
Dialogue: 0,0:09:22.38,0:09:24.78,Default,,0000,0000,0000,,(laughter)
Dialogue: 0,0:09:24.78,0:09:28.39,Default,,0000,0000,0000,,(hesitant applause)
Dialogue: 0,0:09:29.48,0:09:31.26,Default,,0000,0000,0000,,It's a good thing you're\Na cloudgineer and you
Dialogue: 0,0:09:31.26,0:09:33.37,Default,,0000,0000,0000,,can straddle these two\Nworlds just perfectly.
Dialogue: 0,0:09:34.18,0:09:36.82,Default,,0000,0000,0000,,Look at all this code that\Nwe've craftsmanshipped.
Dialogue: 0,0:09:38.24,0:09:40.94,Default,,0000,0000,0000,,Sandy Metz talked\Nyesterday about code shape
Dialogue: 0,0:09:40.94,0:09:42.79,Default,,0000,0000,0000,,and the squint test as an indicator.
Dialogue: 0,0:09:42.79,0:09:45.63,Default,,0000,0000,0000,,When I squint this code has a shape and
Dialogue: 0,0:09:45.63,0:09:47.66,Default,,0000,0000,0000,,that shape is a sack of hot garbage.
Dialogue: 0,0:09:47.66,0:09:50.10,Default,,0000,0000,0000,,(laughter)
Dialogue: 0,0:09:50.10,0:09:51.85,Default,,0000,0000,0000,,I don't know if Chicago\Nhas this but in Manhattan
Dialogue: 0,0:09:51.85,0:09:54.12,Default,,0000,0000,0000,,in the summer time you get this nice smell
Dialogue: 0,0:09:54.12,0:09:56.12,Default,,0000,0000,0000,,wafting off of the hot\Ngarbage, it's great.
Dialogue: 0,0:09:56.38,0:09:57.84,Default,,0000,0000,0000,,That's kind of how it feels.
Dialogue: 0,0:09:58.28,0:10:03.04,Default,,0000,0000,0000,,Here we are, a total tsunami\Nof entangled jQuery code.
Dialogue: 0,0:10:03.04,0:10:05.68,Default,,0000,0000,0000,,(laughter)
Dialogue: 0,0:10:05.68,0:10:07.78,Default,,0000,0000,0000,,Let's ship a feature against that.
Dialogue: 0,0:10:10.48,0:10:13.26,Default,,0000,0000,0000,,Please, it's really important!
Dialogue: 0,0:10:14.20,0:10:16.41,Default,,0000,0000,0000,,Your CEO is now putty in your hands,
Dialogue: 0,0:10:16.41,0:10:18.82,Default,,0000,0000,0000,,you are a superstar\Ndeveloper and the expectation
Dialogue: 0,0:10:18.82,0:10:21.37,Default,,0000,0000,0000,,is now that you just shipped so fast.
Dialogue: 0,0:10:21.37,0:10:23.81,Default,,0000,0000,0000,,And a light button, let's do it.
Dialogue: 0,0:10:23.90,0:10:27.00,Default,,0000,0000,0000,,Here's the thing. I was going\Nto implement this in jQuery,
Dialogue: 0,0:10:27.32,0:10:28.96,Default,,0000,0000,0000,,I was going to do it\Nbut there was already so
Dialogue: 0,0:10:28.96,0:10:31.07,Default,,0000,0000,0000,,much double checking and\Ninterwoven states that
Dialogue: 0,0:10:31.07,0:10:34.15,Default,,0000,0000,0000,,I physically couldn't\Nwithout getting really ill.
Dialogue: 0,0:10:34.68,0:10:36.58,Default,,0000,0000,0000,,The thought of touching\Nthis code made me want
Dialogue: 0,0:10:36.58,0:10:38.28,Default,,0000,0000,0000,,to quit writing the talk and just be like,
Dialogue: 0,0:10:38.28,0:10:40.15,Default,,0000,0000,0000,,"You know what RailsConf, thanks anyway."
Dialogue: 0,0:10:41.28,0:10:43.11,Default,,0000,0000,0000,,Now what, what do we do?
Dialogue: 0,0:10:43.38,0:10:46.05,Default,,0000,0000,0000,,Actually Brian Foote has prescriptions for
Dialogue: 0,0:10:46.05,0:10:47.29,Default,,0000,0000,0000,,dealing with the ball of mud pattern,
Dialogue: 0,0:10:47.29,0:10:48.92,Default,,0000,0000,0000,,and it's not always what you think.
Dialogue: 0,0:10:48.92,0:10:51.19,Default,,0000,0000,0000,,You don't necessarily dive\Nright into a refactor.
Dialogue: 0,0:10:51.45,0:10:53.47,Default,,0000,0000,0000,,Addressing a ball of\Nmud is pretty difficult.
Dialogue: 0,0:10:53.68,0:10:55.39,Default,,0000,0000,0000,,We can sweep it all under the rug,
Dialogue: 0,0:10:55.39,0:10:57.03,Default,,0000,0000,0000,,or put it inside of a black box.
Dialogue: 0,0:10:57.59,0:10:58.98,Default,,0000,0000,0000,,You can reconstruct it,
Dialogue: 0,0:10:58.98,0:11:02.67,Default,,0000,0000,0000,,tear the whole thing down\Nand raze it and rebuild it.
Dialogue: 0,0:11:02.79,0:11:04.04,Default,,0000,0000,0000,,You can renovate block-by-block,
Dialogue: 0,0:11:04.04,0:11:05.77,Default,,0000,0000,0000,,which he calls keeping it working,
Dialogue: 0,0:11:05.91,0:11:08.52,Default,,0000,0000,0000,,or you can quit you job,\Nwhich in some cases,
Dialogue: 0,0:11:08.52,0:11:10.80,Default,,0000,0000,0000,,sometimes it's the thing to do.
Dialogue: 0,0:11:11.64,0:11:13.46,Default,,0000,0000,0000,,Black box is fine if you know you're never
Dialogue: 0,0:11:13.46,0:11:15.15,Default,,0000,0000,0000,,going to have to touch that code again.
Dialogue: 0,0:11:15.15,0:11:16.69,Default,,0000,0000,0000,,If it's some complicated math equation or
Dialogue: 0,0:11:16.69,0:11:18.16,Default,,0000,0000,0000,,something I've seen that done, where you
Dialogue: 0,0:11:18.16,0:11:20.67,Default,,0000,0000,0000,,just hide it in the\Ncloset and that's fine.
Dialogue: 0,0:11:21.25,0:11:23.98,Default,,0000,0000,0000,,A rewrite is a great way\Nto learn really amazingly
Dialogue: 0,0:11:23.98,0:11:27.01,Default,,0000,0000,0000,,hidden lessons about your business logic.
Dialogue: 0,0:11:27.13,0:11:29.24,Default,,0000,0000,0000,,Things that are encoded\Nin very strange places.
Dialogue: 0,0:11:29.42,0:11:31.01,Default,,0000,0000,0000,,It's a really great way\Nto make something that
Dialogue: 0,0:11:31.01,0:11:33.25,Default,,0000,0000,0000,,sounds like it takes two\Nweeks take six months.
Dialogue: 0,0:11:35.59,0:11:38.41,Default,,0000,0000,0000,,I feel like you always\Ndiscover that hidden
Dialogue: 0,0:11:38.41,0:11:40.97,Default,,0000,0000,0000,,business logic so let's\Ntalk about a refactor.
Dialogue: 0,0:11:41.51,0:11:42.97,Default,,0000,0000,0000,,Why would we do that?
Dialogue: 0,0:11:43.70,0:11:45.36,Default,,0000,0000,0000,,We decided that refactor\Nis probably the right
Dialogue: 0,0:11:45.36,0:11:46.76,Default,,0000,0000,0000,,thing to do because the feature has to be
Dialogue: 0,0:11:46.76,0:11:49.19,Default,,0000,0000,0000,,maintained but it's now\Ntoo expensive to manage.
Dialogue: 0,0:11:49.33,0:11:51.24,Default,,0000,0000,0000,,Users are starting to\Nactually have a bad time with
Dialogue: 0,0:11:51.24,0:11:53.22,Default,,0000,0000,0000,,it because the longer\Nthey stay on the page the
Dialogue: 0,0:11:53.22,0:11:55.46,Default,,0000,0000,0000,,more likely they are to\Nhave problems with it.
Dialogue: 0,0:11:56.42,0:11:58.96,Default,,0000,0000,0000,,And more importantly to me personally is
Dialogue: 0,0:11:58.96,0:12:00.81,Default,,0000,0000,0000,,that you are tossing\Nand turning all night.
Dialogue: 0,0:12:00.81,0:12:02.66,Default,,0000,0000,0000,,You cannot sleep because\Nyou're dreaming about the JIRA
Dialogue: 0,0:12:02.66,0:12:04.55,Default,,0000,0000,0000,,tickets that are waiting\Nfor you in the morning.
Dialogue: 0,0:12:04.55,0:12:06.40,Default,,0000,0000,0000,,Why are we still using\NJIRA, why is that a thing?!
Dialogue: 0,0:12:06.40,0:12:08.08,Default,,0000,0000,0000,,Okay, anyway, separate deal.
Dialogue: 0,0:12:09.92,0:12:12.58,Default,,0000,0000,0000,,You think about your\Nfrustrated users, your gut is
Dialogue: 0,0:12:12.58,0:12:15.11,Default,,0000,0000,0000,,telling you to fix it and\Nyour gut is totally right.
Dialogue: 0,0:12:16.45,0:12:17.98,Default,,0000,0000,0000,,You have two paths out of here.
Dialogue: 0,0:12:17.98,0:12:21.04,Default,,0000,0000,0000,,I think the person in this\Nroom, super smart guy, is like,
Dialogue: 0,0:12:21.04,0:12:24.77,Default,,0000,0000,0000,,"Why don't you refactor this\Nto smart Javascript objects?"
Dialogue: 0,0:12:25.35,0:12:29.49,Default,,0000,0000,0000,,He's largely right. That's an\Nideomatic way to dig out of this.
Dialogue: 0,0:12:29.63,0:12:32.11,Default,,0000,0000,0000,,He also asked me if I\Ndid that as a strawman
Dialogue: 0,0:12:32.11,0:12:34.66,Default,,0000,0000,0000,,of how to build really\Nterrible jQuery code.
Dialogue: 0,0:12:34.95,0:12:39.26,Default,,0000,0000,0000,,I was like, "Yeees. I\Nwas not doing my best."
Dialogue: 0,0:12:40.68,0:12:42.24,Default,,0000,0000,0000,,The other option is to use a framework
Dialogue: 0,0:12:42.24,0:12:44.70,Default,,0000,0000,0000,,to abstract away the DOM and handle data.
Dialogue: 0,0:12:46.06,0:12:47.68,Default,,0000,0000,0000,,Our goal is to get the heck out of
Dialogue: 0,0:12:47.68,0:12:49.31,Default,,0000,0000,0000,,the DOM as fast as humanly possible.
Dialogue: 0,0:12:50.16,0:12:52.06,Default,,0000,0000,0000,,That's our biggest pain point right now.
Dialogue: 0,0:12:52.39,0:12:54.20,Default,,0000,0000,0000,,For me I'll choose a framework.
Dialogue: 0,0:12:54.21,0:12:55.48,Default,,0000,0000,0000,,The framework will manage the DOM and
Dialogue: 0,0:12:55.48,0:12:57.10,Default,,0000,0000,0000,,we'll just manage the underlying data.
Dialogue: 0,0:12:58.40,0:13:01.37,Default,,0000,0000,0000,,All we need to do now is\Nfive steps to get out.
Dialogue: 0,0:13:02.63,0:13:04.98,Default,,0000,0000,0000,,These steps will probably\Napply for people that
Dialogue: 0,0:13:04.98,0:13:08.40,Default,,0000,0000,0000,,use plain Javascript and\Ndon't use a framework,
Dialogue: 0,0:13:08.40,0:13:10.31,Default,,0000,0000,0000,,or any framework that you choose.
Dialogue: 0,0:13:10.31,0:13:12.16,Default,,0000,0000,0000,,It's just nice to build up against one,
Dialogue: 0,0:13:12.20,0:13:13.66,Default,,0000,0000,0000,,personally I certainly prefer it.
Dialogue: 0,0:13:14.68,0:13:16.83,Default,,0000,0000,0000,,On our blog we'll talk more about why
Dialogue: 0,0:13:16.83,0:13:18.79,Default,,0000,0000,0000,,we choose Ember and why we like it,
Dialogue: 0,0:13:18.79,0:13:21.20,Default,,0000,0000,0000,,and you heard Charles mention\Nearlier if you were here,
Dialogue: 0,0:13:21.20,0:13:23.30,Default,,0000,0000,0000,,about why we like Ember's model layer.
Dialogue: 0,0:13:23.43,0:13:25.91,Default,,0000,0000,0000,,I feel like it's a really\Nstrong model layer for
Dialogue: 0,0:13:25.91,0:13:28.04,Default,,0000,0000,0000,,the case that we're\Ntrying to accomplish now.
Dialogue: 0,0:13:28.04,0:13:29.59,Default,,0000,0000,0000,,It has really great\Nbindings and managed state,
Dialogue: 0,0:13:29.59,0:13:31.10,Default,,0000,0000,0000,,and it's got a great drop in component
Dialogue: 0,0:13:31.10,0:13:32.77,Default,,0000,0000,0000,,library to tie it all together.
Dialogue: 0,0:13:33.37,0:13:36.96,Default,,0000,0000,0000,,Step one, let's rap it. Rap\Nit, rap it, rap it, wrap it.
Dialogue: 0,0:13:40.31,0:13:42.29,Default,,0000,0000,0000,,A little sidetrack, a lot\Nof people don't realize
Dialogue: 0,0:13:42.29,0:13:44.38,Default,,0000,0000,0000,,that you can sprinkle Ember into an app.
Dialogue: 0,0:13:44.56,0:13:47.12,Default,,0000,0000,0000,,A lot of people think that\NEmber only works if you want to
Dialogue: 0,0:13:47.12,0:13:49.68,Default,,0000,0000,0000,,start an app from scratch and\Nbuild up from the ground up,
Dialogue: 0,0:13:49.68,0:13:52.62,Default,,0000,0000,0000,,from floor zero all the way to\Nthe top, but you can actually
Dialogue: 0,0:13:52.62,0:13:54.48,Default,,0000,0000,0000,,apply it to a lot of\Ncodebases and it's really
Dialogue: 0,0:13:54.48,0:13:57.43,Default,,0000,0000,0000,,great for refactoring\Nexisting codebases toward it.
Dialogue: 0,0:13:58.05,0:14:01.63,Default,,0000,0000,0000,,That's just these three steps right here.
Dialogue: 0,0:14:01.82,0:14:04.31,Default,,0000,0000,0000,,At The Frontside we do\Nthat pretty often where
Dialogue: 0,0:14:04.31,0:14:07.67,Default,,0000,0000,0000,,we take an existing Rails\Napplication and move
Dialogue: 0,0:14:07.67,0:14:11.16,Default,,0000,0000,0000,,it towards Ember, but it's\Nactually not that hard.
Dialogue: 0,0:14:11.20,0:14:13.20,Default,,0000,0000,0000,,First things first it's\Ntime for some justice.
Dialogue: 0,0:14:13.20,0:14:15.62,Default,,0000,0000,0000,,We're going to put that\Nterrible code in code jail.
Dialogue: 0,0:14:15.62,0:14:18.51,Default,,0000,0000,0000,,That code jail is this\NinitLegacyCode function.
Dialogue: 0,0:14:18.51,0:14:21.78,Default,,0000,0000,0000,,We're going to create an Ember\Ncomponent, we're going to
Dialogue: 0,0:14:21.78,0:14:25.18,Default,,0000,0000,0000,,put the stuff in initLegacyCode,\Nwhich is not a special name,
Dialogue: 0,0:14:25.18,0:14:28.64,Default,,0000,0000,0000,,I just chose it to tell\Nme that this is the jail.
Dialogue: 0,0:14:28.64,0:14:31.54,Default,,0000,0000,0000,,It bootstraps the old\Ncode inside the component.
Dialogue: 0,0:14:31.54,0:14:33.68,Default,,0000,0000,0000,,We do not alter that code at all.
Dialogue: 0,0:14:33.98,0:14:37.29,Default,,0000,0000,0000,,Also we move the HTML in to a handlebars
Dialogue: 0,0:14:37.29,0:14:39.46,Default,,0000,0000,0000,,template associated with this component.
Dialogue: 0,0:14:39.74,0:14:42.03,Default,,0000,0000,0000,,No structure of that\NHTML actually changes,
Dialogue: 0,0:14:42.38,0:14:44.04,Default,,0000,0000,0000,,we're just isolating.
Dialogue: 0,0:14:44.92,0:14:48.37,Default,,0000,0000,0000,,Then we can sprinkle. Now we\Nuse jQuery to stuff all of
Dialogue: 0,0:14:48.37,0:14:51.68,Default,,0000,0000,0000,,this old stuff that we had\Nbefore back in to the DOM.
Dialogue: 0,0:14:53.82,0:14:56.52,Default,,0000,0000,0000,,Another thing Sandy said\Nyesterday that I hope
Dialogue: 0,0:14:56.52,0:14:59.16,Default,,0000,0000,0000,,it's self evident, it's certainly\Nmade itself self evident
Dialogue: 0,0:14:59.16,0:15:02.53,Default,,0000,0000,0000,,to me over the course of the\Nlast year or two doing this,
Dialogue: 0,0:15:02.53,0:15:04.42,Default,,0000,0000,0000,,that you have to test it.
Dialogue: 0,0:15:04.71,0:15:08.58,Default,,0000,0000,0000,,If you do not test your code a refactor is
Dialogue: 0,0:15:08.58,0:15:11.65,Default,,0000,0000,0000,,essentially impossible, I\Ncannot imagine trying to do it.
Dialogue: 0,0:15:11.65,0:15:13.82,Default,,0000,0000,0000,,I was not a big testing advocate earlier.
Dialogue: 0,0:15:13.82,0:15:16.93,Default,,0000,0000,0000,,I was very skeptical,\Nlet's say, about testing.
Dialogue: 0,0:15:16.93,0:15:19.64,Default,,0000,0000,0000,,I was raised by cowboy coders in my first
Dialogue: 0,0:15:19.64,0:15:22.06,Default,,0000,0000,0000,,place when I was learning to program.
Dialogue: 0,0:15:22.39,0:15:24.82,Default,,0000,0000,0000,,But we're going to do it and\Nwe're going to see that it's
Dialogue: 0,0:15:24.82,0:15:27.49,Default,,0000,0000,0000,,actually not that hard to\Nactually test the thing itself.
Dialogue: 0,0:15:27.84,0:15:30.26,Default,,0000,0000,0000,,We're going to test that\Nit shows up and it passes.
Dialogue: 0,0:15:33.68,0:15:35.42,Default,,0000,0000,0000,,I'm doing a little bit of a hand wave
Dialogue: 0,0:15:35.42,0:15:38.15,Default,,0000,0000,0000,,here over Javascript testing setup.
Dialogue: 0,0:15:39.18,0:15:43.44,Default,,0000,0000,0000,,Javascript test setup story\Nfor getting Ember applications
Dialogue: 0,0:15:43.44,0:15:47.02,Default,,0000,0000,0000,,bootstrapped in Rails can\Nbe a little challenging.
Dialogue: 0,0:15:47.02,0:15:48.98,Default,,0000,0000,0000,,There's a growing body\Nof knowledge about it.
Dialogue: 0,0:15:48.98,0:15:50.99,Default,,0000,0000,0000,,I want to give you guys\Na quick note on that.
Dialogue: 0,0:15:51.01,0:15:52.84,Default,,0000,0000,0000,,On its own, Javascript\Ntesting is pretty easy
Dialogue: 0,0:15:52.84,0:15:55.00,Default,,0000,0000,0000,,but when you add in frameworks\Nand tie it to Rails,
Dialogue: 0,0:15:55.02,0:15:56.48,Default,,0000,0000,0000,,add in the asset pipeline,
Dialogue: 0,0:15:56.48,0:15:58.01,Default,,0000,0000,0000,,things can get a little complicated.
Dialogue: 0,0:15:58.17,0:15:59.62,Default,,0000,0000,0000,,It's a little bit of a wild west,
Dialogue: 0,0:15:59.91,0:16:01.08,Default,,0000,0000,0000,,there's a lot of choices out there.
Dialogue: 0,0:16:01.34,0:16:02.79,Default,,0000,0000,0000,,There's a little bit of\Nparalysis of choice I think.
Dialogue: 0,0:16:03.21,0:16:05.40,Default,,0000,0000,0000,,It's really wide open,\Nbut not like home on the
Dialogue: 0,0:16:05.40,0:16:09.33,Default,,0000,0000,0000,,range wide open, more like\Nthis kind of wild west.
Dialogue: 0,0:16:10.36,0:16:13.93,Default,,0000,0000,0000,,It can lead to that, you\Nlook at the thing of,
Dialogue: 0,0:16:13.93,0:16:15.66,Default,,0000,0000,0000,,"I don't know what brand\Nof toothpaste I want,
Dialogue: 0,0:16:15.66,0:16:17.21,Default,,0000,0000,0000,,"I just want some toothpaste."
Dialogue: 0,0:16:17.54,0:16:19.43,Default,,0000,0000,0000,,There's not really a truly accepted happy
Dialogue: 0,0:16:19.43,0:16:21.36,Default,,0000,0000,0000,,path just yet but it is getting better.
Dialogue: 0,0:16:21.99,0:16:23.43,Default,,0000,0000,0000,,Things are maturing,\Nwe're building schools,
Dialogue: 0,0:16:23.43,0:16:25.00,Default,,0000,0000,0000,,we're building hospitals still.
Dialogue: 0,0:16:25.77,0:16:27.90,Default,,0000,0000,0000,,There's a lot of a need\Nfor libraries and blog
Dialogue: 0,0:16:27.90,0:16:30.81,Default,,0000,0000,0000,,posts and people finding\Nthese happy paths.
Dialogue: 0,0:16:30.81,0:16:33.08,Default,,0000,0000,0000,,Taking aside for 15 minutes,\Nthere are screen casts
Dialogue: 0,0:16:33.08,0:16:34.84,Default,,0000,0000,0000,,being released right now,\Nthere's a thing called
Dialogue: 0,0:16:34.84,0:16:37.81,Default,,0000,0000,0000,,Ember Sparks where he's\Nteaching people how to
Dialogue: 0,0:16:37.81,0:16:40.41,Default,,0000,0000,0000,,set up and bootstrap your\Napplication environment.
Dialogue: 0,0:16:40.41,0:16:43.41,Default,,0000,0000,0000,,We're all still figuring this\Nout there, so be prepared
Dialogue: 0,0:16:43.41,0:16:47.01,Default,,0000,0000,0000,,for a little bit of rough\Ntake off on this still.
Dialogue: 0,0:16:48.32,0:16:50.68,Default,,0000,0000,0000,,Another thing is testing\NAJAX can feel a little
Dialogue: 0,0:16:50.68,0:16:52.21,Default,,0000,0000,0000,,intimidating when you're\Ntrying to test Javascript
Dialogue: 0,0:16:52.21,0:16:53.49,Default,,0000,0000,0000,,but it's actually pretty simple.
Dialogue: 0,0:16:53.49,0:16:55.31,Default,,0000,0000,0000,,There are multiple libraries\Nto do this kind of thing
Dialogue: 0,0:16:55.31,0:16:56.91,Default,,0000,0000,0000,,I like ic-ajax.
Dialogue: 0,0:16:59.100,0:17:03.66,Default,,0000,0000,0000,,It intercepts AJAX calls and\Nallows you to inject fixtures in.
Dialogue: 0,0:17:04.76,0:17:09.31,Default,,0000,0000,0000,,Here we're going to test each\Npath through the experience.
Dialogue: 0,0:17:09.44,0:17:11.08,Default,,0000,0000,0000,,In this one we're testing that clicking
Dialogue: 0,0:17:11.08,0:17:13.01,Default,,0000,0000,0000,,submit shows a success message.
Dialogue: 0,0:17:13.46,0:17:15.40,Default,,0000,0000,0000,,We just want to go through\Nand verify that all the
Dialogue: 0,0:17:15.40,0:17:18.24,Default,,0000,0000,0000,,things that the code says\Nit does it's actually doing.
Dialogue: 0,0:17:19.24,0:17:21.06,Default,,0000,0000,0000,,We're not changing any code,
Dialogue: 0,0:17:21.06,0:17:23.42,Default,,0000,0000,0000,,we're just wrapping it in test existing.
Dialogue: 0,0:17:24.53,0:17:25.74,Default,,0000,0000,0000,,And that passes.
Dialogue: 0,0:17:26.32,0:17:28.86,Default,,0000,0000,0000,,Okay. At this point we\Nrepeat for each path
Dialogue: 0,0:17:28.86,0:17:31.07,Default,,0000,0000,0000,,to create an integration\Ntest for the entire
Dialogue: 0,0:17:31.07,0:17:33.68,Default,,0000,0000,0000,,application stubbed at the API level.
Dialogue: 0,0:17:33.96,0:17:37.16,Default,,0000,0000,0000,,This took several hours\Nbut it's really important.
Dialogue: 0,0:17:37.16,0:17:38.51,Default,,0000,0000,0000,,As I said if you don't have a test harness
Dialogue: 0,0:17:38.51,0:17:40.15,Default,,0000,0000,0000,,I do not know how you can refactor.
Dialogue: 0,0:17:40.46,0:17:42.95,Default,,0000,0000,0000,,Maybe if somebody has another\Nanswer we can discuss it,
Dialogue: 0,0:17:42.95,0:17:45.48,Default,,0000,0000,0000,,because testing is not my\Nfavorite thing in the world.
Dialogue: 0,0:17:46.87,0:17:48.87,Default,,0000,0000,0000,,We can now move forward\Nwith some confidence.
Dialogue: 0,0:17:48.87,0:17:51.12,Default,,0000,0000,0000,,Go ahead and take yourself a\Nvictory lap, you earned it.
Dialogue: 0,0:17:51.12,0:17:53.05,Default,,0000,0000,0000,,This is, however, just the start.
Dialogue: 0,0:17:54.48,0:17:56.71,Default,,0000,0000,0000,,Step three is to identify models.
Dialogue: 0,0:17:56.71,0:17:59.74,Default,,0000,0000,0000,,You have this blob of code,\Nhow do you find models in here?
Dialogue: 0,0:17:59.74,0:18:02.17,Default,,0000,0000,0000,,Your server MVC might give you some hints.
Dialogue: 0,0:18:02.71,0:18:05.61,Default,,0000,0000,0000,,I don't believe that your\Nmodels will map one to one,
Dialogue: 0,0:18:05.61,0:18:07.88,Default,,0000,0000,0000,,but it's a really great place to start.
Dialogue: 0,0:18:08.99,0:18:12.29,Default,,0000,0000,0000,,In this one we actually get to\Nstart driving with the tests.
Dialogue: 0,0:18:12.64,0:18:14.96,Default,,0000,0000,0000,,Sometimes I test drive, sometimes I don't,
Dialogue: 0,0:18:14.96,0:18:19.03,Default,,0000,0000,0000,,I'm not an expert at either\Nstyle, but I do think that
Dialogue: 0,0:18:19.03,0:18:21.98,Default,,0000,0000,0000,,in this case it was pretty\Ngood to say, "I know that I
Dialogue: 0,0:18:21.98,0:18:23.65,Default,,0000,0000,0000,,"have a model and I know\Npart of what a model is
Dialogue: 0,0:18:23.65,0:18:26.95,Default,,0000,0000,0000,,"going to parse out an animated gif url
Dialogue: 0,0:18:26.95,0:18:29.16,Default,,0000,0000,0000,,"and tell me whether it\Nis one or is not one."
Dialogue: 0,0:18:30.60,0:18:33.64,Default,,0000,0000,0000,,With no code that thing\Nshould fail, and it does.
Dialogue: 0,0:18:34.65,0:18:36.75,Default,,0000,0000,0000,,Now let's extract it.
Dialogue: 0,0:18:36.75,0:18:39.46,Default,,0000,0000,0000,,We can actually extract some\Nof that logic to a model.
Dialogue: 0,0:18:40.31,0:18:43.23,Default,,0000,0000,0000,,And we can extract the\Nanimated gif link from
Dialogue: 0,0:18:43.23,0:18:45.65,Default,,0000,0000,0000,,the POST body and give it a property here.
Dialogue: 0,0:18:45.65,0:18:47.99,Default,,0000,0000,0000,,This is called a computed\Nproperty where you see parsedUrl.
Dialogue: 0,0:18:48.30,0:18:50.12,Default,,0000,0000,0000,,It does some functiony stuff\Nand then it has a little
Dialogue: 0,0:18:50.12,0:18:52.16,Default,,0000,0000,0000,,declaration at the end\Nthat says property body.
Dialogue: 0,0:18:52.30,0:18:54.69,Default,,0000,0000,0000,,It means that we're going\Nto depend on the body,
Dialogue: 0,0:18:54.69,0:18:57.73,Default,,0000,0000,0000,,which is the blob of data\Nthat somebody just types in,
Dialogue: 0,0:18:57.73,0:18:59.92,Default,,0000,0000,0000,,the text that they type in.
Dialogue: 0,0:19:00.87,0:19:02.39,Default,,0000,0000,0000,,At any time a person changes that,
Dialogue: 0,0:19:02.39,0:19:03.73,Default,,0000,0000,0000,,any time that changes\Nit's going to observe and
Dialogue: 0,0:19:03.73,0:19:06.40,Default,,0000,0000,0000,,update this parsedUrl\Nproperty on this object.
Dialogue: 0,0:19:08.54,0:19:13.18,Default,,0000,0000,0000,,Now those unit tests will pass\Nand we can start turning that
Dialogue: 0,0:19:13.18,0:19:17.52,Default,,0000,0000,0000,,static content into the dynamic\Ncontent using handlebars.
Dialogue: 0,0:19:18.60,0:19:21.25,Default,,0000,0000,0000,,This lets us kill some\Ncode, that's pretty awesome.
Dialogue: 0,0:19:21.58,0:19:24.89,Default,,0000,0000,0000,,This should get the older\Nacceptance test passing again.
Dialogue: 0,0:19:24.89,0:19:28.82,Default,,0000,0000,0000,,It is the coolest feeling in\Nthe world to write some tests,
Dialogue: 0,0:19:28.82,0:19:31.48,Default,,0000,0000,0000,,take some code, scrub\Nsome garbage out of it,
Dialogue: 0,0:19:31.48,0:19:33.59,Default,,0000,0000,0000,,do something really dangerous feeling,
Dialogue: 0,0:19:33.59,0:19:35.34,Default,,0000,0000,0000,,like jump off the cliff\Nand know, when you rerun
Dialogue: 0,0:19:35.34,0:19:37.59,Default,,0000,0000,0000,,those tests and they start passing again,
Dialogue: 0,0:19:37.59,0:19:39.24,Default,,0000,0000,0000,,and you start getting green\Nagain after a refactor,
Dialogue: 0,0:19:39.24,0:19:40.70,Default,,0000,0000,0000,,it's really fun.
Dialogue: 0,0:19:41.31,0:19:42.84,Default,,0000,0000,0000,,In this case we didn't do that much,
Dialogue: 0,0:19:42.84,0:19:44.23,Default,,0000,0000,0000,,we didn't have to write\Nthat much code because
Dialogue: 0,0:19:44.23,0:19:46.06,Default,,0000,0000,0000,,we let the framework\Ncarry our matched luggage
Dialogue: 0,0:19:46.06,0:19:48.43,Default,,0000,0000,0000,,for it which we cannot live without.
Dialogue: 0,0:19:49.11,0:19:50.82,Default,,0000,0000,0000,,The models hold onto your data,
Dialogue: 0,0:19:50.82,0:19:53.83,Default,,0000,0000,0000,,they keep it up to date and\Nthe changes in the DOM are
Dialogue: 0,0:19:53.83,0:19:56.79,Default,,0000,0000,0000,,just going to automatically\Npropagate out of that.
Dialogue: 0,0:19:58.23,0:20:00.42,Default,,0000,0000,0000,,Now we're going to lean even\Nharder into the framework.
Dialogue: 0,0:20:01.03,0:20:03.48,Default,,0000,0000,0000,,It actually is sort of the\Nfun part, identifying the
Dialogue: 0,0:20:03.48,0:20:05.43,Default,,0000,0000,0000,,states is more fun than\Nidentifying models, I think,
Dialogue: 0,0:20:05.43,0:20:06.70,Default,,0000,0000,0000,,because we get to go back through the
Dialogue: 0,0:20:06.70,0:20:08.34,Default,,0000,0000,0000,,app and pick out what these states are.
Dialogue: 0,0:20:09.16,0:20:11.20,Default,,0000,0000,0000,,In this little widget the first state is
Dialogue: 0,0:20:11.20,0:20:12.95,Default,,0000,0000,0000,,a blank state, a initial state where the
Dialogue: 0,0:20:12.95,0:20:14.96,Default,,0000,0000,0000,,button is just visible\Nand nothing else is.
Dialogue: 0,0:20:15.56,0:20:17.15,Default,,0000,0000,0000,,When we click it the button goes away and
Dialogue: 0,0:20:17.15,0:20:19.09,Default,,0000,0000,0000,,the thing is in a ready-to-save state.
Dialogue: 0,0:20:20.17,0:20:21.92,Default,,0000,0000,0000,,While data is in flight\Nwe're going to disable
Dialogue: 0,0:20:21.92,0:20:24.09,Default,,0000,0000,0000,,the post button, leave\Neverything else the same.
Dialogue: 0,0:20:25.06,0:20:26.46,Default,,0000,0000,0000,,On an error state we're going to leave
Dialogue: 0,0:20:26.46,0:20:28.92,Default,,0000,0000,0000,,the text intact but display a message.
Dialogue: 0,0:20:30.75,0:20:32.55,Default,,0000,0000,0000,,On success we're going to display a
Dialogue: 0,0:20:32.55,0:20:34.32,Default,,0000,0000,0000,,success message and hide the form.
Dialogue: 0,0:20:34.51,0:20:37.16,Default,,0000,0000,0000,,After five seconds we want it\Nto reset to that initial state.
Dialogue: 0,0:20:37.26,0:20:38.85,Default,,0000,0000,0000,,That's kind of the business\Nlogic that we wanted
Dialogue: 0,0:20:38.85,0:20:41.88,Default,,0000,0000,0000,,in the first place but we\Nincrementally built it.
Dialogue: 0,0:20:41.88,0:20:44.70,Default,,0000,0000,0000,,That's an okay way to\Nfind out what you want but
Dialogue: 0,0:20:44.70,0:20:47.08,Default,,0000,0000,0000,,not a great way to ship to\Nproduction, as we found.
Dialogue: 0,0:20:47.99,0:20:49.71,Default,,0000,0000,0000,,The component starts\Nin this initial state.
Dialogue: 0,0:20:49.79,0:20:52.41,Default,,0000,0000,0000,,We bind that state to a\Nclass on the component's DOM,
Dialogue: 0,0:20:53.15,0:20:55.57,Default,,0000,0000,0000,,and then we'll use that later to let CSS
Dialogue: 0,0:20:55.57,0:20:57.69,Default,,0000,0000,0000,,manage what is shown and what is hidden.
Dialogue: 0,0:20:58.31,0:21:00.52,Default,,0000,0000,0000,,We want the DOM to just\Nbe a representation of the
Dialogue: 0,0:21:00.52,0:21:03.34,Default,,0000,0000,0000,,state of the app. The DOM\Nis just there to represent
Dialogue: 0,0:21:03.34,0:21:05.27,Default,,0000,0000,0000,,the app's state at any given time.
Dialogue: 0,0:21:05.37,0:21:07.69,Default,,0000,0000,0000,,It's kind of almost read-only.
Dialogue: 0,0:21:08.11,0:21:10.19,Default,,0000,0000,0000,,Now instead of managing\Nthe DOM with jQuery
Dialogue: 0,0:21:10.19,0:21:11.42,Default,,0000,0000,0000,,we're going to have buttons fire off
Dialogue: 0,0:21:11.42,0:21:13.09,Default,,0000,0000,0000,,actions that just push the state around.
Dialogue: 0,0:21:13.48,0:21:14.76,Default,,0000,0000,0000,,"You go here, you go here,"
Dialogue: 0,0:21:14.76,0:21:18.57,Default,,0000,0000,0000,,they're like the train conductors\Nin a Japanese train station.
Dialogue: 0,0:21:19.31,0:21:21.09,Default,,0000,0000,0000,,It's kind of a lazy developer's state
Dialogue: 0,0:21:21.09,0:21:22.51,Default,,0000,0000,0000,,machine but it's going to do for now.
Dialogue: 0,0:21:23.89,0:21:25.33,Default,,0000,0000,0000,,Step four, that's done.
Dialogue: 0,0:21:25.33,0:21:26.76,Default,,0000,0000,0000,,That was all the code we needed for state.
Dialogue: 0,0:21:27.01,0:21:29.63,Default,,0000,0000,0000,,Step four is to break up the\Nremaining code left in code jail.
Dialogue: 0,0:21:29.81,0:21:31.87,Default,,0000,0000,0000,,The states and model are\Nin place and are tested,
Dialogue: 0,0:21:31.87,0:21:33.60,Default,,0000,0000,0000,,but there's a couple of ugly things left.
Dialogue: 0,0:21:33.73,0:21:36.77,Default,,0000,0000,0000,,Let's look at it. Code jail is not empty.
Dialogue: 0,0:21:36.77,0:21:38.79,Default,,0000,0000,0000,,The legacy code still reaches outside the
Dialogue: 0,0:21:38.79,0:21:41.76,Default,,0000,0000,0000,,component to delete things in a wonky way.
Dialogue: 0,0:21:42.80,0:21:45.60,Default,,0000,0000,0000,,And, heh heh, hi, how are you.
Dialogue: 0,0:21:46.81,0:21:48.76,Default,,0000,0000,0000,,I want to rub your nose in this code,
Dialogue: 0,0:21:48.82,0:21:50.09,Default,,0000,0000,0000,,even though I'm the one that wrote it.
Dialogue: 0,0:21:51.51,0:21:53.41,Default,,0000,0000,0000,,What could possibly go wrong here, right?
Dialogue: 0,0:21:54.75,0:21:58.95,Default,,0000,0000,0000,,This POST is pretty scary.\NIt's painful to modify,
Dialogue: 0,0:21:58.95,0:22:01.73,Default,,0000,0000,0000,,it invites pain for the\Nuser but listing POST
Dialogue: 0,0:22:01.73,0:22:03.83,Default,,0000,0000,0000,,is outside the responsibility\Nof this component
Dialogue: 0,0:22:03.83,0:22:05.97,Default,,0000,0000,0000,,we've created so what can we do about it?
Dialogue: 0,0:22:07.76,0:22:09.21,Default,,0000,0000,0000,,Actually we have a pattern\Nthat we've already laid out.
Dialogue: 0,0:22:09.21,0:22:10.37,Default,,0000,0000,0000,,Let's create another component and
Dialogue: 0,0:22:10.37,0:22:12.04,Default,,0000,0000,0000,,sprinkle it in for listing those POSTs.
Dialogue: 0,0:22:13.14,0:22:15.12,Default,,0000,0000,0000,,Another quick detour in to Ember Data.
Dialogue: 0,0:22:15.31,0:22:16.78,Default,,0000,0000,0000,,At this point I have a choice to make.
Dialogue: 0,0:22:16.78,0:22:20.46,Default,,0000,0000,0000,,Do I want to make sharing\Nthis information with you more
Dialogue: 0,0:22:20.46,0:22:22.90,Default,,0000,0000,0000,,complicated by talking about\NEmber Data and I think I do,
Dialogue: 0,0:22:22.90,0:22:24.79,Default,,0000,0000,0000,,it actually made the\Nnext steps much easier,
Dialogue: 0,0:22:25.06,0:22:27.67,Default,,0000,0000,0000,,and this detour actually\Ntook me about 20 minutes to
Dialogue: 0,0:22:27.67,0:22:30.07,Default,,0000,0000,0000,,replace the model with\Nan Ember Data model.
Dialogue: 0,0:22:30.28,0:22:33.26,Default,,0000,0000,0000,,Ember data is basically a\Nwrapper that talks to AJAX
Dialogue: 0,0:22:33.26,0:22:36.51,Default,,0000,0000,0000,,for you and converts to\Nan Ember model for you.
Dialogue: 0,0:22:38.08,0:22:39.86,Default,,0000,0000,0000,,It buys us lots of good things.
Dialogue: 0,0:22:39.96,0:22:41.79,Default,,0000,0000,0000,,Basically took just a few minutes to do.
Dialogue: 0,0:22:41.90,0:22:46.37,Default,,0000,0000,0000,,That's it, we just declare\Nit as a model on Ember Data.
Dialogue: 0,0:22:47.68,0:22:51.12,Default,,0000,0000,0000,,I like to wire in an ic-ajax,\Njust like we did before,
Dialogue: 0,0:22:51.12,0:22:53.90,Default,,0000,0000,0000,,to Ember Data and this is all\Nthe work that it takes to do.
Dialogue: 0,0:22:54.17,0:22:56.20,Default,,0000,0000,0000,,Fixtures will still work as written.
Dialogue: 0,0:22:56.25,0:22:58.89,Default,,0000,0000,0000,,This was all it took to get\Nthe tests passing again.
Dialogue: 0,0:23:00.26,0:23:02.04,Default,,0000,0000,0000,,That's pretty much it\Nfor the list component.
Dialogue: 0,0:23:02.04,0:23:03.67,Default,,0000,0000,0000,,As you can see I have a delete function,
Dialogue: 0,0:23:03.67,0:23:05.57,Default,,0000,0000,0000,,a place to reference the list, that's it.
Dialogue: 0,0:23:05.57,0:23:08.90,Default,,0000,0000,0000,,It has a list of those posts\Nand a way to delete one of them.
Dialogue: 0,0:23:09.31,0:23:11.88,Default,,0000,0000,0000,,All I'm doing is\Ndestroying a model record.
Dialogue: 0,0:23:13.50,0:23:15.28,Default,,0000,0000,0000,,The second set of tests here is pretty
Dialogue: 0,0:23:15.28,0:23:17.68,Default,,0000,0000,0000,,much going to follow the\Nfirst. This test shows
Dialogue: 0,0:23:17.68,0:23:20.81,Default,,0000,0000,0000,,that the animated gifs\Nshow up as expected,
Dialogue: 0,0:23:21.04,0:23:23.50,Default,,0000,0000,0000,,and from here we can drive\Nout the delete functionality.
Dialogue: 0,0:23:24.24,0:23:27.31,Default,,0000,0000,0000,,We have a second template to\Nreplace the server-side markup
Dialogue: 0,0:23:28.31,0:23:30.53,Default,,0000,0000,0000,,and then we sprinkle it in\Njust like the first one.
Dialogue: 0,0:23:30.60,0:23:32.97,Default,,0000,0000,0000,,We say, "Hey, jQuery, take this\Ncomponent and stuff it in to
Dialogue: 0,0:23:32.97,0:23:35.43,Default,,0000,0000,0000,,"the DOM for me where that\Nlist of posts used to be,"
Dialogue: 0,0:23:35.69,0:23:37.49,Default,,0000,0000,0000,,and Ember is going to\Nshow that for us now.
Dialogue: 0,0:23:37.51,0:23:39.11,Default,,0000,0000,0000,,That's interesting, we\Nhave two components.
Dialogue: 0,0:23:39.11,0:23:40.81,Default,,0000,0000,0000,,How are they talking to each other?
Dialogue: 0,0:23:41.06,0:23:43.31,Default,,0000,0000,0000,,Well they both react to\Nchanges to the underlying data.
Dialogue: 0,0:23:43.31,0:23:46.06,Default,,0000,0000,0000,,There's a pool underneath that is the
Dialogue: 0,0:23:46.06,0:23:47.88,Default,,0000,0000,0000,,same shared data set but the components
Dialogue: 0,0:23:47.88,0:23:49.77,Default,,0000,0000,0000,,are completely isolated from one another.
Dialogue: 0,0:23:49.77,0:23:51.73,Default,,0000,0000,0000,,They can only communicate by altering
Dialogue: 0,0:23:51.73,0:23:53.50,Default,,0000,0000,0000,,that pool of underlying data.
Dialogue: 0,0:23:54.53,0:23:56.59,Default,,0000,0000,0000,,Changes in one place can affect the other.
Dialogue: 0,0:23:57.54,0:23:59.87,Default,,0000,0000,0000,,There's a lot of boilerplate\Ncode we did not write here.
Dialogue: 0,0:23:59.87,0:24:01.26,Default,,0000,0000,0000,,We just trust that the\Ndata layer is going to do
Dialogue: 0,0:24:01.26,0:24:03.55,Default,,0000,0000,0000,,its job and the DOM will\Nrepresent it properly.
Dialogue: 0,0:24:05.18,0:24:07.78,Default,,0000,0000,0000,,One thing that happened though is because
Dialogue: 0,0:24:07.78,0:24:11.21,Default,,0000,0000,0000,,we're not doing stuff\Nwith jQuery UI animation
Dialogue: 0,0:24:11.21,0:24:13.26,Default,,0000,0000,0000,,stuff any more we lost\Nshow hide functionality,
Dialogue: 0,0:24:13.26,0:24:14.56,Default,,0000,0000,0000,,so let's put that back.
Dialogue: 0,0:24:15.09,0:24:16.64,Default,,0000,0000,0000,,We're going to use CSS transitions
Dialogue: 0,0:24:16.64,0:24:17.85,Default,,0000,0000,0000,,which buys a lot of benefits,
Dialogue: 0,0:24:17.85,0:24:21.20,Default,,0000,0000,0000,,including hardware acceleration\Non more modern browsers.
Dialogue: 0,0:24:22.24,0:24:25.37,Default,,0000,0000,0000,,Remember how we bound class\Nname to form state earlier?
Dialogue: 0,0:24:25.56,0:24:28.02,Default,,0000,0000,0000,,We said there was a thing\Nthere that says form
Dialogue: 0,0:24:28.02,0:24:31.29,Default,,0000,0000,0000,,state is bound to the class\Nname for this component.
Dialogue: 0,0:24:31.37,0:24:33.59,Default,,0000,0000,0000,,Now we get these classes\Nfor free automatically,
Dialogue: 0,0:24:33.72,0:24:35.02,Default,,0000,0000,0000,,Ember is going to stuff that in to our
Dialogue: 0,0:24:35.02,0:24:37.31,Default,,0000,0000,0000,,component every time the state changes.
Dialogue: 0,0:24:37.31,0:24:39.77,Default,,0000,0000,0000,,It pushes the state, it\Nchanges the name of the class.
Dialogue: 0,0:24:40.20,0:24:41.93,Default,,0000,0000,0000,,I like to start by creating placeholders
Dialogue: 0,0:24:41.93,0:24:46.34,Default,,0000,0000,0000,,for the various states\Nin a given component,
Dialogue: 0,0:24:47.44,0:24:49.96,Default,,0000,0000,0000,,and then put different\Nbehaviors under those states.
Dialogue: 0,0:24:50.17,0:24:52.36,Default,,0000,0000,0000,,In this you can see it\Nalmost tells a story.
Dialogue: 0,0:24:52.45,0:24:54.33,Default,,0000,0000,0000,,We start an initial state with a height of
Dialogue: 0,0:24:54.33,0:24:56.46,Default,,0000,0000,0000,,zero px and an opacity of zero.
Dialogue: 0,0:25:02.96,0:25:06.06,Default,,0000,0000,0000,,Then once it's in another\Nstate it actually expands.
Dialogue: 0,0:25:06.43,0:25:09.03,Default,,0000,0000,0000,,Everything except initial it\Nwill transition to that state.
Dialogue: 0,0:25:09.67,0:25:11.17,Default,,0000,0000,0000,,We transition open to visible
Dialogue: 0,0:25:11.17,0:25:14.54,Default,,0000,0000,0000,,with a 200 millisecond delay and a ...
Dialogue: 0,0:25:16.14,0:25:18.50,Default,,0000,0000,0000,,You know what, I'm just\Ngoing to show it to you.
Dialogue: 0,0:25:18.50,0:25:21.17,Default,,0000,0000,0000,,It's not great to try to\Nexplain how CSS animations work.
Dialogue: 0,0:25:22.17,0:25:23.12,Default,,0000,0000,0000,,Let's do that.
Dialogue: 0,0:25:31.46,0:25:33.04,Default,,0000,0000,0000,,I think I need to make\Nthat window smaller.
Dialogue: 0,0:25:35.94,0:25:37.65,Default,,0000,0000,0000,,That's great. Thanks Obama.
Dialogue: 0,0:25:41.88,0:25:44.74,Default,,0000,0000,0000,,We're going to submit and now it expands.
Dialogue: 0,0:25:44.74,0:25:47.86,Default,,0000,0000,0000,,Here we're in a validation error state.
Dialogue: 0,0:25:50.81,0:25:52.51,Default,,0000,0000,0000,,We have the gif preview.
Dialogue: 0,0:25:52.53,0:25:54.37,Default,,0000,0000,0000,,We have zero characters\Nbecause that smart preview is
Dialogue: 0,0:25:54.37,0:25:57.19,Default,,0000,0000,0000,,telling us that we're not\Nusing up any characters.
Dialogue: 0,0:26:00.79,0:26:02.77,Default,,0000,0000,0000,,And we'll post it.
Dialogue: 0,0:26:03.75,0:26:05.68,Default,,0000,0000,0000,,Oh, I just got trolled by chrome caching.
Dialogue: 0,0:26:08.97,0:26:13.80,Default,,0000,0000,0000,,This one is just great.\NJulie Andrews is so awesome.
Dialogue: 0,0:26:18.03,0:26:20.40,Default,,0000,0000,0000,,I have many of these that\NI really love very much.
Dialogue: 0,0:26:21.84,0:26:23.55,Default,,0000,0000,0000,,Instead of doing that all day maybe
Dialogue: 0,0:26:23.55,0:26:25.40,Default,,0000,0000,0000,,we should go back to the talk.
Dialogue: 0,0:26:26.88,0:26:28.15,Default,,0000,0000,0000,,What we're not doing is we're not
Dialogue: 0,0:26:28.15,0:26:29.88,Default,,0000,0000,0000,,manipulating the DOM directly.
Dialogue: 0,0:26:29.89,0:26:32.12,Default,,0000,0000,0000,,If we want our tests can\Nactually relax about the DOM
Dialogue: 0,0:26:32.12,0:26:35.22,Default,,0000,0000,0000,,a little bit, we don't need to\Nnecessarily test the framework.
Dialogue: 0,0:26:35.84,0:26:38.46,Default,,0000,0000,0000,,What we can focus on is application logic.
Dialogue: 0,0:26:38.57,0:26:40.89,Default,,0000,0000,0000,,We can still integration test if we want
Dialogue: 0,0:26:42.17,0:26:44.29,Default,,0000,0000,0000,,but let's look back and\Nsee what we've done so far.
Dialogue: 0,0:26:45.08,0:26:48.55,Default,,0000,0000,0000,,There's some old code right here.
Dialogue: 0,0:26:48.55,0:26:50.63,Default,,0000,0000,0000,,Let's see if you can locate\Nthe business logic in here.
Dialogue: 0,0:26:52.79,0:26:54.37,Default,,0000,0000,0000,,Right? You can't.
Dialogue: 0,0:26:54.37,0:26:56.26,Default,,0000,0000,0000,,That's why I'm introducing a powerful
Dialogue: 0,0:26:56.26,0:26:59.14,Default,,0000,0000,0000,,encryption algorithm called jQCS, 512-bit.
Dialogue: 0,0:26:59.60,0:27:01.18,Default,,0000,0000,0000,,It scatters your business logic across
Dialogue: 0,0:27:01.18,0:27:03.04,Default,,0000,0000,0000,,hundreds of lines of jQuery code.
Dialogue: 0,0:27:04.51,0:27:06.21,Default,,0000,0000,0000,,You can stop worrying\Nabout whether hackers
Dialogue: 0,0:27:06.21,0:27:07.92,Default,,0000,0000,0000,,are going to access your\Nbusiness logic in your
Dialogue: 0,0:27:07.92,0:27:10.64,Default,,0000,0000,0000,,front end because even\Nyour programmers can't.
Dialogue: 0,0:27:10.64,0:27:11.98,Default,,0000,0000,0000,,(laughter)
Dialogue: 0,0:27:11.98,0:27:13.52,Default,,0000,0000,0000,,That's cloudgineering folks.
Dialogue: 0,0:27:14.81,0:27:16.18,Default,,0000,0000,0000,,Also a trademark.
Dialogue: 0,0:27:17.26,0:27:19.46,Default,,0000,0000,0000,,That turns out not to be\Nsuch a super hot idea.
Dialogue: 0,0:27:20.56,0:27:22.92,Default,,0000,0000,0000,,We've now refactored\Nthis into a place where
Dialogue: 0,0:27:22.92,0:27:25.14,Default,,0000,0000,0000,,we've moved that encrypted\Nlogic and exposed
Dialogue: 0,0:27:25.14,0:27:27.51,Default,,0000,0000,0000,,it via computed properties,\Nstates and models.
Dialogue: 0,0:27:27.74,0:27:29.70,Default,,0000,0000,0000,,The business logic is\Nactually front and center now.
Dialogue: 0,0:27:30.12,0:27:32.29,Default,,0000,0000,0000,,We've got from this\Nsack of hot garbage to a
Dialogue: 0,0:27:32.29,0:27:34.83,Default,,0000,0000,0000,,tested and documented\Nreliable implementation.
Dialogue: 0,0:27:34.83,0:27:37.100,Default,,0000,0000,0000,,It's not perfect but now it\Nbegs to be extended and reused.
Dialogue: 0,0:27:39.80,0:27:41.92,Default,,0000,0000,0000,,From here what happens\Nnext is really up to you.
Dialogue: 0,0:27:43.27,0:27:45.75,Default,,0000,0000,0000,,From here, most of the rendering that's
Dialogue: 0,0:27:45.75,0:27:47.64,Default,,0000,0000,0000,,happening on the page\Nis being done by Ember.
Dialogue: 0,0:27:47.72,0:27:49.61,Default,,0000,0000,0000,,If you want to replace it\Nand get all the benefits of
Dialogue: 0,0:27:49.61,0:27:52.03,Default,,0000,0000,0000,,having a router underneath\Nyour app, great, go nuts.
Dialogue: 0,0:27:52.33,0:27:56.28,Default,,0000,0000,0000,,You can actually now take\Napplication handlebars and
Dialogue: 0,0:27:56.28,0:27:58.72,Default,,0000,0000,0000,,have it render those to components\Nfor you, and you're maybe
Dialogue: 0,0:27:58.72,0:28:01.06,Default,,0000,0000,0000,,a few hours from having a\Nfull single page application.
Dialogue: 0,0:28:01.39,0:28:03.66,Default,,0000,0000,0000,,Or you can continue to\Nsprinkle in more components
Dialogue: 0,0:28:03.66,0:28:05.76,Default,,0000,0000,0000,,and let your Rails app do\Nall the driving and let your
Dialogue: 0,0:28:05.76,0:28:08.38,Default,,0000,0000,0000,,components do the more dynamic\Npieces of your application
Dialogue: 0,0:28:08.38,0:28:10.82,Default,,0000,0000,0000,,for you with that pool of\Nshared data underneath it.
Dialogue: 0,0:28:12.66,0:28:14.46,Default,,0000,0000,0000,,Now my brain is tired.
Dialogue: 0,0:28:14.67,0:28:16.90,Default,,0000,0000,0000,,Why did we do all this\Nstuff, what even is my life.
Dialogue: 0,0:28:18.41,0:28:22.32,Default,,0000,0000,0000,,We had one job to do, a job\Nthat we were just about to quit,
Dialogue: 0,0:28:23.94,0:28:26.78,Default,,0000,0000,0000,,but right before you became\Nmillionaires in the IPO.
Dialogue: 0,0:28:26.78,0:28:28.46,Default,,0000,0000,0000,,I found out a couple years ago I quit
Dialogue: 0,0:28:28.46,0:28:33.52,Default,,0000,0000,0000,,a job that just recently IPO'd.\NI would be on some yacht.
Dialogue: 0,0:28:35.35,0:28:37.54,Default,,0000,0000,0000,,But we didn't quit,\Nbecause we love our users,
Dialogue: 0,0:28:37.54,0:28:40.99,Default,,0000,0000,0000,,we love our coworkers, and\Nwe want to love our job.
Dialogue: 0,0:28:41.77,0:28:43.65,Default,,0000,0000,0000,,Software development, it really is fun.
Dialogue: 0,0:28:43.83,0:28:46.95,Default,,0000,0000,0000,,It can be frustrating but it\Nshouldn't give you night sweats.
Dialogue: 0,0:28:48.45,0:28:50.23,Default,,0000,0000,0000,,Let's try this one more time against
Dialogue: 0,0:28:50.23,0:28:51.75,Default,,0000,0000,0000,,our new and improved code base.
Dialogue: 0,0:28:51.75,0:28:53.76,Default,,0000,0000,0000,,Once we know the API\Nit's a small test to just
Dialogue: 0,0:28:53.76,0:28:55.71,Default,,0000,0000,0000,,verify that this thing does what we want.
Dialogue: 0,0:28:55.71,0:28:57.79,Default,,0000,0000,0000,,We can add a little\Nfavorite or like feature.
Dialogue: 0,0:28:58.80,0:29:02.12,Default,,0000,0000,0000,,We stub out the data, test that\Na favorite makes it favorite
Dialogue: 0,0:29:02.12,0:29:03.84,Default,,0000,0000,0000,,and an unfavorite makes it unfavorite.
Dialogue: 0,0:29:04.39,0:29:06.23,Default,,0000,0000,0000,,Build a little favorite\Nmodel that talks to
Dialogue: 0,0:29:06.23,0:29:08.95,Default,,0000,0000,0000,,the server and it has\Nmany relationship here.
Dialogue: 0,0:29:09.20,0:29:11.00,Default,,0000,0000,0000,,You can see DS belongs to gifPost
Dialogue: 0,0:29:11.00,0:29:12.78,Default,,0000,0000,0000,,and it has many on the other side.
Dialogue: 0,0:29:13.46,0:29:14.88,Default,,0000,0000,0000,,And add some dynamic content
Dialogue: 0,0:29:14.88,0:29:17.17,Default,,0000,0000,0000,,to the handlebars template.
Dialogue: 0,0:29:18.32,0:29:20.48,Default,,0000,0000,0000,,Then we write a toggle action to create or
Dialogue: 0,0:29:20.48,0:29:23.15,Default,,0000,0000,0000,,destroy the favorite and\Nthat's pretty much it.
Dialogue: 0,0:29:23.79,0:29:26.74,Default,,0000,0000,0000,,If chrome caching will smile upon me
Dialogue: 0,0:29:26.77,0:29:29.66,Default,,0000,0000,0000,,We'll demo that as well, I'm\Ngoing to switch my branch.
Dialogue: 0,0:29:47.26,0:29:49.40,Default,,0000,0000,0000,,Everybody knows this trick, right?
Dialogue: 0,0:29:50.56,0:29:53.09,Default,,0000,0000,0000,,Also everybody knows the\Ntrick of typing rails s.
Dialogue: 0,0:29:55.61,0:29:58.61,Default,,0000,0000,0000,,It's a little known thing,\Nmost people don't know.
Dialogue: 0,0:29:59.05,0:30:01.65,Default,,0000,0000,0000,,It's how you load a Rails server up.
Dialogue: 0,0:30:02.39,0:30:04.36,Default,,0000,0000,0000,,(laughter)
Dialogue: 0,0:30:06.91,0:30:09.14,Default,,0000,0000,0000,,You can see my responsive\Ndesign is so badass.
Dialogue: 0,0:30:09.41,0:30:12.31,Default,,0000,0000,0000,,Woah, star just flies all around.
Dialogue: 0,0:30:13.12,0:30:16.04,Default,,0000,0000,0000,,Now we can favorite this thing.
Dialogue: 0,0:30:16.09,0:30:18.62,Default,,0000,0000,0000,,It's actually talking to the\Nserver on the back end but
Dialogue: 0,0:30:18.62,0:30:20.76,Default,,0000,0000,0000,,it was so easy to do this\Nthat we actually were like,
Dialogue: 0,0:30:20.85,0:30:23.12,Default,,0000,0000,0000,,Well, do you want me to filter\Nthese favorites for you?
Dialogue: 0,0:30:23.12,0:30:26.42,Default,,0000,0000,0000,,I can do that and just\Nshow you my favorite ones.
Dialogue: 0,0:30:26.42,0:30:29.06,Default,,0000,0000,0000,,This one, this is legendary.
Dialogue: 0,0:30:32.97,0:30:34.80,Default,,0000,0000,0000,,(laughter)
Dialogue: 0,0:30:36.03,0:30:38.32,Default,,0000,0000,0000,,(laughter)
Dialogue: 0,0:30:42.97,0:30:45.50,Default,,0000,0000,0000,,(laughter)
Dialogue: 0,0:30:46.77,0:30:49.72,Default,,0000,0000,0000,,Now we have favorites.\NIf I unfavorite something
Dialogue: 0,0:30:49.72,0:30:51.58,Default,,0000,0000,0000,,it will automatically pop out of the list.
Dialogue: 0,0:30:51.58,0:30:54.08,Default,,0000,0000,0000,,I'm not managing any of\Nthis stuff. I just built a
Dialogue: 0,0:30:54.08,0:30:56.56,Default,,0000,0000,0000,,little tiny filter that took\Nlike five minutes to do.
Dialogue: 0,0:30:57.09,0:30:59.73,Default,,0000,0000,0000,,This stuff buys you so much and extending
Dialogue: 0,0:30:59.73,0:31:01.55,Default,,0000,0000,0000,,this actually becomes very fun.
Dialogue: 0,0:31:06.94,0:31:09.81,Default,,0000,0000,0000,,We've changed our relationship\Nnow to this code base,
Dialogue: 0,0:31:09.81,0:31:11.84,Default,,0000,0000,0000,,where we actually like working on it.
Dialogue: 0,0:31:11.92,0:31:13.22,Default,,0000,0000,0000,,We wake up in the morning\Ninstead of feeling
Dialogue: 0,0:31:13.22,0:31:15.58,Default,,0000,0000,0000,,sick about what's going\Nto be in our inbox we're
Dialogue: 0,0:31:15.58,0:31:17.93,Default,,0000,0000,0000,,actually really excited\Nabout what we get to do next.
Dialogue: 0,0:31:20.07,0:31:22.81,Default,,0000,0000,0000,,I just want to tell you as\Nan addendum to this that my
Dialogue: 0,0:31:22.81,0:31:26.08,Default,,0000,0000,0000,,personal story about, my\Nfirst conference was about
Dialogue: 0,0:31:26.08,0:31:31.02,Default,,0000,0000,0000,,four years ago and I think\Na lot of people, can I get a
Dialogue: 0,0:31:31.02,0:31:35.18,Default,,0000,0000,0000,,show of hands of who's hear\Nthat's their first conference?
Dialogue: 0,0:31:37.45,0:31:39.49,Default,,0000,0000,0000,,That's a really great portion of the room.
Dialogue: 0,0:31:39.49,0:31:40.74,Default,,0000,0000,0000,,My first conference,
Dialogue: 0,0:31:40.74,0:31:43.28,Default,,0000,0000,0000,,I went to a hack night the\Nnight after the conference.
Dialogue: 0,0:31:43.37,0:31:45.42,Default,,0000,0000,0000,,It was put on by some really great people
Dialogue: 0,0:31:45.42,0:31:48.28,Default,,0000,0000,0000,,but I walked in, I looked around\Nand I didn't know anybody.
Dialogue: 0,0:31:49.42,0:31:51.54,Default,,0000,0000,0000,,I listened to some people talk.
Dialogue: 0,0:31:51.54,0:31:53.61,Default,,0000,0000,0000,,I was just learning to program.
Dialogue: 0,0:31:53.61,0:31:56.12,Default,,0000,0000,0000,,I was listening to people\Ntalk and they were so smart
Dialogue: 0,0:31:56.12,0:31:57.80,Default,,0000,0000,0000,,and they were people that\Nwere so well known in the
Dialogue: 0,0:31:57.80,0:32:01.35,Default,,0000,0000,0000,,community and I was so\Nnobody that I immediately
Dialogue: 0,0:32:01.35,0:32:03.18,Default,,0000,0000,0000,,turned around, left, ran\Nout of the room as fast
Dialogue: 0,0:32:03.18,0:32:05.52,Default,,0000,0000,0000,,as I could, got in my car\Nand cried and drove home.
Dialogue: 0,0:32:06.08,0:32:08.20,Default,,0000,0000,0000,,Which is pretty awesome,\NI'm like super cool guy.
Dialogue: 0,0:32:08.20,0:32:10.15,Default,,0000,0000,0000,,(laughter)
Dialogue: 0,0:32:10.15,0:32:12.86,Default,,0000,0000,0000,,After that point the\Ncommunity picked me up and
Dialogue: 0,0:32:12.86,0:32:15.09,Default,,0000,0000,0000,,dusted me off and said,\N"Get back in there kiddo."
Dialogue: 0,0:32:15.65,0:32:17.83,Default,,0000,0000,0000,,Many people in that community\Nthat I didn't know in the
Dialogue: 0,0:32:17.83,0:32:19.86,Default,,0000,0000,0000,,room at the time became\Nsome of my closest friends.
Dialogue: 0,0:32:21.37,0:32:23.80,Default,,0000,0000,0000,,These people in this room, if\Nyou'll look around, are some
Dialogue: 0,0:32:23.80,0:32:27.37,Default,,0000,0000,0000,,of your future closest friends\Nand colleagues and mentors.
Dialogue: 0,0:32:28.04,0:32:30.84,Default,,0000,0000,0000,,The community is the reason that
Dialogue: 0,0:32:30.84,0:32:32.60,Default,,0000,0000,0000,,I get to do this for a living,
Dialogue: 0,0:32:32.60,0:32:35.11,Default,,0000,0000,0000,,when before I was doing\Njust horrifying things.
Dialogue: 0,0:32:35.11,0:32:36.72,Default,,0000,0000,0000,,If you can imagine what\Nit would be like to do
Dialogue: 0,0:32:36.72,0:32:38.76,Default,,0000,0000,0000,,marketing for a multi-level\Nmarketing corporation.
Dialogue: 0,0:32:39.64,0:32:42.93,Default,,0000,0000,0000,,Just imagine the existential\Nhell and imagine programming.
Dialogue: 0,0:32:42.93,0:32:44.86,Default,,0000,0000,0000,,We're pretty lucky to\Nget to do this and I want
Dialogue: 0,0:32:44.86,0:32:47.08,Default,,0000,0000,0000,,everybody to have as good\Na time writing software
Dialogue: 0,0:32:47.08,0:32:49.97,Default,,0000,0000,0000,,as I get to have when I'm\Ndoing stuff like this.
Dialogue: 0,0:32:52.24,0:32:53.76,Default,,0000,0000,0000,,The other thing I want\Nto say, the last note
Dialogue: 0,0:32:53.76,0:32:57.53,Default,,0000,0000,0000,,I want to say on community\Nis we have a tendency
Dialogue: 0,0:32:57.53,0:32:59.44,Default,,0000,0000,0000,,to do this tent pole\Nthing where we raise some
Dialogue: 0,0:32:59.44,0:33:02.02,Default,,0000,0000,0000,,people up and then gather\Naround those people.
Dialogue: 0,0:33:02.03,0:33:03.75,Default,,0000,0000,0000,,That's not really what\Na community is about,
Dialogue: 0,0:33:03.75,0:33:06.12,Default,,0000,0000,0000,,a community is a mesh, it's\Nnot like hub and spoke.
Dialogue: 0,0:33:06.75,0:33:08.27,Default,,0000,0000,0000,,Every person in here has something to
Dialogue: 0,0:33:08.27,0:33:09.80,Default,,0000,0000,0000,,contribute and something amazing to do
Dialogue: 0,0:33:09.80,0:33:11.43,Default,,0000,0000,0000,,and I can't wait to go\Nto your talks later.
Dialogue: 0,0:33:11.45,0:33:13.87,Default,,0000,0000,0000,,I'm told I'm pretty good at hugs ...
Dialogue: 0,0:33:13.87,0:33:18.09,Default,,0000,0000,0000,,(applause)
Dialogue: 0,0:33:28.22,0:33:29.89,Default,,0000,0000,0000,,I'm told I'm pretty good at hugs so come
Dialogue: 0,0:33:29.89,0:33:34.45,Default,,0000,0000,0000,,say hi to me and thank\Nyou so much. (applause)
Dialogue: 0,0:33:38.59,0:33:42.100,Default,,0000,0000,0000,,(energetic big band music)