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.”
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.”
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…