Ember on Rails: #REALTALK

Talks

Brandon Hays

#model-view-controller-mvc

#single-page-applications-spa

#user-experience-ux

#frontend-development

Ember on Rails: #REALTALK

by Brandon Hays

The video titled "Ember on Rails: #REALTALK" presented by Brandon Hays at the LoneStarRuby Conf 2013 explores the synergy between Ember.js and Ruby on Rails for building web applications. Hays narrates the journey of a hypothetical developer, Brendan, who transitions from being a proficient Rails developer to adopting Ember.js for a news feed application.

Key points discussed throughout the video include:

- Developer Transition: Brendan, a confident Rails developer, faces challenges when trying to enhance user experience with JavaScript-heavy functionalities. He initially struggles with traditional approaches that become cumbersome with complex user interfaces.

- The Need for JavaScript Frameworks: The talk outlines Brendan's realization that JavaScript frameworks can simplify development; however, he remains skeptical due to the overwhelming number of frameworks available and their varying degrees of longevity and support.

- Choosing Ember.js: After considering several JavaScript frameworks, Brendan selects Ember.js for its promise of stability and structure in building single-page applications.

- Installation and Initial Setup: The journey begins with simple installation commands in a Rails application that integrate Ember.js, highlighting that Ember will attempt to control large parts of the UI after installation.

- Core Concepts of Ember: Hays discusses key aspects of Ember’s architecture, contrasting it with Rails. He explains how models, routes, and controllers in Ember differ from expectations based on traditional MVC patterns in Rails, particularly emphasizing the role of routes and the use of Handlebars for templating.

- Challenges Encountered: The presenter describes several issues Brendan encounters while adapting to Ember.js, including a lack of documentation and changes in Ember Data and its associated libraries during ongoing updates.

- Approach to Building the Application: The video details how to structure a Twitter news feed reader using Ember, which demonstrates the framework’s strong focus on user experience and URL management over traditional data management paradigms.

In conclusion, the video provides insight into the learning curve and the conceptual shift required when integrating Ember.js with Ruby on Rails, illustrating the benefits and challenges of building dynamic web applications using this pairing. The key takeaway emphasizes the importance of developer happiness and creating seamless user experiences, encouraging developers to embrace new frameworks for ambitious projects.

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—

LoneStarRuby Conf 2013