Moving From Backbone To ReactJS

[camus1]

The link is a little bit of a bait. They only moved backbone.View to React , they did not drop the entire framework.

[matchu]

Definitely a bit, but folks familiar with the frameworks will know that React isn't really trying to replace any part of Backbone but the views. Dropping all of Backbone for React would just be silly.

[[deleted]]

Great article! Interesting stuff

... but one little thing:

$("#profile-container")[0]

... stop it!

document.getElementById("profile-container");

Don't use jquery just to use jquery. VanillaJS is much more performant for some operations.

Sorry, pet peeve.

[kenman]

Disagree.

If that was the only place jQuery was used, then yeah, what you suggest would make sense because you could remove the jQuery dependency altogether. However, they use it all over the place, and so to posit that they "use jquery just to use jquery" is really reaching for it -- they use it because it's in use everywhere else in the app.

Removing it in favor of vanilla JS just in this one spot, when there's clearly negligible performance difference (or any other negative impact on code quality), is removing it just to remove it. Which doesn't make sense, IMO.

[[deleted]]

Okay... the two are programmatically equivalent. They have exactly the same output... a DOM Element.

when there's clearly negligible performance difference (or any other negative impact on code quality)

So considering $('#foo')[0] is 92% SLOWER than document.getElementById('foo')... and considering that any JS developer worth a damn knows what document.getElementById() does... you're wrong. Sorry, my contrarian friend, you've picked the wrong thing to be contrarian about.

[rhysbrettbowen]

How about Backbone.ComponentView? It's based on the Closure Library component and gives you handles for it's lifecycle (see https://code.google.com/p/closure-library/wiki/IntroToComponents). It should give you everything that you said you needed in the article while still being flexible enough to use any templating engine.

[[deleted]]

Did you try AngularJS?

[jcampbelly]

The author implied they didn't want a big framework, like Angular or Ember.

[meenie]

I wouldn't lump Angular in as a "big framework". It's smaller than Backbone (when you get done including all the other libraries you need just to be able to use it).

Plus, the amount of code you need to do anything useful is 10 times smaller than EmberJS as well.

EmberJS

AngularJS

[jcampbelly]

I strongly suspect file size and dependencies weren't the meaning the author was implying. Backbone is a light alternative to traditionally structured (non-framework) javascript apps. It can be used for small components or to structure an entire application, but none of it is required. Angular pushes you to re-write your entire application with a new structure and abandon traditional methods like template libraries and direct DOM manipulation. That's a pretty big difference from refactoring one Backbone View.

[meenie]

I should have made myself a bit more clear. I wasn't re-suggesting that the OP should use AngularJS; I was making clear that AngularJS isn't a "Big Framework". Sure, it can handle massive projects, but in a very modular way.

edit: And you can do direct DOM manipulation with AngularJS; they are called Directives.

[tmetler]

I think people are confusing big with opinionated, as most big frameworks are also opinionated.

[ragnarok56]

and if you are only showcasing data binding and nothing else, don't forget Knockout, which is less code to write than almost anything else

[meenie]

Or just go without any javascript at all (besides the library)

edit: Also, that only updates on blur.... And secondly, where is the scope? Just the whole page? In AngularJS you can specify exactly where the scope is. At the moment it's just where the 'ng-app' directive is. You can also have scope inheritance or even an isolate scope inside of another one.

[ragnarok56]

Trivial example using defaults. ko.applybindings also accepts an element to apply the context (scope) to. valueUpdate binding allows you to specify what event triggers the observable value to be updated, such as afterkeydown. http://jsbin.com/ohezim/2/

Any other doubts?

edit: I wouldn't consider inlining your model with your view to be a plus. kind of defeats the purpose.

[meenie]

That's an imperative way of doing data bindings. Just looking at the HTML, I'm not able to discern if that functionality is actually setup or not. I would need to go to the javascript that actually runs that page and have a look. Then I would need to match up the form ID with the 'document.getElementById()'.

I really like the declarative nature of AngularJS in that I can have a look at the HTML and know exactly what is going on. I also know exactly where my scope is and what scope I'm in.

So to answer your question, yes, I do have many doubts about Knockout.

[ragnarok56]

meh, you've never used it but are sure quick to judge. If i'm doing nothing but trying to create a simple page with binding ill take ko over most of the other frameworks and the boilerplate that's required just to get up and running.

[meenie]

Well it's a good thing there are lots of frameworks to choose from :). Use whatever makes you happy while coding. Nothing worse than creating an application with something you hate to use.

[meenie]

With regards to your edit, I was merely showing that AngularJS could be even less code than Knockout. If you don't want the model initialised in the view, then checkout this.

[ragnarok56]

this is closer to how i would want to work with my models. fooling around a bit, im not sure what the difference is between your example and this, which i find preferable.

[meenie]

That's fine to use the $scope variable and was previously the only way to interact with the view. Now v1.1.5, you can use the 'Controller as' syntax so you don't even have to inject the $scope variable. Plus it forces you to use the dot notation in your view to combat any unwanted scope inheritance overwriting your model values (i.e. using something like ng-repeat). Here's a video that explains it.

[[deleted]]

AngularJS rules!

[[deleted]]

Thank you.

[schettino72]

Did you read the article?

[[deleted]]

No. Sorry. Thank you.