fcbk
Conéctate con TwitterConéctate con Facebook
0

Introducción a Polymer 1.0

0Puntos

hace 2 años

Polymer 1.0 fue anunciada este año durante el evento para desarrolladores, Google I/O. Se trata de una versión renovada casi en su totalidad, que se enfoca en rendimientocross-browser y comodidad para los programadores. Nos permite crear Web Componentsde alto rendimiento de manera más sencilla y rápida en aplicaciones reales, pues ahora viene listo para usarlo en producción. Corre unas 3 veces más rápido en Chrome y unas 4 veces más rápido en Safari, comparado con la versión 0.5, además, es mucho más ligera para descarga. Otra de sus mejoras es el nuevo sistema de data binding, que ahora es más eficiente para que puedas conectar tu aplicación a tu backend sin problemas. El nuevo Polymer se enfoca enWeb Components y, en este sentido, trajo consigo cambios importantes. Encapsular los segmentos de tu aplicación en Web Components te permite crear aplicaciones realmente modulares y sus componentes son fáciles de re-estructurar, re-usar y actualizar según vayan surgiendo las necesidades de nuestro proyecto. Uno de los cambios más relevantes en Polymer 1.0 tiene que ver con el manejo del Shadow DOM, que ahora se hace a través de Shady DOM. Es mucho más eficiente que el Polyfill, que es necesario para acceder al Shadow DOM en navegadores que no ofrecen esto de forma nativa. Y ofrece importantes mejoras en rendimiento y tiempo de carga inicial. En esta nueva versión, los estilos se encapsulan de forma segura en nuestros Web Components. Shady DOM evita que se filtren a otras partes de nuestra aplicación, y muy pronto, incluirá una herramienta para pre-procesar la hojas de estilo de nuestros componentes. De esta manera, se podrán ejecutar más rápido, ya que no será necesario que sean procesados por el cliente. Para hacer más ligera la descarga, Polymer 1.0 viene integrado sólo con los eventos más usados:
  • down: Se dispara mientras el elemento se encuentra seleccionado. Es decir, cuando se hace clic sostenido o se mantiene el dedo sobre él.
  • up: Se dispara cuando el usuario deja de seleccionar el elemento. Esto es cuando se deja de hacer clic o se quita el dedo sobre él y marca el final del evento down.
  • tap: Reemplaza a clic pues ofrece mejor compatibilidad con touch.
  • track: Permite rastrear cuando el usuario "arrastra" un elemento por la pantalla. Incluye hover() que nos devuelve el elemento que se encuentra "debajo" del elemento siendo "arrastrado".
Para complementar a Polymer se ofrece una serie de componentes listos para producción. Incluyen muchas de las herramientas más utilizadas al desarrollar aplicaciones. Oficialmente, estos se dividen en las siguientes categorías:
  • paper-elements: Elementos de UI con el estilo Material Design
  • iron-elements: Elementos básicos de Polymer para crear aplicaciones
  • google-web-components: Componentes de Google como Maps encapsulados en Web Components y listos para uso en producción
  • gold-elements: Especialmente diseñados para cobros (e-commerce)
  • neon-elements: Nos permiten configurar animaciones para nuestro sitio. Por ejemplo, transiciones animadas entre secciones
  • platinum-elements: Notificaciones, service-workers, caché, funcionalidad off-line y otros servicios avanzados para crear aplicaciones

Instalando Polymer

La forma recomendada de instalar Polymer es usando Bower; este se encarga de descargar todas las dependencias y las mantiene actualizadas. Puedes descargarlo usando NPM con el comando npm install -g bower. Para iniciar un proyecto, ve a la carpeta que vas a usar para tu proyecto y usa el comando bower init, ahí tendrás que ingresar los datos generales con los que deseas iniciar tu aplicación. Estos se guardarán en el archivo bower.json. Una vez que tengas Bower iniciado en tu proyecto, escribe el comando bower install --save Polymer/polymer#^1.0.0 , esto agregará Polymer a las dependencias de tu proyecto y colocará todo en la carpeta bower_components. Una de las dependencias que se instalan es Polyfill, este es necesario para usar Web Components en navegadores que no cuentan con esto de forma nativa. Puedes encontrar este archivo en la ruta bower_components/webcomponentjs/webcomponents-lite.min.js.

Polymer Starter Kit

Para sacar el máximo provecho de Polymer, recomiendo usar el Polymer Starter Kit, este cuenta con los componentes básicos para armar una aplicación, además de un set de herramientas que incluye, entre otras, un sistema de live-browser-reload y tareas de Gulp, como Vulcanize. Antes de iniciar, debes tener las siguientes aplicaciones instaladas: Para empezar a usarlo, ve a la carpeta raíz del Kit y escribe el comando npm install & bower installesto instalará todas las dependencias necesarias para poder trabajar. Polymer Starter Kit cuenta con un workflow listo para producción. Para activar tu servidor local basta con usar el comando gulp serve, este te dará una IP para trabajar local y otra que puedes usar desde otros puntos de la red local. Viene integrado con la funcionalidad live-browser-update, así que cuando hagas cambios en el código, tu navegador se actualizará de forma automática. starter kitUnit Testing es un proceso importante para toda aplicación de producción. El Polymer Starter Kit incluye la configuración necesaria para comprobar los componentes incluidos con Web-component-tester. Para usarlo, basta con ejecutar gulp test:local. Los Service Workers son una genial tecnología que nos permite ejecutar scripts en segundo plano desde nuestro navegador; esto, a su vez, permite ejecutar servicios avanzados. Polymer Starter Kit incluye un Service Worker configurado para ofrecer funcionalidad offline a tu aplicación. Puedes activar esta increíble función en tres sencillos pasos. Recuerda que puedes eliminar los tags de comentarios en el código si así lo deseas. 1. index.html [html] <paper-toast id="caching-complete" duration="6000" text="Caching complete! This app will work offline."> </paper-toast> <platinum-sw-register auto-register clients-claim skip-waiting on-service-worker-installed="displayInstalledToast"> <platinum-sw-cache default-cache-strategy="networkFirst" precache-file="precache.json"> </platinum-sw-cache> </platinum-sw-register> [/html] 2. elements.html [html] <link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html"> <link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html"> [/html] 3. Agrega precache en la lista de tareas por defecto de Gulpgulpfile.js [js] gulp.task('default', ['clean'], function (cb) { runSequence( ['copy', 'styles'], 'elements', ['jshint', 'images', 'fonts', 'html'], 'vulcanize', 'precache', cb); }); [/js] Una vez con tu aplicación lista, debes ejecutar el comando gulp antes de hacer deploy, esto optimizará todos los archivos y los dejará listos para su uso en producción. Ahora, ya estás listo para empezar a explorar el increíble potencial de Polymer. Para aprender más sobre Polymer 1.0 y otros temas que pueden cambiar tu futuro, te invito a que sigas pendiente de los artículos que publicaremos. Y no olvides registrarte al curso de Polymer en Platzi, en el que aprenderás todas las capacidades de esta poderosa librería de Google.
Cesar
Cesar
@reicek

0Puntos

hace 2 años