Организация верстки в rails приложении с помощью гема rails_ui_kit

Где обычно вы верстаете страницы сайта для последующей интеграции с rails приложением? В отдельном репозитории с html файлами или сразу в rails — в каком-нибудь специально отведенном месте? Тестируете ли верстку длинными словами и текстами? Проверяете ли различные варианты отображения элементов верстки с помощью длинного текста? Попробую кратко осветить эти вопросы, рассказав о геме rails_ui_kit — небольшом инструменте для организации верстки в rails приложениях и о том, как его приходилось использовать при разработке реальных production-приложений.

Идея написать этот гем и использовать его в разных проектах возникла после прочтения нескольких постов из блога hashrocket («Managing Design Handoffs with the UI Controller» ^[1], «The UI Controller, part 2: Faking It» ^[2], «The UI Controller, part 3: the UI Helper» ^[3]).

Кратко о возможностях гема:

• Возможность верстки сразу в стеке rails приложения, который предоставляет большие возможности работы с темплейтами, шаблонами и другими вкусностями (haml, sass, compass, coffeescript и т.п.);
• Список всех макетов верстки отображается на отдельной странице, каждый макет также имеет свою отдельную страницу;
• Есть набор хелперов для использования в верстке в качестве контент-заполнителей (различные lorem-хелперы).

На данный момент гем имеет минимальный набор хелперов ^[4], которые наиболее часто приходится использовать практически в каждом проекте. Подробнее об этих хелперах можно прочесть в блоге hashrocket ^[3]. Вы можете сами добавить необходимые хелперы, расширив модуль 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 ^[5], здесь подробно написано об использовании.

Автор: puffy

Источник ^[6]