comparison between polymer and x-tag and vanilla js

can any one give me some idea about difference between polymer,x-tag and vanilla js ?

I have used polymer in my project, but i want comparison of polymer,x-tag and vanilla js.

Answers


Web Components is the native implementation in the browsers. Polymer is a library that act as a very thin layer on top of the Web Components technologies. X-Tag is another library that is even thinner because it only relies on one of the four Web Components technologies.

I've written an article about that: http://pascalprecht.github.io/2014/07/21/polymer-vs-x-tag-here-is-the-difference/


VanillaJS only means using web-components without any framework/wrapper in pure JS.

You have to register your custom-element, stamping out the element and taking care of data-binding yourself.

Both x-tag and Polymer provide a convenient and opinionated wrapper around web-components that greatly reduce boilerplate code.

IMHO the Polymer library provides the most declerative approach (regarding data-binding, defining templates, etc)

This is how it looks like with x-tag:

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
    }
  },
  events: {
    'click:delegate(x-toggler)': function(){
      // activate a clicked toggler
    }
  },
  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
    }
  }
});

This is how it would look like with Polymer:

<polymer-element name="polymer-accordion" extends="div" on-click="{{toggle}}">
  <template>
    <!-- shadow DOM here -->
  </template>
  <script>
    Polymer('polymer-accordion' {
        created: function() { ... },
        ready: function() { ... },
        attached: function () { ... },
        domReady: function() { ... },
        detached: function() { ... },
        attributeChanged: function(attrName, oldVal, newVal) {
        },
        toggle : function() {....},
        get togglers() {},
        set togglers(value) {},
        nextToggler : function() {},
        previousToggler : function() {},
   });
  </script>
</polymer-element>

Need Your Help

Data Exchange WCF and Silverlight

wcf silverlight

I am using a WCF service and a Silverlight Client sending data to the service.

How to update data after model fetch in Handlebars template with Backbone and Marionette?

backbone.js handlebars.js marionette

Trying to have a data field in a Handlebars template update after the model that is assigned to the Marionette CompositeView is fetched, but the HTML in the page is not getting updated.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.