TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Step by step from jQuery to Backbone

353 点作者 kjbekkelund将近 13 年前

22 条评论

Robin_Message将近 13 年前
I like the tutorial style and I wanted to show something like this to someone, so that's really cool.<p>There's one thing I think you've got wrong in the example: by having functions bound to the same event (addStatus and clearInput), you paint yourself into a corner with Backbone, where you can only bind one function declaratively. However, your solution of clearing the input whenever a status is added is wrong, since (conceptually) the status collection may add statuses whenever it likes for whatever reason, but now doing so will erase the user's input box. Suppose this evolved into a realtime twitter-like thing – you would get hard to understand bug reports of people's input "disappearing".<p>(Moralising: It's important not to let architecture astronautics distract form the actual logic of the program.) When the NewStatusView successfully adds a status, it should be responsible for clearing its input ready for reuse. The call to clearInput belongs at the end of addStatus. A further argument for this is that it will eventually have to move into a success callback of the collection add, for example when a banned list of words in statuses lives on the server, or you actually broadcast the statuses.<p>Don't know why I felt compelled to make such a long comment; hope it makes a great reason even better.
评论 #4280400 未加载
geuis将近 13 年前
This is an excellent tutorial. It's also an excellent lesson in why you should stay away from frameworks like Backbone.<p>(To declare, I have written large apps with Backbone, so I'm not entirely talking from my ass.)<p>You've gone from a simple, succinct, and easily understood set of code to something that now relies on 2 extra frameworks (backbone and underscore), in addition to still needing jQuery. You've had to incorporate several layers of abstraction (views, cloning events) to simply do what was originally done in a few lines.<p>I know what the appeal of something like Backbone is. You think that adding in all this abstraction will make it easier to maintain your product. I will even agree that to an extent, it does.<p>However, a big problem is that the people that already care about organizing their code well, already do so. Backbone is so needlessly open-ended and directionless that a dev who doesn't already know how to write good code will just write worse code.<p>When I first learned Python, it was enlightening. Here was a language that says, "This is the right way to do it". It got rid of the baggage of other languages and got to business. Backbone is definitely not that for JavaScript development.<p>Backbone gives you so much rope to hang yourself with, and with so little sense of how things should properly fit together, that it's like wandering around a desert for days on end with a noose on your neck, until you fall into a deep enough hole and die.<p>I prefer to write my code so that there is an overall architecture, usually with a modular pattern when possible. Anything that needs to happen code-wise for a particular module is all contained within that code block and nothing else. That code is more or less like what was originally posted, where all the things that matter for that module are done in that module.<p>The other technique I use for modules to talk to each other is sheerly through event signatures. If you have a login module, it can emit events like "loggedin" or "loggedout". Any other module can subscribe to those events and do their own thing, without interfering with others, etc.<p>This pattern works very well and is a hell of a lot more usable than anything I've ever been able to do with Backbone.<p>Finally, Coffeescript is not JavaScript. It's another annoying abstraction.<p>JQuery is not JavaScript, but an incredibly useful library.<p>Stop piling one layer on top of another thinking you're making your life easier. Get back to basics, learn how to structure your code, and just get some fucking work done.
评论 #4284369 未加载
评论 #4283387 未加载
评论 #4285089 未加载
评论 #4284427 未加载
评论 #4285438 未加载
评论 #4290882 未加载
评论 #4284415 未加载
kjbekkelund将近 13 年前
Author here. The blog appears to be down, check it out on Github instead: <a href="https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md" rel="nofollow">https://github.com/kjbekkelund/writings/blob/master/publishe...</a>
评论 #4280415 未加载
评论 #4280811 未加载
评论 #4280596 未加载
评论 #4280378 未加载
评论 #4280567 未加载
DougWebb将近 13 年前
Very well written tutorial, right up to this part:<p><i>However, the code has increased from 16 lines to more than 40, so why do I think this is better? Because we are now working on a higher level of abstraction. This code is more maintainable, easier to reuse and extend, and easier to test. What I've seen is that Backbone.js helps improve the structure of my JavaScript applications considerably.</i><p>I don't see any justification for those claims. In my experience, more code means less maintainable, because it's more to understand and provides more opportunities for bugs to creep in. I can look at the original 16 lines and understand immediately what's going on, while the 40 line result doesn't even fit onto my screen all at once, and the application logic is broken up and spread out across a bunch of boilerplate-type code.<p>Regarding reuse and extensibility, I don't see that here either. Sure, you can add more behavior when either element changes, but you could have done that before just as well. For reuse, what's the likely-hood that you're going to need a control like this, which seems to be tightly bound to the application requirements? If you're writing a library or generic control reuse is important, but most of the time most developers are writing custom one-off requirement-specific controls, and reuse just isn't as important as clarity and simplicity. Besides, if you <i>really</i> wanted to reuse the original, you could move it all into a function and pass 'new-status' and 'statuses' as arguments; then any form/textarea/ul triplet can be used as a control.<p>Finally, testability: yes, I'll grant that your final version is more scriptable which makes it easier to write automated tests. However, you've also got a lot more to test, because now your code is subject to bugs in the 1000 lines of Backbone code you've made yourself dependent upon. What if there is some problem in the communication with your service? That's buried in Backbone and you're insulated from it, unlike in the original where $.ajax gives you nearly direct control over all aspects of the communication. The original, being much simpler, is also easier to visually inspect for bugs. Not much can go wrong in 16 lines of tightly integrated code, but once you switch over to inserting bits of behavior into a larger framework that you don't control and probably don't understand, who knows when your code will get executed (or not) and what edge cases might arise?<p>BTW, yes I know jQuery is a much larger and more complex dependency, but both the original and final examples depend on it equally. More importantly, your code calls jQuery rather than jQuery calling your code: your code stays in control. With frameworks like Backbone, your code gives up control to the framework.
评论 #4281580 未加载
评论 #4281398 未加载
评论 #4280866 未加载
评论 #4281618 未加载
评论 #4280862 未加载
评论 #4281314 未加载
评论 #4280801 未加载
评论 #4281581 未加载
评论 #4280831 未加载
Jare将近 13 年前
Very nice writeup, probably one of the best practical articles on transitioning code to MVC-style structure.<p>My only question about the result is the binding of NewStatusView.clearInput to the collection add event. If I understood correctly, it is logically incorrect in that clearing the input field should be a result of having submitted it, not of the fact that something has been added to the collection. A typical example to illustrate this issue would be a collaborative environment where multiple views/users can be adding to the same collection - say, a chat. Every submit would clear everyone else's text fields mid-typing?
评论 #4280392 未加载
dclowd9901将近 13 年前
If the premise of this article is to teach Backbone to people who are accustomed to jQuery, I think it fails miserably. It's long-winded, obtuse, and the example, which is supposed to firmly anchor you, is hazy and enigmatic.<p>The real trick of Backbone is treating it like a delegator for the UI. It handles creation of new elements, interactions, and creates a 1:1 relationship between the data and what is seen on screen; that's why it's so important in single-page JS websites: It handles the gap between raw JSON data and page visualization.
polshaw将近 13 年前
As others have said, thanks, really great tutorial. I don't know whether i'm going to go all the way to backbone (maybe?), but wherever i stop i'll have better, more maintainable JS.<p>I also have a quick question; why from the 'Creating a view' section, why do we have:<p><pre><code> var NewStatusView = function(options) { var statuses = options.statuses; ... new NewStatusView({ statuses: statuses }); </code></pre> instead of just calling `NewStatusView(statuses)` and having `var NewStatusView = function(statuses){` ??
评论 #4280662 未加载
xiaoma将近 13 年前
Now this is serendipitous! Earlier today while on my run, I was thinking about finding a resource to take me to the next step after the codeschool backbone.js series.<p>This is great, though I am having some doubts about whether backbone is the way to go or if angular or ember would be a better choice to invest my time in learning.
评论 #4281558 未加载
评论 #4284129 未加载
jasonkostempski将近 13 年前
Really nice format. I've been using backbone for over a year and knew exactly how the code was going to end up but my understanding of 'why' is better after reading it, which is a really the most import question to answer. I hope this style catches on, maybe the format could be called a Why-To :)
simonista将近 13 年前
Thank you so much for writing this. I've always felt like I was missing something with Backbone -- I knew that it was mostly infrastructure and assumptions that helped organize and clean up client-side code, but coming from mostly a backend/rails background, I never quite understood the assumptions that were being made and the "magic" that has happening behind the scenes. This step-by-step process is really helpful.
countessa将近 13 年前
nice - like the presentation with the file diffs. awesome stuff.
评论 #4281385 未加载
pindi将近 13 年前
I really like this tutorial's format. I made another one in its spirit about Agility.js, another framework that is significantly more succinct: <a href="http://www.pindi.us/blog/step-by-step-from-jquery-to-agility-js" rel="nofollow">http://www.pindi.us/blog/step-by-step-from-jquery-to-agility...</a>
erik518将近 13 年前
Is it just me or do these two apps not behave similarly at all? The jQuery app posts a status to a URL, the Backbone one does not. If the intention was only to show your typed status below once you click a button, why the Ajax call to begin with? Again, maybe I missed the point entirely.
评论 #4281522 未加载
powatom将近 13 年前
I've recently become a bit of a fan of Backbone, and have been tying it with Vertx and SockJS. It makes my fingers tingly.
评论 #4280964 未加载
chinchang将近 13 年前
Very nice and innovative style and osom tutorial as well. If only one could write this for spine as well :D
评论 #4283852 未加载
gaving将近 13 年前
Really nice way of explaining things.
tilt将近 13 年前
Very excellent read, thanks!
gorm将近 13 年前
Very nice article! Thanks!
irishb将近 13 年前
Github link 404s. :-(
评论 #4280352 未加载
Toshio将近 13 年前
Nice tutorial.<p>I have a question: how come you aren't making use of _.bindAll?
评论 #4280489 未加载
tubbo将近 13 年前
HAHAHA nice IE 503 error...
beshrkayali将近 13 年前
Well, the website is down... Thanks kjebkkelund
评论 #4280353 未加载