Аналитические статьи

Brian Teeman о Joomla UI (JUI) и Bootstrap

Joomla

Брайан Тиман о команде Joomla UI и Twitter Bootstrap

Ниже приводится перевод статьи Brian'a Teeman'a о Joomla UI и Bootstrap, опубликованной в его блоге. Итак, слово автору:

Многие люди знают, что Kyle Ledbetter в последние месяцы усердно работает над пользовательским интерфейсом Joomla 3.0 для того, чтобы в последствии разработчики сторонних расширений могли совместными усилиями с разработчиками CMS сделать интерфейс Joomla  более современным, удобным и полезным. Поэтому работа ведется не только над ядром Joomla - по замыслу авторов, в версии 3.0 будет реализован инструментарий для разработчиков расширений и дизайнеров.

Я уже много раз писал в своем блоге статьи на тему интерфейсов, например: «забытый интерфейс», «красиво снаружи, отвратительно внутри», «исправляем интефейс Joomla», объяснял почему выпадающее меню это полный отстой, особенно если вы оставляете отпечатки на вашем сайте, а также почему это позволит разработчикам и дизайнерам не изобретать заново колесо.

Кайл написал отличную рецензию о том, чего он пытается добиться на ux.joomla.org и любезно разрешил мне опубликовать рецензию еще раз для распространения идеи в массы.

Заранее приношу извинение. Это будет долгая, эмоциональная статья, которая «попробует» передать полное видение и последствия.

Какова главная цель JUI (не только внедрение Bootstrap в Joomla)?

Это нечто больше, чем просто шаблон для панели адмиристратора и для фронта сайта.  Конечно, он будет служить оформлением для обоих частей сайта, но это не основное его предназначение. Основная задача данного нововведения состоит в том, чтобы предоставить разработчику инструменты оформления, которые будут доступны как в ядре, так и для сторонних компонентов, как на фронте сайта, так и в админ.панели. Это то, чего не когда не было в Joomla!®  Если загрузить 3 основных расширения (которые установлены на 99% сайтов на Joomla!®), вы получите 3 разных пользовательских интерфейса. Это получается потому, что разметка и стили, содержащиеся в ядре настолько ограничены, что разработчикам пришлось изобретать свои. Это трагическая потеря для CMS поскольку система теряет связь с пользователем и разработчиками.

Что нам нужно для решения этой проблемы?

Нам нужна минимальная стилизация, набор инструментов, который можно использовать как в админ. панели и фронте сайта, как в ядре так и в компонентах сообщества, чтобы разработчики не отходили от общего интерфейса CMS слишком далеко, и не создавали собственный интерфейс с нуля, прилагая для этого огромные усилия. Если разработчику не хватает какого либо элемента в интерфейсе, и он создает свой. Разработчик может предложить его внести в JUI и, таким образом, все могут использовать элементы совместно, и в то же время следовать стандарту в постоянно расширяющемся c помощью сообщества набора best practices. Нам нужны стандарты в каждом кусочке Joomla!®, а не только в шаблонах.

Joomla UI (JUI) и Bootstrap

Подумайте об интерфейсе панели администрирования или фронте сайта в разных компонентах, таких как Community Builder, Kunena, Projectfork, JomSocial, Phoca Gallery, RedShop, Virtuemart. У них у всех разный интерфейс, не важно это фронт или панель администрирования сайта.

Как только мы это централизуем, постоянно расширяя JUI, тогда все сообщество разработчиков сможет объединится и делать одинаковый интерфейс в своих расширениях.

Почему это лучший выбор?

Из коробки нам будут доступны множественные паттерны проектирования интерфейса. Чрезвычайно сложно найти паттерн, который вы бы не смогли использовать с новым интерфейсом. Это значит меньше пользовательских CSS стилей при создании расширения. Мы, конечно, можем создать свой CSS фреймворк но на его создание уйдут годы, и все равно мы пришли бы к подобию Bootstrap.

Принятие Bootstrap в Joomla - это плюс

Bootstrap настолько популярен и широко используется, что уже выиграл в жарком споре: включать или не включать Bootstrap в новую версию Joomla. Разработчики Joomla!® уже начали применять его в своих расширениях. Сообщество нужно «подкупить» чем то, что бы ввести стандартизацию интерфейса в Joomla!®, но оно уже приняло решение, они любят Bootstrap.

Мы не можем сделать это шаблоном

Bootstrap должен быть в ядре системы - шаблон всего лишь вишенка на торте. Если мы пользуемся всеми возможностями такой системы как Bootstrap, то все могут использовать его в своих расширениях, а шаблон просто создает оформление - вот тот путь, который должен быть.

Адаптивный CSS нуждается в Стандарте Адаптивной Верстки.

Что бы сделать Joomla!® ДЕЙСТВИТЕЛЬНО адаптивной, необходимо использовать стандартные классы, как в компонентах так и в модулях, тоолько так мы добьемся всеобщей отзывчивости сайта. Вы, конечно, можете попытаться сделать это на основе шаблона, но как только вы установите компонент, не поддерживающий отзывчивую верстку, он сломает вашу разметку. Адаптивные стандарты должны быть везде.

Даже без CSS и JS, Bootstrap фантастика!

Если по каким-либо причинам разработчик или конечный пользователь не хочет использовать Bootstrap, то с чем мы остаемся? А остаемся мы с замечательной версткой, соответвующей лучшим практикам, ожидающей стилизации с помощью пользовательских CSS стилей. Опять же, если все разработчики будут следовать стандартам, то весь сайт будет построен на чистой и верной разметке.

Мы должны централизовать разработку и основываться на доверии

Разработчики компонентов должны верить в то, что их разметка и JUI будет загружаться все время, постоянно. Вот почему JUI должна быть подгружена всегда. Вот почему доверие так важно, поскольку если разработчики потеряют веру в интерфейс, они вернутся к созданию своих "велосипедов",  и сайт опять будет похож на письмо с требованием выкупа (ну, знаете, такое со вклеенными буквами из разных газет :) (здесь автор шутит, из-за  языковой разницы не удалось адаптировать шутку на русский язык - прим. пер.)

Bootstrap не тяжелый

  • bootstrap.min.css - 82kb
  • bootstrap-responsive.min.css - 11kb
  • bootstrap.min.js - 22kb
  • glyphicons-halflings.png - 14kb
  • glyphicons-halflings-white.png - 9kb

Эти файлы являются стандартными и используются во всех компонентах. Как видно, они супер-легкие.

Теперь сравните размер этих CSS, JS и тех, которые используются у вас в панели администратора и во фронте сайта. Файлы, которые я перечислил выше, будут использоваться во всех частях вашего сайта. Они загружаются и кэшируются один раз. (я просто проверил - скрипты и css чистого шаблона весят 175кб, а теперь подумайте о сторонних компонентах, которые тоже подгрузят свои стили)

Заполняя пробелы

На данный момент Энди Тарр прилагает большие усилия для того, чтобы внедрить во фреймворк поддержку RTL (языки с направлением письма справа налево). Но если подобных вещей не хватает, мы можем внедрить их централизованно в JUI, т.к. это не просто Bootstap «из коробки», а заточенный под нужды Joomla!® фреймворк. Опять же, если у нас будет не хватать чего-либо, то мы внедрим это один раз, и все расширения получат все необходимое централизовано после обновления Joomla.

Разработчики должны разрабатывать (мысли о SDK)

Большинство разработчиков - это небольшие клубы, которые не имеют в команде разработчика интерфейсов. Это приводит к более долгому циклу разработки, т.к они тратят время на попытки создания интерфейса вместо сосредоточения на основных особенностях их компонента. С Bootstrap разработчики могут быстро создать прототип и продолжить развивать свой компонент, оставив дизайн шаблону. Яркий пример - Akeeba Backup. Этот компонент предоставляет огромные возможности, но он лишен хорошего UI. Но теперь мы можем предоставить им простые инструменты для кастомизации интерфейса. Это привлечет разработчиков к Joomla! как привлек Apple SDK к iOS.

Стили Bootstrap не агрессивны (сайты не будут выглядеть одинаково)

Стили, такие как border:1px solid #ddd; не слишком агрессивны и, фактически, уже присутствует в каждом компоненте Joomla!®.  Единственное различие заключается в том, что если все на сайте используют схожую разметку, его в 1000 раз легче изменить. Или если кто-то хочет получить быстрый прототип, ему не нужно что-то менять в шаблоне, потому что все нужные стили уже находятся в нем.

Это уже началось

Вы на верном пути, если то, что вы делаете, уже внедряется разработчиками. Прежде я никогда не видел столько волнений вокруг Joomla!®.  Разработчики компонентов таких, как JomSocial, Kunena, RedShop и Projectfork уже внедряют Bootstrap. Клубы шаблонов, такие как JoomlaBamboo и RocketTheme, уже используют этот фреймворк. Энди Тарр уже сотрудничает с командой Bootstrap для увеличения юзабилити. Мы основательно протрудились в JUX  над Joomla 3.0 при внедрении Bootstrap. Давайте просто благословим это!

Мы вытащили счастливый билет

Никогда ранее сообщество не было таким сплоченным для достижения столь великой цели. Мы переосмысляем и создаем будущее Joomla!®.  Мы рушим стены, новые разработчики стекаются под крыло CMS.  Мы станем известными как создатели самой легкой и быстрой CMS.

Спасибо всем за эту возможность!
-Кайл

Оригинальная статья: Brian Teeman
Stepan Tyurin
Привет меня зовут Степан, больше 9 лет занимаюсь версткой, работаю c Joomla, WordPress, October, Bitrix. Вместе с Евгением "Sulpher" создал сайт joomlablog.ru, который нашел новых авторов и переродился в портал cmscafe.ru :)
timeweb

Заработок в сети

  • Sape - биржа ссылок