DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Trending

  • Top 7 Best Practices DevSecOps Team Must Implement in the CI/CD Process
  • What Is Kubernetes RBAC and Why Do You Need It?
  • The Emergence of Cloud-Native Integration Patterns in Modern Enterprises
  • New Free Tool From Contrast Security Makes API Security Testing Fast and Easy

Brick by Mozilla

Raymond Camden user avatar by
Raymond Camden
·
Aug. 26, 13 · Interview
Like (0)
Save
Tweet
Share
10.72K Views

Join the DZone community and get the full member experience.

Join For Free

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

BRICKS (software)

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

Opinions expressed by DZone contributors are their own.


Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: