Tuesday, March 11, 2014

Hands on with the jQuery UI widget factory at DevNation


I’m thrilled to be speaking the upcoming DevNation conference. DevNation is an Open Source Developer conference co-located with the Red Hat Summit. With the announced agenda and the co-location with Summit, the conference is shaping up to be quite the event!

I’ll be speaking about developing widgets with the jQuery UI widget factory. We’ll look at how the widget factory takes away much of the boiler plate when writing stateful jQuery plug-ins, statefulness that comes intrinsically when creating visual plug-ins. This talk is based off of the work we’ve been doing lately with RichWidgets. It’s a widely applicable topic, as the browser is the target for so many applications frameworks and languages.

I’m also really looking forward to participating in the Beer & BoF Mobile & Rich Client smack down. I participated in the BOF at the 2012 JBoss World, and it was a lot of fun. The guys behind a number of UI frameworks at JBoss get together in a no-holds barred smack down between the various framework. The tongue-in-cheek approach is entertaining, and the content discussed is very enlightening. Be sure to attend this BOF if you are curious how the various UI technologies stack up against each other.

While at the conference I look forward to attending a number of interesting looking sessions:

  • jQuery: Behind the JavaScript - Kris Borchers

  • Write your first Ceylon program with the language author - Gavin King

  • High Performance Reactive Applications with Vert.x - Tim Fox

  • Full stack Javascript from mobile to cloud - Grant Shipley

  • Mobile web development: workflow and best practises - Luke Holmquist

Finally let’s not forget the hacknight! Here’s a great chance to share a table with a group of developers and hack away on some OSS. From new contributors to old, all are welcome. Come and share your ideas and your code!

I look forward to meeting many folks at DevNation - feel free to track me down if there is anything you want to discuss, or even just to say hi!

Thursday, November 29, 2012

Polyglot Widgets

JBoss Developer Framework

The JBoss JDF project shows Java EE developers how to build state-of-the-art applications using the JBoss implementations of the Java EE stack. Specifically, the JDF View Frameworks section identifies a number of alternative approaches one can take when developing the view layer of your application. We in the RichFaces project have been working towards better supporting this effort by redesigning our JSF component architecture to allow the javascript part of our components (what we call our “widgets”) to be used independent of JSF, either in a standalone manner or coupled with another web framework.

By isolating the client-behaviour into widgets, we are able to achieve both a faster turnaround on new JSF component development, while at the same time enabling users to achieve a uniform look and feel in their heterogeneous application environments. To demonstrate the impact of this, I’ve prepared a demo application that demonstrates using our standalone javascript widgets in JSF with RichFaces, GWT with Errai, and a plain HTML 5 page with Aerogear.

Polyglot widgets demo


The polyglot-widgets demo takes the RichFaces Sandbox pickList component and builds a GWT and plain HTML5 application using the standalone javascript pickList widget.

Some key points of the demo to call out:

Consistent L&F

Imagine writing “polyglot” web applications with both a consistent Look & Feel, and access to the rich set of enterprise-grade widgets that you’ve come to expect from the RichFaces project. In the demo, the same RichFaces Sandbox pickList widget is used in a JSF, GWT and HTML 5 application. The widget and the demo pages themselves use the Bootstrap project for styling, which is what enables us to achieve a consistent L&F across the pages backed by different web technologies. This common L&F is taken one step further to deliver a consistent user experience by using the same javascript widget implementation across all the demo pages.

CDI Programming model

In the demo, we use the pickList component to make a selection on one of the demo pages, then click the submit button. On navigation to one of the other demo pages, you’ll notice the state persisted. This demonstrates how we can leverage CDI to provide a common programming model across all our web frameworks.

Integrated Ajax Push

Open each page of the demo in a separate window to witness selection updates synchronizing the pages in real time. Taking advantage of RichFaces push, the Errai CDI bus, and HTML 5 Server-Sent-Events (via the Atmosphere project) in each of the respective frameworks provides incredible power in keeping our “polyglot” web-apps in a coherent state.


I created a screencast of the demo, to make it easier to see the above points in action. Watch the screencast below, then head off to play with the demo yourself. Even better, fork the demo on github, and see what cool things you can do with it.

Next Steps…

I put this demo together as a proof-of-concept to help me illustrate what I mean when I talk about “standalone widgets” and polyglot/poly-framework applications. The RichFaces team will ramp up development on these new standalone widgets as we wrap up our RichFaces 4.3 effort and shift gears into RichFaces 5. So stay tuned for further development in this area!