I recently needed to take a web application and turn it into a mobile app. The app was relatively simple and wasn’t a good candidate for taking the extra time to create a native app. So a PhoneGap’in I went. My first order of business was to choose a Javascript framework. The site had already been designed using Twitter Bootstrap which meant that I didn’t need to do anything to it design-wise to make the app look good.
My first choice was Backbone JS since that appeared to be a popular framework and a nice evolution from MVC frameworks such as Sproutcore. My app was really simple. Show a couple of pages with one that has JSON data that will be periodically read from a server and updated as a whole set. There is no data editing, no crazy data synchronization etc.. My requirements were a bit different than most examples that are out there. Most of the examples are using exclusively LocalStorage or a remote Restful API or are using some carefully designed data elements with id’s etc. that can be sync’d. I’m sure that if I had spent enough time with Backbone I would have figured out a solution to this, but there didn’t appear to be anything in it that readily supported this scenario. That is on top of the complication with figuring out which templating technology to use and how to wire everything together. And then there is testing which doesn’t seem to have great support in this framework.
As luck would have it, as I was going through this pain a re-tweet came through from Tenderlove about converting a application from Backbone to Angularjs. If people are converting from Backbone to this it must be worth a shot. What a breath of fresh air. This really feels like the Rails of client side Javascript and really is what Sproutcore should have been. It has a templating system that is the closest thing to following a convention that I have seen. It strictly enforces the concept of not putting application logic in the view, has testing baked in and requires less code to do the same things you would do in Backbone. With this I was able to take my view from the Rails app and convert it as close to one to one as you are likely to get between a client browser versus a server side web app.
For example if I have a data object called person that has a name. In Ruby the view would look something like this.
Name: <%= @person.name %>
In the angular view template (which are very similar to erb’s) your code would look like this
Name: {{person.name}}
Angular also has a pretty straight forward routing system, can do two way binding of objects in the view and has testing built in.
Now I haven’t tried this with Coffeescript yet, but that would be the ultimate. There may be some gotcha’s with the framework on a more complex project, and it is a opinionated framework, but for my money I am sold. It forces you into good habits in your view, enforces the right behavior and is simpler to use.
About Me: I am a Atlanta based, native Android/IOS developer with AngularJS/Ruby experience and am founder of Polyglot Programming Inc.. Many of my projects focus on IOT and Wearables. You will often find me purr programming and I regularly speak at conferences around the world. I am available for hire! More Posts
Follow Me:
I am a Atlanta based, native Android/IOS developer with AngularJS/Ruby experience and am founder of Polyglot Programming Inc.. Many of my projects focus on IOT and Wearables. You will often find me purr programming and I regularly speak at conferences around the world. I am available for hire!
Leave a Reply