
Replicating the Google Wave layout in 100 lines of js code with UkiJS - mcantelon
http://ukijs.org/functional/wave.html
======
cabalamat
This includes lines that are over 340 characters long.

If there is no limitation on line length, I can replicate it in one line of
code.

~~~
fnid
Not only that, but it requires two other .js files as well:

<http://ukijs.org/app/functional/wave.js>
<http://ukijs.org/app/functional/wave-theme.js>

And on top of that, A lot of what you see there doesn't work, buttons don't do
anything, so to make the UI functional will require a lot more code.

Still, it's a nice looking interface and if you want exactly that look, the
.js files can be copy/pasted. It is a _lot_ of work to do a draggable
interface like that.

------
jacquesm
That looks really nice, but it is just a layout, no 'live' elements (unless
you count the scrollbar and the horizontal resize).

The bulk of the code is normally in making the user interface do something
useful, not just to sit there being pretty.

~~~
wgj
Just the ajax parts are missing. It's a demo for a UI kit, so that seems
appropriate.

~~~
boucher
"Just the ajax parts are missing"

I don't know what that really means, but I can tell you that it's
disingenuous. First of all, on the face of it, it's not really true. Menus
don't work. Toolbars which have overflowed don't work. Buttons (even ones that
don't do "AJAX") do nothing. Resizing the window is broken in subtle but
annoying ways.

I don't think any of those things say anything at all about the quality of
this framework. But I don't like when people try to pass it off as something
it isn't.

~~~
Scriptor
Well, he did just say it was just the layout, not a functional Wave clone.

I'm assuming that all of the interface was written using Javascript, hence the
100 lines of Javascript. Little HTML was hand-written in the process. It's an
example of being able to quickly write a complex interface. Wave was picked
because it has a non-trivial interface and is familar to us. It's up to the
programmer to add the logic he/she wants.

EDIT: Correction from boucher applied.

~~~
boucher
At least some HTML was handwritten:
[http://github.com/voloko/uki/blob/master/app/functional/wave...](http://github.com/voloko/uki/blob/master/app/functional/wave-
theme.js)

------
m0th87
github source link:
[http://github.com/voloko/uki/blob/master/app/functional/wave...](http://github.com/voloko/uki/blob/master/app/functional/wave.js)

Looks like they had to make some really dense code to meet that 100 line goal.

EDIT: But do take a look at the framework. It looks pretty awesome, especially
the progressive rendering: <http://github.com/voloko/uki>

~~~
boucher
I tend to agree. This line looks like a prime example:

    
    
        menuButton('Inbox', '-176px 0', '166 24'), menuButton('All', '-160px 0', '0 2 166 24'), menuButton('By me', '-192px 0', '0 0 166 24'), menuButton('Requests', '-240px 0', '0 0 166 24'), menuButton('Spam', '-208px 0', '0 0 166 24'), menuButton('Settings', '-240px 0', '0 0 166 24'), menuButton('Trash', '-223px 0', '0 0 166 24')
    

The 100 line number also does not include the theme, which is a 250 line file
full of HTML, CSS, and JavaScript.

------
seiji
Is there a benefit to the horrible Outlook-inspired layout I'm not aware of
(besides trying to convince people it's Outlook)? It always seems to be the
most inefficient way to use screen space for message viewing.

------
ronaldj
I was looking at the source. I'm interested in the include function. Anyone
know how he does that? Is he compiling all of the individual JS files down to
one minimized file? If so, what's the best way to do that?

~~~
voloko
include() works because of the ruby server. It's only required for developing
uki itself. See <http://github.com/voloko/uki/blob/master/uki.rb#L41>

The best way to minimize the merged code is too run it through Google Compiler
and gzip. jQuery does the same.

------
hackeron
Here's my attempt. Early work in progress and not much usable yet - but using
jquery and jquery.layout - <http://demo.xanview.com/media/test/>

------
yesimahuman
If only Google Wave used normal scrollbars like in this example. I enjoyed
scrolling through everything more in this hack than the real Google Wave.

------
messel
Can you attach this to a wave server easily enough? Might be a good start for
tweaking from for folks that dig UI design.

------
joubert
Is this supposed to demonstrate a copy of the w* information architecture? Or
just the surface æsthetics?

------
adrinavarro
Yet it doesn't has the hype.

------
euroclydon
Does anyone have an extra Google Wave invite?

joshua ^dot^ pearce at gmail

~~~
dmix
Your not missing anything.

~~~
j15e
/agree

