Есть много вещей, которые может использовать разработчик внешнего интерфейса, но есть некоторые, которые я считаю наиболее важными. Все, что я упомянул, предназначено для того, чтобы сэкономить ваше время, развить ваши навыки и сделать вас более продуктивными, а не только для того, чтобы гоняться за новыми блестками. Вы можете использовать их для отдельных проектов, но я имел в виду организации, когда писал это.
Используйте препроцессор CSS (SASS/LESS)
По крайней мере, использование SASS/LESS дает вам разумные переменные, поэтому вам не нужно дублировать и поддерживать столько же кода.
Как только вы начнете царапать поверхность, вы быстро обнаружите, что, используя примеси и вложенные структуры, вы экономите много времени. Возьмите следующий пример CSS:
.nav a {
color: red;
}
.nav a:hover, .nav a:active, .nav a:focus {
color: pink;
}
Можно упростить до этого в SASS:
.nav {
a {
color: red;
&:hover, &:active, &:focus {
color: pink;
}
}
}
В этом примере вы можете увидеть, насколько это СУХОЙ, и было бы тривиально провести рефакторинг класса .nav практически без последствий.
Многие редакторы (конечно, от JetBrains) обычно имеют конвертер SASS/LESS «на лету», который создает дамп файла CSS вместе с вашим файлом SASS.
Используйте инструмент сборки (Grunt/Gulp/CodeKit)
Откладывать использование инструмента сборки, такого как Gulp, не стоит. Они обеспечивают кучу ценности. Одним из ярких примеров является использование автопрефиксера для вашего CSS. С автопрефиксером вы просто пишете:
display: flex;
… и он заменяет ваш код на:
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex
Разве вы не выглядите хорошо, даже не задумываясь, покрывая все префиксы браузера!
У вас также есть отличная утилита для введения модульного тестирования, автоматической оптимизации изображений, создания собственного шрифта значка из файлов SVG, ворсования вашего кода и т. д.
По мере взросления с течением времени вы, вероятно, начнете с написания и выполнения отдельных задач, таких как:
gulp autoprefixer
Который затем созреет в:
gulp dist
… который будет запускать ваш JS-линтинг, предварительную обработку CSS, обработку изображений и задачи распространения, готовые к работе на вашем сервере.
LiveReload
Если вы не видели или не слышали об этом раньше, вас ждет угощение. Короче говоря, вы сохраняете файл, над которым работаете, локально, и к тому времени, когда вы снова переключаетесь в браузер, на странице уже есть ваши последние изменения. Если вы используете такой инструмент, как Синхронизация браузера, вам не нужно беспокоиться об установке расширений браузера, он просто будет работать. Он достаточно умен, чтобы понять, что если вы измените файл CSS, ему не нужно перезагружать страницу, он просто перезагружает файл CSS.
Возвращаясь к предыдущему пункту использования инструмента сборки, такого как Gulp, это будет действительно полезно с таким инструментом, поскольку у вас есть конвейер для управления файловыми наблюдателями, процессорами и вызовом события перезагрузки.
Непрерывная интеграция и доставка
Это звучит более пугающе, чем есть на самом деле. Если ваш сайт состоит из статических файлов, вы сможете легко развернуть его, скопировав файлы на серверы, но для этой темы внешнего интерфейса в основном нужно иметь службу, постоянно выполняющую ваши задачи сборки, когда вы отправляете новый код.
Зарегистрируйтесь, чтобы использовать Codeship (или Travis) и следуйте их инструкциям по настройке проекта. Это подключит ваш репозиторий Github. С пустым проектом вы сможете запустить gulp deploy (при условии, что у вас есть команда deploy, которая распространяет и публикует артефакты) на этапах сборки, и он волшебным образом обновится ваш сервер, когда код отправляется на Github.
Это того стоит, так как вы сразу начнете экономить время и заложите основу для запуска ваших новых инструментов сборки внешнего интерфейса.
Создайте набор инструментов пользовательского интерфейса
Следуя успеху таких проектов, как Bootstrap/Foundation, вы должны начать процесс создания живого инструментария ваших компонентов, если вы работаете в команде. Он должен состоять как минимум из примера изолированного компонента, который выглядит и работает должным образом, но в идеале также должен включать в себя немного документации о том, какие классы/атрибуты он использует, и пример кода, доступный для копирования и вставки. Имейте в виду, что примеры кода могут использовать макросы вашего языка шаблонов для создания вывода для вас.
Работающая «разработка на основе инструментария» просто определит способ проектирования и разработки функций, чтобы конечная цель стала более продуктивной. Это позволит вам легко повторно использовать элементы, предпочитая избегать похожих ответвлений стандартного кода и тратить время на повторное изобретение уже созданных функций.
В этом также есть аспект открытия, поскольку у вас, вероятно, есть функции, которые появляются только в определенном потоке вашего веб-приложения, которые мало кто увидит при разработке. Наличие этой функции в живом, дышащем наборе инструментов гарантирует, что она не будет забыта, особенно отсутствие регрессий при поддержке других функций.
На https://github.com/codylindley/frontend-tools есть исчерпывающий список инструментов внешнего интерфейса, но если у вас есть какие-либо обязательные инструменты внешнего интерфейса, я хотел бы знать, просто добавьте их в ответ.
