Replicating the Google Wave layout in 100 lines of js code with UkiJS(ukijs.org)
ukijs.org
Replicating the Google Wave layout in 100 lines of js code with UkiJS
http://ukijs.org/functional/wave.html
36 comments
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/
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.
The bulk of the code is normally in making the user interface do something useful, not just to sit there being pretty.
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.
That said, I prefer the scrollbars in this demo to Wave's atrocious implementation.
> the scrollbars aren't the Wave-style scrollbars.
This is a classic case of something being a feature, not a bug!
This is a classic case of something being a feature, not a bug!
[deleted]
Just the ajax parts are missing. It's a demo for a UI kit, so that seems appropriate.
"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.
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.
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.
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.
At least some HTML was handwritten: http://github.com/voloko/uki/blob/master/app/functional/wave...
Point taken. I didn't look closely enough.
Excuse me, but do you know what _layout_ means ?
I didn't say anything about layout. In fact, I specifically said I was not judging the framework in that post.
I was responding to a comment claiming that the only thing missing was "AJAX." Not only do I think that comment doesn't make sense, I think the point it was trying to make is false, for all of the reasons I listed.
As an aside, the library itself is not limited to layout, as evidenced by its inclusion of buttons and sliders and resizable split panes. To me, without doing any research, that suggests that it probably doesn't implement many of the more complex behaviors from Wave, like automatic toolbar overflows or custom popup menus.
I was responding to a comment claiming that the only thing missing was "AJAX." Not only do I think that comment doesn't make sense, I think the point it was trying to make is false, for all of the reasons I listed.
As an aside, the library itself is not limited to layout, as evidenced by its inclusion of buttons and sliders and resizable split panes. To me, without doing any research, that suggests that it probably doesn't implement many of the more complex behaviors from Wave, like automatic toolbar overflows or custom popup menus.
There are lots of details missing. But replicating the whole wave was not the point of the demo.
The point was to show that we are not forced to use complex frameworks like SproutCore or GWT to build desktop-like app layouts. It's still possible to build them staying lean and simple.
And by staying simple you can move times faster. The demo was written in 2 evenings by a single developer.
The point was to show that we are not forced to use complex frameworks like SproutCore or GWT to build desktop-like app layouts. It's still possible to build them staying lean and simple.
And by staying simple you can move times faster. The demo was written in 2 evenings by a single developer.
First off, don't take the following in the wrong way, it is simply constructive criticism and the main point I'm trying to make is to highlight what makes your framework special.
In this case, I don't think putting this together in 2 evenings with 100+ lines of code is special. I think the "general" layout of most apps/sites can be accomplished with any framework in 2 evenings, and Wave's general layout is not particularly complex, especially considering that you chose to avoid defining window resizing behavior (or perhaps its just broken) and the ability to reorganize these panes (which I believe Wave can do). Not to mention that there is no indication anywhere as to how many lines it took GWT to do this, so for all I know 100 lines is double what it takes in GWT.
In all honesty, if a framework can't put together this general layout in 2 evenings it has to be a truly terrible framework. Despite SproutCore and GWT being "competitors" to our Cappuccino, I'm not going to pretend that it wouldn't be possible to throw this together with their stuff given 2 evenings. In fact, it should even be possible with just pure HTML/CSS/JS to come up with this in that time frame. I mean, its literally 4 panes and a couple of buttons.
By not implementing any of the dynamic behavior its not really clear how on earth this is "better" than GWT, unless you're trying to sell it as a mockup framework. And by dynamic behavior I don't mean actually implementing "playback" of course, I mean things like making the overflow menus work. Because without that, I'm not sure what your framework provides: "Do they just not have menus, or was 2 evenings not enough time to put the menus in?"
Now, from personal experience, I think the real problem is that demos like this are always asking for trouble. Of course no one is ever going to actually re-implement Wave, so there is never a clear comparison. I recall when Capp first shipped someone tried to make a jquery version of one of our demos in X lines, and OF COURSE the discussion devolved into whether you should count the CSS lines or not. Clearly this was not helpful to anyone in determining which framework was "better".
Now, I would have loved to see a narrated video of you putting this together (or better yet a custom design) because I think that actually gives people an idea of the layout capabilities of your framework. Then you can say things like "normally X is hard, but all we have to do is add Y...". Something like those time lapse photoshop videos, only with the iterations required to get to this.
In this case, I don't think putting this together in 2 evenings with 100+ lines of code is special. I think the "general" layout of most apps/sites can be accomplished with any framework in 2 evenings, and Wave's general layout is not particularly complex, especially considering that you chose to avoid defining window resizing behavior (or perhaps its just broken) and the ability to reorganize these panes (which I believe Wave can do). Not to mention that there is no indication anywhere as to how many lines it took GWT to do this, so for all I know 100 lines is double what it takes in GWT.
In all honesty, if a framework can't put together this general layout in 2 evenings it has to be a truly terrible framework. Despite SproutCore and GWT being "competitors" to our Cappuccino, I'm not going to pretend that it wouldn't be possible to throw this together with their stuff given 2 evenings. In fact, it should even be possible with just pure HTML/CSS/JS to come up with this in that time frame. I mean, its literally 4 panes and a couple of buttons.
By not implementing any of the dynamic behavior its not really clear how on earth this is "better" than GWT, unless you're trying to sell it as a mockup framework. And by dynamic behavior I don't mean actually implementing "playback" of course, I mean things like making the overflow menus work. Because without that, I'm not sure what your framework provides: "Do they just not have menus, or was 2 evenings not enough time to put the menus in?"
Now, from personal experience, I think the real problem is that demos like this are always asking for trouble. Of course no one is ever going to actually re-implement Wave, so there is never a clear comparison. I recall when Capp first shipped someone tried to make a jquery version of one of our demos in X lines, and OF COURSE the discussion devolved into whether you should count the CSS lines or not. Clearly this was not helpful to anyone in determining which framework was "better".
Now, I would have loved to see a narrated video of you putting this together (or better yet a custom design) because I think that actually gives people an idea of the layout capabilities of your framework. Then you can say things like "normally X is hard, but all we have to do is add Y...". Something like those time lapse photoshop videos, only with the iterations required to get to this.
Sorry man. GWT _is_ simpler for me vs learning your framework.
I would advise you to drop the whole "SproutCore, GWT" vs JS/your-own-framework angle because usually argument like that looks ... immature ...
I would advise you to drop the whole "SproutCore, GWT" vs JS/your-own-framework angle because usually argument like that looks ... immature ...
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) :)
I love that you call the whole operational transform library of wave "just the ajax parts." I almost fell off my chair laughing.
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
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
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')
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.
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.
If there is no limitation on line length, I can replicate it in one line of code.
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.
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.
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.
Reminds me of the book 'two minute apple programs' from days past...
Does anyone have an extra Google Wave invite?
joshua ^dot^ pearce at gmail
joshua ^dot^ pearce at gmail
Yes, sent. It usually takes some time to actually get through.
And you really aren't missing anything.
And you really aren't missing anything.
Thanks. Got it, and I am completely underwhelmed.
I have a few available - email neurofog at gmail if you still need one. Others may apply :)
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?
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.
The best way to minimize the merged code is too run it through Google Compiler and gzip. jQuery does the same.
Can you attach this to a wave server easily enough? Might be a good start for tweaking from for folks that dig UI design.
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.
Yet it doesn't has the hype.
Is this supposed to demonstrate a copy of the w* information architecture? Or just the surface æsthetics?