Speakur : leveraging web components for composable applications

This report is a case study of applying abstraction, encapsulation, and composition techniques to web application architecture with the use of Web Components, a proposed extension to the HTML5 Document Object Model. I created Speakur, a real-time social discussion plugin for the mobile and desktop web, to show how Web Components can help realize software engineering principles and design patterns, including the composition of applications from components sourced from diverse authors and frameworks. Web authors can add a Speakur discussion to their page by inserting a simple HTML element at the desired spot to give the page a real-time discussion or feedback system. Speakur uses the Polymer framework's implementation of the draft Web Components standard to achieve the encapsulation of its internal implementation details from the containing page behind a simplified, well defined interface. Web Components are a proposed W3C standard for writing custom HTML tags that take advantage of new browser technologies like Shadow DOM, package importing, CSS Flexboxes and data-bound templates. This report reviews Web Components and related technologies and provides a case study for structuring a real-world WC applet that is embedded in a larger app or system. The major research question is whether Web Components offer a viable path towards the encapsulation and composition principles that have largely eluded web engineers thus far. In other words, are components really the future of the web? Subsidiary topics include assessing the maturity and performance of current Web Components technologies, and methods of synchronization between user interface components and local and remote data models. My analysis shows that Web Components successfully address many of the key structural and organizational problems faced by web software engineers.