Mozilla Brick

UI components for modern web apps

mozilla.github.io/brick
@MozBrick


Soledad Penadés
soledadpenades.com
@supersole

Hold on

What is a "component"?

"a constituent part; element; ingredient."

Screws

Photo by apeofjungle

Resistors

Photo by oskay

Doorbell

Photo by Neosnaps

And a web component...?

It's the same

Buttons

Range

web-bell??

Sample by LanDub

So, web components

The key is custom

Although the spec calls them widgets

Why Web Components?

Can't we just use divs?

<div class="widget calendar ui theme-winter">
  <div class="component-wrapper">
    <div class="inner-content">
      (ad nauseaum)
    </div>
  </div>
</div>

Why Web Components?

Or maybe some jQuery UI plugin?

$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
$( "#locale" ).change(function() {
  $( "#datepicker" ).datepicker( "option",
    $.datepicker.regional[ $( this ).val() ] );
});

No

With web components...

Ingredients for successful Web Components

So... not ready yet?

X-Tag to the rescue

X-Tag Shims all the things!!!11

(where appropriate)

X-Tag Shims all the things!!!11

(where appropriate)

How does mark-up with Brick look like?

Minimum app

<x-layout>
  
  <x-appbar>
    <header>
      Spiffy header!
    </header>
  </x-appbar>
  
  Marvelous content!
  
  <footer>
    Magnificent footer!
  </footer>

</x-layout>

See it in action

Why the hyphen?

The spec says:

"The custom element type identifies a custom element interface and is a sequence of alphanumeric ASCII characters that must match the NCName production and contain a U+002D HYPHEN-MINUS character"

i.e. "the name of a custom element must contain a hyphen"

the spec

So we took the X from X-Tag

And added a hyphen.

The imperative way

Creating bricks out of nowhere

It's magic!

var cal = document.createElement('x-calendar');
document.querySelector('section').appendChild(cal);

See it in action

The Brick line up

Currently...

Get all the bricks

  1. Download the built files (brick.css & brick.js)
  2. Include the css file in your <head>:
    <link rel="stylesheet" type="text/css" href="css/brick.css" />
  3. Include the js file at the end of your <body>:
    <script src="js/brick.js"></script>
  4. Instead of window.onload, listen for DOMElementsLoaded

See it in action

Customising

Your bricks, the way you like them!

Customising the appearance

Give them a new layer of paint with CSS

  1. Include the brick.css file first
  2. Include your css file afterwards

Your CSS file overwrites some of Brick's default styles.

Customising the appearance

Example

x-appbar {
  background-image: linear-gradient(-180deg, #f0f 0%, 
    #f00 30%, #ff0 50%, #0f0 75%, #00f 100%);
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  padding: 1rem;
  font-size: 2rem;
}

See it in action

Customising the bundle

Or when you know what you're doing: no bundling

  1. clone the brick repo and run make
  2. include dist/core/core.min.js
  3. include the components you need, e.g. dist/calendar/calendar.min.js

Bake your own bricks

The moment you've been waiting for

Three simple steps

At the very minimum

  1. Include dist/core/core.min.js
  2. Write and include your-brick.js
  3. Write and include your-brick.css (optional)

What's in your-brick.js?

(function() {
  xtag.register('your-brick', {
    lifecycle: {
      created: function() {
        this.innerHTML = 'I am a brick';
      }
    }
  });
})();

See it in action

Adding events

(function() {
  xtag.register('your-brick', {
    // ...
    events: {
      'tap': function(e) {
        this.style.backgroundColor = 
          '#' + Math.round(0xFFFFFF * Math.random())
            .toString(16);
      }
    }
  });
})();

See it in action

Something more advanced

Let's build a complete app

Pocket Cutesy

We're still in beta

Brick 1.0 ß7

Expect bumps

Brick roadmap

Q1 2014

Brick 1.0

Brick roadmap

H1 2014

Brick roadmap

H2 2014

Not in the Brick roadmap

Unicorns and rainbows

:-(

Thanks!

Ask me questions!

@supersole

Thanks!

Ask me questions!

@supersole

Slides & code at https://github.com/sole/ota2013

Slide notes