Web Starter Kit de Google

Por Edwin Gonzales Melquiades
Web Starter Kit de Google

En esta oportunidad hablaremos sobre la nueva herramienta en desarrollo que ha lanzado Google, para iniciar rápidamente con proyectos web, llamada Web Starter Kit.

Google Web Starter Kit

Hola que tal amigos, en esta oportunidad hablaré sobre la nueva herramienta en desarrollo que ha lanzado Google,  para iniciar rápidamente con proyectos web, llamada Web Starter Kit.

Bueno, definitivamente google sorprendió con esta nueva herramienta, dándola a conocer días previos al Google I/O Conference en San Francisco, veamos entonces,

¿Qué es Web Starter Kit?
Como ya les venía diciendo, Web Starter Kit es una Herramienta de desarrollo web de gran alcance para ayudarte a empezar a escribir código potente en cuestión de minutos, basado en las buenas prácticas del desarrollo web moderno; ofrece un conjunto de plantillas Boilerplate y herramientas que se centran más en los problemas de rendimiento y desarrollo para multipantallas. Google a través de esta herramienta trata de llenar el vacío que muchos frameworks FrontEnd de hoy en día han ignorado en mucho tiempo, que es: “El rendimiento de las aplicaciones web y la optimización”.

Web Starter Kit tiene las siguientes características:

  • Plantillas Boilerplate Adaptables a múltiples dispositivos.
  • Sincronización entre múltiples dispositivos.
  • Recarga el navegador a tiempo, es decir que en tanto se hagan cambios en el código, estos se podrán visualizar automáticamente en el navegador sin necesidad de recargarlo manualmente.
  • Minificación de Código.
  • Servidor HTTP incorporado.
  • Mejor Velocidad de Páginas web.
  • Soporte para Sass.

Bueno para poder empezar con Web Starter Kit, primero deben ir a la siguiente dirección: https://developers.google.com/web/starter-kit/ y luego dirigirse al tab Getting Started, aquí hay una pequeña guía de inicio para Web Starter Kit, en donde muestra los pasos siguientes:

  • Como primer paso deben clonar o descargarse la última versión, que se encuentra en Github; en la siguiente dirección están posteados todos los releases de esta herramienta: https://github.com/google/web-starter-kit/releases.
  • Lo siguiente es, que deben tener en cuenta que si están usando las herramientas del Web Starter Kit, entonces deberán instalar en el sistema:
    • NodeJs, en la siguiente dirección http://nodejs.org/,
    • Ruby, en la siguiente dirección http://rubyinstaller.org/
    • Ruby Sass Gem, en la siguiente dirección indica que comando se debe ejecutar para su instalación http://sass-lang.com/install
    • y Gulp (que es un corredor de tareas que ayuda a automatizar algunas tareas repetitivas a través de la minificación, compilación, haciendo pruebas unitarias y más).

Muchas de las interacciones del Web Starter Kit serán ejecutadas a través de línea de comandos bajo alguna terminal para el caso de Mac, shell de linux o cmd en windows. A través de comandos también lo instalamos.

Luego de tener clonado o descargado el Web Starter Kit, dirigirse a la carpeta web-starter-kit/app/ , en donde muestra dos plantillas básicas : index.html y basic.html; la primera trae una plantilla básica con un menú de navegación y la segunda es una plantilla muy muy básica en donde trae solamente cargadas todas las dependencias a usar en nuestra plantilla para iniciar con la codificación.

El siguiente paso será ejecutar el comando gulp en el directorio web-starter-kit/app/ para poder construir el proyecto, compilandolo y cargando sus dependencias, este comando corre todas las tareas especificadas en el archivo gulpfile.js que se encuentra en la raíz del proyecto y a su vez creará el directorio web-starter-kit/dist/.

Ahora deben ejecutar dentro de web-starter-kit/app/ el comando “gulp serve” y posterior a ello lo visualizamos  en el navegador en localhost:3000, aquí podemos ver la plantilla por defecto en donde la sección de Style Guide nos muestra una guía para usar las clases que trae web starter kit, en los elementos que usemos en nuestros proyectos, proporcionando tipografías, botones, incluso un sistema grid inspirado en frameworks como Bootstrap y Foundation.

Muchos denominan al web starter kit, “el bootstrap de Google”, sin embargo el ingeniero de Google Addy Osmani, quién está detrás de este proyecto, indica que no pretende competir con bootstrap en Términos de  interfaz de usuario; pero al parecer en lo que va de sus inicios de este proyecto tiene una buena acogida, así que les invito a probar esta nueva tecnología en desarrollo y a leer mucho más sobre su documentación para aprovechar su potencial, yo termino aquí con este tutorial breve de Web Starter Kit motivandolos para que comiencen a usarlo, alguna pregunta o duda que tengan, pueden hacerla a través de nuestro sistema de discusiones presente en nuestra plataforma. Hasta luego.

 


 

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Edwin Gonzales Melquiades

Edwin Gonzales Melquiades

Frontend Developer. Fundador de DevCode. Me gusta Javascript y Python.