PIcking Your Javascript Mobile Framework: Part 3 - Minimum Functionality
If you are joining us now, this is a multi-part shootout of mobile Javascript frameworks. In the last instalment, we got a series of candidates, 77 long. In this instalment, we will look at functionality.
The Todo app pushed by the TodoMVC team is very simple, but pretty complete. In it you:
- Create new todo items by entering them into a box
- Display all available todo items
- Alternatively, display only the active ones, or the completed ones
- Mark a todo item as completed by checking a box to its left
- Delete a todo item
- Delete all completed todo items
- Edit a todo item
Bindings and behaviors were refined further:
- Aside from clicking on the box to the left and the delete button to the right, a double click on the item would allow you to edit it
- Typing text into the edit box at the top would allow you to create a new item; hitting “Enter” would add the item to the list
- Three links at the bottom would route you to the list of all items, active items, and completed items
- A button on the bottom would allow you to delete all completed items
- When in Active mode and an item is cleared, the item should automatically disappear
That all seemed pretty simple. For it to work, I also made the assumption that I could load the test in a browser page and then on a phone, and it would all work.
It is at this point that I need to remark in general: a knockout here doesn’t mean the framework has no merit, or that missing functionality in the todo example has any real-life implications on the quality and capabilities of the framework as a whole!
On the other hand, though,** there are plenty frameworks to choose from**, and I can be picky. If something doesn’t work as expected in the demo, it obviously means it’s not trivial to implement. So you could say, well if the demo doesn’t auto-update to remove newly declared done items, it’s not a big deal. But the big deal is that the view and the model should always be in sync. If I have to do it manually, then the value of this framework goes down the hill.
Also, some of the frameworks have no other fault than requiring a particular server (like meteor). It’s not that it’s tragic: in general, you would have no problem providing a web server. But in the case of a mobile app, you don’t really have that option at all.
So take this whole series as it is: a help in finding a mobile Javascript framework that makes it easy to write mobile apps using PhoneGap. Nothing more, hopefully nothing less.
I armed myself and got the following knockouts. If everything worked as expected, there was no comment.
Name | Res. | Comments |
---|---|---|
agilityjs | ✓ | |
ampersand | ✓ | |
angular-dart | missing routes | |
angularjs | ✓ | |
angularjs-perf | ✓ | |
angularjs_require | ✓ | |
ariatemplates | doesn’t start up from file:// | |
atmajs | doesn’t start up from file:// and doesn’t show routing until todo is entered | |
backbone | ✓ | |
backbone_marionette | ✓ | |
backbone_marionette_require | ✓ | |
backbone_require | ✓ | |
batman | ✓ | |
canjs | ✓ | |
canjs_require | ✓ | |
chaplin-brunch | didn’t clear dynamically | |
closure | ✓ | |
componentjs | doesn’t start up from file:// | |
cujo | no routing | |
derby | requires server | |
dijon | no routing | |
dojo | no dynamic update | |
duel | no routing | |
durandal | ✓ | |
emberjs | ✓ | |
emberjs_require | “the use of EmberJS with RequireJS is not advised” | |
enyo_backbone | ✓ | |
epitome | ✓ | |
exoskeleton | ✓ | |
extjs_deftjs | no routing; in general doesn’t behave as expected | |
firebase-angular | ✓ | |
flight | ✓ | |
gwt | ✓ | |
jquery | ✓ | |
kendo | ✓ | |
knockback | ✓ | |
knockoutjs | ✓ | |
knockoutjs_require | ✓ | |
lavaca_require | ✓ | |
maria | ✓ | |
meteor | seems to require external server | |
mithril | ✓ | |
montage | requires web server setup | |
mozart | ✓ | |
olives | no routing | |
plastronjs | ✓ | |
polymer | no update on completion | |
puremvc | ✓ | |
ractive | ✓ | |
rappidjs | ✓ | |
react | ✓ | |
react-backbone | ✓ | |
sammyjs | ✓ | |
sapui5 | ✓ | |
serenadejs | ✓ | |
socketstream | client-server | |
somajs | ✓ | |
somajs_require | ✓ | |
spine | ✓ | |
stapes | ✓ | |
stapes_require | ✓ | |
thorax | ✓ | |
thorax_lumbar | ✓ | |
troopjs_require | ✓ | |
typescript-angular | ✓ | |
typescript-backbone | no routing and starts up sluggish | |
vanilladart | strangely, Enter doesn’t work, leaving you with no ability to actually enter a todo item | |
vanillajs | ✓ | |
vue | ✓ | |
yui | ✓ |