Funcionalidades de Google Web Starter Kit

Crear y diseñar sitios multidispositivo, puede ser una tarea compleja si es que no se tienen todos los conocimientos o herramientas adecuadas. En IDA, para facilitar nuestro proceso de desarrollo, comenzamos a utilizar Google Web Starter Kit. En este artículo te contamos sobre sus funcionalidades y cómo lo aplicamos a nuestros proyectos.

Google Web Starter Kit es un framework que ofrece un esqueleto sólido para desarrollar sitios web. Usa JavaScript, CSS y HTML, tiene una base responsive, sincronización multidispositivo y optimización de rendimiento con soporte para SASS y para la herramienta gulp.js.

Además, si utilizas los estilos por defecto de Google Web Starter Kit, el sistema sigue todas las recomendaciones de Google para asegurar una buena experiencia de usuario en todos los dispositivos, lo que te ayudará también a posicionar tu sitio.

Funciona en todos los navegadores modernos, tanto en móviles como en escritorio, y está alojado en GitHub, donde puedes editarlo como quieras.

Funciones generales

Sus funciones principales son:

• Boilerplate responsive: Tiene un boilerplate optimizado para sitios multipantallas.
• Guía de estilo: Como su nombre lo indica, es una guía para tomar mejores decisiones en cuanto al diseño del proyecto.
• Sincronización multidispositivo: Sincroniza los clics, scrolls, formularios y recargas a través de varios dispositivos en el momento en que editas tu proyecto.
• Recarga del navegador en tiempo real: Cuando recargas el navegador, las ediciones se hacen sin necesidad de instalar una extensión.
• Optimización del rendimiento: Minimiza y enlaza Javascript, CSS, HTML y las imágenes para mantener tus páginas limpias.
• Servidor HTTP: Ofrece un servidor propio para previsualizar tu sitio y hacer pruebas.
• Reportes de PageSpeed: Las métricas muestran el rendimiento de tu sitio en móviles y en computadores de escritorio.
• Soporta SASS: Compila fácilmente SASS en CSS, soportando variables y clases.

¿Cómo se instala Starter Kit?

Para instalarlo necesitas tener NodeJS, NPM y Sass en tu máquina. Luego, debes instalar Web Starter Kit desde su sitio oficial, descomprimirlo y ponerle el nombre de tu proyecto a la carpeta.

El siguiente paso es abrir un símbolo del sistema, cambiar el directorio que se encuentra en la carpeta del proyecto y ejecutar los siguientes scripts de instalación:

• cd my-project
• npm install
• npm install gulp -g

Esto instalará las dependencias locales correspondientes a Web Starter Kit.

¿Qué beneficios hemos percibido al usarlo?

En IDA, utilizamos Google Web Starter Kit desde comienzos de este año, principalmente en proyectos de desarrollo front end como esqueleto. Si bien dejamos de lado el framework, el sistema de testing es muy interesante porque está hecho en base al archivo Gulp (gulpfile.js) el que es bastante extensible. Para nosotros, esa es la función más útil de Google Web Starter Kit, pues tiene tareas muy interesantes que se pueden usar en otros contextos.

Usar Gulp es un beneficio relevante del Kit, debido a que se ha posicionado como un recurso importante en el desarrollo de proyectos, permitiéndonos un acceso de bajo nivel a herramientas que de otra forma serían muy difíciles o incómodas de usar.

Actualmente, esperamos aumentar las funciones dentro de la estructura del archivo Gulp, programar más tareas y usar más middleware para que pueda conectarse con más elementos y mejorar su utilidad en el desarrollo de nuestros proyectos.