Где обычно вы верстаете страницы сайта для последующей интеграции с rails приложением? В отдельном репозитории с html файлами или сразу в rails — в каком-нибудь специально отведенном месте? Тестируете ли верстку длинными словами и текстами? Проверяете ли различные варианты отображения элементов верстки с помощью длинного текста? Попробую кратко осветить эти вопросы, рассказав о геме rails_ui_kit — небольшом инструменте для организации верстки в rails приложениях и о том, как его приходилось использовать при разработке реальных production-приложений.
Идея написать этот гем и использовать его в разных проектах возникла после прочтения нескольких постов из блога hashrocket («Managing Design Handoffs with the UI Controller», «The UI Controller, part 2: Faking It», «The UI Controller, part 3: the UI Helper»).
Кратко о возможностях гема:
- Возможность верстки сразу в стеке rails приложения, который предоставляет большие возможности работы с темплейтами, шаблонами и другими вкусностями (haml, sass, compass, coffeescript и т.п.);
- Список всех макетов верстки отображается на отдельной странице, каждый макет также имеет свою отдельную страницу;
- Есть набор хелперов для использования в верстке в качестве контент-заполнителей (различные lorem-хелперы).
На данный момент гем имеет минимальный набор хелперов, которые наиболее часто приходится использовать практически в каждом проекте. Подробнее об этих хелперах можно прочесть в блоге hashrocket. Вы можете сами добавить необходимые хелперы, расширив модуль UiHelper, или добавив в другой свой.
Что касается списка всех макетов, по умолчанию отображаются файлы из app/views/ui в виде ссылок. В одном из проектов, над которым приходилось работать, этот список мы немного модифицировали, сделав его по категориям, чтобы упростить навигацию по большому количеству макетов. Доступ к списку макетов по умолчанию не закрыт, об этом надо помнить, для этого можно применить несколько способов, поэтому в геме это оставлено на вкус разработчика.
В качестве дополнения приведу примеры дополнительных хелперов, которые мы использовали в одном из проектов:
- хелпер с длинным именем пользователя (Константин Константинович Константинопольский);
- хелперы различных по длине значений цен (1000 RUB, 100 000 RUB, 1 000 000 RUB, 999 000 000 RUB);
- lorem-хелпер для хлебных крошек;
- lorem-хелпер значений для select тега.
Вообще, можно придумать много разных хелперов, все зависит от проекта и частоты их использования.
Помимо описанных возможностей хотелось бы отметить несколько плюсов, которые дал этот инструмент при разработке реальных production-приложений:
- Верстка почти всегда актуальна, так как не оторвана от проекта. При исправлении каких-то недочетов актуальны сразу и макет, и реальная страница с этой версткой;
- Удобно смотреть верстку в команде в одном приложении, например на staging-сервере;
- Разработчикам не приходится конвертировать верстку из html куда-нибудь еще. В большинстве случаев код макета надо только скопировать и заполнить реальными данными, что экономит время;
- Все ассеты в проекте находятся в единственном экземпляре сразу в готовом виде.
Буду рад, если гем rails_uit_kit вас заинтересует и пригодится. Так же буду рад получить фидбек и идеи по улучшению гема.
Страница репозитория — github.com/puffy/rails_ui_kit, здесь подробно написано об использовании.
Автор: puffy
