02/07/2014 Development / polymer

Muito tem se falado atualmente em polymer, e uns até chegam a dizer que será o sucessor do angular. Então antes disso, vamos separar os meninos dos homem!

Oque é Polymer? Polymer é uma library para a construção de componentes, NADA MAIS DOQUE ISSO!

Oque é Angular? Um buta framework completo para construção de sistemas e componentes.

E porque eu usaria polymer ao inves de angular? Porque vai cair na tendencia do mercado e o google vai padronizar essa porra toda!!! ou nao, rs

Link para um site foda de componentes: http://component.kitchen/

Um exemplo de construcao de componente usando polymer e usando angular.

1) Polymer

<!-- Importing Web Component's Polyfill -->
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/polymer.js"></script>

<!-- Importing Custom Elements -->
<link rel="import" href="src/gravatar.html">
</head>
<body>

<!-- Using Custom Elements -->
<h1>Hash</h1>
<gravatar-image hash="be74fd9a577ea5ef1ab2e7c71bcfa4b5"></gravatar-image>

<h1>Email</h1>
<gravatar-image username="djalma.araujo@gmail.com"></gravatar-image>

<h1>Different Size</h1>
<gravatar-image username="djalma.araujo@gmail.com" size="200"></gravatar-image>

<h1>Custom Default</h1>
<gravatar-image hash="huellwaitsdudeeeeeee" placeholder="http://trampt.com/images/products/000/071/306/Mr_White-The_Beast_Brothers-Acrylic-trampt-71306m.jpg?1345574938"></gravatar-image>

<h1>Default fallback</h1>
<gravatar-image hash="huellwaitsdudeeeeeee"></gravatar-image>

 Eis aqui o componente: gravatar.html

 

  <polymer-element name="gravatar-image" attributes="username size hash placeholder">
   
  <template>
  <style>
  img {
  margin: 0;
  padding: 0;
  }
  </style>
   
  <img id="username_image" />
  </template>
   
  <script src="scripts/md5.js"></script>
   
  <script>
  var Gravatar = {
  imageURL: function (email, size, hash, placeholder) {
  var avatarString = (hash.length > 0) ? hash : MD5(email);
   
  url = 'http://www.gravatar.com/avatar/' + avatarString + '.jpg?s=' + size;
   
  if (placeholder && placeholder.length > 0) {
  url += '&d=' + placeholder;
  }
   
  return url;
  }
  };
   
  Polymer('gravatar-image', {
  enteredView: function() {
  this.size = this.size || 80;
  this.hash = this.hash || "";
   
  this.$.username_image.src = Gravatar.imageURL(this.username, this.size, this.hash, this.placeholder);
  }
  });
  </script>
   
 

</polymer-element>

*************************************************************************************************************

Agora usando angular

<gravatar name="Felipe Huggler Luz" email="felipe@felipehuggler.com"></gravatar>

angular.module('components', [])
    .directive('gravatar', function () {
        return {
            restrict: 'E',
    link: function(scope, element, attrs, ctrl) {
    element.html("<img src='http://www.gravatar.com/avatar/" + hex_md5(attrs.email) + "?s=150'/><br/>Olá "+ attrs.name);
    }
}
})

angular.module('MyApp', ['components'])

link em acao: http://jsfiddle.net/9Ymvt/1810/

Qual eu prefiro? Nem preciso falar neh

Espero que sirva.