00:00:15.440
Hello, can you hear me okay? Nope! One more time. No.
00:00:28.960
Uh, I have too many slides, like a hundred and seven thousand slides. So.
00:00:34.719
All right, hi! This is Ember on Rails: #REALTALK. That's the name of the talk.
00:00:41.120
I'm Brandon Hays, @bryan_hays on Twitter. I'm a Rails developer by training.
00:00:47.200
Not sure if I'm allowed to tell you who I'm a contractor for; they're an American company in the telecommunications business.
00:00:52.640
The logo looks like the All-Star. All right, I didn't use the program, that's not what we're here to talk about.
00:00:58.079
I am not a fan of animating things in presentations, but this presentation has two animations in it, so bear with me.
00:01:04.080
This is not my story. This is the story of an unnamed developer named Brendan.
00:01:09.600
Okay, he has a name. All right, it's not me, but it’s a similarly named person.
00:01:15.520
Their name is leveling up in Rails and getting to be pretty confident. He always finds it easy to get an application up and running.
00:01:21.119
He knows his Gemfile really well; he can bootstrap an application and have agile development automatically install itself.
00:01:27.360
It's so awesome! Every line of code does like twenty-five things and hires four developers for them.
00:01:33.040
Brendan has quite a few opinions.
00:01:40.640
In a short time as a developer, he's developed a disproportionate amount of opinions.
00:01:46.799
A web page is a document, he believes. It's for displaying content. A simple, flexible web stack is the way to go.
00:01:52.799
You want your web pages to be snappy, and you want to keep your focus on your users.
00:01:59.520
He's from the Church of the 80/20 use case; I think they have missionaries to go two by two and teach people about DHHS’s plan.
00:02:04.640
Focus on the 80, and MVC fits that. It's a great 80 use case for the web.
00:02:11.200
It's thoroughly adopted in the web world, and it separates concerns in a maintainable way.
00:02:17.040
The only problem with this is that it works great on the server, but how much of your app—think about this—how much of your application is actually written in JavaScript?
00:02:22.720
You'll probably underestimate it. If you look at GitHub, it will tell you that a lot of your application is written in JavaScript.
00:02:27.920
So now experts are saying, "Oh, you need MVC on top of your MVC." All right, okay. When does this madness end?
00:02:34.560
So, like, put MVC in your MVC so you can develop web applications while you develop.
00:02:40.640
This is maybe not sitting exactly right; that sounds weird. So, I wouldn’t call him a peer, per se, but maybe a little skeptical that this solution will make him happy.
00:02:47.599
The thing is, there's this problem. Brendan's boss comes in saying, "Oh my gosh! This is just tears streaming down her face. Google Reader is dead! Can you believe this? How could Google do this to me? I have nothing to read anymore."
00:02:54.480
But the good news is times have changed, and we all get our news from Twitter anyway.
00:03:00.040
So, peeking through the noise of Twitter to try to find the news that's relevant and valuable and clicking on links isn’t very good.
00:03:06.080
So let's fix that. Let's build something!
00:03:13.440
Brendan is like, "Okay, let's do it!" All right, get on board. Then all of a sudden, he starts seeing the laundry list of features come down.
00:03:19.440
He starts getting cringy and is like, "Oh, so we want to have multiple types of filters that live update on the screen in real time?"
00:03:25.040
This is going to start to lead down a path where building a sophisticated user interface that involves persistent state.
00:03:31.599
You're going to feel unique and new forms of pain.
00:03:37.040
If you've done this kind of stuff before—and I'm almost certain you have if you work in Rails—you write the controller to serve the HTML.
00:03:43.440
You also have to store the data attributes in the DOM, give the AJAX call to send it to the controller, then grab more HTML to stuff into the template, and catch it on the fly.
00:03:50.000
And we don’t know why they all fly, and they probably all die. Something about this feels a little dirty, right?
00:03:57.120
This is time-consuming. It's like trying to bend the web into this pretzel shape—trying to hold all this info in our heads as we try to debug one simple problem.
00:04:02.640
That's bouncing around a lot of different concerns.
00:04:08.880
But there are jQuery plugins to do pretty much everything that like Rails gems do.
00:04:14.000
Except they also have UI on them, like, 'Oh, it’s got my CSS— it’s awesome!'
00:04:19.199
You have like one plugin, and it helps; two plugins help a little less, and then three plugins start to really hurt.
00:04:25.360
So now you have a couple choices ahead of you: it's one thing to scale back on features, but it's another to scale back on the user experience of those features.
00:04:31.440
I don’t feel like putting Blue X in the corner, by the way. This is all taken from dancing references.
00:04:36.960
So I think we can pretty much dismiss this.
00:04:42.080
But we often subconsciously limit ourselves with what we can do with user experience due to limitations in the technology we're sitting on.
00:04:48.000
So the other choice is that Brendan is ready to take the high road and go ahead and write the ball of mud.
00:04:54.880
What does that look like? Well, literally no one even knows?
00:04:59.680
Sometimes your JavaScript is in script tags, sometimes it's in your Gemfile, sometimes it's in your vendor assets, and sometimes it's in regular assets.
00:05:06.720
Sometimes it’s in your controller actions, and heaven help you if it’s stored in your web folder.
00:05:12.320
But I've worked on that application.
00:05:18.160
Also, I’d like to introduce a new database called DOMdb. It’s a really awesome place to store really important data.
00:05:23.680
And it’s on your web page. So you serialize everything out to your web page and then use that to manipulate the data.
00:05:30.000
But then you suck that back up into your server. The great news is you're already using it!
00:05:36.000
So it's like, 'I already got market penetration!' So maybe that’s not so reliable.
00:05:42.000
And maybe it's kind of hard to chase down problems in it sometimes, in my experience.
00:05:48.000
I don’t know, I try to—I try to think about it. I don’t sleep at night. Brendan doesn’t sleep at night either.
00:05:54.640
So all you can do like Han Solo is just hold on and say, 'Please, please code base, hold together!'
00:06:01.680
The thing is, this was supposed to be fun.
00:06:07.760
We got into this because building web applications is like exponential benefit for some amount of effort.
00:06:13.520
But every tweak and every feature that we add seems to break previous ones.
00:06:19.680
And you're suddenly doing stuff with JavaScript that you may not completely understand.
00:06:25.680
Like prevent default, stop propagation, stop immediate propagation! Okay, events are bound to this.
00:06:31.760
All right, I am now officially underwater!
00:06:37.840
He just wanted to build cool stuff, but this took all the fun out of it.
00:06:43.840
Trepidatiously, he steps toward a JavaScript framework. He's desperate enough to try something.
00:06:51.120
This framework promises to bring sanity instead of the fragile code we often rely on.
00:06:56.640
But the real question here is, can Brendan ever be happy using a JS framework?
00:07:02.240
Because it's about developer happiness—that's the mission of Ruby, and that’s what we’d like to carry forward.
00:07:08.800
Even when we work in other languages, there's a trick to this.
00:07:15.280
There's a proliferation of JavaScript frameworks out there. Look at Sammy, Backbone, Spine, Angular, Knockout, Batman.
00:07:22.080
I could invent names of like six more and you’d believe me, so.
00:07:29.360
The number one concern here is whether these frameworks are going to be around a year from now.
00:07:35.360
They're supported and continually used.
00:07:38.160
I have a couple of dead ones in codebases that are no longer maintained. That's not super fun.
00:07:44.800
Brendan tried several, for various reasons, that we will not get into until if we have time for bonus slides.
00:07:50.560
He landed on Ember, so let's take a shot at it! All right, let’s get going here!
00:07:56.679
All right, install Ember. Okay, and from the command line, you run 'rails generate ember:bootstrap'.
00:08:02.879
Now you have Ember in your application.
00:08:08.800
But there are always some challenges. There are talking challenges.
00:08:14.479
The initial challenge is: hey, wait a minute! Ember wants to own big chunks of the UI.
00:08:20.800
It's not like it can just be dropped into an existing app.
00:08:27.280
From that point forward, when you drop it in, it kind of wants to drive.
00:08:33.680
This is a little more than just a sprinkling of JavaScript that we’re told we should want.
00:08:40.000
But Brendan goes ahead and soldiers on.
00:08:46.240
He jumps in and says, "All right, like, how do I get going with this?"
00:08:52.080
Gosh, it’s just not that much code. You create your controller and set up a basic controller.
00:08:58.480
Route everything to that. If you want a full Ember-controlled web application, route everything to Ember and say, 'You handle this! I don’t feel like it.'
00:09:04.080
Getting an app out into the world from the Ember site is really minimal.
00:09:10.480
You define a router, tell it to go somewhere, and spit out some text in your application, like your application.html.erb.
00:09:16.080
And we’ll talk about that outlet thing in a second.
00:09:22.800
All right, we have hello world! Okay, everybody knows Ember, and this will save us a huge amount of time building a web app.
00:09:28.080
The reality is it's more complicated than that, but to get into the next step, Rails has taught us many things about MVC that are not bad.
00:09:35.040
They just don't fit.
00:09:41.120
One thing is that models are pretty much what you're already expecting them to be.
00:09:46.400
Models have two jobs: they define and hold properties for domain models.
00:09:51.760
They also retrieve and persist changes, although that's kind of added in if you decide to use a persistence framework.
00:09:57.440
Routes are already going to be way off what you expect. Now there's something called app/router.js.
00:10:03.440
We’ll look at it in a minute.
00:10:09.280
It’s pretty much what you would think a routes file should look like, except it passes to a route handler.
00:10:15.360
That does a bunch of heavy lifting, like grabbing a model object, stuffing it into a controller, and passing it along.
00:10:20.080
That sounds a lot in Rails like what a controller does.
00:10:26.080
So what the heck are these for? Well, controllers are not at all like Rails controllers.
00:10:33.280
They are purely for decorating the model to add logic for display.
00:10:41.600
This is just pointing out that these are different from what you’re expecting.
00:10:48.400
And there’s something else I’ll show you where I'm not gonna even try explaining as well as someone else did.
00:10:55.600
Views are also not what you expect. They’re not templates.
00:11:02.320
I've sort of broken myself of the habit of calling templates views. Rails even has a view layer in between what a controller does and handing off to the template.
00:11:08.240
That is pretty much hidden from you, but you can grab hold of it and start messing with it.
00:11:14.079
They’re optional. They’re just for handling user input and display logic.
00:11:20.319
Lastly, it uses Handlebars for templating. I don’t know if any of you have used Handlebars or any of its kissing cousins for Rails stuff.
00:11:26.000
But it’s actually pretty cool. Handlebars is really powerful. It’s not like Mustache; it’s very logical and very militant about not putting any logic in your template.
00:11:32.320
Handlebars is like its cooler cousin that says, "Yeah, you can snug; just go outside. Just don't put it in a helper."
00:11:38.560
It has features like 'else' for zero state.
00:11:43.760
So I explained this poorly at an Ember.js meetup that someone else felt compelled to give an entire talk fixing all the stuff I broke.
00:11:50.560
They even turned it into a screencast that I highly recommend you check out, regardless of if you use Ember or not.
00:11:56.720
But breaking down the concepts of Model-View-Controller from the ground up.
00:12:01.840
Even more challenges. Brendan goes and searches for help.
00:12:06.800
He’s trying to build his application and searches for help on the new router.
00:12:12.560
Scumbag Stack Overflow returns clear and concise answers on a syntax that nobody's used for over a year.
00:12:20.160
So he thinks, "What?! All right, every data.
00:12:25.600
We need to persist data to the database, and Brendan could only find Ember Data.
00:12:31.120
Or you could try to figure out how to write the entire persistence layer from scratch yourself, because, I guess, that's kind of JavaScript culture.
00:12:37.520
Except the only persistence library in town was publicly declared to be not ready for public consumption.
00:12:44.640
Okay, wait, what? And then keeping up with the framework!
00:12:50.880
Multiple betas, RC1 through RC6, and now RC6.2.
00:12:56.960
Ember Data, Beetles, Handlebars betas, and every single upgrade seemed to break some subtle dependency between all three.
00:13:02.240
You're triangulating this stuff and fixing things that broke, and Brendan beautifully went through this process over and over again.
00:13:08.640
I'm sorry, what?
00:13:15.440
So, the thing is these challenges are specific to picking up and running with a brand new framework in beta.
00:13:23.120
That is just the long and short of it. You have to understand that this is more like Rails 0.14.3.
00:13:31.040
If any of you are old-timers enough to remember that—I’m literally not.
00:13:37.280
But my old-timer friend helped me with that, so it’s not Rails 3.
00:13:43.360
It’s not Rails 2.3, and it’s certainly not Rails 4 yet.
00:13:48.640
So, we understand now we’ve got the boilerplate done. We’ve covered the core concepts.
00:13:55.920
We’ve accepted this is a framework that's a little bit in flux, although stabilizing.
00:14:02.080
But we need to build a Twitter news feed reader. Let’s get going! You ready to get going?
00:14:09.120
Let’s dive in!
00:14:15.040
So we want to start reading shared links through Twitter. We’re going to design our URLs right up front.
00:14:20.800
The first thing that we do is decide, 'All right, we have a theme called shared items.' It is a thing.
00:14:27.359
Immediately we see that there’s a nested shared item. If you use Rails, this should look pretty familiar.
00:14:33.920
Not super evolutionary when using the history API, but you can use the older style if you have to support older browsers.
00:14:39.440
There’s also now that passes to a route. So instead of a controller immediately taking that on, we're actually pointing it to a route.
00:14:46.080
That decides what controller comes next.
00:14:51.840
And here we’re going to go grab all the shared items. This is actually using Ember model to go grab all the shared items from the Rails server behind the scenes.
00:14:58.720
And pass that to the controller of the same name.
00:15:04.640
So it’s important to note we’re not writing this controller yet; we’re skipping right over that.
00:15:10.560
Ember wrote that controller for us.
00:15:15.760
So all Handlebars is doing is saying, 'Hey, we got a model here; let’s iterate over it and link to each one.'
00:15:21.760
And if there isn’t anything, we’re going to say, 'No items!'
00:15:28.000
That’s that cool 'else' helper on iterators; it’s just really handy.
00:15:34.000
And then outlet. What is that outlet for? That outlet is actually tied to the nested route.
00:15:40.000
So we have shared items, which has a collection of shared items.
00:15:47.680
We decided that underneath that route when somebody clicks on a link that goes to the route, it will take you to the shared item.
00:15:53.520
That’s this super complicated code! Look out, everybody—it’s got a URL in it!
00:15:59.360
Don't worry, I’ll show you a little more about how this fits together visually in a second.
00:16:05.440
API, it’s just Rails.
00:16:12.000
The thing is this style of coding will change the way you think about building web applications.
00:16:18.640
Thanks to ActiveRecord, Rails is super awesome and wonderful, but it’s database dominated.
00:16:25.360
You think about, from day one, from minute one of your application, how is this theme going to be stored?
00:16:33.200
You become experts on data normalization just by nature of using ActiveRecord to persist.
00:16:39.040
And Ember is URL and user experience dominated. How is this thing going to be used?
00:16:46.320
This structure of taking this data putting it into a pool, out of your server to your client, and letting the client then do whatever they want—
