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:
<x-deck>
<x-card>
Card One
</x-card>
<x-card>
Card Two
</x-card>
<x-card>
Card Three
</x-card>
</x-deck>
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>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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>
<style>
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%;
}
</style>
</head>
<body>
<x-layout>
<x-appbar>
<div><a href="" id="homeLink" title="Home">=</a></div>
<header>My App</header>
</x-appbar>
<section>
<x-deck id="mainDeck">
<x-card>
<ul>
<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>
</ul>
</x-card>
<x-card>
<h1>Page One</h1>
</x-card>
<x-card>
<h1>Page Two</h1>
</x-card>
<x-card>
<h1>Page Three</h1>
</x-card>
</x-deck>
</section>
<footer>
Copyright 2013 by Raymond Camden
</footer>
</x-layout>
<script>
document.addEventListener('DOMComponentsLoaded', function(){
console.log('domCom loaded');
var deck = document.querySelector("#mainDeck");
var homeLink = document.querySelector("#homeLink");
homeLink.addEventListener("click", function(e) {
e.preventDefault();
deck.shuffleTo(0);
});
var navLinks = document.querySelectorAll(".deckLink");
for(var i=0,len=navLinks.length; i<len; i++) {
navLinks[i].addEventListener("click", function(e) {
e.preventDefault();
var target = e.currentTarget.href.split("/").pop();
deck.shuffleTo(target);
});
}
});
</script>
</body>
</html>
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
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}