Де зазвичай ви верстаєте сторінки сайту для подальшої інтеграції з 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, тут докладно написано про використання.