Considerations when selecting a JS MVC framework

So you probably have seen a typical RhoMobile demo where after generating an app in RhoStudio, we generate a Product model and RhoStudio generates a set of views along with a controller to give you instant MVC out of the box. In this case, when using RhoStudio to generate this app and model scaffolding, it is using Ruby as the foundation for giving you a MVC based application. Very nice, clean separation of your data from your UI and a controller for application logic. Well if you are a pure JS developer, you may not want to even touch this Ruby code. What to do?

Have no fear, Javascript MVC frameworks to the rescue.

You may have seen a blog posts we recently did on Backbone.JS or even checked out the developer guides on docs.rhomobile.com for Angular.JS and Backbone.JS examples. Being a JS developer, you are probably well aware of the myriad of JS frameworks out there like Backbone, Angular, Knockout and Ember to name a few. A simple visit to ToDoMVC.com will give you a quick sampling of choices you have in selecting the right framework for you.

So how do I select the right one?

Well there are many factors to consider in selecting the right framework and really no 'one size fits all' solution. In a recent presentation I was preparing for, I went through some of this things you may want consider:

• Community Adoption - good indicator of how established and how fast they are growing
• Interest Level - lots of interest may indicator available content, sample code, etc
• Maturity Level - do they have a good amount of reference apps, how long in 1.x+ stage may indicate how buggy or developed the framework is
• Size - Size of the JS file may indicate how much the frameowkr provides and how much you may need to plug in. is it trully a framework or just a specilaized JS library.
• Philosophy - Is this framework dictating the rules you need to follow or is it giving you freedom to plug in your own pieces to the puzzle

What features do these frameworks offer?

Now you would like to try using these JS MVC frameworks in your app, what are some of the typical features you will find?

• Model Binding - this is the first feature you will notice when looking into these frameworks. A typical demo shows that the UI is bound to the model and when you change data in a input control it automatically updates the bound UI
• View Templating - driving your UI from data models really needs to have a good programatic way for rendering the data, whether it is a list of simple labels. There are a few ways you can accomplish this using templating engines. Some of the frameworks dictate which one to use, others give you the choice.
• Routing - Your Single Page App needs to have good routing capabilities to give the most responsive experience as well as give you simple and powerful ways to translate a URL scheme to a corresponding views and controllers.
• Data Storage - These frameworks are typically focused about communicating with a backend system, normally through REST, where your data will reside. But how does it handle keeping the data persistant in disconnected environments and how easily can it tie into RhoMobile Rhom capablities.

What's Next?

Review the presentation of the above considerations and features of the frameworks/libraries. Try them outside of RhoMobile to get a feel for how easily (or not so easily) it will be to give you what you need. Your app will include a set of html, js, css files that you can place inside of your RhoMobile application (typically inside the public folder of your RhoMobile project). You would ignore all of the app and model generation in RhoStudio and point your app to the starting HTML file through a change in rhoconfig.txt setting.

Check out the simple Product CRUD app demonstrated in the presentation where we show both the Ruby MVC and MVC using Ember JS as well as utilizing a Ember Data Adapter for Rhom that can be used in other Ember JS RhoMobile apps. We will have a further deep dive on Ember JS coming up to walk through how this app came together.