Comparisons

This was a long journey, for sure. We went through 77 Javascript frameworks (including combinations) to find the ones most suitable for the development of a mobile single page application, to be used as the foundation of a cordova app.

We went on a tangent to see how there was a seminal year, 2012, where a great many frameworks suddenly sprung up. Before that, the selection was small. After that, things got quiet again.

We saw different approaches to the integration of HTML and Javascript. They ranged from a completely programmatic approach, where there virtually is no HTML coding (Mithril) to one where the Javascript injects itself into a stand-alone HTML page, and everything in-between.

We have seen frameworks that require tons of external dependencies (React) and others that are proud to do what they do completely stand-alone (again, Mithril). Some require you to write tons of code (Thorax), while others are perfectly happy to do all the work for you (Vue).

We have also seen how mobile app development differs from mobile web development, and how that in turn differs from web development more in general. Mobile app development stores most of the information on the phone, while it needs to be downloaded on every new tab in the mobile web. Thus, mobile web apps can load a lot more dependencies on startup than mobile web sites. Desktop applications, on the other hand, have to worry a lot more about supporting all kinds of different browsers, which the mobile web doesn't (since there are no old web browsers on smartphones, since smartphones are new).

Read more: PIcking Your Javascript Mobile Framework: Part 22 - Conclusions and My Pick

Vue occupied a special place in my heart when I saw it required the least code to write. That's a feat of its own, especially considering how lazy I am (despite being a terrific typist) and how error-prone (strike the part on being a terrific typist).

The vuejs.org web site has no clear tag line. This is what I liked best about their self-description: It is not a full-blown framework - it is designed to be a view layer that is simple and flexible.

The main trick is MVVM, or model-view/view-model bindings. What that means is that the model (coming from storage) determines the view, but when you change the view by interacting with it, that automatically changes the model. That is slightly different from MVC, because there is no explicit controller. Instead, it is always assumed that the model and the view are faithful reproductions of each other. Derived quantities are generated by listening to model and view changes.

Read more: PIcking Your Javascript Mobile Framework: Part 21 - Vue

The tag line of the ThoraxJS.org (yes, .org) site reads, "An opinionated, battle-tested Backbone + Handlebars framework to build large scale web applications."

I mentioned that our mobile needs don't particularly require large scale web applications, but at the same time it's hard to deny a candidate that has done well enough in the Todo challenge.

The fundamentals of Thorax, as the tag line states, are Backbone and Handlebars. Additionally, Thorax on its down did pretty terribly in the performance challenge, so we have to add one more dependency, Lumbar. Since Lumbar is "with" Thorax (as they both come from WalMart Labs) it's not a stretch to think that most projects will use both.

Reading on the home page of the site, it is quite obvious that Thorax is meant for traditional web site browsing a la Amazon or WalMart.com. Indeed, there is an extra section on server-side rendering, where part of the content in the template is injected by the site. We have no use for that in our mobile app, of course, but that shouldn't disqualify the project.

Read more: PIcking Your Javascript Mobile Framework: Part 20 - Thorax

The alphabet has a way to balance the universe. While React was on the pointlessly complicated (not complex) side of the equation, Stapes is really minimalistic. Indeed, you wouldn't know the index file belongs to a reactive app, or an app at all.

Our example has four Javascript files: a model, a controller, a view, and a store. That's it. They each do what you'd expect them to do. There is an additional app.js, but all it does is start the controller and make it run.

The controller, in turn, initializes the other components and binds the events.

The view is where the DOM tree gets touched, and that all happens with Zepto  selectors. The role Stapes plays is minimal: it provides class facilities and a general approach to MVC.

Performance and code length were acceptable, and it appears that integration with other frameworks would not be a problem.

On the downside, the project is from the Cambrian explosion but hasn't really reached the popularity you would expect. It gets about as many Google hits as Ractive, but is twice as old. Also, it has a paltry 2 tags on StackOverflow.

There really isn't a whole lot making React stand out in a positive way in this comparison. Both performance and code length are towards the maximum acceptable, and the framework comes with its own language you have to learn, JSX.

I'll spare you the internals of JSX. Let's just say it's Javascript made to use XML syntax. I guess you can get the hang of it, and maybe Mithril's Hoarie should have a glance, but all in all you really have to be hardcore if you accept learning a new language (however little it is different from Javascript) just to code in a new framework.

Especially because that doesn't really buy you anything. You get a hybrid between two languages with incompatible syntax - like writing Java code mixed with Python - just "because it is a concise and familiar syntax for defining tree structures with attributes."

To be fair, JSX is just optional, not mandatory. So what other benefits does React offer, if we want to count JSX as a benefit? According the home page, the key benefits are that it's Declarative and Simple. Like, I don't know, all the other frameworks in this comparison.

Frankly, the main reason to use React is because someone tells you to. It's a Facebook project, which means it gets lots of love and ongoing development. It's also very popular on StackOverflow, despite being only a little older than a year.

Read more: PIcking Your Javascript Mobile Framework: Part 18 React