5 ms·

Moved to BackboneJS and JQuery Templates

23 points by akshayr 16y ago

SteveMorin 16y ago
I love the concept of using JQuery Templates! But does anyone have experience on how using this affects SEO and search engine crawling?
- andrewingram 16y ago
  Presumably quite negatively if you use them to build everything. But there are valid places, the obvious one being whenever you'd construct a complicated HTML fragment manually using JavaScript strings. I'm currently using knockout.js with jquery templates to generate a 'feed' component that has unique content for each user. The content also changes very rapidly so there is little point in a search engine trying to index any single version of the page. I was quite hesitant to go with the JavaScript templating approach at first (ie would normally have gone with generating the content on the server), but it has made quite a few things significantly easier. As long as you're mindful that search engines won't be able to index any javascript-generated content, you should be able to consider the use of all these new client-side templating tools.
  - SteveMorin 16y ago
    Yeah those were basically my thoughts as well. Thanks
jashkenas 16y ago
There are a couple of questions about Backbone towards the bottom of the article, and this seems like a fine place to answer them: akshayr mentions that in the context of an event handler in a View, "this" is bound to the instance of the view -- which differs from jQuery, where "this" is bound to the element that the event originated from. This is by design: it's awfully nice if methods on a View maintain their notion of "this", regardless of if they're called directly, or triggered by a DOM event. If you want to know which element was clicked, that's what "event.target" is good for, where "event" is the object that jQuery passes as the first argument to all DOM events. Here's an example that makes use of both "this", and the specific element: var NoteList = Backbone.View.extend({ events: { "click .note .title": "openNote" }, openNote: function(e) { var el = $(e.target); var note = this.notes.get(el.attr('data-id')); note.open(); } ... }); The other issue raised is the lack of JSONP support in the default implementation of Backbone.sync. It would be great to make this a configurable option, without having to drop down into jQuery for simple fetches, as akshayr did. Hopefully this will be a part of the next release.
- akshayr 16y ago
  The "event.target" approach is no good when the click handler is attached to a parent container with children. 'event.target' in that case will be the children instead of the parent. An example is here - http://gist.github.com/652212#file_hn http://gist.github.com/652212#file_hn comment
  - jashkenas 16y ago
    Ah, but that's what "event.currentTarget" is for. http://api.jquery.com/event.currentTarget/ http://api.jquery.com/event.currentTarget/
    - akshayr 16y ago
      Excellent. Will use that now.
- akshayr 16y ago
  Would also love to see how you folks are unit testing MVC at DocumentCloud
  - jashkenas 16y ago
    The basic unit test suite for Backbone is here: http://documentcloud.github.com/backbone/test/test.html http://documentcloud.github.com/backbone/test/test.html But I'm afraid to say that we don't actually test the JavaScript in the DocumentCloud workspace very much. It's something that I'd love to do more of, but almost all of the bugs that actually occur in production aren't things that unit tests would catch -- unexpected responses from remote Ajax calls, CSS glitches in IE, etc. That said, having nice standalone models is a great start for testable code.
FraaJad 16y ago
Can you please spell check city names. s/Bangaluru/Bengaluru/g.
- akshayr 16y ago
  Sorry, where is that again ?
  - FraaJad 16y ago
    http://directory.myminister.info/ http://directory.myminister.info/ The addresses of the MPs of Karnataka state, many of whom reside in Bengaluru. Also, using javascript everywhere breaks linkability, as evidenced by my inability to link to the exact page in question :)
    - akshayr 16y ago
      1> All the data is straight up coming from official government records. I've noticed quite a few typos coming through. At this point, its a bit unreasonable to go fixing them. Since this data is refreshed every month, chances are that it might eventually get fixed in the government records. Also this is just a past time pet tech spike app, I don't think anyone is actually looking at it. 2> Linkability and searchability (search engine bots and SEO) are certainly a problem in these kind of apps. In this particular case, I've been thinking about providing a way for other websites to embed and link to mp information.

23 points by akshayr 16y ago

I love the concept of using JQuery Templates! But does anyone have experience on how using this affects SEO and search engine crawling?

andrewingram 16y ago
Presumably quite negatively if you use them to build everything. But there are valid places, the obvious one being whenever you'd construct a complicated HTML fragment manually using JavaScript strings. I'm currently using knockout.js with jquery templates to generate a 'feed' component that has unique content for each user. The content also changes very rapidly so there is little point in a search engine trying to index any single version of the page. I was quite hesitant to go with the JavaScript templating approach at first (ie would normally have gone with generating the content on the server), but it has made quite a few things significantly easier. As long as you're mindful that search engines won't be able to index any javascript-generated content, you should be able to consider the use of all these new client-side templating tools.
- SteveMorin 16y ago
  Yeah those were basically my thoughts as well. Thanks

jashkenas 16y ago

There are a couple of questions about Backbone towards the bottom of the article, and this seems like a fine place to answer them: akshayr mentions that in the context of an event handler in a View, "this" is bound to the instance of the view -- which differs from jQuery, where "this" is bound to the element that the event originated from. This is by design: it's awfully nice if methods on a View maintain their notion of "this", regardless of if they're called directly, or triggered by a DOM event. If you want to know which element was clicked, that's what "event.target" is good for, where "event" is the object that jQuery passes as the first argument to all DOM events. Here's an example that makes use of both "this", and the specific element: var NoteList = Backbone.View.extend({ events: { "click .note .title": "openNote" }, openNote: function(e) { var el = $(e.target); var note = this.notes.get(el.attr('data-id')); note.open(); } ... }); The other issue raised is the lack of JSONP support in the default implementation of Backbone.sync. It would be great to make this a configurable option, without having to drop down into jQuery for simple fetches, as akshayr did. Hopefully this will be a part of the next release.

akshayr 16y ago
The "event.target" approach is no good when the click handler is attached to a parent container with children. 'event.target' in that case will be the children instead of the parent. An example is here - http://gist.github.com/652212#file_hn http://gist.github.com/652212#file_hn comment
- jashkenas 16y ago
  Ah, but that's what "event.currentTarget" is for. http://api.jquery.com/event.currentTarget/ http://api.jquery.com/event.currentTarget/
  - akshayr 16y ago
    Excellent. Will use that now.
akshayr 16y ago
Would also love to see how you folks are unit testing MVC at DocumentCloud
- jashkenas 16y ago
  The basic unit test suite for Backbone is here: http://documentcloud.github.com/backbone/test/test.html http://documentcloud.github.com/backbone/test/test.html But I'm afraid to say that we don't actually test the JavaScript in the DocumentCloud workspace very much. It's something that I'd love to do more of, but almost all of the bugs that actually occur in production aren't things that unit tests would catch -- unexpected responses from remote Ajax calls, CSS glitches in IE, etc. That said, having nice standalone models is a great start for testable code.

FraaJad 16y ago

Can you please spell check city names. s/Bangaluru/Bengaluru/g.

akshayr 16y ago
Sorry, where is that again ?
- FraaJad 16y ago
  http://directory.myminister.info/ http://directory.myminister.info/ The addresses of the MPs of Karnataka state, many of whom reside in Bengaluru. Also, using javascript everywhere breaks linkability, as evidenced by my inability to link to the exact page in question :)
  - akshayr 16y ago
    1> All the data is straight up coming from official government records. I've noticed quite a few typos coming through. At this point, its a bit unreasonable to go fixing them. Since this data is refreshed every month, chances are that it might eventually get fixed in the government records. Also this is just a past time pet tech spike app, I don't think anyone is actually looking at it. 2> Linkability and searchability (search engine bots and SEO) are certainly a problem in these kind of apps. In this particular case, I've been thinking about providing a way for other websites to embed and link to mp information.