Web Components + Backbone: A Game-Changing Combination

Web Components promise to change how we think about modularity on the web, and when combined with the structure and organization of Backbone.js we can create portable, dynamic, encapsulated UI modules that fit into any web application.

Web Components open up new, low-level interfaces for developers to create modules on the web with Custom Elements, HTML Templates, HTML Imports, and the Shadow DOM. These are exciting new technologies for web modularity, but on their own they can provide neither the rich interactivity nor maintainable structure we’ve come to expect in our JavaScript web applications. Other JS libraries are already exploring mechanisms for integrating Web Components, but Backbone.js, with its light-weight, flexible API, is in a unique position to provide a solid foundation for UI modules, and indeed entire UI libraries, built with Web Components.

This talk will provide an introduction to Web Components, but will focus on how Backbone can utilize each of their APIs to create well-structured UI modules to be reused and shared between web applications. It will present patterns for creating these modules and consider best practices for creating components in sharable UI libraries. And while browser support for Web Components is rapidly improving, this talk will also consider the polyfills available to start using Web Components in Backbone.js applications today.

Web Components and Backbone.js complement each other and, together, are a revolutionary pair that offers new and exciting approaches for developing interactive UI modules on the web.