October 03, 2014

Mozilla Targets HTML5 Web App Development with Brick 2.0

Mozilla (NewsAlert) has announced the imminent release of Brick 2.0, a curated collection of components for user interfaces (UIs) that can be used to ease the HTML5 Web application development process.

“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,” the company said in its blog. “Just as native platforms have UI toolkits, Brick aims to provide a 'UIKit for the Web,' using the latest standards to make authoring webapp UIs easier than ever before.”

Mozilla said that it has very specific goals for Brick, which has been under development since August 2013. There are other projects that use the same technologies (like Google (News Alert)'s Polymer) that provide a more complete web application development solution. But Brick is keeping its focus narrow.

“The motto on the Brick project is ‘strong opinions, tightly scoped,’” the company said. “Meaning we don't intend to solve the problems of code structure, module loading, data binding or really any other problem other than webapp interfaces.”

Brick also seeks differentiation from similar projects such as Bootstrap, via its use of the Web Components browser APIs. Web Components let Web developers define new HTML elements and specify how they work via HTML5's standard Custom Elements API, for one. And, users can also define HTML templates that can be repeatedly cloned; hide the complexity of a widget from the rest of a document and prevent its CSS (NewsAlert) from leaking; and load related JavaScript, CSS and HTML dependencies all in one action via 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,” Mozilla noted. “Brick, Polymer, and many other third-party Custom Elements are being distributed and indexed as part of an awesome burgeoning Custom Elements ecosystem.”

Brick 2.0 now uses the platform.js polyfills, and has removed the X-Tag library. The latter was incorporated to allow developers to create elements for browsers that didn't yet support HTML5’s native Custom Elements API. It’s now been widely adopted, so Brick has eliminated this work around in favor of leveraging the API directly.

“Brick is being built from the ground-up to be lighter, more modular, and easier to contribute to,” Mozilla said. “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.”

Edited by Maurice Nagle


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More