Show HN: My first significant project with Backbone.js - a simple online editor | Hacker News Reader

Show HN: My first significant project with Backbone.js - a simple online editor

quietwrite.com

91 pointsjamesjyu36 comments

Beautifully done.

I've played around with a similar little app in the past, just to get familiar with HTML5 SQL Databases ... long before Backbone ever came about. If you're in a browser that supports 'em, you can take a peek here:

http://internettypewriter.com/

There are a couple little things you might want to steal. The ability to switch the color scheme from light to dark is nice for writing in low-light places. It would be great if there were a way to trash the current page. It would be nice if the URL for "Your Writings" left off the trailing hash mark. And, this is tiny -- but I'd love the option to choose a monospace font that's a bit nicer than Courier, for full typewriter mode; say Monaco, or Menlo.

So, how'd Backbone work out for an app like this? Any trouble spots worth mentioning?

Nice app! Love the simplicity. I have some color scheming things in the works, and a "night mode" is definitely on the list.

Backbone worked great. There were definitely some things that didn't jive well with Rails. If I get some time, I'll write about it. My fork is here: https://github.com/jamesyu/backbone

Though it's not quite ready yet for general use, as I haven't really polished it up. But you can get the drift of what I'm after by looking at the commit diffs.

This is a really nice app, and I'm pretty excited to play around with it more.

But I'm even happier to see that more people are discovering Backbone.js. After discovering it myself a few months back, it's felt equivalent to the first time I discovered jQuery after having written just plain old javascript for what seemed like an eternity. It was just a giant wake-up call to how awfully hatched together my previous apps were, and even though it's "overkill" for most of my sites I still use it anyway just to stay familiar.

For the uninformed, it's an extremely lightweight javascript front-end MVC framework (it's less than 4 kb when minified and gzipped, and just a single file to include). That immediately appealed to me. There's no complicated or overengineered new directory structure or significant paradigm switch I have adjust to, incorporate into my build system, etc. You basically just translate your existing MVC methods to the browser. Your Models are structured data that are aware of the RESTful URL where it can serialize itself to save or grab updated versions of itself from. Your Views are two-way bindings of your Models to any UI elements on the page that represent them. If your Models should change because your long-polling revealed that they've been updated, any UI elements that you've connected them to will automatically reflect those changes. And if you interact with those UI elements, and it happens to change the state or data of a Model, the connection still exists and the Model knows the back-end's RESTful URL to send its update to. The Controller ties it all together by routing deep-linkable hash URL fragments (like "#/book/1") to your existing Collections of Models and Views.

It won't provide you with megabytes of UI libraries and widgets, or overwhelm you with an insane amount of options or functionality. It's just an excellent foundation that lets you really clean up your front-end logic from what would otherwise be a chaotic soup of click bindings and callback functions over thousands of lines of code. I really want to encourage others to try it out on their next project: it's just fun to use.

can you recommend an open source app developed using Backbone.js?

i was hoping the OP source would be available but it seems to be minified.

There's some nice annotated examples in the documentation itself: http://documentcloud.github.com/backbone/#examples

One minor nit: Backbone.js requires Underscore.js (and json2.js for legacy browser JSON support if Backbone.sync is used), which doubles the size of the include. Obviously not a deal-breaker, since both combined are about a third the size of jQuery.

If you're considering developing this app further, you might want to take a look at the security of your app. A few minutes and I found quite a few XSS attacks on it.

If you'd like, I can email you all of the attacks I've found so you can fix them.

Edit: XSS isn't all there is to worry about.

jamesjyu: If you haven't seen Backbone.Model's "escape" method yet, it can help sanitize your model attributes, without having to constantly re-escape them at every use.

http://documentcloud.github.com/backbone/#Model-escape

Does rendering attributes using jQuery's text() method[1] properly sanitize the model attributes too?

I ask because I'm making a backbone app and I'm following the same process found in Ben Nolan's mobile app [2] where he does something like

  this.el.find('h1').text("Editing " + (this.model.getName()));

  [1] http://api.jquery.com/text/
  [2] https://github.com/bnolan/Backbone-Mobile/blob/master/application.js

Yes. jQuery's text() method will properly escape HTML fragments.

It's just a bit more verbose and a bit slower than using .escape("attribute") within a template.

Yes, please email at quietwriteapp@gmail.com -- Thanks!

You're really quite quick at fixing these things -- as I'm creating a demo page to email you, I'm noticing every time I refresh, one of the old attacks doesn't work any more.

Cool! FYI there is something wrong with the fadeIn/fadeOut of the header (try editing the doc name and moving the mouse). Looks like whatever event you are listening to may need an extra conditional.

Very cool! I've been wanting to play with backbone.js for a long time but I can't make time for it. Hopefully next weekend I'll have time.

Are you planning to make a tutorial or something?

I might if I get some time, there are definitely some tips and tricks. Backbone is wonderful -- much kudos to the DocumentCloud guys. They gave us a great framework, and they're actively developing it too.

Very cool. Rather than supporting a subset of html tags, why not just do Markdown formatting of the text when it is published?

Well done. Great to see support for tabs. Only thing with this however is that canceling a key event in Safari breaks native textarea undo. Maybe you can let the tab event run through, which would focus another input element, and then have an event handler (or timeout) to set focus back to the textarea at the right position.

The heading ("QuietWrite", "Untitled") keeps flashing for me.

What browser and version are you using? Does the whole top bar flash?

Firefox 3.6.13. Yes, the whole top bar. It fades out after a timeout, and fades back in on the slightest move of a mouse. So, if you are mousing around, it fades out/in ("flashes") from time to time.

Ah, gotcha. Will fix that.

Love it! It's like writeroom / pyroom for the web. Except that I like your colors better, because they make me feel all peaceful inside.

It's not saving correctly right now though?

Great work. A full-screen option would be cool. As well as background/text color options.

I'd also like to know your thoughts on backbone.js

When you say full-screen, do you mean just maximizing the browser window? I don't think there's a way to do real fullscreen using javascript, without resorting to flash.

Hitting F11 works beautifully for me. The UI is very clean. I like that it isn't too wide. If that's what the original poster meant, then I'm not sure that it's necessary.

I would make at least one UI change though: make the page scroll smoothly and earlier than it currently does. Right now the box you write in extends down as you type long passages, until the text you are writing is literally pixels away from the bottom edge. At this point, each line is written at the very bottom of the screen, which is somewhat awkward, at least on my laptop. In addition, where in a typical text editor or word processor one can scroll until this text is at the top of the screen and then continue, because the text you are writing is at the bottom of a html document, the best you can do is scroll an inch or two down before you reach a blocking point.

It might be very nice to coerce the cursor position to between, say, 20% and 70% of the way down the screen so that you never have to type at the far edges above and below, just as you leave space on the sides.

Great project and a nice demonstration of Backbone.js. I second the Markdown idea. That would be very useful.

That feedback button on the left is very distracting. I love the irony.

Just changed this so that it fades out too. Yes, you could cut the irony with a butter knife :)

OTOH, feedback fades out even if you read it. I think, it'd better not.

You should disable the fadeout when the feedback dialog is open. It's a bit weird to have a modal dialog suddenly disappear when it is open.

Typo on the home page: "Easily share YOU writings with everyone."

Very tasteful.

I'm wondering, what are you using for backend? Rails?

backbone.js, so probably node.js

Rails.

This is really elegant. Well done!

Reply on news.ycombinator.com