Ember.js and WordPress Combined
Filed under: Projects — posted by Rob on September 25, 2013
UPDATE (11/1/2013): Time got away from me on this project. Interestingly enough, I started working on a web application project in October 2013 that heavily used AngularJS, so by necessity I was forced to learn that. I prefer Angular to Ember in a lot of ways (and it obviously helped when you’re more familiar with something), so I think I will be using that in the future. In either case, this idea of bolting a JS frontend to a WordPress blog was kind of silly and I’m not planning on going further with it.
After following along with a couple screencasts, I felt naively confident in my skills and trudged deep into a weird project idea I had: create a WordPress theme which fetches the blog posts dynamically using Ember. Perhaps I got the idea because the Getting Started screencast is creating a blogging platform, or maybe it’s because I am obsessed with WordPress theme development. The problem is that it turns out I had no idea what I was doing. I hit about fifteen and a half brick walls, but after much hacking together of code I managed to get something sort of working. My initial version used a really hacky “bridge” layer between the Ember app and WordPress’s XML-RPC API, but I quickly ditched it for the JSON API provided by this plugin.
My intention is to use this theme as the new layout for this blog, but before I do that I need to figure out a way to maintain the current URLs. I’ve written my Ember routes to keep the WordPress style permalinks which I’ve got configured on my site, but this doesn’t escape the “#” which appears in all Ember URLs. There seems to be ways around this with .htaccess, but I’m not sure how I can simultaneously keep images and other links working while rewriting all of WordPress’s URLs to include the ‘#’. I’m thinking it may be best to implement this redirection on the WP side of things, rather than meddling with .htaccess and potentially breaking many things. We’ll see what I can come up with…
Even in its working state, this EmberWP theme has almost zero features of WordPress aside from pagination and viewing posts. I still need to add the following features:
- Category filtering
- Date archives (more filtering)
- Actually using Ember properly (maybe this means using Ember Data 1.0 Beta?)
- Better handling of mobile (remove that padding!)
- Code cleanup as I learn Ember better (since I bet I’m doing it wrong)
The current code base can be accessed on Github.