Tim's Weblog
Tim Strehle’s links and thoughts on Web apps, software development and Digital Asset Management, since 2002.
2013-06-14

A trend towards reusable UI components in Web apps

In Web application development, I’m seeing a trend towards reusable components for building the user interface. The idea isn’t new (see Mashups, Portlets, Web Parts or jQuery Plugins): Make it easy to reuse ready-made UI elements built by different developers (e.g. a form field with autocomplete functionality, a date picker, a tree view, a dialog) in your Web application. That should save a lot of developer time.

But in the last years, lots of Web apps (including ours) committed to fat frameworks (Ext JS or YUI 2) which promised rapid development and a huge set of ready-made widgets. The first 60% of the app actually were developed rapidly, but then you were stuck: Extending the framework yourselves was hard, and swapping in widgets from other frameworks and libraries was ugly or impossible. To quote Dr. Axel Rauschmayer in Google’s Polymer and the future of web UI frameworks: “Currently, frameworks are largely incompatible: they usually come with their own tool chain, inheritance API, widget infrastructure, etc.”

I’m glad that this era is ending, and lighter approaches are emerging that focus on simple reusability. Just in time for the new Web app interfaces I’m going to build this year! I’ve written down my thoughts on JavaScript UI components already, so what follows is a few links that illustrate the broader trend.

Most prominently, the official W3C Web Components: “Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.” Watch the Web Components: A Tectonic Shift for Web Development video for an in-depth technical introduction.

Pete Hunt from Facebook – Why did we build React?: “React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.”

Flight by Twitter: “Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. […] Components do not engage each other directly; instead, they broadcast their actions as events which are subscribed to by other components.”

Henri Bergius – Writing reusable, multi-platform JavaScript with Component: “With Component you can easily write and distribute reusable JavaScript modules, including user interface components that may include HTML templates and CSS.”

Making components interoperable (especially event handling, CSS/looks, consistent behaviour) is hard, there will always be elements that don’t go together well. But a simpler, more accessible approach to component building and packaging should make the lives of Web developers easier. I’ll try to share what I learn…

Update: Here’s what I learned so far – A simple JavaScript component architecture (first draft). And why I think UI components are very important: Web app interoperability – the missing link