Google запустил Web Starter Kit

Google запустил новый инструмент под названием Web Starter Kit — мощный инструмент для быстрой разработки мобильных сайтов.

Web Starter Kit
image-18

Ранее Google выпустил много туториалов основ современной веб разработки. В этот раз они выпустили целый набор шаблонов и инструментов, которые сосредоточены больше на проблемы производительности и развития multi-screen. Большинство сегодняшних front-end фреймворков уже давно игнорируют производительность приложений и их оптимизацию!

    Web Starter Kit находится в бета-версии, но он уже включает следующие функции:

  • Multi-device адаптивный шаблон
  • Кроссплатформенная синхронизация
  • Мгновенная перезагрузки браузера
  • Минимизация кода
  • Встроенный HTTP-сервер
  • Поддержка Sass

…и многое другое. Для того что бы Web Starter Kit работал, у вас должны быть установленны NodeJS, Ruby, и Ruby Sass Gem. Установка Gulp не является обязательным условием.

В комплект также входит мульти-скрин грид система вдохновленная фреймворками Bootstrap и Zurb’s Foundation. Но в отличие от этих фреймворков, этот комплект не предлагает никаких элементов и компонентов пользовательского интерфейса. Инженер Google Адди Османи заявил Hacker News, что они не намерены конкурировать с Bootstrap в плане компонентов пользовательского интерфейса.

Комплект поставляется с двумя основными шаблонов: index.html и Basic.html. Первый, index.html, является точкой входа для сайта. Он содержит адаптивный дизайн и панель навигации.

панель навигации
image-19

Второй шаблон, Basic.html, может быть использован в качестве основного шаблона, если вам не нужно выдвижное меню. Вы можете просто переименовать его в index.html, удалив перед этим основной шаблон.

Работа с Web Starter Kit от Google становится еще легче, когда у вас установлен Gulp. Все задачи Gulp предварительно настроены в файле gulpfile.js, он находится в корневом каталоге. Запустив из командной строки команду gulp в папке вашего проекта будут сгенерированны готовая папки /dist. Эта папка содержит сжатый CSS, JS файлы, оптимизированные изображения и сжатые файлы HTML.

Папки проекта web starter kit
image-20

Запуск команду gulp serve загрузится версия сборки приложения в браузер. Он использует Live Browser Reloading, для обновления браузера, когда вы вносите какие либо изменения в код.

Инструмент Gulp также уже настроена функция PageSpeed. Как только вы начали разработку приложений с использованием Web Starter Kit, запустите команду gulp pagespeed и вы увидите производительность в балах у конкретной страницы.

pagespeed web starter kit
image-21

Одна из лучших особенностей Web Starter Kit является руководства UX Style из коробки. Там показанно основные стили типографии, шрифт значки и CSS классы для грид системы.

style guide web starter kit
image-22

Web Starter Kit выглядит многообещающим инструментом для разработчиков всех уровней квалификации. Проверка производительности, оптимизация на лету и адаптивная грид система являются одними из лучших особенностей, которые она предлагает.