На Chrome Dev Summit 2014 обсуждалось множество тем и совершенно новых API, но речь шла не только о новом и блестящем.
Если вы начинающий веб-разработчик или даже опытный разработчик, собирающийся приступить к изучению новых API, скорее всего, вы будете следовать этим трем шагам: изучать, создавать и повторять.
Мэтт Гонт рассказывает о текущих усилиях команды разработчиков Chrome Developer Platform по решению этих проблем.
Учиться
Web Fundamentals — это набор документации, основанной на примерах использования, охватывающий ряд тем. Основная цель — помочь разработчикам, имеющим небольшие или отсутствующие знания, как можно быстрее внедрить лучшие практики.
Одна из главных целей Web Fundamentals — гарантировать, что если вы новичок в теме, руководство максимально сократит «паралич выбора». Эдди Османи прекрасно описывает это в Pastry Box .
Если вы обнаружите какие-либо проблемы с сайтом или его содержимым или хотите, чтобы в Web Fundamentals была освещена определенная тема, сообщите нам об этом, отправив отзыв на GitHub .
Строить
Чтобы помочь вам начать новый веб-проект, мы создали Web Starter Kit . В нем есть все необходимое:
- Надежный процесс сборки
- Шаблон HTML
- Руководство по стилю
Процесс сборки
Для тех из вас, кто новичок в процессах сборки, самый простой способ представить себе процесс сборки — это рассматривать его как программу, которая берет набор файлов, выполняет над ними определенные задачи и выводит новые версии в другом месте. Задачи оптимизируют файлы для улучшения времени загрузки, проверяют возможные ошибки или обрабатывают задачи, которые можно автоматизировать.
В Web Starter Kit имеются следующие процессы:
Мы минимизируем и объединяем CSS и JavaScript, чтобы браузер мог быстро загрузить файл, JavaScript также прогоняется через JSHint для проверки лучших практик JavaScript и распространенных ошибок кодирования. Изображения минимизируются с помощью imagemin, и вы можете получить огромное сокращение размера файла, используя это. У нас также есть процесс создания руководств по стилю CSS.
Шаблон для HTML-кода для разных устройств
Первый набор HTML-кода, который вы пишете для новой страницы, довольно стандартен, и, скорее всего, у вас будет способ быстро получить готовый HTML-файл, который будет хорошо работать на разных устройствах и с разными размерами экранов.
В Web Starter Kit мы хотели добавить поддержку любых функций, которые стирают границы между платформой и вашим сайтом, поэтому мы добавили поддержку добавления на главный экран и на заставки для Android, Windows Phone, iOS и Opera Coast.
Руководство по стилю
Последняя часть Web Starter Kit — это руководство по стилю.
Это дает любому новому проекту отличный набор стилей и компонентов по умолчанию, что поощряет разработку, основанную на стиле. Вы можете изменять существующие стили элементов и добавлять свои собственные.
В следующей версии WSK, которая должна выйти в начале следующего года, мы усердно работаем над упрощением того, как сочетаются руководства по стилю, и переходом на внешний вид и ощущение материального дизайна . Мэтт показал ранний макет того, как это может выглядеть, на Chrome Dev Summit, и вы можете увидеть пример ниже.
Итерировать
Как только вы начнете применять новые знания на практике, вам понадобится DevTools для отладки, улучшения и поддержки вашей работы.
В DevTools появилось несколько новых важных функций, и Мэтт рассматривает следующие новые функции.
Режим устройства
Режим устройства — это новый раздел в DevTools, который позволяет быстро увидеть, как ваш сайт работает на разных мобильных устройствах, одновременно просматривая медиа-запросы в вашем CSS.
Одной из замечательных функций режима устройства является возможность регулировать скорость сети, что позволяет имитировать работу пользователя при подключении по GPRS, EDGE, 3G, DSL или Wi-Fi.
Профилировщик краски
Если вы когда-либо открывали вкладку временной шкалы и нажимали кнопку записи, вы, вероятно, видели, как в водопаде происходят некоторые события рисования. Обычно это был бы черный ящик, без возможности узнать, почему браузер сделал что-то или что он делал.
Профилировщик рисования не предоставляет вам больше информации о том, что именно делает браузер во время рисования.
Отслеживание недействительности
DevTools теперь указывает причину, по которой произошла отрисовка или макет, когда это возможно. Это полезно для тех, кто изучает временную шкалу, поведение браузера и позволяет оптимизировать код для предотвращения проблем с производительностью.
Вид диаграммы пламени
Это совершенно другой способ просмотра информации, доступной на временной шкале. Это значительно упрощает просмотр того, как задачи перекрываются и какое поведение браузера происходит в результате других задач.
Просмотрщик кадров
В представлении Flame Chart вы можете выбрать определенный фрейм и в нем изучить, какие элементы на странице были перемещены в составной слой, а также причину их перемещения.
Изучайте. Стройте. Повторяйте.
Это лишь некоторые из усилий команды Chrome, направленных на то, чтобы помочь разработчикам ускорить процесс веб-разработки, поэтому обязательно ознакомьтесь с Web Fundamentals , Web Starter Kit и новыми функциями Chrome DevTools .