Why we need them?

The web today is more like apps

https://mmmelon.com/es

Building tabs should be very easy

But don't!

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend.</p>
  </div>
</div>

<script>
$( "#tabs" ).tabs();
</script>

https://jqueryui.com/tabs/

<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
</div>

<script>
    $("#tabstrip").kendoTabStrip({
        animation: {
            // fade-out current tab over 1000 milliseconds
            close: {
                duration: 1000,
                effects: "fadeOut"
            },
           // fade-in new tab over 500 milliseconds
           open: {
               duration: 500,
               effects: "fadeIn"
           }
       }
    });
</script>

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip

<div id="demo"></div>
<script>
YUI().use('tabview', function(Y) {
    var tabview = new Y.TabView({
        children: [{
            label: 'foo',
            content: '<p>foo content</p>'
        }, {
            label: 'bar',
            content: '<p>bar content</p>'
        }, {
            label: 'baz',
            content: '<p>baz content</p>'
        }]
    });

    tabview.render('#demo');
});
</script>

http://yuilibrary.com/yui/docs/tabview/

@Component({
  selector: 'tabs',
  template: `
    <ul>
      <li *ng-for="#tab of tabs" (click)="selectTab(tab)">
        {{tab.tabTitle}}
      </li>
    </ul>
    <content></content>
  `,
  directives: [NgFor]
})
export class Tabs {
  constructor() {
    this.tabs = [];
  }

  selectTab(tab) {
    this.tabs.forEach((tab) => {
      tab.active = false;
    });
    tab.active = true;
  }

  addTab(tab: Tab) {
    if (this.tabs.length === 0) {
      tab.active = true;
    }
    this.tabs.push(tab);
  }
}

@Component({
  selector: 'tab',
  inputs: ['tabTitle: tab-title'],
  template: `
    <div [hidden]="!active">
      <content></content>
    </div>
  `
})
export class Tab {
  constructor(tabs:Tabs) {
    tabs.addTab(this);
  }
}

http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html

https://github.com/pedronauck/react-simpletabs

var Tabs = require('react-simpletabs');
var App = React.createClass({
  render: function() {
    return (
      <Tabs>
        <Tabs.Panel title='Tab #1'>
          <h2>Content #1 here</h2>
        </Tabs.Panel>
        <Tabs.Panel title='Tab #2'>
          <h2>Content #2 here</h2>
        </Tabs.Panel>
        <Tabs.Panel title='Tab #3'>
          <h2>Content #3 here</h2>
        </Tabs.Panel>
      </Tabs>
    );
  }
});

React.renderComponent(<App />, mountNode);

<paper-tabs>
  <paper-tab>KNOWLEDGE</paper-tab>
  <paper-tab>HISTORY</paper-tab>
  <paper-tab>FOOD</paper-tab>
</paper-tabs>

https://elements.polymer-project.org/elements/paper-tabs

Just keep it simple!

What is a Component?

noun

1. a part or element of a larger whole, especially a part of a machine or vehicle.

"an assembly plant for imported components"

https://en.wikipedia.org/wiki/Component-based_software_engineering

Component-based software engineering

It is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems.

What are Web

Components?

Web Components are a set of standards for the creation of reusable widgets or components in web documents and web applications.

Custom Elements

Define new HTML/DOM elements

Custom elements

Define new HTML

• Declarative, readable
• Meaningful HTML
• Common way to extend → reusable

<paper-tabs selected=“1”>
  <paper-tab>Tab 1</paper-tab>
  <paper-tab>Tab 2</paper-tab>
  <paper-tab>Tab 3</paper-tab>
</paper-tabs>

const tabs = document.querySelector('paper-tabs');

tabs.addEventListener('iron-activate', function() {
  console.log(this.selected);
});

Shadow DOM

DOM/CSS scoping

<video src=“foo.webm” controls></video>

<video src=“foo.webm” controls></video>

Actually Shadow DOM