SmartComposition: Enhanced Web Components for a Better Future of Web Development
Authors: Michael Krug, Martin Gaedke
We introduce the usage of enhanced Web Components to create web applications with multi-device capabilities by composition. By using the latest developments of the family of W3C standards called “Web Components” that we extended with dedicated communication and synchronization functionality, web developers are enabled to create web applications with ease. We enhance Web Components with an event-based communication channel, which is not limited to a single browser window. With our approach, applications using the extended Web Components and an additional synchronization service also support multi-device scenarios. In contrast to other widget-based approaches (W3C Widgets, OpenSocial containers), the usage of Web Components does not require the deployment of a dedicated runtime environment or platform, like Apache Rave. Web Components are based on standard web technologies, are natively supported by recent web browsers and loosely coupled using our extension. This ensures a high level of reuse.
The second demo is more complex. We used our component-based approach to implement a media enrichment application. This demo shows a mashup-like scenario, which was former discussed and implemented without the usage of Web Components. We created different kinds of new components. Most of them gather data from various web services regarding a topic or keyword to display information that can be useful while watching a video. The video is played by a special video component that posts messages containing metadata at specific timestamps. This is done by exploiting the TextTrack-API and an attached VTT subtitles file that contains time-based metadata ‒ in this case a transcript of the spoken. Parts of the transcript are published using a specific topic that is subscribed by a component that extracts keywords using statistical algorithms and natural language processing technologies. The extracted keywords are again published to the bus with different topics based on determined categories. To visualize information about those topics, we implemented components that catch data from, i.e. Twitter, Flickr, Google Maps, Google Images and Wikipedia. The mashup of components is as simple as adding new elements to the HTML document. To proof the multi-device capabilities of our solution, we will show that you can have the components displaying different kinds of information synchronized on multiple devices. You even can move the components from one device to another one.