Over a million developers have joined DZone.

Brick by Mozilla

DZone's Guide to

Brick by Mozilla

· Java Zone
Free Resource

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

A few months ago I wrote a post that was perhaps a bit over the top: The Future of the Web. I don't deny that the title was a bit sensational, but, I honestly felt excited about what I was seeing and truly think we are seeing a tectonic shift in web development. Today's blog post isn't quite that Earth-shattering, but I think it's pretty darn cool.

About a week or so ago, Mozilla announced the release of Brick. Brick is a set of components based on the W3C standard for Web Components. It is essentially a way to create your own HTML tags and have them rendered out on the client. Anyone who has ever downloaded a UI library knows that there is a strong need for this. Imagine a developer who does not have good JavaScript experience. Instead of having to learn something like jQuery UI to add tabs to their application they can simply include a library and use tags to write out their HTML. We aren't quite there yet but it's approaching.

Mozilla's Brick library is a great example of this. Their library contains widgets for:

  • Application toolbars, toggle buttons and groups
  • Calendar and Date pickers
  • Decks and Flipboxes
  • A basic layout container
  • A slider
  • A tab control (obviously)
  • And more

Some of these act like polyfills. So for example, Firefox doesn't yet support input type="date". (*sigh*) So if you use their datepicker in Firefox you see:

Whereas the same code in Chrome does nothing, as it is natively supported:

The UI widgets are nice, but what interests me the most right now are the decks. Take the following code:


    Card One

    Card Two
    Card Three


Brick creates a single view of the cards so that the first one (by default, and you can tweak that) is visible. It then provides a simple JavaScript API to switch between them. My immediate thought here was "this could be a great way to create a Single Page App for PhoneGap" (in fact, I'm working on one now).

I whipped up a simple demo that demonstrates this. It isn't pretty, but blame me, not Mozilla.

<!DOCTYPE html>
  <meta charset="utf-8">
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width" />
	<link rel="stylesheet" href="brick/brick-1.0beta5.css"/>
	<script src="brick/brick-1.0beta5.js"></script>	
	x-layout > x-appbar > header, x-layout > footer{
		padding: 0;
		background-color: orange;
		color: white;
		font-weight: bold;
		text-align: center;

	html, body{
		height: 100%;


			<div><a href="" id="homeLink" title="Home">=</a></div>
			<header>My App</header>

			<x-deck id="mainDeck">

						<li><a href="1" class="deckLink">Page One</a></li>
						<li><a href="2" class="deckLink">Page Two</a></li>
						<li><a href="3" class="deckLink">Page Three</a></li>
					<h1>Page One</h1>
					<h1>Page Two</h1>

					<h1>Page Three</h1>

			Copyright 2013 by Raymond Camden

document.addEventListener('DOMComponentsLoaded', function(){
	console.log('domCom loaded');

	var deck = document.querySelector("#mainDeck");

	var homeLink = document.querySelector("#homeLink");
	homeLink.addEventListener("click", function(e) {
	var navLinks = document.querySelectorAll(".deckLink");
	for(var i=0,len=navLinks.length; i<len; i++) {
		navLinks[i].addEventListener("click", function(e) {
			var target = e.currentTarget.href.split("/").pop();

The "app" (OK, it isn't much of an app) is wrapped by an x-layout tag. I've got an appbar for the header and a footer at the bottom. Inside this is my main deck with 4 cards. The first card is like a basic home page. I've got a simple menu here with three links. As I said, Brick provides a basic API to load cards in a deck, but I need to write a bit of JavaScript to handle this automatically. I'm not sure what I did is the easiest way to do it, but it worked. I simply added a class to my links and built an event handler that would pick up those click events. I then use the href value to determine which card to load (card indexes are 0-based). I did something similar for the home link. If you check out the example for the tag bar, you can see Mozilla has a more automated way of doing this, so what I've done is probably even simpler to do (or will be in the future).

You can run my demo here if you like: http://www.raymondcamden.com/demos/2013/aug/23/test4.html

I definitely encourage you to check it out. Since I first played with it they have had three updates, so it is an active project. And frankly, it is fun to write. I dig that.

P.S. A quick edit after I've published: I don't think their site says it yet, but you can follow the Mozilla Brick project on Twitter: https://twitter.com/mozbrick

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.


Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}