Gilbert Guttmann
Tuesday, November 4th, 2008

Unobtrusive JavaScript Presentation with Sinatra

I love new technology. Since I always wanted to try out Sinatra, my Unobtrusive JavaScript presentation on our retreat seemed like a perfect fit. Wouldn’t it be nice to not use Keynote for this? Why not just present it in the browser?

Read the rest of entry »

Some hours later, I came up with a little presentation app. Everybody can connect to the Sinatra instance via the browser and the presenter can choose which chart they are looking at. They don’t have to reload the page, it updates itself. Pretty slick.

If you’d like to try it out, get it either at Beanstalk or download it here. If you’re interested in the presentation I gave, you can just view the slides.

How to use it

Install Sinatra via Rubygems
```
gem install sinatra
```
Run the application
```
ruby keynote.rb
```

That’s it.

Now everyone can connect to it via the browser on port 4567 (default). To access the chart selector, just browse to “http://localhost:4567/god_mode”. You can actually change this behavior, just open the keynote.rb file and adjust it. Looks pretty clean, does it?

I can’t wait to use Sinatra for production purposes. Sometimes, you don’t need all that stuff Rails provides. Less means more.

This entry was posted on Tuesday, November 4th, 2008 at 11:45 am and is filed under JavaScript, Wildbit University. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Andrew Okonetchnikov on November 4th, 2008 at 12:07 pm

Hey Gilbert!

Great presentation. One question: why do you hate prototype+scriptaculous so much?

Rafael Souza on November 4th, 2008 at 12:13 pm

Me too! I’m waiting for Heroku to support Sinatra ;)

Gilbert Guttmann on November 4th, 2008 at 12:41 pm

Andrew: Oh there is stuff like filesize, inconsistent API, poor documentation etc. Relying on two frameworks is really not a good idea. MooTools and jQuery are much better options. They don’t just want to create a good JS framework, they also introduce new cool and clever stuff which make your life with JS a lot easier.

Geoffrey Grosenbach on November 4th, 2008 at 1:13 pm

Unobtrusive Javascripting is definitely the way to go.

For the record, there’s a great add-on for Prototype that makes it dead simple.

http://www.danwebb.net/lowpro

Geoffrey Grosenbach on November 4th, 2008 at 1:19 pm

Also, I like the shared presentation idea!

I’d love to design a system where the viewers would be prompted to type into a text box and could interact with the content of the slides.

For example, in one of John Resig’s Javascript tutorials you can run the code interactively:

http://ejohn.org/apps/learn/

Andrew Okonetchnikov on November 5th, 2008 at 5:33 am

Gilbert, I think it’s a matter of taste. Scriptaculous is a kind of addition to the Prototype, like all of these plugins Mootools and jQuery has.

Regarding filesize: consider compression of Prototype and you’ll come almost to mootools size. The difference in several KB isn’t that valuable these days also.

Gilbert on November 5th, 2008 at 7:12 am

Andrew, agree. It’s always about personal preferences. But if you have a look at jQuery and MooTools, you will agree that both have “something” that Prototype is missing.

Andrew Okonetchnikov on November 5th, 2008 at 7:37 am

Heh, I’m working closely with mootools right now and I really miss lots of features prototype has. Of course you can always extend it to fit your needs, but why the fuck should I think about such things like Element.show and hide methods?

My opinion is that frameworks are here to help developers build apps faster with less effort. Each of these frameworks has some unique features and might fit different needs. For some neat animations only I’d go with Mootools, but for complex apps with lots of client-side logic I’d stick with Prototype for sure.

http://blog.reindel.com/2007/10/30/how-to-choose-a-javascript-framework/

Gilbert Gutmann on November 5th, 2008 at 8:58 am

Andrew, I always prefer my own approach for show/hide: Element.addClass(’hide’), Element.removeClass(’hide’). I don’t like the ’style=”display: none”‘ stuff everyone is doing.

Let’s don’t start a war on this ;) - but I like this comparison:

http://mootools.net/slickspeed/

Unobtrusive JavaScript Presentation with Sinatra

How to use it

Comments

Post your comment