Brick 2.0

TL;DR

What is Brick?

From its conception, Brick's goal has been to make building the interface of webapps easier. Lots of developers have great ideas, but either don't have the experience or time to build a UI that is performant, usable, and attractive. Just as native platforms have UI toolkits, Brick aims to provide a 'UIKit for the Web' using the latest standards to make authoring webapp UI easier than ever before.

What is Brick not?

We have very specific goals for Brick- to make building webapp interfaces easier. There are other projects that use the same technologies (like Google's excellent Polymer) that provide a more complete web application development solution. The motto on the Brick project is "strong opinions, tightly scoped"- meaning we don't intend to solve the problems of code stucture, module loading, data binding, or really any other problem other than webapp interfaces. However, because Brick components use the Custom Elements APIs to define new HTML elements, any web framework that has the ability to create or manipulate DOM (meaning pretty much all of them) can easily interoperate with Brick components.

Custom Elements

One reason Brick is different from similar projects such as Bootstrap is its use of the new Web Components browser APIs. Web Components let web developers do new exciting things with HTML, CSS, and JavaScript:

  • Define new HTML elements and specify how they work (Custom Elements)
  • Define HTML templates that can be repeatedly cloned (Template Element)
  • Hide the complexity of a widget from the rest of a document and prevent its CSS from leaking (Shadow DOM)
  • Load related JavaScript, CSS, and HTML dependencies all in one action (HTML Imports)

These new APIs have gotten developers excited about the Web in a whole new way, and people have begun building and sharing their own Custom Elements. Brick, Polymer, and many other third-party Custom Elements are being distributed and indexed as part of an awesome burgeoning Custom Elements ecosystem.

People have asked how their component can become part of Brick. We love contributions, but not every component may match the coding and API style of Brick, or meet its goals. Just as many programming languages have a standard library as well as a rich ecosystem of third-party modules, Brick aims to be a 'standard library' of webapp-specific Custom Elements, but will support and interoperate with the larger community of components.

On X-Tag

In the early(er) days of Web Components, the Custom Elements standard was very much so in flux. It was hard to build to the standard or even a polyfill because the APIs kept changing. Daniel Buchner and Arron Schaar concieved of x-tag, which provided useful helper functions around events and the component definition process. The library was a godsend, and using it Brick was able to get off the ground. Over time, however, the APIs have settled, and the project found itself in need of the other features of the Web Components standards. These features are all part of the platform.js polyfill that is part of Polymer and available externally as well. Additionally, the rising popularity of Google's Polymer and its syntax for describing Custom Elements grew, and when users came to contribute to Brick and x-tag, they found themselves facing an unfamiliar syntax and an underlying library that was frequently not well documented. The decision was made that if users encounter Custom Element registration syntax, it should be the standards-based syntax. Brick components are now written in a 'vanilla' style, using the standards-based APIs directly.

Here's a diagram of how things looked with Brick 1.0:

Platform (standards)
Polyfill (platform.js)
Polymer
<polymer-wc>
<vanilla-wc>
x-tag
Brick

Going forward, Brick will ship using the same platform.js polyfill used by Polymer. This gives us access to the full range of Web Components features, as well as ensures interoperability with Polymer and other standards-based Custom Elements:

Platform (standards)
Polyfill (platform.js)
Polymer
<polymer-wc>
<vanilla-wc>
<brick-wc>

So What's Next?

After deciding to use the platform.js polyfills and remove the x-tag library, Brick is being built from the ground-up to be lighter, more modular, and easier to contribute to. It's a big undertaking, so we're moving from 1.0 to 2.0 to reflect the scale of the work. It's a more-or-less reboot of the entire project, and I as well as the rest of the team are very excited about it. We haven't been vocal enough about updates, but I'm committing to posting regularly here as well as on Twitter at @mozbrick. Stay tuned!

~potch

written 15 July 2014 · permalink