{"_id":"5418e64758ac9fc73a2651d1","initVersion":{"_id":"5418e64758ac9fc73a2651cf","version":"1.0"},"tags":[],"project":"5418e64758ac9fc73a2651cc","user":{"_id":"5250b3ad5ac09b3564000005","username":"gkoberger","name":"Gregory Koberger"},"__v":0,"createdAt":"2014-09-17T01:39:19.147Z","changelog":[],"body":"## TL;DR\n\n  * [Brick is a consistent and curated collection of components (UI and functional) used to ease the webapp development process.](#what-is-brick-)\n  * [Brick is not a framework.](#what-is-brick-not-)\n  * [Brick is a participant in the open Custom Elements ecosystem.](#custom-elements)\n  * [Brick will no longer rely on the x-tag library.](#on-x-tag)\n  * [Brick 2.0 is coming soon!](#so-what-s-next-)\n\n## What is Brick?\n\nFrom 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.\n\n## What is Brick not?\n\nWe 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.\n\n## Custom Elements\n\nOne 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:\n\nDefine new HTML elements and specify how they work (Custom Elements)\nDefine HTML templates that can be repeatedly cloned (Template Element)\nHide the complexity of a widget from the rest of a document and prevent its CSS from leaking (Shadow DOM)\nLoad related JavaScript, CSS, and HTML dependencies all in one action (HTML Imports)\nThese 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.\n\nPeople 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.\n\n## On X-Tag\n\nIn 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.\n\nHere's a diagram of how things looked with Brick 1.0:\n[block:html]\n{\n  \"html\": \"<div class=\\\"diagram\\\">\\n  <div class=\\\"layer\\\">\\n    <div class=\\\"label platform\\\">Platform (standards)</div>\\n    <div class=\\\"children\\\">\\n      <div class=\\\"layer\\\">\\n        <div class=\\\"label poly\\\">Polyfill (platform.js)</div>\\n        <div class=\\\"children\\\">\\n          <div class=\\\"layer\\\">\\n            <div class=\\\"label library\\\">Polymer</div>\\n            <div class=\\\"layer\\\">\\n              <div class=\\\"label wc\\\">&lt;polymer-wc&gt;</div>\\n            </div>\\n          </div>\\n          <div class=\\\"layer\\\">\\n            <div class=\\\"label wc\\\">&lt;vanilla-wc&gt;</div>\\n          </div>\\n          <div class=\\\"layer\\\">\\n            <div class=\\\"label library\\\">x-tag</div>\\n            <div class=\\\"children\\\">\\n              <div class=\\\"layer\\\">\\n                <div class=\\\"label wc\\\"><b>Brick</b></div>\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n\\n<style>\\n  .diagram {\\n  position: relative;\\n  max-width: 500px;\\n  margin: 2em 0;\\n}\\n.diagram .layer {\\n  -webkit-flex: 1;\\n  flex: 1;\\n  display: -webkit-flex;\\n  display: flex;\\n  -webkit-flex-direction: column;\\n  flex-direction: column;\\n  -webkit-justify-content: flex-end;\\n  justify-content: flex-end;\\n}\\n.diagram .label {\\n  box-sizing: border-box;\\n  text-align: center;\\n  line-height: 40px;\\n  height: 40px;\\n  -webkit-order: 1;\\n  order: 1;\\n  margin: 0 1px;\\n}\\n.diagram .children {\\n  display: -webkit-flex;\\n  display: flex;\\n  -webkit-flex-flow: row;\\n  flex-flow: row;\\n}\\n.diagram .label.platform {\\n  background: hsl(0,80%,70%);\\n}\\n.diagram .label.poly {\\n  background: hsl(50,80%,70%);\\n}\\n.diagram .label.library {\\n  background: hsl(100,80%,70%);\\n}\\n.diagram .label.wc {\\n  background: hsl(200,80%,70%);\\n}\\n\\n</style>\"\n}\n[/block]\nGoing 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:\n[block:html]\n{\n  \"html\": \"<div class=\\\"diagram\\\">\\n  <div class=\\\"layer\\\">\\n    <div class=\\\"label platform\\\">Platform (standards)</div>\\n    <div class=\\\"children\\\">\\n      <div class=\\\"layer\\\">\\n        <div class=\\\"label poly\\\">Polyfill (platform.js)</div>\\n        <div class=\\\"children\\\">\\n          <div class=\\\"layer\\\">\\n            <div class=\\\"label library\\\">Polymer</div>\\n            <div class=\\\"layer\\\">\\n              <div class=\\\"label wc\\\">&lt;polymer-wc&gt;</div>\\n            </div>\\n          </div>\\n          <div class=\\\"layer\\\">\\n            <div class=\\\"label wc\\\">&lt;vanilla-wc&gt;</div>\\n          </div>\\n          <div class=\\\"layer\\\">\\n            <div class=\\\"label wc\\\"><b>&lt;brick-wc&gt;</b></div>\\n          </div>\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n</div>\"\n}\n[/block]\n## So What's Next?\n\nAfter 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!","slug":"welcome-to-mozilla-brick","title":"Introducing Brick 2.0"}

Introducing Brick 2.0


## TL;DR * [Brick is a consistent and curated collection of components (UI and functional) used to ease the webapp development process.](#what-is-brick-) * [Brick is not a framework.](#what-is-brick-not-) * [Brick is a participant in the open Custom Elements ecosystem.](#custom-elements) * [Brick will no longer rely on the x-tag library.](#on-x-tag) * [Brick 2.0 is coming soon!](#so-what-s-next-) ## 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: [block:html] { "html": "<div class=\"diagram\">\n <div class=\"layer\">\n <div class=\"label platform\">Platform (standards)</div>\n <div class=\"children\">\n <div class=\"layer\">\n <div class=\"label poly\">Polyfill (platform.js)</div>\n <div class=\"children\">\n <div class=\"layer\">\n <div class=\"label library\">Polymer</div>\n <div class=\"layer\">\n <div class=\"label wc\">&lt;polymer-wc&gt;</div>\n </div>\n </div>\n <div class=\"layer\">\n <div class=\"label wc\">&lt;vanilla-wc&gt;</div>\n </div>\n <div class=\"layer\">\n <div class=\"label library\">x-tag</div>\n <div class=\"children\">\n <div class=\"layer\">\n <div class=\"label wc\"><b>Brick</b></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<style>\n .diagram {\n position: relative;\n max-width: 500px;\n margin: 2em 0;\n}\n.diagram .layer {\n -webkit-flex: 1;\n flex: 1;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n -webkit-justify-content: flex-end;\n justify-content: flex-end;\n}\n.diagram .label {\n box-sizing: border-box;\n text-align: center;\n line-height: 40px;\n height: 40px;\n -webkit-order: 1;\n order: 1;\n margin: 0 1px;\n}\n.diagram .children {\n display: -webkit-flex;\n display: flex;\n -webkit-flex-flow: row;\n flex-flow: row;\n}\n.diagram .label.platform {\n background: hsl(0,80%,70%);\n}\n.diagram .label.poly {\n background: hsl(50,80%,70%);\n}\n.diagram .label.library {\n background: hsl(100,80%,70%);\n}\n.diagram .label.wc {\n background: hsl(200,80%,70%);\n}\n\n</style>" } [/block] 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: [block:html] { "html": "<div class=\"diagram\">\n <div class=\"layer\">\n <div class=\"label platform\">Platform (standards)</div>\n <div class=\"children\">\n <div class=\"layer\">\n <div class=\"label poly\">Polyfill (platform.js)</div>\n <div class=\"children\">\n <div class=\"layer\">\n <div class=\"label library\">Polymer</div>\n <div class=\"layer\">\n <div class=\"label wc\">&lt;polymer-wc&gt;</div>\n </div>\n </div>\n <div class=\"layer\">\n <div class=\"label wc\">&lt;vanilla-wc&gt;</div>\n </div>\n <div class=\"layer\">\n <div class=\"label wc\"><b>&lt;brick-wc&gt;</b></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>" } [/block] ## 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!