Frameworks with proprietary attributes and mixing of concerns

I am in the process of choosing a JavaScript framework an online app-esque site. I’ve been reading up on them and looking at examples — and will continue to do so until i’m happy with my choice.

At this stage, I’ve got a shortlist of Backbone, Vue and Knockout. Backbone aside, a lot of frameworks go against the mentality I learned when I started using jQuery. That is, instead of <button onclick="alert('Hello');">click</button> you would bind the click event in a separate file using jQuery. Now though, a lot of frameworks use proprietary attributes and mix in the functionality with the markup. Admittedly, some, like Knockout, use data-*, but Vue.js, for example uses v-* which is invalid markup. I know the web page still works butI’ve always strived to write good code.

Then other frameworks, like Riot, you have to mix CSS, component HTML and JS into the same file.

My workflow is I write in separate files and then combine and compress with Codekit into (usually) a single JS and CSS file. I can’t help thinking some of these frameworks go against how I was taught to work. I did read that it’s a combination of technologies and not concerns. Anyway, I just wanted an opinion from others as it may influence my choice. Do you think framework make you write better or worse code — or are you neutral on it?

Thanks. :slight_smile:

2 Likes

Backbone is great, it’s one of the simplest ways to get started and works well, and Vue looks really nice.

These frameworks combine HTML / JS to get more done with less code, yes it’s fair to say that the template is often burdened with a lot more complexity than pure HTML but it requires far less code. Take this simple example of a Vue template.

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

That will re-render that list whenever it changes, any solution without a framework is going to require a lot more code than that.

Backbone is still the best starting point I feel as it leaves you in control of when things happen.

React, Angular 2 and Ember are the heavyweights if you’re building a large app.

There’s lighter alternatives like Vue, Preact etc… these are neat and I might use them on personal projects but for large apps having a huge company like Google or Facebook behind the framework can pay off.

2 Likes

@markbrown4

Thanks for the reply, good to know!

I spent a few hours messing around with Knockout at the weekend and like it. It doesn’t take long to get to know how to use it. I appreciate it is data binding only though. I’d probably try out Angular 2 but it seems too early. Plus I don’t like the way that it, and other frameworks, make you write invalid code. ng-*. Shame they don’t use data-* like Knockout.

Is it possible to use Backbone just for RESTful CRUD and let something like Knockout handle the UI? I know there is a framework called Knockback that mixes the two but, as a learning exercise I’d like to put them together myself.

1 Like

I’m not very familiar with Knockout, it’s certainly not as widely used as the others.

I’d advise against Knockout at this point. It is developed by a single developer who doesn’t seem to enthused about the project anymore.

You can see a 2 year gap between latest posts there. The latest of which isn’t even really talking about Knockout.

On the about page, you’ll find this:

Beside this I have strong interests in other aspects of software technology. I started the Knockout.js project way back in 2010 (before client-side MV* was cool) and am one of the same boring faces that keep showing up as a speaker at the tech conferences.

The github hasn’t had an update in 4 months:

None of this gives me a warm and fuzzy. If you have a serious app and want to use a framework, I’m seconding React, Ember, or possibly Angular 2 if you don’t mind something that is a very recent release.

Plus I don’t like the way that it, and other frameworks, make you write invalid code. ng-*. Shame they don’t use data-* like Knockout.

That’s Angular 1, Angular 2 takes an entirely different approach that’s similar to React. Angular 1 mixes JS with the HTML, where Angular 2 and React mix HTML with JS.

Give React a shot. I think you’ll find the entry bar is a lot lower than you it seems at first. Just stay away from Redux/Flux or anything other than the basics until you get a handle on what’s happening.

1 Like

@markbrown4, @mawburn

Thanks to you both.

I think using Knockout was a useful insight into data binding but, you’re right, I don’t think it has enough support behind it. It would be a shame to invest time learning it only for it to be abandoned. I think it is/was popular but perhaps not the right choice if making the decision in 2016.

What to do think to aurelia.io? Do a lot of frameworks work in development with lots of separate files that you combine for production?

I can live with the proprietary attributes but I really don’t like mixing the templates, CSS and JS into the same file. This put me off Riot JS and initially, when looking at JSX in React, off that too. Although it does seems like React doesn’t force an awful lot on you like Angular does and you can do it without JSX. But are you losing out on most of its features by doing that?

I’m not building a huge app though it’s something where I feel the right framework would let me build something more quickly, with less code. I’m after:

  1. Deals with REST (Knockout, Riot JS and Vue don’t out-of-the-box, I would’ve used $.ajax) easily
  2. Two-way data binding
  3. Simple routing
  4. Possibly form validation though am happy to use JS or jQuery for this
  5. Works well with jQuery

So far my shortlist is:

  1. Backbone with Epoxy
  2. Aurelia
  3. React (now you’ve mentioned it)

I like the approach and coding style of Backbone but am not sure how well supported Epoxy is as that is, I think, maintained a lone developer. Although Backbone is clearly made for RESTful APIs I guess it’s more verbose than other frameworks.

Aurelia is more compatible to Angular 2, it seems, so will have a deeper learning curve. It may be worth the long-term investment though as it’s modern but the team behind it (including a former Angular development) seem dedicated to it. I tried their demo out and there is clearly some significant overhead in using a framework of that size.

React…I think I need to look into this one more. I think I dismissed it too quickly.

1 Like

You seem to be focusing on frameworks that don’t have a strong ecosystem i.e. Knockout and Aurelia.

Backbone is the original, it’s simple and it works great.
React is the current heavyweight, it may take more time to learn but it has a growing ecosystem so you’ll be learning stuff that will stick around.

That’s as close to a recommendation as you’ll get from me :slight_smile:

2 Likes

I’m just exploring at the moment so am crossing off ones for the reasons you mentioned. Aurelia may be one of the big guns in a year’s time — who knows?

I’ll have a go with React and Backbone and make a choice then. What I did like about Backbone is after spending a couple of hours reading the documentation I felt like I knew how it worked — even though I hadn’t coded with it.

I really doubt it. It’s been around for a little while now and the only thing I’ve seen said about it is that it’s overly complex. I haven’t messed with it and don’t really have a reason to.

I like supportive communities. Because when I run into a brick wall with something, and I will, I always do, there is a large community there with people who can help me or someone on SO has run into it before.

With smaller things, you simply don’t have that and you’re going to have to work through them on your own. Which is fine for hobby project, but a serious project needs a couple layers of security nets. You usually don’t have a day or week to waste on a stupid small bug because you don’t fully understand a piece of the framework, nor should you try to work around the framework every time you run into one.

Ah, I didn’t realise that but then I am pretty new to this. I got the impression it had only just left beta. That’s good in a way then as it means I’m down to two options.

I’ll start looking at React code this week I think.

Thanks. :slight_smile:

1 Like

Backbone has been around for so long at this point, it’s pretty hard to go wrong with it. It’s pretty easy to understand and worth with, and the ecosystem and patterns are fairly well-established at this point while also being flexible enough to do what you want with it.

However, just to make things more complex, maybe it makes more sense to think about what you’re building and how you’d like to structure it, maybe spiking out some of the implementation details, then look for a library and/or framework that best solves the particular problems you’re having.

For a fairly largish project I did recently, I started with some architectural concepts, and one or two library choices, and then started building, pulling in smaller libraries to solve particular problems I had rather than deciding on a whole framework first and then building around it. Then pick a framework/library from that.

1 Like

Yeah, good point. I do have a project in mind that’s not too big so thought it was a good opportunity to learn one and go from there.

I ended up going with Vue.js. It’s really easy to pick up and it works great for small projects but also has modules you can use for larger projects. It seems to be growing in popularity as well. I’ve only spent a few hours with it and am already comfortable with the basics.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.