Rails and EmberCLI: an integration love story

by Jonathan Jackson

The video titled 'Rails and EmberCLI: an integration love story' features Jonathan Jackson discussing the historical interaction between Rails and Ember.js at RailsConf 2015. Jonathan starts by introducing Ember.js, highlighting its MVC architecture and important aspects such as routing, models, views, and controllers, and explaining why it appeals to Rails developers.

Key points outlined in the presentation include:
- Shared Foundations: Both Rails and Ember emphasize conventions over configuration, allowing developers to quickly build applications without excessive micro-decisions.
- Common Terminology: Despite some differences, the shared nomenclature between the two frameworks helps Rails developers transition to using Ember seamlessly.
- History of Integration: Jackson navigates through the historical context of Rails and Ember integration, mentioning the initial usage of globals, the development of the Ember Rails gem, and the shift towards Ember App Kit.
- Emergence of Ember CLI: He discusses the introduction of Ember CLI in 2014, which improved asset management and project structure, and how it positioned itself as a more robust tool compared to prior tools.
- Challenges of Integration: The separation of concerns between Rails and Ember could complicate testing and deployment, leading to complexities in managing full-stack applications.
- Ember Rails Gem: This gem serves as a lightweight interface, allowing for smooth operations between Rails and Ember without extensive interference.

Through anecdotes and personal insights, Jonathan illustrates the importance of continuous improvement and active dialogue in integrating both technologies. He concludes by urging developers to consider how Ember CLI can be a cohesive part of their Rails applications, emphasizing integration's role in enhancing overall development workflows.

In summary, the primary takeaway is the potential for productive collaboration between Rails and Ember, supported by a community-driven focus on usability and efficiency in development practices.

00:00:12.200 Hey, welcome to my talk. It's called 'Ember's Rails: An Integration Love Story.' I wrote the title before I wrote the talk, so the 'Love Story' thing has been done better by other people, making this more of a history of the interaction between Rails and Ember. Thus, the title is not necessarily relevant to the rest of the talk.

00:00:20.760 My name is Jonathan Jackson. I work at a company called Hashrocket; it's pretty cool. You can reach out to me at these relevant links. If you want to take the time to go back to maybe 2014 or so, you can visit my blog, which is probably the last time I blogged there. Feel free to email me anytime you want if you have any questions.

00:00:33.239 I mentioned I work at Hashrocket, and there are these great people here—they're very supportive. I think that is what I would most define them by. This is my project manager; the first thing he said to me before I started this talk was, "You're the worst and you're going to blow it, but remember, you're the best and you got this." He's kind of being wishy-washy.

00:00:46.960 Not just the rocketeers are currently in service, but we also have Rocketeer Alumni who try to jump in here and help out. This morning, about two hours ago, I expressed that I was excited and nervous; I had a picture, but it’s not there. My friend Taylor Mack, who’s working with me on a very large Ember app, said as long as you use a lot of GIFs, you’ll be fine, but I don’t have any. So, once again, I failed him.

00:01:09.600 Once again, Hashrocket is pretty cool, and we're also hiring.

00:01:13.720 A bit of an Ember fanatic, I’ve been interested in Ember for a long time. To that end, I recently organized a group called EmberJAX, which is a Jacksonville Ember Meetup group. With the help of TIY and Lindsay Wilson, we were able to get this really cool tomster made up for us. It's a paddle boarder. If you've never seen a paddle boarder, come to Jack Beach. If you're ever in Jack Beach, you should come to our meetup; it'll be fun.

00:01:27.160 I also co-host Ember Weekend, which is a podcast that discusses Ember-related topics, focusing mostly on news and things we’ve learned while dogfooding Ember apps. So, check that out. Maybe there will be a shameless plug at the end if we have time.

00:01:38.160 So, yeah, I'm Jonathan Jackson, and I’d like to share a bit about my history with Ember. Lately, I’ve been working on a very large Ember app with a lot of complexity. It's been both challenging and fun. To that end, we created the titular gem, Ember CLI Rails, and we’re dogfooding it in this large complex app.

00:01:55.680 I just wanted to mention that quickly as an introduction. I'm going to give you a plan of what I’ll be covering. It’s going to be pretty basic. I was fortunate to have Sandy Metz help me with this talk a little bit, especially with basic slide etiquette and how to engage with the crowd. She advised me to "give the talk that you would have wanted to see six months ago," and I’ve tried to do just that.

00:02:21.880 However, before we dive into that, I need to give you a brief introduction to Ember.js so that we’re all on the same page and speaking the same language. After that, we'll talk about the history of Rails and Ember, and how these two tools have historically interacted. We will discuss how Rails developers have utilized this front-end framework.

00:02:44.720 Then, I'll introduce you to the Ember CLI Rails gem, of which I am a co-author and maintainer, along with Shay Doyle and Pav. This gem is our attempt to help facilitate and smooth over some rough edges that will become more clear soon. Finally, I’ll discuss the goals of the Ember CLI Rails project and what we want to accomplish; it’s a bit more complex than it sounds, but this covers the end of the talk.

00:03:09.480 To start with the brief introduction to Ember.js, Luke K. mentioned a quote in a talk back in 2012, stating that "98% of building an app is understanding your layers and knowing where your code should go." This is something that resonates a lot with Rails developers.

00:03:23.520 We want to get up and running quickly with new apps and new ideas. Once you know where things should go, the entire process becomes much easier. Ember takes this to heart, and it's part of its main philosophy, which is to compartmentalize elements so that their functions and purposes are clear.

00:03:43.200 Many people call this an MVC framework—a front-end MVC—which sometimes receives a bad reputation from some perspectives. However, it’s not quite just an MVC; it’s more like MVCR+. I had another slide about this breakdown that demonstrates how it evolves beyond just those initials.

00:04:01.760 So, let's talk about the router first. Although that’s at the end of the acronym, I’ll put it first because Ember emphasizes it. The router is the means by which you serialize your data, nest your UI, etc. The guiding principle is that you should be able to copy and paste your URL, and it should boot into the same state your application was in. It deals with application state and utilizes HTML5 APIs along with some fallbacks to ensure that URLs are updated per route transition.

00:04:20.040 This allows for usual behaviors like the back button to work as you'd expect. Now, moving on to models in MVC, models are for persisting objects, although it’s not entirely accurate nor detailed enough. Other objects manage serialization and deserialization and also maintain persistence in the back end, such as serializers and adapters.

00:04:36.720 I like to think of models as schemas that provide the minimum set of information needed for these other objects to do their jobs correctly. Views handle DOM interactions and transition DOM events into semantic events. For instance, when I click on an action, I should handle the click event with a function and transition that click to a more semantic context like 'add user.' This allows us to reference it meaningfully within our system rather than just as random click handlers.

00:05:00.120 Now, controllers are responsible for providing data for the view layer to render. They handle computed properties, which are long-lived, meaning they don’t disappear when you transition routes. They only go away during a hard refresh or when manually torn down.

00:05:24.360 Understanding the long-life nature of Ember gives you substantial power and flexibility. Now you have a brief primer on Ember. I realize it's very basic, and there are deeper talks you can reference if you're interested.

00:05:39.720 Next, why is Ember.js appealing to Rails developers? This is an interesting question I find myself pondering as I see all these frameworks around: why would I choose Ember?

00:05:59.920 First, let's mention Yehuda Katz, who was part of the Rails core, starting in 2008, and worked on the Merb merge, leading to Rails 3 in 2010.

00:06:07.680 He remained on core, doing great work until 2014, and in 2011, Ember was released. The important takeaway here is that there's a crossover of ideas; many pains he experienced while working with Rails informed solutions he implemented in Ember.

00:06:31.680 Then there’s the mantra taught to all new Rails developers: "convention over configuration." You should be able to quickly get up and running with Rails and Ember without making a plethora of micro-decisions at the project's inception.

00:06:49.640 A lot of decisions should be left to the community at large, so you have a rich and varied understanding of the problem space. This truly resonates with many Rails developers.

00:07:03.360 Shared nomenclature is another point. It's important to note that views and controllers are not exactly the same in Ember as in Rails, but there’s enough shared understanding to provide a quick reference for Rails developers.

00:07:23.200 When you see Ember, you think, "Okay, I understand the logic, the structure, and where to place things." This shared nomenclature fosters rapid concept mapping, enticing developers to build quickly.

00:07:51.680 Next, there’s emphasis on meaningful URLs. Rails handles this well, typically being restful. Ember takes a slight shift to ensure that URLs represent UI nesting. The critical point is Rails developers are already accustomed to considering the URL as a first-class component.

00:08:27.080 Finally, both frameworks emphasize testing. Ember strives for comprehensive testability to help you ensure your code functions reliably when deployed. Rails echoes this focus, encouraging you to test thoroughly.

00:08:49.640 In summary, Rails loves Ember because they share these commonalities, creating productive environments for developers. There was a survey released following EmberConf 2011, and one question investigated preferred server-side technologies among Ember developers.

00:09:05.799 The findings indicated that over 50% of respondents preferred Rails as their backend—Ruby Rails—because it can significantly enhance productivity. This points to why Rails developers frequently gravitate toward Ember.

00:09:22.879 Now, I want to discuss the history of Rails and Ember, illustrating real events that occurred. Initially, Ember utilized globals inline in templates from around 2011. You can see inline templates embedded into HTML with include tags to load all of Ember’s dependencies.

00:09:46.399 This example demonstrates a simple Ember application looping through a model and printing 'red, yellow, blue'. This method of working with Ember still exists, and you can experiment with it using EmberJS Bin.

00:10:08.119 Around the same time, Rails developers recognized the need for a tool to integrate these two technologies, leading to the creation of the Ember Rails gem. This gem simplified the integration process.

00:10:34.640 While the gem was simple enough, the pattern often involved adding 'Rails' to the end of whatever Ember was doing. For a successful web application, you generally need to manage your APIs, testing, asset compilation, serving assets, and provide quick generators.

00:10:57.680 Using globals, this gem offers a way to define these elements within a solid file structure, leveraging string concatenation for proper asset pathing.

00:11:16.000 Problems did arise, such as difficulties in upgrading Ember.js dependencies due to the reliance on the gem to maintain these relationships. It was important to note that the gem was maintained from 2011 until 2013 and continued to receive updates from Ember core for legacy applications.

00:11:43.920 This illustrates the Rails community's dedication to aiding Ember developers by ensuring compatibility with existing legacy apps.

00:12:01.040 As the years went on, Ember App Kit emerged in 2014, serving as a precursor to Ember CLI, aiming to address and streamline common challenges developers faced during project builds.

00:12:22.280 With the goal of improving JavaScript development, Ember App Kit presented architecture and building tools that enhanced developer experience, particularly via functionalities like ES6 versioning.

00:12:47.680 While Ember App Kit aimed to provide a starter structure, installing it often required cloning the Ember or Ember App Kit repository and then reconfiguring, presenting challenges in upgrading.

00:13:09.040 To address issues around upgrades, the Rails community once again rallied and decided to make a gem to allow Euro Rails developers to transition to Ember App Kit naturally. This gem included Rails generators for App Kit resources, and those generators were not just shell commands—they were rewritten in Rails.

00:13:29.760 Both the Ember App Kit developers and those in the Rails community faced tasks of keeping their projects in sync.

00:13:47.080 This created some pain points due to the extra overhead involved in maintaining compatibility. Eventually, Ember CLI was announced at EmberConf 2014 with the goal to simplify the build process.

00:14:01.280 Ember CLI introduced a more robust tool for managing assets. It replaced Grunt with Broccoli, leading to significant improvements in asset pipeline management.

00:14:22.560 The upgrade path was a major focus of Ember CLI. By providing a command-line interface, it aimed to reduce the complexities of maintaining project structure while still offering the benefits of scaffolding.

00:14:42.960 However, Rails developers chose to separate the architecture, focusing on specialization. While this separation allows for independent testing of both Ember and Rails, it can complicate overall integration.

00:15:05.160 Some pitfalls are associated with this approach, particularly regarding full-stack acceptance testing. It is possible to set up through proxies or development tools, but establishing conventions can become quite ad hoc.

00:15:30.720 Handling existing applications is also fraught with difficulties. When transitioning to use Ember, numerous development teams have encountered challenges, particularly with rewrites and adopting new technologies.

00:15:53.240 Also, deployment efforts can become significantly more complex due to the need to define conventions on asset serving from Rails or via CDN and ensuring mutual compatibility.

00:16:14.720 Despite these issues, the Ember Rails gem exists to bridge the gap between these technologies, providing essential connections while minimizing interference.

00:16:30.160 This gem, however, functions as a lightweight interface. It allows both Ember and Rails to operate independently while managing some common integration tasks without intervening heavily.

00:16:56.040 It aims to preserve the developer's ability to utilize both frameworks effectively, reducing redundancies and improving the overall development experience.

00:17:13.480 User requests invoke an interaction between Rails and Ember. Rails intercepts the request to build the Ember assets, ensuring the necessary files are available, and can serve multiple Ember applications.

00:17:39.720 This method aims to streamline how users navigate through the applications. The separation allows each side to maintain its strengths while still providing a cohesive experience for the end-user.

00:17:55.600 Utilizing the Ember app simply requires appropriate configuration. Upon initializing the Rails app, developers can point it towards where the Ember files are located and establish a root path for the integration.

00:18:15.880 With that, you can render the Ember assets and styles directly into your Rails layout. This configuration results in greater flexibility and allows seamless interactions between the two frameworks.

00:18:38.760 Our goals for the Ember Rails project include continuous improvements and maintaining an active dialogue around how we can best integrate the two frameworks.

00:19:02.680 It's essential to keep the Ember Rails gem light and focused on offering fundamental features. This will enable developers to freely navigate between the two technologies without being bogged down by weighty integrations.

00:19:25.720 In closing, I’d like to thank Hashrocket for providing time to work on this talk, as well as the support from Sandy Metz and Terence Lee for refining the slides. I truly appreciate their help.

00:19:45.680 As we move forward, I encourage you all to explore how Ember CLI can fit into your Rails applications—not just as a bolt-on solution but as a cohesive part of your development efforts.

00:20:02.399 Thank you for listening! I hope you found this talk helpful and engaging! Let's work together to develop awesome applications using both Rails and Ember.