Our Spiffy UI

Our Spiffy UI

by Zack Grossbart on August 9, 2010

Update: The Spiffy UI Framework mentioned in this presentation is now open source. Check it out at http://www.spiffyui.org.

I’ve been working on a new project called The Novell Identity Manager Reporting Module. It generates comprehensive reports about identity data in very large organizations. It was also a chance to build a new web application from the ground up.

Official product names take a long time so within our group this project was known as Our Spiffy Reporting Tool. It represents many new directions and innovations for web application UI. It’s the application of some new philosophies. We integrated fluid grids and vertical rhythm, called all of our APIs using REST from GWT, and created a new auto-complete multi-valued suggest box.

This presentation also shows some of my personal transformation from desktop programming snob to a happy web application developer.

Here’s Our Spiffy UI:

This presentation was given in the browser with JQuery. It’s all open source and you can see the slides online.

  • aloleary

    OK, so what I want to use now is the Spiffy UI framework ! :-) This encapsulates the best practices as far as I can see them today and found your website searching the terminologies/technologies I am trying to get working together – and I assume many others.
    The Spiffy UI Framework would be an amazing BluePrint for best-in-class GWT/REST Usage.

  • http://www.zackgrossbart.com Zack Grossbart

    I’m glad the presentation convinced you to use it, but I don’t have anything for you to use. This framework was made for a specific Novell product and isn’t available by itself. Yet…

  • http://www.golfgurls.com Pat

    Thanks Zack. Just discovered your calendar plug-in. Will be a big help in keeping me organized.!

  • http://www.askingdev.com Coder

    It’s a crazy coder’s stuff. Thanks!

  • karthik reddy

    Hi Zack

    You mention Closure Compiler in your presentation. Just wondering how GWT and Closure Compiler would mix together ??? AFAIK GWT compiler is pretty robust in its compilation of Java to JS.

    Also, would like to know your opinion about using the widgets offered by Closure Library (http://closure-library.googlecode.com/svn/docs/index.html) in conjunction with GWT .

  • http://www.zackgrossbart.com Zack Grossbart

    Thanks for the comments Karthik.

    We use the Closure Compiler to compile the JavaScript we write and third-part JavaScript libraries we use. We don’t do any extra compilation on the GWT generated JavaScript.

    I haven’t spent much time with the widgets from the Closure Library, but they look like they should work well with GWT. If you try it please let us know how it goes.

    Thanks,
    Zack

  • karthik reddy

    Thanks for the reply Zack

    “We use the Closure Compiler to compile the JavaScript we write and third-part JavaScript libraries we use. ”

    So, I presume any hand-coded JS or Jquery plugins that would eventually end up inside a JSNI method, were actually compiled by the Closure Compiler. I guess, the reason for resorting to Closure compiler would be that GWT compiler is not so efficient in compiling the native JS code. They actually openly admit that on GWT’s website:

    “JSNI code is potentially less portable across browsers, more likely to leak memory, less amenable to Java tools, and harder for the compiler to optimize.”

    http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html

    I think this idea of compiling native JS using the Closure Compiler before including it in the JSNI method could actually be documented as a best practice for the GWT developer community.

    Also, regarding the interoperability of Closure widgets and GWT, I was doing some online research and apparently the rich text editor that is being used by the new Google Groups(built using GWT) uses the battle-tested editor from Closure library.(the same editor that is used in Gmail).
    [Source: Joel Webber from GWT team at https://groups.google.com/forum/?fromgroups#topic/google-web-toolkit-contributors/lVG92qqOvU8) ]

    If this is indeed true and Closure library works seamslessly with GWT this is good news for the GWT developers. They would get the best of both worlds(Closure Library and GWT).

    I will actually try to build something to demo this integration between Closure Library widgets and GWT .

  • http://www.zackgrossbart.com Zack Grossbart

    Karthik,

    Just to be clear, we aren’t running the Closure Compiler on JavaScript that ends up in GWT native (JSNI) methods. My opinion is that the GWT documentation is correct that those methods are not a good place to write code. We try to limit the code we write in native methods to one or two lines maximum.

    We use the Closure Compiler for JavaScript code which is in separate .js files and referenced as part of our HTML page.

  • Barry

    Bumping for a status update, I would love to get my hands on this.nnBarry

  • http://www.zackgrossbart.com Zack Grossbart

    We are working hard to get this out. Hopefully there will be more updates soon.