RentMe – an AngularJS based experiment
I’ve just moved to New Zealand and have been poking around various websites to get an idea of rental prices and the kind of places you can rent in Wellington.
One of the main websites for finding rental properties in New Zealand is TradeMe. Actually, TradeMe is used for pretty much everything in New Zealand and accounts for over 60% of internet traffic originating in New Zealand.
TradeMe is a great site which is well made and easy to use, but after using the beautifully slick AirBNB site I thought it’d be fun to have a play with AngularJS and the TradeMe API to make something similar.
So here’s what I knocked up over a few days at rentme.suniljolly.com
The code is on GitHub if you want to have a poke around or a play:
Code quality disclaimer – being an experiment, I haven’t optimised the code or kept it too tidy. It’s a bit rough around the edges since the goal was to create the experiment quickly and I’m not planning on doing much further development on it. Feel free to refactor it and send a pull request if you want to 🙂
I’ve had a play with AngularJS before, but haven’t done anything as involved as this. Angular is well known for having a small learning curve followed by a steep learning curve once you start getting into the nitty gritty of it, so I was interested to see whether something of this complexity would throw up issues.
The app was bootstrapped using the excellent angular-seed which gets you up and running with a few views, npm and bower setups and BDD and end to end testing – which is a real time saver. Visually I’ve taken a lot of cues from AirBNB as you can see! It has some simple styling to make it work across browser sizes.
When the app loads it pulls in a list of regions from the TradeMe API and uses a repeater to add them to the page. After clicking the routing takes you to the property result view, passing the url params into the controller and this then loads the results from the TradeMe API for that region. Again, a repeater places all the results on the page nicely.
Filtering of properties is done using a custom filter and is a bit of a cheat because it doesn’t go back to the server and instead filters on the results you’ve already got. For the purposes of this experiment it was fun to try a custom filter. The filter sliders are done with the lovely ionrangeslider JQuery plugin.
So – what were the challenges?
- End to end tests don’t have the ability to mock out server calls out of the box. You can add this in using http-backend-proxy, but for this experiment I ended up using the e2e tests as a smoke test to ensure pages were loading and something was displayed since tying the tests to results from the TradeMe API wouldn’t work.
- There are several ways to structure the code as your application grows. One of my files contains a Controller, Filter and Directive in it, but those are probably better split into their own files.
- Integrating the JQuery plugin took a little research as the plugin won’t instantiate when Angular adds the HTML to the view and you don’t want to run the JQuery script from your controller since you’ll be tying your controller to the view. So creating a custom directive appears to be the best approach which handles the JQuery plugin instantiation.
- Angular can also suffer from having lots of nested functions and objects, though you could break these out if needed. I found myself battling a misplaced bracket here and there, but it wasn’t a major issue.
Other than that I thought Angular was extremely effective at putting this together and I didn’t hit a wall – mainly thanks to the wonders of StackOverflow. I think Angular’s concepts aren’t new and were already familiar. I first came across two way binding in Flex (Flash Builder) which is a great way to manage your view data. I can see that if you’ve come from a world of unstructured JQuery, then Angular would be difficult to get your head around which I think is going to be a challenge for a lot of frontend developers.