Доклад на DrupalCamp Kyiv 2012

Всем привет, наконец появилось время для публикации текста доклада. Для тех кто не в курсе - 14-15 сентября случилось замечательное событие, а именно: http://camp12.drupal.ua/ . Мне посчастливилось быть докладчиком на этом хорошем мероприятии, а нашей компании - быть спонсором. Доклад получился с большим количеством отсылок на сторонние ресурсы, поэтому я обещал выложить текстовку с ссылками в блог. Что и делаю :)

Так как это текстовка для доклада, которую я подготавливал для конференции, хочу отметить что это не информационная статья в блог-пост, а доклад, сопровождающийся слайдами. Поэтому "на бумаге" далеко не все, т.к. были вопросы из зала, были уточнения и т.п.

Презентация

Текст

На кэмпе в Донецке я рассказывал о наиболее популярных сейчас фреймворках тем для 7ки. Есть видео этого доклада, отдельно в блоке выложена презентация и мне не хотелось бы повторяться с обзором этих тем, а немного посмотреть на перспективные начинания.

Мы много внимания уделяем идеологии верстки. Т.к. в небольших проектах на верстку зачастую уходит очень значительная часть времени, было бы странным не уделять этому вопросу внимание. Дело в том, что организация друпал-тем предоставляет нам некоторую архитектуру для работы с разметкой. По поим личным ощущениям, наиболее “родной” на текущий момент для друпала из фреймворк-тем является омега. Но нам всегда интересно - что проиходит там, за пределами drupal-мира, какие там возникают идеи для ускорения процесса производства. Ведь многие помнят, с какими спорами сталкивалась идея сеток (grids) в верстке - это несемантично, генерирует многие классы, ведет к увеличению количества врапперов. Но сейчас сетки почти везде. Потому что это удобно. Целью моего доклада является не сделать обзор тем, на которых уже сейчас можно легко и быстро писать сайты, не задумываясь о вопросах документации и поддержки - этот обзор вы можете увидеть в моем рассказе на донецком кэмпе. Целью является посмотреть - что из внешних инструментов может стать стандартом в будущем и с чем можно начинать работать уже сейчас. Так как это обзорный доклад, я хочу предупредить что мы просмотрим большое количество тем и модулей, не разбирая конкретные технические детали по использованию, предполагается что слушатели medium доклада уже знают что такое Sass, Compass, Less и т.п.

Давайте посмотрим, какие из фреймворков и инструментов, связанных с темизацией, интегрировали в drupal на уровне тем и модулей, и какие сложности в их применении могут нас настигнуть.

Начнем с фреймворков тем (мое любимое :)

И в качестве первого хочу рассмотреть twitter bootstap. http://twitter.github.com/bootstrap/

На текущий момент на drupal.org есть 6 тем, в той или иной степени базирующихся на bootsrap’e, это:

  • http://drupal.org/project/twitter_bootstrap
  • http://drupal.org/project/bh_bootstrap - форк, задача которого сделать фреймворк-тему на основе бутстрапа, рекомендую обратить внимание, наравне с основной бутстрап-темой.
  • http://drupal.org/project/ded - sass-решение. В виду отсутствия присутствия rubygems на большинстве хостингах, может не рассматриваться как быстрое решение для фрилансеров, т.к. именно rubygems дает профит по части быстрого подключения sass/compass
  • http://drupal.org/project/stanley - тема админки, вдохновленная rubik, на старой версии бутстрапа (1.х)
  • http://drupal.org/project/radix - взяты css из бутстрапа, не все элементы, нет иконок, например
  • http://drupal.org/project/boilerstrap - проект умер, автор в послесловии сказал “Парни, мы заканчиваем со всем этим, рекомендую использовать Omega” (и он прав! :).

Бутстрап продолжает набирать популярность у разработчиков, посмотрим на некоторые плюсы и минусы:

Плюсы:
- Комплексное решение по типографике и элементам.
- Множество доп. разработок сторонних разработчиков, таких как http://fortawesome.github.com/Font-Awesome/#base-icons (кстати - у меня есть портированные кнопки из бутстрапа и набор иконок font-awesome в виде друпал-модуля, собранного для использования с омегой - http://projects.examplesite.ru/sites/default/files/radon_modules/1/ra_theming-7.x-1.0.tar).
- В ветке 2x-dev есть переопределения элементов форм, кнопок и т.п., т.е. все богатство бутстрапа будет доступно при установке.

Минусы:
- Требуется JQuery 1.7+. Модуль jquery update умеет обновлять до 1.5.2. Старые добрые решения по ссылке момогут поставить вам последнюю версию Jquery - http://drupal.org/node/1386294, там есть готовые патчи для jquery update stable ветки, а тут описана логика как можно ручками подключить только для фронтенда - http://habrahabr.ru/post/94510/#comment_2876391 (внимание, 6ка!). Также -dev ветка jquery update умеет обновляться до версии jquery 1.7.1. Но так или иначе придется настраивать вывод jquery 1.7.1. только для фронтенда, т.к. та же админка вьюсов отказывается корректно работать под 1.7.1. Если разделить версии jquery для фронт и бекэнда - все работает корретно, однако это решение рекомендуется тем, кто умеет хорошо работать с отладкой js, т.к. могут быть непредсказуемые ошибки в зависимости от набора модулей, что вы используете.
- Если не хотите играть в игру “отсеки лишнее”, рекомендуется для разработки bootsrap-like тем, т.к. множество “родных” для темы вещей (например - навбар) доставляют верстальщику доп. работу. Или делать форк.

Следующая остановка - фреймворки тем, использующие препроцессор LESS для стилей.

Тем, которые отдают вам исходники в less, на удивление мало. Если говорить о технических вопросах поддержки less тем - то можно использовать решение в виде js-компилятора, который можно просто взять с сайта http://lesscss.org/, либо поставить http://drupal.org/project/less модуль less, который через lessphp компилирует less в css.

  • http://drupal.org/project/om
  • http://drupal.org/project/pannelli
  • http://drupal.org/project/versatile

Перейдем к фреймворкам тем, которые используют Sass

Их намного больше. И степень их проработки значительно выше, чем у тем с less. Показатель того что друпал-разработчики голосуют за sass ^)

  • http://drupal.org/project/zen
  • http://drupal.org/project/adaptivetheme
  • http://drupal.org/project/basic
  • http://drupal.org/project/sasson
  • http://drupal.org/project/boilerplate
  • http://drupal.org/project/ninesixtyfive
  • http://drupal.org/project/aurora
  • http://drupal.org/project/aether
  • http://drupal.org/project/ded

Как вы видите, если мы возьмем 5 первых ссылок, мы получим одни из самых скачиваемых и известных фреймворков тем. Если бы сюда добавить омегу, ninesixty и fusion, я бы назвал этот список обязательным для любого специалиста по темизации.

Составив этот список для доклада, я, честно сказать, сильно растерялся) Дело в том что мы работали с каждой из этих тем, в большей или меньшей степени, и для обзора каждой темы не составит сложности сделать доклад на час-полтора. Поэтому остановимся на общих выводах. Из всех этих тем, наиболее “коробочным решением” выглядит sasson. Дело в том что она уже использует собственный компилятор из scss файлов, все работает “out from the box”. Лидеры - sasson и более “чистый” вариант - boilerplate.

Так как доклад ориентирован в будущее, не лишним будет рассказать, что на Railsconf 2012 в Техасе, был отдельный доклад про sass, где анонсировали ряд интересных возможностей. Одна из них - это libsass. Libsass является компилятором, написанным на C, который делают для ускорения сборки css на продакшне - текущий ruby скрипт не отвечает всем потребностям производительности, а это даст удобную интеграцию с php, и ожидается что скоро у нас будет коробочное решение для друпала. Ссылка на доклад - http://www.youtube.com/watch?v=MFwId6xSh2o .

Немного о модулях

Sinr и Features как средства портирования решений.

Чего нам тут не хватает

А нехватает нам ресурсов для следующего шага по темизации. Как только появилась 2я версия twitter bootsrap, появилось большое количество сторонних инструментов (спасибо less), которые предложили готовые наборы кнопок, иконок, паттернов оформления, которые можно было подключать в два клика, основываясь на стандарте бутстрапа. Мы же пока более озадачены портированием сторонних решений, без оглядки на re-usable, повторное использование написанных ранее решений. Нам не хватает внутренних соглашений, доверяя которым мы бы публиковали свои готовые наборы кнопок, иконок, элементов интерфейса. Прежде всего, необходимо определить для себя стандарт, которому хотите придерживаться. На мой личный взгляд, лидеров пока 2 - это drupal-way решение Omega, и sass-тема Sasson, возможно еще boilerplate. Призываю всех делиться публично наработками, связанными с этими тремя фреймворками тем. Портируете для них готовые наборы иконок - выкладывайте на гитхаб результаты. Задумываетесь над логикой mixin’s для Sasson - вносите на обсуждение в сообщество. Мне кажется у нас уже есть стартовая площадка - набор инструментов, теперь надо наполнить пустующую пока нишу готовых решений по темизации.

Партнерская программа

Кстати, для интересующихся технологиями, у нас есть партнерская программа. Если по вашей специализации:

  • вы работате над другими задачами (не создание типовых сайтов),
  • вы работаете с высокобюджетными сайтами,
  • вам хочется ковертировать обращения по вопросам "помогите с созданием сайта-визитки" в прибыль.

Тогда, добро пожаловать в партнерку :)