7 ms·

Mail.app implemented on the web using ukijs

188 points by tswicegood 17y ago

pistoriusp 17y ago
You can play with the actual demo over here: http://ukijs.org/mail/index.html http://ukijs.org/mail/index.html It seems pretty interesting.
- shrikant 17y ago
  ..and bloody cool!
- pak 17y ago
  It's interesting, but not very deep in terms of functionality. The main exhibits here are the split panel view and the table view. Both are OK, but these problems have already been solved many times by ExtJS, Dojo, and various jQuery plugins, most of which implement many more difficult features like sorting, searching, editing, and saving state. All else to be seen here is the meticulously reproduced skin with CSS and background images. Things I would have been excited to see, because they are not yet well-solved amongst JS frameworks: tokenizable editable text fields, like the real Mail.app's To: field, attachments using HTML5 D&D, a quickly-searchable inbox and a drag & drop sortable treelist view for the mailboxes.
  - boucher 17y ago
    I actually think it shows a lot of promise. Though it is reasonably limited, a lot of what it does do it does well. For example, it doesn't have the extremely common problem of every piece of text being selectable, and often that selection fundamentally breaking other interactions like drag and drop.
    - necubi 17y ago
      Disabling text selection is actually really simple. All you need to do is apply user-select: none (currently available as -webkit-user-select and -moz-user-select) to the element.
briancooley 17y ago
What this basically means is that you have to do more: read more source, learn more conceptions and tools, support more code, fix more bugs. I think the biggest advantage to Cappucino is that, if you already know the Cocoa framework, there is less to learn.
- sant0sk1 17y ago
  True. But if you're already developing for the web, chances are you know JavaScript better than you know Cocoa.
  - sant0sk1 17y ago
    Side Note: One of the major draws for me to learn Objective-J (coming from a Ruby/JavaScript background) was that I simultaneously learned a lot about Objective-C and Cocoa, which is key for iPhone/iPad apps. I felt like I was double dipping courses in college again.
    - boucher 17y ago
      More of our biggest users came from pure web backgrounds then from Cocoa backgrounds.
daok 17y ago
I have to admit that is quite fast, and the GUI is pretty. Nice job.
euroclydon 17y ago
How theme-able is it?
sant0sk1 17y ago
I'm a little confused. The blog post states: > "Models store, load and transform the data from the server." But the ukijs.org states: > "Uki doesn't want to be a Jack-of-all-trades. It only does layout but it does it well. You won't find any ajax or data storage layer code here." Which one is it?! (I'd much prefer the former)
- regularfry 17y ago
  Both. He's saying that models (in general) handle data, but Uki (in specific) doesn't specify how you should go about doing that.
  - aaronblohowiak 17y ago
    The data.model file is about 100 lines of code
asnyder 17y ago
Disclaimer: I'm one of the co-founders of NOLOH (http://www.noloh.com http://www.noloh.com). I want to apologize in advance for being so brash. I find that these demonstrations are very misleading. We all ohh and ahh, but not because of the technical accomplishment, but because of the beauty of Mac interfaces. First, sure the app is fast, it's loading the entire application from JavaScript, yet another fat client app. Second, the capabilities that this provides seems no different than the basics of YUI, or other JavaScript widget collections with unified syntax. Third, it's misleading to suggest that this is Mac Mail when in fact I can't search. I guess that's not a part of the Mail.app. Fourth, 15 hours to do a main screen and a new message form, really? I'm sure that we or the guys at Cappuccino & Sproutcore could throw a similarly functioning demo together quicker. The hard part of this example is getting the image resources, not the implementation. This implementation could've been done just as well in straight JavaScript or any other JavaScript framework just as nicely.
- rrhyne 17y ago
  'This implementation could've been done just as well in straight JavaScript or any other JavaScript framework just as nicely.' I disagree, as I've actually I've tried it in jQuery for an app built on the Titanium platform. It wasn't half as featured as this (drag and drop, multiple item selection with num of items selected display, etc) and it took much more time. Also, the speed wasn't half as fast, but that could be differences between titanium and firfox. I'll know what the speed difference is when I try it in Ti.
  - asnyder 17y ago
    Again, not to frustrate but aside from the Mac interface there's really not much separating this from these examples: http://demos.telerik.com/webmail/ http://demos.telerik.com/webmail/ http://gwt.google.com/samples/Mail/Mail.html http://gwt.google.com/samples/Mail/Mail.html http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html http://developer.yahoo.com/yui/examples/layout/adv_layout_so... I'm sure if I spent a little more time I could easily get you a list of 10 more. Again, I'm not saying that the framework isn't nice, I'm saying we shouldn't be ooh and ahhing.
fjabre 17y ago
I think that building web apps that look/feel like desktop apps is a step in the wrong direction. Some of the best web apps around like Gmail, Maps, Facebook, Twitter, Wordpress etc represent a complete break from traditional desktop software and I actually like that. You can almost think of the browser viewport as a blank canvas on which you can draw pretty much anything. Desktop apps feel much more constrained in terms of UI & appearance. I think web apps - if done right - look and feel much better than most desktop apps anyway. Not to take way from what the OP accomplished.. That's some serious javascripting and I like his approach much better than Cappuccinos
- johnrob 17y ago
  The best example of this is forward/back buttons - these don't exist on the desktop, but are integral to the browser experience.
  - slug 17y ago
    Undo/Redo ?
  - MaysonL 17y ago
    Take a look at the Newspeak "Hopscotch" IDE: forward and back buttons, and a history page.
- kalid 17y ago
  Yeah, there's definitely an uncanny valley where you start thinking it's a "buggy" desktop app vs. being a really slick web app.
deleted 17y ago
[deleted]

188 points by tswicegood 17y ago

You can play with the actual demo over here: http://ukijs.org/mail/index.html http://ukijs.org/mail/index.html It seems pretty interesting.

shrikant 17y ago
..and bloody cool!
pak 17y ago
It's interesting, but not very deep in terms of functionality. The main exhibits here are the split panel view and the table view. Both are OK, but these problems have already been solved many times by ExtJS, Dojo, and various jQuery plugins, most of which implement many more difficult features like sorting, searching, editing, and saving state. All else to be seen here is the meticulously reproduced skin with CSS and background images. Things I would have been excited to see, because they are not yet well-solved amongst JS frameworks: tokenizable editable text fields, like the real Mail.app's To: field, attachments using HTML5 D&D, a quickly-searchable inbox and a drag & drop sortable treelist view for the mailboxes.
- boucher 17y ago
  I actually think it shows a lot of promise. Though it is reasonably limited, a lot of what it does do it does well. For example, it doesn't have the extremely common problem of every piece of text being selectable, and often that selection fundamentally breaking other interactions like drag and drop.
  - necubi 17y ago
    Disabling text selection is actually really simple. All you need to do is apply user-select: none (currently available as -webkit-user-select and -moz-user-select) to the element.

briancooley 17y ago

What this basically means is that you have to do more: read more source, learn more conceptions and tools, support more code, fix more bugs. I think the biggest advantage to Cappucino is that, if you already know the Cocoa framework, there is less to learn.

sant0sk1 17y ago
True. But if you're already developing for the web, chances are you know JavaScript better than you know Cocoa.
- sant0sk1 17y ago
  Side Note: One of the major draws for me to learn Objective-J (coming from a Ruby/JavaScript background) was that I simultaneously learned a lot about Objective-C and Cocoa, which is key for iPhone/iPad apps. I felt like I was double dipping courses in college again.
  - boucher 17y ago
    More of our biggest users came from pure web backgrounds then from Cocoa backgrounds.

daok 17y ago

I have to admit that is quite fast, and the GUI is pretty. Nice job.

euroclydon 17y ago

How theme-able is it?

sant0sk1 17y ago

I'm a little confused. The blog post states: > "Models store, load and transform the data from the server." But the ukijs.org states: > "Uki doesn't want to be a Jack-of-all-trades. It only does layout but it does it well. You won't find any ajax or data storage layer code here." Which one is it?! (I'd much prefer the former)

regularfry 17y ago
Both. He's saying that models (in general) handle data, but Uki (in specific) doesn't specify how you should go about doing that.
- aaronblohowiak 17y ago
  The data.model file is about 100 lines of code

asnyder 17y ago

Disclaimer: I'm one of the co-founders of NOLOH (http://www.noloh.com http://www.noloh.com). I want to apologize in advance for being so brash. I find that these demonstrations are very misleading. We all ohh and ahh, but not because of the technical accomplishment, but because of the beauty of Mac interfaces. First, sure the app is fast, it's loading the entire application from JavaScript, yet another fat client app. Second, the capabilities that this provides seems no different than the basics of YUI, or other JavaScript widget collections with unified syntax. Third, it's misleading to suggest that this is Mac Mail when in fact I can't search. I guess that's not a part of the Mail.app. Fourth, 15 hours to do a main screen and a new message form, really? I'm sure that we or the guys at Cappuccino & Sproutcore could throw a similarly functioning demo together quicker. The hard part of this example is getting the image resources, not the implementation. This implementation could've been done just as well in straight JavaScript or any other JavaScript framework just as nicely.

rrhyne 17y ago
'This implementation could've been done just as well in straight JavaScript or any other JavaScript framework just as nicely.' I disagree, as I've actually I've tried it in jQuery for an app built on the Titanium platform. It wasn't half as featured as this (drag and drop, multiple item selection with num of items selected display, etc) and it took much more time. Also, the speed wasn't half as fast, but that could be differences between titanium and firfox. I'll know what the speed difference is when I try it in Ti.
- asnyder 17y ago
  Again, not to frustrate but aside from the Mac interface there's really not much separating this from these examples: http://demos.telerik.com/webmail/ http://demos.telerik.com/webmail/ http://gwt.google.com/samples/Mail/Mail.html http://gwt.google.com/samples/Mail/Mail.html http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html http://developer.yahoo.com/yui/examples/layout/adv_layout_so... I'm sure if I spent a little more time I could easily get you a list of 10 more. Again, I'm not saying that the framework isn't nice, I'm saying we shouldn't be ooh and ahhing.

fjabre 17y ago

I think that building web apps that look/feel like desktop apps is a step in the wrong direction. Some of the best web apps around like Gmail, Maps, Facebook, Twitter, Wordpress etc represent a complete break from traditional desktop software and I actually like that. You can almost think of the browser viewport as a blank canvas on which you can draw pretty much anything. Desktop apps feel much more constrained in terms of UI & appearance. I think web apps - if done right - look and feel much better than most desktop apps anyway. Not to take way from what the OP accomplished.. That's some serious javascripting and I like his approach much better than Cappuccinos

johnrob 17y ago
The best example of this is forward/back buttons - these don't exist on the desktop, but are integral to the browser experience.
- slug 17y ago
  Undo/Redo ?
- MaysonL 17y ago
  Take a look at the Newspeak "Hopscotch" IDE: forward and back buttons, and a history page.
kalid 17y ago
Yeah, there's definitely an uncanny valley where you start thinking it's a "buggy" desktop app vs. being a really slick web app.

deleted 17y ago

[deleted]