HN Explorer

Ask HN: Angular/Knockout/Ember, logic in templates, and maintenance

6 points by rudasn ↗ HN
I am astonished by the really positive feedback these frameworks are getting lately on HN and other places.

For sure, they tackle a common problem and offer some really sleek solutions but the one thing that really bothers me is their use of HTML and templates:

    <a href="#" {{ action "edit" target="parentView" }}>Edit</a>
Or something along those lines.

What is really the difference between the previous line of code and this:

    <a onclick="doSomething">Click me!</a>
Their use of HTML as something that it is not reminds me of ColdFusion and the really unreadable and unmaintainable HTML it required.

So I really have to ask, what happened to separation of concerns and using HTML for markup, CSS for styling, and JavaScript for behavior?

Why is mixing markup and behavior so appealing? Or is it just something you live with in order to benefit from other aspects of these frameworks?

How maintainable is the code you produce using these frameworks?

6 comments

[ 2.9 ms ] story [ 25.9 ms ] thread
hasenj
I never found merit to the point about not putting logic in templates.

The impressive feature of knockout (and angular) is automatic updating of UI when model data changes.

Knockout calls it "viewmodel", that is, the model is not necessarily your data model (though it could be!) but rather it's a model for the view: the state of the viewmodel determines the state of the UI.

Why would you say that this is wrong?

It even has a wikipedia page: http://en.wikipedia.org/wiki/Model_View_ViewModel (not that this matters, but it's a counter argument to "it's not standard").

countessa
in fact, asp.net mvc is more of a MVVMC framework, so it's used server side as well.
rudasn
I love the idea of viewmodel and automatic UI updates! What I don't really like is the implementation of that concept by these three frameworks.

For example, from Knockout's homepage: http://knockoutjs.com/img/homepage-example.png

That mixing of HTML and JS variables (in data-bind: chosenTicket, tickets) and behavior (click: resetTicket) looks very alien to me. It just doesn't feel right.

It does make automatic UI update very very easy to implement but at what cost? Is code like this maintainable? Is it easily testable? Does is scale well?

hasenj
Haven't used knockout heavily yet (but I plan to!).

From what I can tell (mostly by intuition and experience), this looks at least more maintainable than typical MVC systems like Backbone.js

pixelcort
Not sure about Angular and Knockout, but in Ember the convention is for actions to target a state manager by default. This means you can handle the action differently depending on what state you're in. You could think of it as the action being just a custom event type that a state can sign up for.

I wouldn't consider actions in the template to be logic; if the actual event handler were in the template then I'd see a concern.

I like to think about it like a cycle: the template actions are received by the states, which make changes to the models and controllers, which update the views and templates.

techtrainer
I have been working with angular recently and it has helped me get good separation on action binding if JavaScript function and element (which otherwise could end up heavily in JavaScript and pose challenge to maintain).