Cómo poner a punto Polymer Starter Kit


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

En próximos artículos, vamos a realizar una aproximación muy práctica a Polymer, la librería que nos permite agilizar el desarrollo con Web Components. Como incluiremos numerosos ejemplos para explicar las funcionalidades de esta librería,  repasemos antes de empezar cómo crear un entorno de desarrollo adecuado con Polymer Starter Kit.

Estas son  las herramientas con las que vamos a trabajar:

  • Polymer. Es la librería con el estándar Web Components que te permite desarrollar custom elements, que son como etiquetas HTML personalizadas. Polymer es una librería que puedes instalar con Bower  para el proyecto que necesites, tal y como ya hemos visto.
  • Bower. Lo usaremos para tener actualizadas las dependencias de un proyecto Web.
  • Yeoman. Un robusto conjunto de lado del cliente, compuesto por herramientas y frameworks que pueden ayudar a los desarrolladores a crear rápidamente aplicaciones Web.  Para instalar Yeoman lo puedes hacer en tu ordenador con el comando npm:
    npm install -g yo
  • GulpUn sistema de construcción que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más.

Recetas de Yeoman para desarrollar con Polymer

Vamos a ver, ahora que ya tienes Yeoman, el comando para obtener los generadores de Polymer:

npm install -g generator-polymer

Con el comando “yo” y el nombre de la receta, encontrarás cuatro muy valiosas:

yo polymer

Te mostramos las recetas, o generadores, que consigues con esto:

  • polymer. Esta es la que inicia un nuevo proyecto basado en Polymer Starter Kit.
  • polymer:element (o polymer:el). Esta comienza un nuevo elemento de Polymer, lo sitúa en la carpeta de elements (app/elements) y pregunta si te interesa incluir el import en el archivo elements.html .
  • polymer:seed. Crea un elemento de Polymer y aplica todo lo necesario para su distribución vía Bower. Te ofrece el archivo para hacer la demo, el bower.json para distribuirlo, una página de ayuda del componente, etc.
  • polymer:gh.  Te genera el sistema para publicar en github pages el contenido de trabajo con el elemento.

En esta dirección de Github, encontrarás más información.

Iniciar el proyecto instalando Polymer Starter Kit

Lo que debemos hacer ahora es instalar Polymer Starter Kit (PSK):

  1. Creación de la carpeta del proyecto.
  2. Con el terminal y con la línea de comandos nos ubicamos en la carpeta que hemos creado.
  3. Ejecutamos el comando para generar el Polymer Starter Kit.
     yo polymer

    Yeoman comenzará a instalar el nuevo proyecto y te formulará un par de preguntas, una sobre instalar el sistema para testing de componentes y otra para las carpetas de ayudas.

  4. Ya generado es interesante que observes que tenemos una carpeta llamada “app”, que es donde se encuentra toda la aplicación y dentro el index.html que es el punto de entrada a esta.
  5. Para ponerlo en marcha realizaremos una serie de tareas Gulp con el siguiente comando:
     gulp serve

    Realizará una serie de acciones (que veremos un poco más adelante) y se abrirá en tu navegador la página donde está desplegada la aplicación durante la etapa de desarrollo.

    En caso de que no ocurra nada, observa que al ejecutar el comando aparezca un mensaje donde se indica la URL del sitio.

    Local: http://localhost:5000
    External: http://192.168.1.102:5000
  6. Para desplegar la aplicación se sube es la carpeta dist, que contendrá los archivos a distribuir en el entorno de producción. De inicio esa carpeta estará prácticamente vacía, pero con el comando gulp puedes generar los  archivos.
  7. Antes de iniciar Git, echa un vistazo a que dentro del proyecto se encuentre un archivo llamado .gitignore (oculto en Mac y Linux por comenzar por “.”). Esto lo podrás hacer con el comando:
     git init

¡Polymer Starter Kit está ya iniciado correctamente!


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *