Building Mobile Web Applications With Brick

I'm Angelina Fabbro

I'm from Vancouver, Canada

@angelinamagnum

follow for slides & pandavangelism

Web Components are the new HTML 5

Technologies:

What is a component?

Black Boxes

Why build custom elements?

Benefits

What is Brick?

So... what is/are X-Tags?

How is Brick different from other web components frameworks?

A Small Application with using Brick

http://github.com/afabbro/simple-brick-demo

Follow along with the /demo/'s in this repo

'Let's see it in action!' means refer to the demos

Step 1: Add Some Bricks!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/brick-1.0beta5.css"/>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <title>Firefox OS App - Brick Demo</title>
  </head>
  
  <body>
    <!--- Some Brick widgets will go here -->
    
    <script type="text/javascript" src="js/brick.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>
<!-- Use an x-deck to transition between views of content -->
<body>
  <x-deck>
    <x-card>
      <h1>View 1</h1>
      <p>This is view 1</p>
    </x-card>
    <x-card>
      <h1>View 2</h1>
      <p>This is view 2</p>
    </x-card>
  <x-deck>
  <script type="text/javascript" src="js/brick.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
</body>
<!-- Add above <x-deck> in <body> -->
<x-appbar id="bar">
  <header>Simple Brick App</header>
  <button id="view-prev">Previous View</button>
  <button id="view-next">Next View</button>
</x-appbar>
document.addEventListener('DOMComponentsLoaded', function(){
// Run any code here that depends on Brick components being loaded first
// Very similar to jQuery's document.ready()

var deck = document.getElementById("deck");
var nextButton = document.getElementById("view-next");
var prevButton = document.getElementById("view-prev");

prevButton.addEventListener("click", function(){
    deck.shufflePrev();
});
nextButton.addEventListener("click", function(){
    deck.shuffleNext();
});
});
x-appbar {
  padding: .1em 0;
}

x-deck {
  min-height: 32em;
}

x-deck > x-card {
  background: #eee;
  color: #000;
  padding: 1em;
}

Let's See It In Action

Refer to Demo #1

Step 2: Add some more interesting content...

... using some more Bricks!

<x-card>
  <h1>Pick a Date</h1>
  <p><x-datepicker>'s are a polyfill for <input type="date">.
  <x-datepicker></x-datepicker>
</x-card>
<x-card>
<h1>A Random Cat, Because Why Not</h1>
  <img src="http://lorempixel.com/300/300/cats">
</x-card>    

Let's See It In Action

Refer to Demo #2

What if we turn our random cat into a Brick?

Let's make it so when we click on the cat, we get another random cat

First we register our custom element with some JS

This is so that the DOM (and our custom JS) know what to do with the custom tag

(function() {
  xtag.register('your-brick', {
      lifecycle: {
          created: function() {
              this.innerHTML = 'I am a brick';
          }
      }
  });
})();
(function() {
xtag.register('random-cat', {
    lifecycle: {
        created: function() {
            this.innerHTML = "<img src='http:\/\/lorempixel.com/300/300/cats'>";
        }
    },
    events: {
        'click': function(e) {
            this.innerHTML = "<img src='#'>";
            this.innerHTML = "<img src='http:\/\/lorempixel.com/300/300/cats/#" + new Date().getTime() + "'>";
        }
    }
});
})();
<x-card>
  <h1>A Random Cat, Because Why Not</h1>
  <random-cat></random-cat>
</x-card> 

Let's see it in action!

Refer to Demo #3

Beyond 'lifecycle'

xtag.register('x-accordion', {
// extend existing elements
extends: 'div',
lifecycle:{
  created: function(){
    // fired once at the time a component
    // is initially created or parsed
  },
  inserted: function(){
    // fired each time a component
    // is inserted into the DOM
  },
  removed: function(){
    // fired each time an element
    // is removed from DOM
  },
  attributeChanged: function(){
    // fired when attributes are set
  }
}
});

But wait, you can do more!

accessors: {
  'togglers': {
    get: function(){
      // return all toggler children
    },
    set: function(value){
      // set the toggler children
    }
  }
},
methods: {
  nextToggler: function(){
    // activate the next toggler
  },
  previousToggler: function(){
    // activate the previous toggler
  }
}

Before I go: SOMETHING AWESOME

http://flathead.herokuapp.com/designer

Choice Resources

Thanks JSConf Colombia!

love,

Angelina Fabbro

@angelinamagnum

angelina@mozilla.com