Componentes Web de polímero en ember-cli

Algunas notas rápidas sobre cómo configurar y ejecutar Polymer Web Components en un proyecto ember-cli (> = 0.4.1).

También reuní una esencia que cubre los cambios de código necesarios en cada archivo para instalar los componentes.

Los componentes web representan el futuro del desarrollo web (y un eventual reemplazo / agregado para los componentes de Ember despu√©s de la versi√≥n 2.0 y HTMLBars). Adem√°s, hay algunos componentes incre√≠blemente interesantes que le ayudar√°n a crear aplicaciones web muy ricas utilizando el nuevo lenguaje de dise√Īo de materiales de Google.

El primer paso es agregar los componentes individuales de la glorieta:

bower install --save Polymer/polymer
bower install
--save Polymer/core-elements
bower install
--save Polymer/paper-elements

A continuación, querrá agregar algunos paquetes npm adicionales para que pueda hacer que los elementos individuales de Polymer estén disponibles para su aplicación.

npm install --save-dev broccoli-static-compiler
npm install
--save-dev broccoli-merge-trees

Utilizar√° estos dos proyectos para fusionar los archivos Polymer.js / Polymer.html necesarios para los elementos individuales de Polymer (o usar Polymer para escribir sus propios componentes web para tener una idea de lo que eventualmente se convertir√°n los componentes de Ember).

Tambi√©n querr√° agregar expl√≠citamente el archivo platform.js al √°rbol de compilaci√≥n de su aplicaci√≥n en su Brocfile, ya que proporciona los polyfills Web Component / Shadow DOM necesarios para que todo esto funcione en Safari, Firefox e IE (las √ļltimas versiones de Chrome ahora ofrecen soporte nativo para todas las funciones de Polymer, por lo que no son necesarios polyfills all√≠).

var polymer = pickFiles('bower_components/', {
srcDir
: '',
files
: [
'polymer/polymer.js',
'polymer/polymer.html',
'platform/platform.js'
],
destDir
: '/assets'
});

El siguiente paso es agregar el paquete brócoli-vulcanizar:

npm install --save-dev broccoli-vulcanize

La herramienta vulcanizar le permite compilar componentes de polímero individuales en una sola importación de <link>, en lugar de tener que importar explícitamente cada componente que necesita. Esto reduce potencialmente docenas de solicitudes de red a solo una (dos si decide compilar el JS de los archivos vulcanizados en una inclusión separada).

Deber√° crear un nuevo archivo html en la carpeta de su aplicaci√≥n (suelo llamarlo elements.html). All√≠, deber√° agregar todas las entradas de elementos de pol√≠mero individuales <link rel = “import”> para los componentes individuales que planea usar. Afortunadamente, los proyectos de Polymer Bower ya incluyen p√°ginas que le permiten agregar r√°pidamente la mayor√≠a de los elementos b√°sicos y de papel sin tener que agregar expl√≠citamente cada uno (aunque la fuente, el icono y los elementos de transici√≥n deben incluirse manualmente si los desea). Debe especificar la ubicaci√≥n relativa de los archivos en la carpeta bower_components:

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

Puede agregar sus propios componentes web personalizados a este archivo (o importarlos desde otro archivo con una instrucción <link>.

Ahora, agregue un paso de vulcanización a su Brocfile:

var polymerVulcanize = vulcanize('app', {
input
: 'elements.html',
output
: 'assets/vulcanized.html',
csp
: true,
inline: true,
strip
: false,
excludes
: {
imports
: ["(^data:)|(^http[s]?:)|(^/)"],
scripts
: ["(^data:)|(^http[s]?:)|(^/)"],
styles
: ["(^data:)|(^http[s]?:)|(^/)"]
}
});

Agregue sus nuevos recursos al árbol de compilación de su aplicación:

module.exports = mergeTrees([
polymerVulcanize
,
polymer
,
app
.toTree()
]);

Ahora, solo necesita agregar platform.js y sus nuevos archivos vulcanized.html al index.html de su aplicación (antes de que se carguen otros scripts):

<script src="assets/platform/platform.js"></script>
<link rel="import" href="assets/vulcanized.html">