{"id":1664,"date":"2013-06-14T00:00:00","date_gmt":"2013-06-13T22:00:00","guid":{"rendered":"https:\/\/wwwneu.strehle.de\/tim\/weblog\/archives\/2013\/06\/14\/1615\/"},"modified":"2013-06-14T00:00:00","modified_gmt":"2013-06-13T22:00:00","slug":"1615","status":"publish","type":"post","link":"https:\/\/www.strehle.de\/tim\/weblog\/archives\/2013\/06\/14\/1615\/","title":{"rendered":"A trend towards reusable UI components in Web apps"},"content":{"rendered":"

In Web application development, I\u2019m seeing a trend towards reusable components for building the user interface. The idea isn\u2019t new (see Mashups<\/a>, Portlets<\/a>, Web Parts<\/a> or jQuery Plugins<\/a>): 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.<\/p>\n

But in the last years, lots of Web apps (including ours) committed to fat frameworks (Ext JS<\/a> or YUI 2<\/a>) 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\u2019s Polymer and the future of web UI frameworks<\/a>: \u201cCurrently, frameworks are largely incompatible: they usually come with their own tool chain, inheritance API, widget infrastructure, etc.\u201d<\/p>\n

I\u2019m 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\u2019m going to build this year! I\u2019ve written down my thoughts on JavaScript UI components<\/a> already, so what follows is a few links that illustrate the broader trend.<\/p>\n

Most prominently, the official W3C Web Components<\/a>: \u201cWeb 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.\u201d Watch the Web Components: A Tectonic Shift for Web Development video<\/a> for an in-depth technical introduction.<\/p>\n

Pete Hunt from Facebook \u2013 Why did we build React?<\/a>: \u201cReact<\/a> is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.\u201d<\/p>\n

Flight by Twitter<\/a>: \u201cFlight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. [\u2026] Components do not engage each other directly; instead, they broadcast their actions as events which are subscribed to by other components.\u201d<\/p>\n

Henri Bergius \u2013 Writing reusable, multi-platform JavaScript with Component<\/a>: \u201cWith Component<\/a> you can easily write and distribute reusable JavaScript modules, including user interface components that may include HTML templates and CSS.\u201d<\/p>\n

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

Update:<\/em> Here\u2019s what I learned so far \u2013 A simple JavaScript component architecture (first draft)<\/a>. And why I think UI components are very important: Web app interoperability \u2013 the missing link<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

In Web application development, I\u2019m seeing a trend towards reusable components for building the user interface. The idea isn\u2019t 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) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_share_on_mastodon":"0"},"categories":[1],"tags":[],"class_list":["post-1664","post","type-post","status-publish","format-standard","hentry","category-weblog"],"share_on_mastodon":{"url":"","error":""},"_links":{"self":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/comments?post=1664"}],"version-history":[{"count":0,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1664\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/media?parent=1664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/categories?post=1664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/tags?post=1664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}