X-Tag

A presentation by David Lorenz

activenode.de

@github, @twitter

What is X-Tag?

Basic 20kb library that allows rapid component development in terms of Web Components.

So what's the advantage of X-Tag?

All the advantages that are named over and over again when it comes to modular development of HTML components.

  • Make small parts of your HTML reusable over and over again
  • Maybe replace JQuery with X-Tag

What is X-Tag *not*?

X-Tag is not Polymer.

It's not meant to compete with Polymer as Polymer is a big-fat-booty library with HtmlImports, WebComponents and f***ng everything.

X-Tag provides modularization from IE9+ with a little small head of 20kb (all Polyfills included!)

So, what is shown in this presentation?

The basics, guys, the basics! You're old enough to dig deeper into the topic.

Let's get ready to rumble

X-Tag Code Time

Register your custom components with X-Tag

xtag.register('x-my-custom-element', { //definitions });

Every custom element you want to upgrade to a real dynamic component needs to be registered to xtag.

What now?

Any registered component _can_ have attributes that define their behaviour.
- Everything is optional.

The lifecycle

xtag.register('x-my-custom-element', { lifecycle: { created: function(){ top.alert("Wow I am born!"); }, inserted: function(){ top.alert('So cool, been inserted into the DOM'); }, removed: function(){ top.alert('Oh noes, why you hate me?'); }, attributeChanged: function(attrName, oldVal, newVal) { //kind of angular watch for attributes top.alert('Hey, stop touching me'); } } });

The content and Bindings

xtag.register('x-my-input', { content: '<div class="input_wrapper"><input type="text" /></div>', events: { 'keypress:delegate(input):keypass(13)': function(){ this.info(); //so nice: //we can call the methods //from the tag everywhere within the tag } }, methods: { info: function(){ top.alert('Fires only on input when enter was pressed'); } } });

BTW: There is also multiline-content

xtag.register('x-my-input', { content: function(){/* <div class="input_wrapper"> <label> Some Label </label> <input type="text" /> </div> */} });

Accessors: Setters and Getters

We got methods, events and lifecycle covered. What's missing is the accessors

xtag.register('x-my-input', { //.... accessors: { someAccessor: { // links to the 'some-accessor' attribute attribute: {}, set: function(){}, get: function(){} } } //.... });

Just call the following code to test in console:

document.querySelector('x-slide').testAccessor;

Easy!

Now go ahead, manipulate the DOM and try the following: