How does 280slides.com do Cocoa on the web? | Hacker News Reader

How does 280slides.com do Cocoa on the web?

280slides.com

9 pointssktrdie6 comments

Apart from all the Objective-J talk going on, I wanted go in detail about how they managed to port Cocoa to the web. Apparently they write absolutely positioned divs for everything, and calculate position-size. This way they never have to deal with the actual CSS/HTML, and write only javascript code. This is really cool stuff, not only because it makes your frontend more stable and cross-browser, but also for development purposes. The people at qooxdoo.com have been doing it as well, but I havent seen many other folks doing it.

Open articleView on HN

Soon Objective-J and Cappuccino will be open sourced and all your questions will be answered, but until then...

Yes, that's correct. Most visual elements are absolutely positioned divs (called "views", CPView in Cappuccino, NSView in OpenStep/Cocoa). We catch all events and handle them ourselves (i.e. determining which views get the event, etc). This gives us things like the "responder chain" and much better control over events. Normally it's impossible for an element behind another element to receive an event, but not in Cappuccino. A lot of little problems are solved by this approach.

There's a lot more to it than that, but it's late and I need sleep...

Awesome, i really didnt go through your code much, but i was trying myself to make this technique happen using simple old javascript. Things that were bothering me were for example the fact of passing the div element around, i think you have the CGRectMake() function that returns that div element, interesting though is that you dont add any of your methods/property to that div dom element. Another interesting thing is that you're able to figure out the size of elements before they are written to the client (browser), do you write it 2 times, one to get size and another to actually display it?

CGRectMake does not make a div, it makes a rectangle that defines the location and size of views ( see http://developer.apple.com/documentation/GraphicsImaging/Ref... )

What is a rectangle on the web? Isnt it a div?

He means an abstract "rectangle"... just the dimensions and coordinates.

In JSON:

    {
        origin: {
            x: a,
            y: b
        },
        size: {
            width: c,
            height: d
        }
    }

Reply on news.ycombinator.com