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:
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.
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.
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.
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.
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.
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.
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.
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.
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?