polymerEmpezando con el polímero


Observaciones

El proyecto Polymer consiste en:

  • Biblioteca de polímeros : Polymer es una biblioteca liviana que te ayuda a aprovechar al máximo los componentes web. Con los componentes web, puede crear elementos personalizados reutilizables que interactúan a la perfección con los elementos incorporados del navegador, o dividir su aplicación en componentes del tamaño correcto, haciendo que su código sea más limpio y menos costoso de mantener.
  • WebComponents Polyfill : WebComponents Polyfill es una futura biblioteca dirigida a cumplir con las especificaciones de los componentes web del W3C. Los navegadores que implementan completamente la especificación no necesitan webcomponents.js. Sin embargo, a la mayoría de los navegadores aún les falta alguna parte de la especificación, por lo que esta será una dependencia durante bastante tiempo.
  • Polymer App Toolbox : Polymer App Toolbox lo ayuda a crear y ofrecer aplicaciones web progresivas de vanguardia con una sobrecarga y una carga útil mínimas, aprovechando las potentes funciones de la plataforma web como Web Components, Service Worker y HTTP / 2. Toolbox proporciona una arquitectura basada en componentes, diseños sensibles, un enrutador modular, soporte de localización, soporte llave en mano para almacenamiento local y almacenamiento en caché sin conexión, y entrega eficiente de recursos de aplicaciones desagregados. Adopte estas funciones individualmente, o utilícelas juntas para crear una aplicación web progresiva con todas las funciones. El polímero esparce un poco de azúcar sobre las API de componentes web estándar, lo que facilita la obtención de excelentes resultados. La biblioteca de polímeros proporciona un conjunto de características para crear elementos personalizados. Estas características están diseñadas para que sea más fácil y rápido hacer elementos personalizados que funcionen como elementos DOM estándar. Similar a los elementos estándar de DOM, los elementos de polímero pueden ser:

Versiones

Versión Fecha de lanzamiento
v2.0.0 2017-05-15
v1.7.0 2016-09-28
v1.6.1 2016-08-01
v1.6.0 2016-06-29
v1.5.0 2016-05-31
v1.4.0 2016-05-18
v1.0.0 2015-05-27

Estructura básica del elemento

Obtuvimos el siguiente elemento muy básico my-element guardado como src/my-element.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>
 
  • El <link> incluye la biblioteca de polímeros utilizando una importación HTML.
  • El <dom-module> es el contenedor DOM local para el elemento (en este caso, my-element ).
  • <template> es la definición de DOM local real.
  • <style> dentro de <template> permite definir estilos que están incluidos en este elemento y su DOM local y no afectarán a nada más en el documento.
  • El <content> guardará cualquier cosa que coloques dentro de tu elemento.
  • La pseudo clase del :host coincide con el elemento personalizado ( my-element ).
  • La llamada Polymer registra el elemento.
  • El is la propiedad es el nombre del elemento (tiene que coincidir con el <dom-module> 's id )

Puedes importarlo en tu aplicación usando:

<link rel="import" href="src/my-element.html">
 

Y utilízalo como una etiqueta:

<my-element>Content</my-element>
 

Hola Mundo

Este ejemplo crea un elemento de polímero llamado x-foo , cuya plantilla se enlaza a una propiedad de cadena, llamada "mensaje". El HTML del elemento se importa al documento principal, lo que permite el uso de etiquetas <x-foo> en <body> .

x-foo.html

<dom-module id="x-foo">
  <template>
    <span>{{message}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      properties : {
        message: {
          type: String,
          value: "Hello world!"
        }
      }
    });
  </script>
</dom-module>
 

index.html

<head>
  <!-- PolyGit used here as CDN for demo purposes only. In production,
       it's recommended to import Polymer and Web Components locally
       from Bower. -->
  <base href="https://polygit.org/polymer+1.6.0/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="x-foo.html">
</head>
<body>
  <x-foo></x-foo>
</body>
 

Ver demo en CodePen

Configurando tu primera aplicación de polímero desde una plantilla

¡Preparémonos para construir su propia aplicación web progresiva impresionante con Polymer!

Antes de que puedas comenzar a instalar Polymer, necesitas lo siguiente:

Instalación de la interfaz de línea de comandos de polímero

El CLI de polímeros le proporciona todas las herramientas necesarias para los proyectos de polímeros:

npm install -g polymer-cli
 

Inicializa tu aplicación desde una plantilla de aplicación

Use el iniciador de polymer init para inicializar su aplicación desde una plantilla de aplicación .

Una plantilla genial es la --app-drawer-template . Vamos a usar eso:

polymer init app-drawer-template
 

Sirve tu aplicación

No se necesita ningún edificio para servir tu primera aplicación de polímero impresionante. Sólo serve que serve :

polymer serve --open
 

Esto abrirá la aplicación en su navegador predeterminado en http://localhost:8080 .

Usando elementos del catálogo de polímeros

El polímero produce muchos elementos bien construidos para que los uses en tu aplicación.

Hojéalos en su Catálogo de Elementos .

Revisemos el flujo de trabajo de usar un elemento incluyendo paper-input ( Documentación )

Descargar el elemento

Para descargar un elemento hay dos formas:

Cenador

La forma más conveniente es usar la línea de comandos usando el comando bower install :

bower install --save PolymerElements/paper-input

Nota: --save agrega el elemento como una dependencia al bower.json de su aplicación.

archivo zip

La otra forma es agregar el elemento seleccionado ( paper-input en este caso) a su colección (en el Catálogo de polímeros) usando "Agregar a la colección" en la navegación y descargar su colección utilizando el icono de estrella en la esquina superior derecha.

Esto generará un archivo .zip que contiene el elemento y todas sus dependencias. Luego puede copiar la carpeta bower_components dentro de .zip / components en el directorio raíz de su aplicación.

Importa el elemento en tu aplicación

Para importar el elemento que acaba de instalar, importe el archivo .html correspondiente:

<link rel="import" href="bower_components/paper-input/paper-input.html">
 

Usa el elemento

Ahora puede utilizar paper-input dentro del documento que lo importó a:

<paper-input></paper-input>