My current project, an online student assessment tool, involves adding features to a Rails app built in the 2011/2012 Rails 3 era. The app was also built using Backbone.js, a custom templating language, and raw JSON responses. It was developed using good development and design practices (such as TDD, SRP, etc.), but many of these technologies have been superseded by modern frameworks such as Ember.js or Angular. Active development on this project was not going to be easy or fun.
ember-cli-rails helps solve many of these problems, so we decided to carve off a chunk of the app to convert to Ember.
What is ember-cli-rails?
ember-cli-rails is a library for merging the two worlds of Rails and Ember. It allows you to embed Ember.js apps (even pre-existing ones) within Rails apps in a clean and simple way.
Here are some of the benefits of using Ember CLI Rails (from their website):
- Keep up to date with latest npm modules and EmberCLI addons via
embercommand - Inject Rails-generated content into your EmberCLI app
- Avoid cross-origin woes
- Enable easier end-to-end testing
This is a great tool for greenfield development, but we’re not always fortunate enough to be doing greenfield development in the tech stack of our choosing.
Why Use a Hybrid Approach?
Luckily, we have a nice, mostly isolated section (student assessments) that would benefit from conversion to Ember. Here are some of the benefits of this approach:
- Helps update older technology
- Improves user experience through a single-page application
- Speeds up development of new features
- Uses existing styles and site-wide JavaScript
- Integrates with Rails’ existing asset pipeline, including finger-printing
- Easily adds more Ember mount points to convert the site in lower-risk chunks
Bringing in EmberCLI Rails
The installation and setup was very straightforward. For a basic setup, all you have to do is follow the README. Here are a few other things I did to make ember-cli-rails play nicely with my pre-existing site:
- Upgrade ActiveModelSerializers from 0.8 to 0.10
- Create new serializers that adhere to the expected JSON API
- Revise and create new API endpoints using the new serializers
- Manually convert JST templates from Haml to Handlebars
Moving the Embed Ember.js Project Forward
Please note, this plan is not for the faint of heart. We’re able to mitigate some of the risk by updating one part of the app at a time, but it’s still a partial rewrite. We will be investing weeks of the team’s time to convert the current working feature set before we can reap any of the benefits.
However, it is worth the risk to update our technology, improve the user experience for students, and speed up future development. ember-cli-rails has done a great job of sweating the details, getting out of my way, and letting me spend time building the features I want. As the project progresses, I’m sure I’ll be posting updates of our wins and losses, but I’m excited to see where this takes us.