[Из песочницы] Организация верстки в rails приложении с помощью гема rails_ui_kit
Где обычно вы верстаете страницы сайта для последующей интеграции с 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, здесь подробно написано об использовании.
