What is Reddit's opinion of Backbone.js?

From 3.5 billion Reddit comments

No matter your opinion of Backbone, I think its annotated source code makes for a fairly easy read.

Not only is clean and modular, but it's also not too big. This makes it easy to follow and understand. On the other hand, I can't say you'll find anything particularly... special. It's mostly straightforward stuff.

Something a bit more substantial could be the source for OpenStreetMap's new iD Editor. I haven't had a chance to dig too deeply into it yet, but from what I could see a couple of days back when they announced it officially, the code looks pretty well structured and clean. It's also a full application so it's a larger code base. Still, from a "first look" I'd say it seems pretty manageable.

jQuery is a library for DOM manipulation, events, AJAX, and animation. It's not a framework. It doesn't provide any structure.

And this is fine if all you need is a bit of glue code for a few jQuery plugins. For example, a small e-commerce website with a carousel on the landing page, an accordion in the FAQ, typeahead in the search field, and some lightbox & tabs on the product page.

jQuery is perfect for this.

But if the inherit complexity goes beyond that, things get kinda hairy. E.g. when you start to store some data in the DOM, you really should start using some kind of model to keep things organized and separated.

Well, you can of course fix this. You can create your own structure and the conventions which go with that. You can create your own "lightweight" framework. But the problem with that is it has to be written, tested, and documented. It's a crazy amount of work. Even the most simple frameworks like Backbone need a ton of documentation (http://backbonejs.org/ = 17k+ words [show it on the projector and slowly scroll down for dramatic effect]).

Of course, no one you hire has any chance to be familiar with an in-house framework.

Existing frameworks are already written, they are tested (unit-tested and battle-tested), and they also are documented. Furthermore, there are plenty 3rd party resource (blog posts, videos, conferences & meetups, and online courses) and, if it's a popular framework, there are also plenty of developers who are already familiar with it.

That's the kind of angle I'd try. I'd start with a "it made sense at the time" kind of opener instead of flat out insulting the developers who wrote it and the people in charge who green-lit it. Be diplomatic.

You also might like:

jQuery Conference 2013 SF Beyond the DOM: Sane Structure for JS Apps by Rebecca Murphey
https://www.youtube.com/watch?v=cd7HHN6IkrU

Sounds like you want some kind of model. And collections that contains those models. There are many different libraries / bigger frameworks for that, a popular option would be Backbone.js.

Hey ! (I wrote this answer pretty quickly, sorry if there are any mistake) Fortunately, Backbone is very mature so a lot of resources you will find online are going to be pretty updated.

> should I be using CoffeeScript now that ECMA2015 is here? (new for me)

I advise you don't. Coffeescript has strongly influenced the shape of ES2015, meaning a lot of the great features of Coffeescript can be found in ES2015. You can easily use ES2015 with a tool like Babel.

> should I be using Underscore for templating? (new for me)

This is fine for small and quick usage. If you plan to have a somewhat complex application, I would advise to use Handlebars.

Underscore templating is great, but if feels as bad as PHP. Handlebars provides a lot of unavoidable features like partials and helpers that makes everything cleaner and more maintainable.

Exemple:

Underscore

<% _.forEach(items, function(item){ %> <%= item.name %> <%= }); %>

Handlebars

{{#each items }} {{name}} {{/each}}

> I'd feel most comfortable with a Rails backend. Is the Rails-Backbone gem a good path to go down?

Backbone is completely agnostic of your Backend, you are free to choose the one you are the most comfortable with. Note that Backbone was originally developped for a Rail Application

> any particular Backbone+Rails tutorials that you feel are current?

I used Developing Backbone.js Applications myself. There are tons of good resources about Backbone, and as I said above, it hasn't changed much in the last few years (The library is very mature).

EDIT: Adding: Industry standard regarding Backbone will not be as strict as, say, an Angular application. As for any javascript application, you will be expected to write clean, tested and re-usable code.

You don't NEED to learn a client side framework. Heck, reading your posts, you should spend some time in pure JavaScript, frameworks can sometimes be like tricking out a bike, but often when you're green they are more like training wheels, you have to be careful that you don't learn to ride your bike with the training wheels. If you must use a client side framework, I'd suggest checking out Backbone.js, underscore may hinder your learning of native JS though. Then there is React but I'd caution that it is fairly early days for react, it might be chaotic to learn. Whatever you choose, try and stick through it, when you get frustrated or stuck, that IS NOT the time to throw in the towel, that is the time to embrace the suck, because just over that hump is success. You throw in the towel when you no longer care. And just because you self identify with introversion, that does not mean anything is preventing you from doing anything, except for yourself.

You should probably look into something like Backbone on the browser side. With HTML5 pushState enabled, you can just serve everything as a single HTML file and it'll look the same to the user. See here for a simple example I found at random.

It's more or less like Express, except in the browser. The basic concepts (MVC, URLs routed to views) are the same.

You could take a look at Backbone.js as other have suggested.

I've been meaning to also look into using Marionette.js along with Backbone to force/give some structure to my apps and I think it might be an OK transition coming back from AngularJS. I haven't found many people talking about Marionette so if a big community is your thing you might want to pass on it.

In terms of a comparison with other libraries, here's the 10 second pitch: http://backbonejs.org/#FAQ-why-backbone

... but really, all of the reason you need to give it a spin should be just browsing through the examples: http://backbonejs.org/#examples ;)

> best JS language to learn

Sorry to nitpick, but JS is the language, React and Angular are libraries/frameworks.

WordPress core currently uses Backbone pretty heavily, but it is a bit dated.

There has been an ongoing discussion recently about adopting a new framework. Last I checked in on it, the debate was between React and Vue, but seemed to be leaning toward React. It is possible this has changed in recent weeks.

So... Probably React. There is a core JS channel on slack you can check out for more info - look for the link here: https://make.wordpress.org/core/tag/javascript/

All that out of the way - Here is my personal opinion on the matter:

These frontend frameworks are great for interactive applications. Most WordPress themes won't fall under this category and therefore should not make heavy use of them.

Vue and Knockout are the first two that came to mind. There's also Backbone. I know React can be used without a build step, but it usually isn't.

MAny of Jeremy Ashkenas (underscore.js) projects have similarly annotated source code, such as backbone.

TJ Holowaychuk also has a reputation of writing good code.

Have you read the Backbone.js website itself? It seems to be a fairly good guide to Backbone.

Also, you don't have to switch at all. Backbone is perfectly compatible with React. Backbone is all about data storage, it doesn't care how the view is rendered, and React doesn't care where data is coming from, all it cares about it rendering the view.

Well me persionally, since I really know nothing about those frameworks but know a bit of JS, I'd read all the relevant official tutortial/howtos and some API docs front to back. I don't think 24 hours is really enough time to try any have any project ready that I don't have (if I had a week, I would try writing a project though).

For the specifics you mentioned, I'd do a bunch of these workshops, time permitting, I'd read a bunch of this and the getting started documents for backbone. I don't expect to actually learn any of them in 24 hours, but I should be able to understand what they can do, and why I would want to use them.

You can learn the majority of backbone in a single day just by reading the annotated source code and a few good examples. So given that, what do you have to lose?

While Backbone isn't that great for single page applications (at least not in the way that Ember or Angular are), it is fantastic on progressively enhanced multi-page sites when you just need to organize the jQuery presentation logic for distinct page components. You don't need the full 90k of Ember when all you're doing is responding to some click handlers and performing basic ajax calls, but having Backbone's view and model classes to organize that logic can make it much easier to maintain.

And then when you combine that with RequireJS to load that logic automatically based on markup, things get very shiny.

Edit: fixed the link

Thanks for clearing up which 'prototype' you mean. And yes. It's definitively worth it. As mentioned in my other comment, it's really not that hard to start using.

One of the most popular MVC frameworks for JS Backbone is relying heavily on it. That's how they can achieve their small codebase.

Their source code is pretty well documented: http://backbonejs.org/docs/backbone.html

If you care to brush up on your JS in general. There are some excellent articles on http://superherojs.com. From the more conceptual to the 'you should probably do this' articles, it's all there.

Does anyone have any example use cases of Angular supporting a production application? Angular's best example is Youtube on PS3 http://builtwith.angularjs.org/, while Backbone has a laundry list of amazing sites http://backbonejs.org/#examples such as Hulu, Rdio, Soundcloud, USA Today etc. I'm just not buying into the Angular hype train.

[](/derp)Well, I don't drink any alcohol at all ever, so you gotta have something right? Also I'm Dutch, so there's that. The name is pretty silly though, so lets not mention it ever again.

I'm currently using Backbone on the frontend. As far as I know, it's pretty lightweight. It'll handle the id problem you mention and it's pretty easy to use and understand. It'll also create a unique "client id" for every row automagically. Basically, a Collection is an abstraction of a table and a Model is an abstraction of a row.

Also the History object is really awesome-amazing for a one-page app. Pair it with a Router object and it basically handles navigation all together.

It expects the backend to be a RESTfull api, but I made it work with just default Apache/PHP settings with very little code. Without Backbone, I would have probably already went bald and insane.

Also, Promises. I use them everywhere now. I think I have a Promise-problem lol. Can't wait for the async-await pattern to come to the browser (as in, widely supported). It'll be a few years though.

Well it really depends on what you want to achieve...

If the goal is just to learn how to organize your code, then just find a popular boilerplate on Github for xyz framework. Typically there are a bunch out there for React. You can carry alot of those patterns over to other frameworks, however you'll have to remap your brain from an Elm/Flux model to MVC pattern (which isn't that hard).

I'm just confused by what you mean I want to try building a simple, no framework, no-library web page before learning all those stuff. So essentially I'm doing my own simple framework. If you're trying to build a framework, I would start with dissecting Backbone as it's relatively light in terms of code and there's an annotated guide of the source code: http://backbonejs.org/docs/backbone.html

As someone who maintains a decently-sized Ember+Rails app, you're too far along for that to be productive. If you had a massive amount of functionality left to build out, Ember might be able to help you get it up and going. As it is, you'll likely spend more time than you'd save at this point.

If you're struggling to maintain that frontend code, I can recommend Backbone. We moved from it to Ember to navigate a big jump in application complexity, but if I needed to build something like what you're describing (one page with multiple ajaxed elements) I might still consider Backbone for it.

Backbone models don't need to have a URL, no. Without one, it won't be possible to sync that model directly to an API (using the built-in sync method), but it sounds like that might not be necessary for you.

For example, from the Backbone docs:

var Sidebar = Backbone.Model.extend({ promptColor: function() { var cssColor = prompt("Please enter a CSS color:"); this.set({color: cssColor}); } });

Backbone's source is annotated in a similar way. http://backbonejs.org/docs/backbone.html

If you haven't looked at Addy Osmani's book on JS implementations of common patterns, you should. http://addyosmani.com/resources/essentialjsdesignpatterns/book/

There are tons of charts and diagrams for design pattern's on the net - the trick will be to implement in JS if you can't find sample code. But it'll be a great learning experience to try.

Thanks! I should clarify that I gave up on using my initials, for now at least. I couldn't think of a satisfactory way to use them (imagine my disappointment when I saw the Backbone.js logo), but after making this iteration several months ago I started to really like that pattern more as an abstract collection of shapes than as an interpretation of KM.

I've never heard of Vaadin.

We use Backbone along with Bootstrap (who doesn't?). So that's almost from scratch.

I'd say you should definitely use a framework, but do some homework first. Make sure it fits what you need without much extra, fits your programming style, and has been around long enough to be properly vetted and have a large enough support community.

Most popular one these days is React and with good reason.

You might check out Backbone.js's &quot;routing&quot; feature for a brief explanation of how this works.

Ember, Angular, Knockout, Meteor, Riot, React...every contemporary MVC / MV* / M*C /*CV / whatever should have some sort of feature like this, somewhere.

Yeah, that's the hands on part I'm referring to. Take a thing like, OK so you have an English paragraph, and then the comparing Swedish text is broken into 3 paragraphs. I need to include some homemade syntax so when it renders it knows to put spacing.

The best example I have at this moment is how "annotated source code" looks. It's kinda a popular thing these days, for a dev to walk you through her library.

http://backbonejs.org/docs/backbone.html

Notice how the the wording on the left is spaced out nicely. It's very clean. I'm trying to do the same thing.

Oh but in regards to the more/less words, I'm not really focusing on that yet. I'm just making sure I identify where the similar paragraph(s) start/end in Swedish, to make a proper marker (like I said above). I'm sure more/less words is going to be a problem, but not a whole lot I can do about it.

Someone made this neat thing: http://readlang.com/ which lets you upload your own text/epub and it'll let you highlight to translate. It's a cool approach, but even if I do have the problem of more/less words being added in translations, I still want a side by side.

I would recommend against starting with Angular. It is an extremely complex framework with a lot of esoteric terminology and design patterns. In my experience, using Angular makes you better at Angular, but does not help all that much in learning JavaScript as a language.

While it is certainly losing popularity, I still think Backbone is a strong candidate for JS beginners. The source code is (relatively) brief, and is actually comprehensible. Here's the annotated version. One reason I think Backbone can really help beginners is that it is essentially a small amount of structure on top of the two most popular client-side libraries: jQuery and Underscore. Backbone is a not-gigantic leap from doing ad-hoc DOM manipulation / AJAX / general client-side scripting, to creating a structured, extensible single-page web app.

(Longer term, you will find that Backbone offers too little abstraction, which is the reason it is not as popular as Angular, Ember, and increasingly, React. It is an excellent tool to mitigate the learning curve though.)

While creating a web app may be what you want to do, I think learning Node is a much better way to grasp JS as a language (largely because you're not endlessly mixing up language features from DOM features). NodeSchool is highly recommended.

I recommend using flux. You're probably not crazy about learning/implementing an entire new architecture though, so:

Use a common data model (some people prefer Backbone models). Set the email on the model itself. Register a callback (on the React component) so that whenever the model updates, the state of the react component updates.

Everything is a jungle at the beginning. Try to have a project template. And improve it over time and over projects. When you have improved it to a point where most of your workflow becomes "systematic", then doing anything becomes 10-20x faster. Know your core libraries in and out and know why you use them and when to use them.

As an example:

I use Backbonejs as a library in my project templates. I write my models and then comes my views. I use L10ns to localize all my text labels. Then I write my templates. And everything becomes like a circular flow. In my objects—I have dedicated method names that I use and I document them so my team mates also know when to use them. And I don't import a lib unless it is necessary. I never use view component libraries either since customization is a hell.

I would probably use backbone in order to dynamically add forms/buttons based on the user's initial choice. as far as the UI goes, i'd try coding in a non-blocking (maybe blank?) section for the search results, similar to how facebook or twitter looks before the data pours in.

You don't really need something like Ember (although lots of people are going that direction). jQuery is an acceptable solution, although you'll find yourself doing a lot of work going back and forth, both serializing/deserializing for interaction with the backend and organizing the data for DOM interaction on the frontend.

You could look at BackboneJS if you think you need a framework. My experience with Ember is that it's fantastic in general, but Ember-Data is still a little intimidating to a new user.

>Preferably without marionette, because that's a library of templates and the example you linked was designed to be self-contained.

It's more of a collection of design patterns. Backbone has limited templating built in, from what I understand. Marionette changes up the views a little bit, but it doesn't even have data binding, so I wouldn't say it's a huge hulking library. I could probably print it out on a double-sided letter. Same with backbone and jQuery is mostly DOM manipulation.

> I agree that these languages don't have yet enough libraries, though, and that's their big weakness.

I don't think they do too little; I think they try to do way, waaay too much and do it poorly for the general use case. At least, that's my first impression. For example, imagine l10n and i18n or a theme/layout switch when you're cranking out HTML in your scripting language. Are you going to re-implement gettext, locale and timezone logic, etc, in some scripting language that sits on top of JavaScript? Or what if you actually, god forbid, write HTML, for the semantic features and usefulness that it has as a markup language?

It's just bad design, in my opinion. There may be specific instances where it makes sense though, but "flexible" is the last word I'd use to describe it. Granted, those are design choices; I'm just seeing bugs where you're seeing features.

Anyway, I'll try to do the demo in jsfiddle for shits and giggles when I have a moment. Thanks for introducing me to new languages, still, even if I don't have an immediate use for them.

Personally I love Angular as well. However, I find it has a lot of pitfalls that newer developers tend to get stuck in. If data binding (automatic updates to screen) is all you're looking for, I might recommend using BackboneJS and MarionetteJS

I'm impartial to jQuery a lot of the time. It is a great tool, but I like having a bit more structure, so I often use a lesser known, but fully featured Mootools

>In the view, I have to render the collection everytime it's updated

Well, how about something like this in your views:

initialize: function(options) { this.listenTo(this.collection, "add remove sync", this.render); // other stuff },

I haven't looked for tutorials, but the backbone source is short enough that I just scan through it when I don't understand what's going on. I really recommend you read the annotated source though, because there's not actually as much magic going on as you might suspect. Once you read it, you'll have a sense for what you can override and what you can't, and what all the magic is. Here's an example of what I mean:

var View = Backbone.View = function(options) { this.cid = _.uniqueId('view'); options || (options = {}); _.extend(this, _.pick(options, viewOptions)); this._ensureElement(); this.initialize.apply(this, arguments); this.delegateEvents(); };

var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];

Not a great deal of magic takes place when you create a view:

• The view gets an id used for keeping track of it in various ways

• Some of the properties of the options object end up attached to the view instance

• Some element is designated as the placeholder of the view

• Your initialize function is called

• Your event handlers are handed over to jQuery

So you see, there's plenty of room to customize that behavior. If you want your initialize function to instantiate a collection and have that collection's fetch success function render a template, you can encapsulate all that in a reusable view. Everyone seems to have a different style of using this framework, so just experiment with it until you're satisfied.

two things i enjoy about angular:

• two-way binding : if you change the model (e.g. set a property), the view changes. if you change the view (e.g. toggle a checkbox), the model changes.
• models can be plain-old javascript. in angular, you can bind your view to { propertyName : "value" } whereas in backbone, you have to extend all of your models from a backbone base class. this matters if, e.g. you are using a REST API that serves out json - in angular you can just bind the view to the json. in backbone i'm not sure what you'd have to do (to be honest).

Well, it's not an easy task and it will be a steep learning curve but it does put your website ahead of the majority of others, if it is done well. Personally I think AngularJS is a bit more complex than Backbone.js, you will need to start learning from the beginning with AngularJS to really follow their tutorials:

http://docs.angularjs.org/tutorial/step_07

However with Backbone.js it is a bit easier to understand:

http://backbonejs.org/#Router

Whichever way you go, it's not something you are going to be able to pick up in a few hours so it's up to you if you want to have a crack at it or not, good luck either way!

Backbone is a pretty awesome addition for Rails. It can be a bit of a pain to get set up with rails, but awhile back I wrote exoskeleton that does a lot of the setup, and gives you instructions of how to create starter views. There is also a demo app for example usage found here.

Well that is kind of like saying "Isn't that just JAVASCRIPT? How's Angular involved here?"

Yes, Angular is ultimately using AJAX to accomplish it's asyncronisty but Angular packages it up nicely into a framework that help makes this process easier. I don't know the equivalent in Angular as I have not really used it, but checkout the fetch method in backbone.js and try to see how it relates to what i'm talking about above.

Fetch Method

> Backbone's only hard dependency is Underscore.js ( >= 1.5.0). For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery, and json2.js for older Internet Explorer support. (Mimics of the Underscore and jQuery APIs, such as Lo-Dash and Zepto, will also tend to work, with varying degrees of compatibility.)

http://backbonejs.org/

>Does Angular use the jQuery library? Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

http://docs.angularjs.org/misc/faq

Although you are not using a single line of jQuery, it is being used in the background to interact with the DOM. In angulars case they have a lite version that they use if you don't also have jQuery loaded, but it will use jQuery if you use it.

Something like that. A prototype provides the same sort of behaviors of a class: common methods, the ability to override methods from the prototype, and walk up the prototype chain all the way to Object (if you haven't removed Object).

When you override a method, you don't have to call super if you don't want, but if you do, it's done with Foo.prototype.call(this, arg1, arg2) or Foo.prototype.apply(this, args).

While it's not a particularly popular framework anymore, I find that Backbone.js makes great use of the idea of prototypes, inheritance, and extend/overrides. While I wouldn't recommend it for new projects, I think it's easy to pick up.

In general one of a frameworks primary features is it's templating in whatever form that takes.

If you don't want templating your looking for something closer to jquery. Or just plain js.

I'm not aware of any framework that doesn't somehow abstract view handling. I'm not even sure what that would look like. Maybe something like backbone? It's mostly fallen out of favor and I don't know what using it in 2018 is like.

> smells a little bit

What is wrong with a HTTP 304 Not Modified status code?

> you'll need to introduce additional route.

introducing things on top of standards is what smells a little bit.

Also for interest sake. If you are only doing the backend; and only give your frontend dev backbone; expect a lot of polls.

Don't know, maybe it's a personal preference. But I find https://dojo.io/api/interfaces/v2.0.0-beta3.1/globals.html docs hard to use.

This one http://backbonejs.org looks much better, very easy to find what you want.

sure, React is "so hot now". Oh wait no it's Vue, or Inferno. I can't follow :p

There is people who still use Backbone, those who didn't got stuck with Angular ;)

http://backbonejs.org/#examples

But Backbone is much harder to deeply understand and less advertised. I think it's why there is just "few" dev who are using it, I saw it when I had to teach Backbone to people.

I'm using React at work, it's nice. But I wont use it for personal projects, I still prefer Backbone.

Mostly, it's learning about (programmey) stuff and using said stuff.

Recently, learning about RabbitMQ and message queueing in general. If I knew about it four years ago when working on my Bachelor project, it'd gone much, much easier.

Earlier, it was about Backbone.JS and MarionetteJS. They feel really, really satisfying when pairing them with Rails (because Rails lets you create a REST API very easily).

I did that on one of my projects where I need to use existing ajax api. Like what others said, backbone is not very opinionated on what you should or shouldn't do. Simply override that sync() method to do whatever you like and you should be good to go.

If <GoogleMap /> is a thin react wrapper over some non-idiomatic thing, like an OOP instance with methods and events and callbacks, you can pass a shared reference into the googlemap. For example use Backbone.Event and pass the eventbus reference into both Search and GoogleMap. This is a huge hack for working with non-idiomatic things, if you control the implementation of all the react components, you should strive to avoid coupling components to each other like this.

I'll recommend you to see how app has been build here - http://todomvc.com/examples/backbone/ There are source codes and working example. It's small, so you can fast understand what's going on there. Also don't forget about doc - http://backbonejs.org/

I think AJAX approach is not good for initial data. Backbone framework recommends to use just variables (http://backbonejs.org/#FAQ-bootstrap).

But I personally prefer to create Django view which render all required initial data with template language and application/javascript mimetype and I can simply include it via script tag.

Which "ul"? There are two.

Either way, this.el is a DOM Element reference (ie, pure javascript, what you would get if you did var el = document.getElementById("blah")). If you want to use jQuery methods on it, you need to have jQuery instantiate it with $(this.el)

FYI -- backbone does give you a parameter called this.$el which is already jQuery-ified. Ref: http://backbonejs.org/#View-$el

There are two places you're using 'ul' and I don't know which one you're talking about, so let's look at both:

var ul = $('ul'); this will return a jQuery object simply because you're using jQuery to find all ul's on the page. If you use jQuery to find something, you get a jQuery object. That simple. In backbone's case, however, they want el to be a DOM Element and $el to be a jQuery object, so they clean that up for you automatically.

The other place 'ul' appears is here: $(this.el).append("<ul>...."). In this case, jQuery's append method doesn't care if you give it an HTML string or a jQuery object or a DOM Element, it'll append anything.

Backbone is very explicit, which suits my style. If you enjoyed Django's explicitness, Backbone has a very similar philosophy. I personally cannot work with frameworks that enforce convention over configuration. Rails is an great tool used by many people to create amazing things, but its style and emphasis on conventions just does not click with how my mind works. Angular falls along the same lines.

Here's a comparison article of Angular, Backbone, and Ember

Also, both Backbone and its dependency Underscore have simple and beautiful source code annotations. If the documentation is ever insufficient (which it rarely is), I can dive straight into the source code with confidence that it won't be too difficult to decipher.

This would be trivial with Backbone, and be way easier to maintain down the road.

You can pass a pre-existing DOM element into the el options of a Backbone view, and have all the benefits of being able to use Backbone models then. http://backbonejs.org/#View

I want to say backbone has the smallest footprint (7.3kb). But it is one of the popular frameworks.

http://backbonejs.org/

I would do some research to find out where the bottleneck is.

• If all websites are slow at the school, then its probably the shitty network and having a small filesize will help you.

• If just your website is slow, then it is probably a bottleneck on the server's end, not much you can do about filesize. To help speed up getting assets, check out using a CDN to deliver them.

Top Row:

1. Google Font API
2. .NET
3. php
4. jQuery
5. Microsoft IIS
6. Microsoft
7. Backbone.js
8. MediaElement.js
9. Underscore.js

> How does one get past those mental walls? What have you done in the past?

Keep practicing, and keep asking questions. There's no magic pill here.

> Also, I am beginning to understand (I think) what frameworks are. It seems like JavaScript lends itself to accumulating collections of functions that can then be reused. Is that basically what frameworks are? Collections of pre made functions and objects?

That's exactly it. Some frameworks simply offer a bunch of functions you can use (eg. lodash), and some help structure your HTML as well as JS code (eg. backbone). In the end, it's all just a bunch of javascript code that someone else wrote, which you can use via an API (be that calling functions, or passing data to the framework some other way).

It's never wrong to learn a framework. I've used Angular myself a bit and like it. Haven't tried React yet but it's the "new hot thing" right now. And then there is BackboneJS but in my opinion it's a bit dated. Try something with two way binding. It's the shit. :)

Ask your new company for a Pluralsight account it has some good videos on Backbonejs and Marionettejs.

I found Addy Osmani's book on the subject helpful http://addyosmani.github.io/backbone-fundamentals/

And Backbone's own site has great documentation http://backbonejs.org/

"this" inside a backbone view will be the current view.

this.$el is the jQuery object for the DOM element the current view is bound to. this.model.get(propertyName) returns the value of propertyName from the model bound to the current view. So the first line in your render method toggles the .completed class on the view's DOM element based on whether or not the isCompleted property of the view's model is truthy or falsy.

With marionette, I generally avoid directly rendering HTML inside a view, and instead use a LayoutView with a region to show another view.

What do you need the framework for? Are you going to use AJAX and REST APIs? Or will you just use it to display some data and maybe sprinkle in some data loaded though ajax here and there? If you use case is the latter, chances are that you won't benefit much from a framework because you might be building a relatively simple webpage.

Anyway, you might want to check out backbone.js. It's a very lightweight and unopinionated framework.

They don't have to come into the mix. Backbone is for building heavyweight javascript applications. Think more like applications instead of sites. If there's a need for lots of interactions/templates/etc, Backbone is what you want to use.

Here's a list of backbone examples, I think they do a better job of showing where it's useful :

http://backbonejs.org/#examples

Angular is similar to backbone in the use case.

Reading this may help: http://docs.pylonsproject.org/docs/pyramid/en/1.5-branch/designdefense.html#pyramid-gets-its-terminology-wrong-mvc

For MVC in a webapp, I use backbone.js. To use python for MVC in a webapp, the client needs to support python. I have yet to see a web browser offer python as an alternative.

It really sounds like you have things already put together well, and are being persuaded, possibly by curiosity, to make your code fit a design pattern that doesn't reflect the system. A WSGI app is nothing but request/response and mvc doesn't really fit well.

Not at all; they're not intended to be arrays; the length getter was simply following convention. Some of these data structures are actually nested (something of a composite implementation, if you will).

Consider Backbone's Collection :

Each collection has a length property that is manually updated whenever add or remove are called. If someone were to extend the base Collection class and override add or remove, and forgot to update length, then length is broken. If someone were to write to the length property, then length is broken. This is different behavior than the standard array (you can set the length of an array to 0 and it will empty the array). In my case, I have yet to implement a setter for length to mimic that behavior, but setters do afford that opportunity, much the same way getLength and setLength would do. To my mind, having a length property that is a mere side effect- instead of a computed property- is more deceptive.

According to this article, it requires either jquery or zepto. Most tutorials and even the official example app shows it depending on jquery.

With zepto, it would be smaller total size than angular.

Backbone was designed to communicate directly with a RESTful backend interface, so if your backend supports it already (which I think MongoDB does), then it's just a matter of configuring your models to hit the right endpoints. Otherwise, you may need a RESTful lib/framework to sit between your backend and Backbone.

For more info, see Backbone.sync, as well as the Backbone.Model methods sync, fetch, save, & destroy.

>I think it's fair to say that colloquially we can refer to certain SPA applications as interpretations of MVC.

Certainly, yes.

>Alternatively, Backbone outright adheres to the goal of structuring your code into a MVC.

Absolutely not. See this part of their docs. It's ambiguous at best.

The main problem I had is calling them MVCs as a group, when their MVC-ishness is so far away from what makes them a category. This article talks about them as frameworks for "rich Javascript applications."

If you were to say SPA framework instead of MVC framework, I think you'd be more precise.

But if you do that, you get "If we hope to preserve the ubiquitous nature of the web, we need find a way to make SPAs unobtrusive." SPAs are, by design, not unobtrusive.

>My goal is to gain some of the key benefits of SPA without doing away with progressive enhancement.

These are pretty incompatible goals.

Hm, not coming from a C++ background, I'm a little unclear. Would an appropriate answer to this question be that I use Backbone's get() and set()?

Heya. Glad to have you on board!

I'm going to be updating the GitHub issues list today to make sure everything is able to be understood. I also need to do a better job of generating some documentation so people can jump into the project easier.

I'd suggest starting by just using the software, getting familiar with it and developing some concerns you'd like to address, or finding something interesting in the GitHub issues list.

It might also be beneficial to skim through the Backbone documentation and become familiar with their TODO app:

• http://backbonejs.org/
• http://backbonejs.org/#examples-todos

Hiya!

Cool! It's not written in Node, but I'm sure there's a ton for you to learn here. I'd start by using the product for a few days in order to get familiar with it while I add additional information to enhancements and bugs.

I'd also start brushing up on Backbone: http://backbonejs.org/

Feel free to respond or PM me if you find something you'd like more information about in order to start working on it, or if you have any ideas you can leave them in the Streamus subreddit or on GitHub! :)

I definitely have trouble coming up with examples off the top of my head as I just like going through the top github repos and seeing what others are doing. Backbone has a really nice annotated source. http://backbonejs.org/docs/backbone.html I remember picking up a few things from there. Javascript gets unmaintainable really quickly and really easily so any larger apps will be using a framework like Angular or Backbone.http://todomvc.com/ does have a plain javascript version here https://github.com/tastejs/todomvc/tree/gh-pages/vanilla-examples/vanillajs You may want to read over that. Just remember that the overall goal is to get something working, try not to get too hung up over design.

Read up on how Backbone Views work for a rough approach to what you're attempting (http://backbonejs.org/docs/backbone.html#section-125)

Basic idea Views share with OO is encapsulation: each view encapsulates its own dom element, and all mutations of the element should only be performed by the view itself (similar to how you should only be able to mutate an object's state with methods provided by an object.) jQuery is usually used for performing these dom manipulations so that should meet your requirement that it be used.

Also, using the .extends method provided by Backbone will let you subclass your views to add additional behavior.

Hope that helps!

Not a mistake. Backbone is a library.

Let's take Angular for example. You include it on your page, mark up the HTML, and it calls your functions. Take a look at their example. The HTML tells Angular which function to use (ng-controller), but it's angular that calls your code, you don't call it.

Now let's look at Backbone. You extend the Backbone objects, but Backbone doesn't call anything for you. In the example the application doesn't actually do anything until you call var App = new AppView; And even then, it's only doing what you told it to do.

In the Angular framework, you tell it you have some functions, and it calls them.

In the Backbone library you extend Backbone objects and you call them.

The one I'm most familiar with is Backbone.js. I'll try to provide a brief summary of its main ideas and some of its components.

1. MVW - model, view, whatever. Backbone is designed to be similar to the more familiar MVC (model, view, controller) design pattern except that it is not very opinionated about controllers. It has no special construct for controllers and expects you to roll your own, or just put that logic in the Model or the View (wherever you think its appropriate).
2. Models - Backbone models are representations of data in your system. Backbone makes it easy to connect your models to a server endpoint (returning JSON data) so you can persist your data. Backbone models also give you a convenient place to put business logic related to data manipulation.
3. Collections - closely related to Models. A Collection is just a group of models. Almost like an array of objects, but with a few extra convenience methods that lets you do stuff like sync with a server in bulk.
4. Views - Backbone Views encapsulate a section of the document and gives you a place to do all your DOM manipulation stuff, display logic stuff, and UI stuff. Views can also be linked to a Model or Collection to make it easy to connect your data with your UI.
5. Router - this is optional but convenient. If you want to build a single page application based entirely on AJAX calls you usually can't have cool URLs that work with the back button, browser history, and bookmarking. The backbone router lets you utilize cool URLs while working with a single page application.

Backbone provides the setElement method on the view object. Here's the documentation.

It undelegates the events of the old element, sets both the references el and $el, while checking if the parameter element is a jquery object or not, and also delegates events on the new element.

I cannot thing of a reason you would not want to use this.

Yeah, that should work. I think the better way to accomplish your goal of not creating extra divs would be to define this.el in your view. If your application layout has a div#app and you want your rendered content to live there, just put id: '#app' in your view code and Backbone will use that element as el instead of creating a new div. Check out the doc: http://backbonejs.org/#View-el

You want to target Backbone.sync or YourModel/YourCollection.prototype.sync. Everything, by default, flows through Backbone.sync.

http://backbonejs.org/#Sync

Alternatively you may be able to handle this at the model/collection level with a custom foo.prototype.toJSON implementation

http://backbonejs.org/#Model-toJSON

Your question is a bit open ended to say where is best to tackle the problem.

Thanks for sharing. There are a couple of things that I would suggest to clean your code up a little bit.

The biggest thing would be saving out your template into another JS object. This would mean that you could reuse it later, and it would take out the clutter from your initialize function.

Instead of having two almost identical views with the ItemView and AdminItemView, I would use the same view, utilize a heftier templating engine like Handlebars, and add some logic into the template that checks to see if the user is an admin. This way you only have one view and one template to do with.

I also know that you're trying to keep it small, but I'm a big fan of using Backbone Marionette, a useful Backbone tool that further extends the list views to give you the same functionality that you have created plus a few more handy features.

Lastly, and a very small thing, declaring this.model = options model in your initialize function is not necessary. There are a number of objects that will automatically be set to this.object if they are passed in as options and model is one of them. See Backbone View Constructor

Read about model view controller to get a general idea as to how these problems are solved. At the simplest level the model receives updates both from the screen and from other changes sent over the network, and local changes are sent over the network too.

While not directly applicable to this problem, a favoured toolkit for MVC in a webapp is to use backbone.js.