Tuesday, August 28th, 2007

theClassConnection: Connecting you at U

Category: GWT, Showcase

<p>Chris Klundt and his team have created theClassConnection, a website that provides tools to connect students/teachers/tutors across any campus, any class. They can share files, messages, flashcard decks, and more.

The application is written entirely using GWT with Script.aculo.us for effects.

We asked Chris a few questions about the project:

Why GWT?

I had never written one line of javascript prior to this project. With GWT I was able to:

  • Stay in Java (my language of choice)
  • Compose and debug in Eclipse (my favourite editor/debugger)
  • Debug again in GWT Hosted Mode (a good debugger for second tier work)
  • Convert the Java to Javascript automatically for all major browsers
  • Compress the Javascript down

What are the features of the application

As far as architecture goes, it is a single page application:

  • The entire application is written in one HTML/JS page.
  • Thanks to GWT we compressed a lot of javascript code down
  • Browsers Back/Forward buttons work thanks to GWT history management.
  • We use Script.aculo.us everywhere, and it works seamlessly with GWT. “Blind up”, “blind down”, and “grow” are some of the cooler effects.

As far as features:

Searching

  • In many cases, the searching is done right on the client. No need for a database call.
  • Database searches are still done as you type, so no clicking “submit”.

Uploading: Upload Ajax style, with real time progress bars and instant results once the upload is complete.

Movable Popups: Drag popups around the screen to get a better view.

Calendars:

  • We’ve build a collaborative online calendar that gives several display options for users including “list view”, “days & weeks view” and “months & years view”
  • Pick and choose what events you want to see at any given time thanks to instantly responsive filtering.

Files:

  • Drag and drop file tree structure, just like a Mac file view.
  • All public files can be “bookmarked” to your file tree. Each user can rename any file once they have it bookmarked, because you get your own copy of the file.

Flashcards

  • Creating a deck is blazing fast due to “auto-card creation”.
  • Add images from the web or your computer to any card.
  • Studying flashcard decks is fast, easy and very customizable thanks to our LightBox GUI.
  • Decks can be shared and bookmarked, the same as files.

Messages

  • Thanks to a “Message Repository” messages are auto-sorted by class and user, and viewable all together in the inbox.
  • Composing new messages is easy thanks to type-ahead recipient lookup (with user profiles too).
  • Forum

  • Open multiple threads simultaneously. Switch between “flat mode” and “scrolling”.
  • Post in real time.

Auto Update: The site updates everything once another user adds/changes/removes something from public view. (e.g. User adds a calendar event to my class, if I’m logged in, I see the new event in less than a minute)

Here is a quick walk-through of the product:

Related Content:

17 Comments »

Comments feed TrackBack URI

Wow. Awesome product. And all in GWT. I’m IMPRESSED.

Comment by C Wallman — August 28, 2007

Hmm… considering that fact that about only 1 out of the 14 javascripts are compressed I find “Thanks to GWT we compressed a lot of javascript code down” to be a rather dubious claim…

Comment by Alex Egg — August 28, 2007

GREAT TOOL! I HOPE THIS CATCHES ON…IT COULD MAKE MY LIFE MUCH EASIER WITH MY FREQUENT CONTACTS AND CONNECTIONS…!

Comment by Al Toon — August 28, 2007

Very slick – enjoyed nosing around the demo implementation.

Comment by Nick Winfield — August 28, 2007

Professor’s dream…easy, fast and covers the basics…obsoletes some of the clunky offerings colleges pay big buck for.

Comment by CG Gilmore — August 28, 2007

damn, 800kb of compressed js, that’s too much, don’t you think so? GWT is bad

Comment by Anonymous — August 28, 2007

Great UI, slick and easy to use, and all in GWT! This should be the new model for all that GWT can do!

Comment by Emilia — August 28, 2007

@anonymous:

800k of Javascript might seem like a lot, but you should really consider the size and complexity of the app before calling it “a lot”. Gzipped, it’s down to about 350k. Then that gets cached forever, meaning returning visitors aren’t going to have to fetch it again.

If this app were broken up into lots of little bits, I’m sure the code size would seem quite a bit smaller, but the end-user experience would likely be worse as well, as the page would constantly refresh. At the end of the day, you have to ask yourself what will serve your users best, and this app works beautifully for me.

I would also like to point out that, if you had written all this code by hand on top of another Javascript toolkit, you would probably end up with the more or less the same order of magnitude of code. But you would be stuck there indefinitely. The compiler output shrunk by 20% between GWT 1.3 and 1.4, with plenty of room for further optimization in upcoming releases.

Comment by Joel Webber — August 28, 2007

I must say, if you’re going to create 350k of script, at least you stuffed a ton of functionality in it (I’m talking to you, .Mac gallery scripts). I wish I had such a tool years ago! Is there even a profit model for theClassConnection? Who cares, it looks pretty sweet!

Comment by Charles — August 28, 2007

1. It’s unclear to me how an undifferentiated mass of code is a good thing. That isn’t ever mentioned as a benefit in any app architecture discussion I’ve attended.

2. 800k doesn’t “seem” like a lot. It “is” a lot. Especially since it’s 1025.1K. If CC would be willing to put up, say, 10,000, to have someone that actually knows what they’re doing to rebuild the site, I’m sure they’d get they’re money’s worth, and a few hundred K back to boot. Ajaxian crowd: shame! How can you even suggest that this obvious and unprofessional bloat is acceptable?

2a. I suggest you all check out facebook’s .js collection. Consider: any application that needs hundreds of K of javascript to build its interface is doing something wrong. Which is probably why the site is long on buttons and short on features. Back to facebook: you think all the good work, the hard work, the stuff that real software developers are needed for, exists on the backend? So that, you know, you can have a mulimillion user modular system that is solid and fast and extensible? Hmm….that is what this CC is going for, isn’t it?

3. What is this “everything on one page” thing? It’s quite a little marketing deception. What this site has “solved” isn’t a problem (is the internet a bad model?), and in fact the huge waste of useful space created by forcing everything useful into a little iframe box is astoundingly bad. It isn’t on one page. It’s a frame-based, traditional, and obsolete model that solves nothing, especially with this “I’ll give you a tiny box in the middle of the page where everything useful gets done so that you can marvel at the size of our logo and the uber-cool 120px wide play on words `crazy` and `efficient`. Get it? It’s *irony* ”

3a. This site’s stated goal is to help students organize their complex informational matrix: classes, appointments, files, study periods, classmates, colleagues, professors, tutors, and so forth. This means there is no need to waste space. A fluid, screen filling layout is appropriate. the faq/tour/tools unit can be completely eliminated, increasing vertical space (google/dictionary/wikipedia search exists already in your browser a few pixels up and a few pixels right of this reinventing-the-wheel monstrosity, faq/search — see anywhere that could be better presented?, and the tour isn’t even relevant enough to be implemented yet). Use the most space for the most important information. Maximize the amount of information per square inch. Situate regularly used information closer to the user. Eliminate anything that serves no useful purpose. Maintain consistency between data types and data controls… your goal is to render for the user as complete a picture of what they are looking for as comprehensively and as quickly as possible.

3b. Everyone loves accordions — let’s use them for everything! add a reasonable class size (say, 50), some 30 events for a months, message yourself 20 times, heck, just actually use the interface for more than 5 minutes. How are those accordions working for you now? Wish you had more space? Accordions are for small, usually fixed, sets of information. But hey, that there snappy animation is cool! 150k of Protoscriptaculous joy! I’m sure a bleary eyed student who can’t find that thing he’s looking for at 2 in the morning will appreciate the animations too. It’s fun to scroll the page to find the panels to click the panels to watch them push all your information off the screen so you can scroll the page to click the…polish man with a feather in his cap and a song in his heart holding children wide eyed and rapt with his magical squeezebox. Which is a better word for it. Especially here.

4. New software should be better software. Using a bloated library to mask a lack of experience is cutting corners, not cutting edges.

Comment by jimbob — August 28, 2007

@jimbob

Thanks jimbob (and everyone else as well) for your comments. We are seriously examining them because it is clear that you are just as passionate about this sort of thing as we are, and that’s what helps make good web development.

A few quick comments come to mind right away.

1) The size of the JS. Our main objective was to make a site that offered all the major tools a student might need in one place (page) where everything is no more than 3 clicks away and never requires more than a few bytes to be downloaded from the web. Yes, we do have a “large” JS file compared with other sites; however, that is all we have. There are no HTML, PHP, etc pages to request once the user enters the site. As an added bonus, because the JS file is static, the user can cache the file and never needs to download it again. This saves our servers bandwidth over multiple visits, and more importantly, makes things faster for our users.

If you think about it, we have over 100 widgets, 150+ different database calls and over 500+ different “clicks” a user can make, all working together and all compressed into one ~1MB file (thats only a couple of pages on most major sites).

2) As far as using GWT, it was very obvious to us, that programming in Java is more efficient, more effective, more organized, strongly typed, easy to debug (need I go on) than programming in Javascript. We trust the experts at Google to make the translation from Java to JS accurately, efficiently, and compactly.

With the power of Google and its following behind us, we can only assume that the GWT will become more powerful and more efficient as time progresses.

3) As far as the look of the site, we wanted to keep the page at a width that would be supported by all screens (including 13″ MacBooks). Is there room to play with, certainly, and we plan on taking all usability concerns into account. If enough people disapprove of Scipt.aculo.us effects, it is a simple change for us to remove them.

We feel that the layout is one that keeps all the tools and all the organization close at hand, without distracting a student when he/she is using the site. Is it better to click around to multiple pages than to scroll? I don’t know, but we can certainly adapt.

—————————————————————————
Again we appreciate all the comments from everyone.

Comment by Chris — August 28, 2007

5. A good concept and it should go far

Comment by jimbob — August 29, 2007

Impressive product. CC is packed with everything a student needs. The layout is super easy and set up in a familiar way. The FAQs and tools are nice and handy at the top. I really appreciated the forums, calender and message capabilities. Really, really cool!

Comment by Susie — August 31, 2007

Please get rid of the accordion affect. It delays reading the screen. Accordion effects are cool – if you don’t actually have to use the app. Just have instant transition.

Comment by dave — September 4, 2007

Very impressive tool. It has great potential. Both Faculties and students will benefit……

Comment by Jack Wills — September 21, 2007

CC is great. First time seen something worth to comment as good Web 2.0.

Comment by Java Rules — October 27, 2007

Charles has some kind of problem for sure. I know in IT people like them exist in every company.. small or big.. they have problem with everything as if they are paid for that. CC website is great in every sense and don’t tell me your are leaving in 1980 that downloading 800kb file takes forever on high speed internet.

GWT is great but again how much google will do in future will remain to be seen. You are stuck with GWT for updates and new features. You performance will decide by GWT up to some extend compare to writing AJAX or JS by experience developer (you can argue here)

I like it so far what I have seen but one more framework THINWIRE..check it out

Comment by Java Rules — October 27, 2007

Leave a comment

You must be logged in to post a comment.