Replicating the Google Wave layout in 100 lines of js code with UkiJS

by mcantelon • 17 years ago

68 35 17 years ago

jacquesm• 17 years ago

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.

wgj2• 17 years ago

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

boucher4• 17 years ago

"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.

DomesticMouse• 17 years ago

I love that you call the whole operational transform library of wave "just the ajax parts." I almost fell off my chair laughing.

SingAlong• 17 years ago

yes it's a demo. And this UKIjs is 0.0.1 as per their site. But nevertheless, the demo on their homepage (hwlloworld button) impressed me. It souunds way simpler than Cappuccino or Sproutcore. Because Capp and sproutcore need config. But this sounds like, just embed the js directly in the page and it generates the page elements. Anyway, what it actually becomes/transforms into in the next few months will be interesting. I'm looking for an alternative to Sproutcore/Cappuccino that's not complex and needs little config and files (like one file jquery includes) :)

johns• 17 years ago

It's not even a replica of the layout since the scrollbars aren't the Wave-style scrollbars. Since they're a fairly prominent part of the UI you would think they'd be included in anything describing itself as a replica.

That said, I prefer the scrollbars in this demo to Wave's atrocious implementation.

cabalamat2• 17 years ago

> the scrollbars aren't the Wave-style scrollbars.

This is a classic case of something being a feature, not a bug!

m0th87• 17 years ago

github source link: http://github.com/voloko/uki/blob/master/app/functional/wave...

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

boucher4• 17 years ago

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• 17 years ago

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.

cabalamat2• 17 years ago

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• 17 years ago

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.

lanstein• 17 years ago

Reminds me of the book 'two minute apple programs' from days past...

Luc• 17 years ago

If only he'd have used shorter variable names! While he did massage the layout to get to 100 lines, I don't think it's that bad - the stuff that is on one line belongs there, even if usually it would be split over several lines for screen width reasons.

euroclydon2• 17 years ago

Does anyone have an extra Google Wave invite?

joshua ^dot^ pearce at gmail

dmix• 17 years ago

Your not missing anything.

j15e• 17 years ago

/agree

Frazzydee• 17 years ago

Yes, sent. It usually takes some time to actually get through.

And you really aren't missing anything.

euroclydon2• 17 years ago

Thanks. Got it, and I am completely underwhelmed.

neurotech1• 17 years ago

I have a few available - email neurofog at gmail if you still need one. Others may apply :)

ronaldj• 17 years ago

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?

voloko2• 17 years ago

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.

messel• 17 years ago

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

yesimahuman• 17 years ago

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.

adrinavarro• 17 years ago

Yet it doesn't has the hype.

joubert• 17 years ago

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

hackeron• 17 years ago

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/

Replicating the Google Wave layout in 100 lines of js code with UkiJS

Related Stories