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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Coding the Angular Tutorial App in Backbone

125 点作者 bernardjhuang大约 11 年前

19 条评论

freyr大约 11 年前
The Angular Tutorial App is an excellent demonstration of Angular&#x27;s off-the-shelf features. In fact, it&#x27;s designed precisely to demonstrate Angular&#x27;s strengths. Angular reduces boilerplate but it&#x27;s a heavier, more opinionated framework. The price you typically pay for less boilerplate is higher complexity when you need to alter the framework to fit your needs.<p>This is an extremely common (neccesary?) tradeoff. Think Rails vs. Sinatra or Django vs. Flask. Django gives you a great off-the-shelf backend that&#x27;s perfectly suitable for most jobs. But I don&#x27;t want to go under the hood to bend Django to fit an atypical project, and for those I&#x27;ll use a minimal framework like Flask.<p>My issue with Angular is that I <i>really</i> want to avoid looking under the hood because the complexity is so high. Backbone is just a small, modular, well-documented library that invites you to look under the hood. If Angular doesn&#x27;t fit my project, I&#x27;m happy to have Backbone in my toolkit, and I know the additional boilerplate up front will pay off down the road. Yes, it&#x27;ll force me to think more up front about how to organize and architect my app, and that&#x27;s not a bad thing.
djacobs大约 11 年前
Backbone Marionette would make the LOC comparison a fair one and is worth looking into if you haven&#x27;t already. Marionette is an especially good answer for people who like the Backbone way of organizing apps but hate boilerplate&#x2F;non-declarative view bindings.<p>My favorite part of Marionette is that it has opinions about things like model&#x2F;view management -- so it avoids a lot of boilerplate -- but it can almost always be molded&#x2F;tweaked to fit your specific needs (animations, lazy loading, views partially rendered on the server). It lets you 1) mix and match pieces build to work with Backbone (ModelBinder for declarative model-view bindings, Relational for client-side relations, etc.), 2) scale state change management up and down as appropriate for your app (via model changes, controller interactions, route events), and does not force you into a fully single-page architecture if you don&#x27;t want it.<p>Anyway, I think Marionette is a pretty great way to write small, modular, readable code without sacrificing high-level abstractions.
dustingetz大约 11 年前
&gt; but I’m really fond of the less restrictive nature of Backbone, so I’ll probably end up sticking with Backbone.<p>Backbone is terribly devious in that it tricks you into thinking that it is unrestrictive and unopinionated. Backbone manages state with mutable models and model change callbacks, so Backbone&#x27;s opinion naturally is that models and change callbacks are a good way to organize your application. &quot;I want to write hundreds of callbacks to keep everything in sync&quot; said no UI developer ever.
评论 #7600251 未加载
评论 #7601233 未加载
评论 #7600565 未加载
评论 #7600204 未加载
评论 #7600116 未加载
评论 #7601912 未加载
quack大约 11 年前
A better comparison would be Angular vs Backbone Marionette or vanilla Angular (no pre-built directives) vs backbone. I&#x27;m looking at you ng-repeat.<p>I love angular as much as the next person, but comparing two frameworks by LoC does not do much to move the discussion along.
评论 #7601504 未加载
评论 #7600020 未加载
评论 #7601002 未加载
评论 #7600932 未加载
ctoestreich大约 11 年前
I will post this here as well for posterity. I appreciate the time you took to compare and contrast the frameworks and your article is very thorough. We started with backbone on a few large projects and found angular late. We have switched to using angular where ever possible given the reduced code and testability.<p>I think another good comparison to make that is missing from both demo application stacks is testing. It becomes increasingly difficult to test backbone with the side effects of having jQuery selectors, html elements and general DOM operations directly in your view models. One of the great advantages of angular is it&#x27;s attempt to make invert your thinking about dom binding compared to other frameworks. Meaning it tries to keep the DOM and the MVVM separated so there aren&#x27;t unintended side effects if you add or change html node ids or classes. Backbone more tightly couples you to a specific html model and makes testing your javascript code complex and coupled to also looking for changes to the physical DOM during tests.<p>In the end, the more complex problems see to cause equal headaches in both frameworks, but at least angular give you less lines of headaches.
jakecraige大约 11 年前
I made an Ember.JS version of this since we have a few different posts comparing all the frameworks today. Still need to split it up into steps but it&#x27;s there as an example of the implementation right now<p>Lines of Javascript: 92<p>Lines of Javascript(without ember-data model definition): 63<p><a href="https://github.com/jakecraige/ember-phonecat" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jakecraige&#x2F;ember-phonecat</a>
n1ghtmare_大约 11 年前
Man, I&#x27;m a bit frustrated with this whole JS situation in recent days. There are so many frameworks, recommendations, hype - it keeps confusing me.<p>I mean I don&#x27;t want to spend time learning a framework that might be dead 2 years from now (remember prototype ?). I really don&#x27;t see a fit for Angular in my practice. However I&#x27;m not sure if I&#x27;m just saying that because of pure ignorance. Most of my client side code is pretty much jquery (that I try to keep organized), and it works most of the time. Then I see people referring to that practice as &quot;jquery soup&quot; and I&#x27;m starting to think I&#x27;m doing it wrong.<p>A lot of the web apps I write consist of pages with ajax sprinkled here and there (where it makes sense). I think a framework like Ember, Angular or Backbone is an overkill in my case. I don&#x27;t write SPAs, but then again I see people using it everywhere these days.<p>Honestly, for my scenario I feel that a framework such as Knockout or ReactJs is a lot more &quot;fitting&quot;. I&#x27;m sure other devs have been where I am, I wonder what you guys think.
评论 #7602052 未加载
评论 #7602540 未加载
评论 #7602974 未加载
评论 #7602171 未加载
评论 #7603202 未加载
hit8run大约 11 年前
I am currently writing an app in angular and I really enjoy how it supports my workflow. Before choosing angular I did a very thorough evaluation of Javascript Frontend Frameworks. My stomache told me to use backbone because it is simpler to understand the whole codebase and I personally like to know how something works behind the scenes. Also the built with backbone section is pretty impressive. BUT getting started with backbone was not so convenient as in angular. I dont like the fact that I have to extend things and then instantiate them. Also the whole jquery event binding + underscore stuff made me feel as if I was plugging together thousand movable pieces. Angular on the other hand makes your life pretty easy when you stay in the defined boundaries. Angulars has some drawbacks in my opinion: it is very complex behind the scenes (the size alone makes it more difficult to read and understand the source), it doesn&#x27;t feel like the javascript you know (good or bad?), for almost everything there is a specific angular way.
评论 #7600991 未加载
rguzman大约 11 年前
This is really useful and good, esp since the source is on GH. Thanks for putting it together, OP!<p>That said, lines of code is really the wrong metric to gauge the merits of the frameworks. Fewer lines of code may mean better abstractions, but it also may mean more &#x27;magic&#x27;.<p>A metric that may be more useful would be to have one developer write half the project and have another finish and then compare the time they take to the time they take to do the same project with angular.
评论 #7600696 未加载
elwinmurton大约 11 年前
I am not a Backbone expert, but telling coding a piece of software with Backbone takes more lines of code than AngularJS doesn&#x27;t really tell you something.<p>We could say that a Hello World code in Java is 5 times bigger than in Python, and both has it&#x27;s pros and cons. Same thing happen with tools and frameworks.
评论 #7600222 未加载
adamcw大约 11 年前
There are quite a few places in the code where it appears the author took a longer way around than is necessary, which upped the line count a bit.<p>An example of this would be restating the DOM tagName on each view instantiation. This appeared to also be done with the className, which didn&#x27;t appear to change (Although I admit I didn&#x27;t look particularly hard).<p>There were some other areas that looked like they could be optimized by removing unnecessary glue. The render function in PhonesFilterView looks to be doing a lot of work to choose the selected option. Unless I&#x27;m reading it wrong, you could just pass in this.model.get(&#x27;sortBy&#x27;) to the JST and let it do the comparison to select the correct value. Quick value compare instead of a model compare.<p>I appreciate the work that goes into these types of comparisons, I&#x27;m still lead to believe that it shows more about how well you know a framework than it does about the framework itself.<p>Thanks for posting OP, it was an interesting exercise.
评论 #7601266 未加载
Cthulhu_大约 11 年前
One thing this tutorial &#x2F; thing doesn&#x27;t highlight is that Angular is ~800 KB (unminified, ~200 KB gzipped, including some modules), versus Backbone&#x27;s ~60KB (unminified, ~20KB gzipped).<p>So it does take 240% more lines of code to do sort of the same thing as the angular tutorial, but the angular library is 1000% as big. If my math&#x27;s correct.<p>(disclaimer: I like Angular, and for big projects like the one I&#x27;ve worked on, both backbone and angular, I really prefer angular. If bandwidth is a major concern though, and you know how big your app&#x27;s going to end up, consider library size)
评论 #7600827 未加载
评论 #7600559 未加载
评论 #7602453 未加载
atrk大约 11 年前
I did a similar thing when I was seeking out a MVC framework for my company&#x27;s JavaScript. I built a page using the same manual JQuery and JS I was using, then I built it with Backbone JS, and finally Angular JS (after learning each one in a tutorial and using TodoMVC as a guide).<p>Each step I reduced the code size by 50-75%, particularly the boilerplate of tying user interaction events to updating the logical model in JS. Angular&#x27;s automatic 2-way data binding was definitely the selling point for me on the framework.
lukasm大约 11 年前
After a few months with Angular I find that it shines with complex SPA. Having said that I think everybody should ask himself&#x2F;herself a question &quot;Do I want a complex app in the first place?&quot;
elwell大约 11 年前
You can cherry pick examples that make either framework look better. Furthermore, LOC isn&#x27;t the only factor in framework choice, and it certainly isn&#x27;t the most important.
评论 #7600068 未加载
allthatisgold大约 11 年前
If I&#x27;m working with a RESTful backend API I use Backbone, if not I use Angular. Does anyone use a different criteria?
评论 #7600058 未加载
salimmadjd大约 11 年前
Please fix the URL to &quot;PhoneCat tutorial app&quot; you&#x27;re pointing to angular.org not angularjs.org
评论 #7600005 未加载
flylib大约 11 年前
Angular is easier for me to read and understand then the equivalent Backbone code right from the start
AdrianRossouw大约 11 年前
The backbone app might be more code, but only if you don&#x27;t count the code used by the libraries.<p>Angular is probably easier for a lot of people though
评论 #7600810 未加载