Сравнение css-фреймворков/библиотек на живом примере. Часть 1

    сравнение css-фреймворков на примере

    Пролог


    В данном цикле статей я намерен провести объективное сравнение css-фреймворков на основе живых примеров, как в TodoMVC для js решений.

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


    Содержание


    • Пролог
    • Введение
    • Различия между понятиями фреймворк и библиотека
    • Типы решений по реализации пользовательских веб-интерфейсов
      • Простой css-фреймворк
      • Web-component
      • Css-сетка
      • Комплексный css-фреймворк

    • Сравнение
    • Заключение


    Введение


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

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

    При создании новой версии mr. Gefest'а нам не хватало информации о css-фреймворках. Нам нужно было узнать не только, какие там компоненты, но и как устроены они изнутри, получить их наиболее полное и корректное сравнение.

    Вы, наверное, заметили, что уже существует не меньше 30 css-фреймворков с разным набором компонентов и архитектур. Разобраться во всем этом с первого раза непросто, да и со второго, и с третьего, и с...

    Поэтому мы решили сделать сравнение css-фреймворков на живом примере, как в ToMVC. Это должно помочь веб-разработчикам быстро выбрать подходящее css-решение.

    Работы много, поэтому сравнение я буду описывать на хабре постепенно — в виде цикла статей. Надеюсь, мой труд будет Вам полезен.

    Различия в понятиях «фреймворк» и «библиотека».


    Перед анализом решений необходимо рассмотреть два понятия: фреймворк и библиотека. На первый взгляд, они могут показаться одинаковыми, но это не так. Обратимся к их определениям в Википедии.

    Фреймворк (неологизм от англ. framework — каркас, структура) — программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.

    Библиотека (от англ. library) в программировании — сборник подпрограмм или объектов, используемых для разработки программного обеспечения (ПО).

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

    Про различия между понятиями там написано:

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

    Из всего этого можно сделать вывод, что библиотека является фреймворком, если:
    • задает правила построения архитектуры программного кода;
    • диктует принципы структурирования файлов;
    • внутри себя имеет несколько библиотек.

    Несмотря на их четкое разделение, не всегда можно увидеть грань, где начинается css-фреймворк и заканчивается css-библиотека. Ведь в их основе лежит язык разметки и язык определения его внешнего вида. Они значительно отличаются от javascript, c++, pascal и других. Это сбивает с толку, так как их формализация не всегда подходит под определённые выше правила. Но я буду внимательнее и постараюсь сделать все, как можно точнее. Да и Вы, надеюсь, подскажете и поможете при допущении ошибок.

    Типы css-фреймворков/библиотек


    На рынке существует множество css-фреймворков и библиотек. Все они обладают разным набором элементов. Ради справедливой оценки и уменьшения погрешностей в результатах, я решил разделить на подтипы css-решения, проанализировав около 40-ка вариантов:
    • Простые css-фреймворки;
    • Web-components;
    • Css-сетки;
    • Комплексные css-фреймворки.

    Простые css-фреймворки


    В них не используется javascript. Все их модули пишутся на css и html. Они легки, быстры и просты. Из-за отсутствия javascript-компонентов у простых css-фреймворков не достаточно некоторых функциональных возможностей.

    Они могут включать в себя следующие модули:
    • примитивы (типография, изображения и т.д.);
    • сетку;
    • кнопки;
    • таблицы;
    • элементы форм;
    • меню;
    • вспомогательные элементы.

    Список решений для анализа:

    Web-components


    Они основаны на новом механизме веб-компонентов.

    Веб-компоненты — это комплекс стандартов, который добавляет в браузер технологию для удобной реализации ui-решений. Каждый такой элемент будет работать в своем личном DOM-дереве без перекрытия стилями основной страницы. Это одно из главных преимуществ web-components, так как позволяет поддерживать ему свойство инкапсуляции. Более подробно об этом я писал в группе проекта: Веб-компоненты.

    Список фреймворков для анализа:

    Css-сетки


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

    Список решений для анализа:

    Комплексные css-фреймворки


    Самые масштабные фреймворки. Обладают javascript и css+html модулями. Способны решить большинство задач по созданию web-UI.

    Обычно в них присутствуют:
    • примитивы (типография, изображения и т.д.);
    • сетки;
    • диалоговые окна;
    • разделители на страницы (пагинации) ;
    • панели;
    • шрифты с векторными иконками;
    • карточки;
    • списки данных;
    • хлебные крошки;
    • аккордеоны;
    • кнопки;
    • таблицы;
    • элементы форм;
    • меню;
    • вспомогательные элементы;
    • и многое другое.

    Список решений для анализа:

    Заключение вводного материала


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

    Я наглядно доказал, чем отличается css-фреймворк от css-библиотеки, и выделил 4 типа решений:
    • Простые css-фреймворки;
    • Web-components;
    • Css-сетки;
    • Комплексные css-фреймворки.

    В каждом типе определил признаки и указал список решений для дальнейшего изучения.

    В следующих статья мы начнем с анализа конкретных css-фреймворков и библиотек (список может меняться). До новых встреч.

    UPD 21.12.2015: благодаря oledje в комплексные css-фреймворки добавил Materialize и Material Design Lite.
    UPD 22.12.2015: andrewiWD предложил Gridle и я его добавили в список css-сеток.
    Вам интересно сравнение css-фреймворков/библиотек на примере?

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    Метки:
    mr. Gefest 27,52
    Создаем облачную IDE мечты для веб-разработчиков.
    Поделиться публикацией
    Похожие публикации
    Комментарии 26
    • +3
      Как давно Веб Компоненты стали CSS-фрейворком/библиотекой?
    • +32
      В голосовании нужен пункт «ожидал увидеть сравнение css-фреймворков/библиотек, начиная читать статью».
      • +10
        Звучит всё хорошо. Выглядит хорошо. Масштаб работы просто замечательный. Статью бы прочитал с удовольствием…

        Только почему при прочтении вашей статьи мне кажется, что вы писали не статью на хабр, а курсач в МЭСИ? Господи, пролог, введение, всё такое…

        Вот, прочитайте два десятка статей отсюда: habrahabr.ru/top/alltime

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

        Вы точно уйдёте в топ.
        • 0
          Спасибо за совет! Я постараюсь поменять стиль повествования.
        • +2
          Типография — это место, где книги печатают, расскажите про типографику. И выше сказали верно — не пишите курсовик, слишком унылый стиль. А так — жгите, интересно.
          • 0
            Уже хорошо то, что вы собрали большинство современных библиотек и фреймворков в одном месте. Но тестировать всех их… Масштаб работы реально огромен, ведь. Не устанете? Настолько ли важно заниматься их сравнением. Интернет сейчас такой быстрый, пройдёт пол года — появится ещё цепочка новых решений.

            Я лично как-то в последнее время всё больше отхожу от больших решений в сторону Riot.js компонентов. Простые, лаконичные. Можно легко за несколько десятков минут написать полностью рабочий компонент, который в достаточной мере будет обособлен от остального контента сайта. На текущий момент жизни, это самое удобное и простое решение для меня. + Kube CSS фреймворк в качестве основы для сайта. Ибо красивый, приятный, лаконичный. Я его последнюю версию преобразовал в Sass для большего удобства, ибо нынче Less уже давно проигрывает в популярности. И вроде как хорошо живётся)
            • +1
              Я терпеливый, не устану)) Сколько раз уже успели применить Riot.js на рабочем проекте?
              • +1
                Riot.js я уже больше года применяю. На данный момент, мы его используем в разработке одного большого медицинского портала. Помимо реально сложных компонентов со сложной UI логикой, я, к примеру, создал несколько небольших Riot компонентов и описал в документации, как их применять. Получились небольшие кирпичики готового кода, которые можно применять в любом месте проекта.

                Это такие компоненты, как:
                — multi-select, Выбор нескольких элементов из списка, например, специальностей врачей
                — upload-images, Загружалка нескольких изображений на наш сервер. Например, документов на регистрацию
                — unfolding-items-list, Список определённых элементов, перечисляемый через запятую, в котором изначально отображаются только первые три элемента, а остальные можно увидеть, нажав на кнопку «ещё».
                — show-more-text, Текст, большая часть которого изначально скрыта, но его можно легко «размернуть» на полный вид, нажав функциональную кнопку «Подробнее».
                — dropdown, Кнопка, нажав на которую, мы можем развернуть список подпунктов

                Вот, к примеру, компонент show-more-text: http://plnkr.co/edit/wGjRIVq0vkIXN9z0mmqh?p=preview
                Вот таким же образом и создаются эти компоненты у нас)

                Ну и, помимо этого мед. проекта, есть ещё где-то три-четыре других, где я тоже уже успел применить Riot.js.
                • 0
                  Спасибо за интересный опыт! Не изучали, сколько он потребляет памяти при работе?
                  • 0
                    Пожалуйста) Эта библиотека довольно маленькая и простая. Это и есть одно из её достоинств. К примеру, jQuery 2.1.4 сейчас состоит из 9211 строк кода, Riot.js на данный момент состоит из 2377 строк. И памяти она ест совсем немного. По крайней мере, у нас еще не было такого, чтобы где-то в какой-то части приложения вдруг возникло непомерное её потребление)
            • 0
              не туда написал
              • 0
                Я кстати начинал работать на буржуев, они хотели все видеть на foundation. В итоге сейчас все делаю на foundation, хотя он по функционалу уступает boostrap 3
                • 0
                  а как на счёт удобства?
                  Мы попробовали поменять bootstrap на Semantic-ui, мне показалось не удобным и сырым.
                  В семантике большая проблема с совмещением компонентов и вложеностью.
                  Я так и не смог зделать нормального верхнего меню.
                  Может я не умею его готовить, но с bootstrap-ом проще
                  • 0
                    Можете по подробнее рассказать?
                    • 0
                      К сожалению, нет, я работал с ним только на 2-3 страницах.
                      Но по первому впечатлению могу сказать что использовать его можно только в виде отдельных компонентов.
                      Да есть крутые.
                      Но как архитектура, semantic-ui не удобен.

                      А да вспомнил крутой косяк: Высота кнопки по умолчание 36px, а инпута 38px (из-за бордера)
                      Мне после бутстрапа, где все элементы красиво встают в ряд, показалось дико.
                    • 0
                      Иногда элементы плавают, особенно если компоновать в менюшке plain-text и кнопки, но достаточно легко правится парочкой доп стилей, без ошибок валидации и криков гугла на большой css-файл.
                  • 0
                    Странно что в «Комплексные css-фреймворки» включены очередные клоны Bootstrap наподобие KickStart (и что в этом списке делает Gridsm, если на сайте написано «A simple responsive CSS grid»?), а такие проекты как например Materialize или Material Design Lite обошли стороной, хотя звездочек на гитхабе у них на порядок больше.
                    • 0
                      Gridsm и правда не туда запихал, поправил. Materialize и Material Design Lite были добавлены для сравнения, спасибо!

                      очередные клоны Bootstrap наподобие
                      — я не согласен, что клоны. Например Semantic-UI очень даже отличается от других.

                      По поводу KickStart, он развивается открыто с 2012 года, Bootsrap где-то c 2011, небольшая разница во времени. Да и мне кажется, что уже в то время (и даже раньше) множество студий имело свое подобие «Bootsrap», просто он был одним из первых качественных открытых решений.
                    • 0
                      В последнее время использую gridle.org (Сетка, на scss c различными полезными миксинами). Очень доволен )) Странно, что её не было в списке
                      • 0
                        спасибо, неплохое решение, я его добавил) У кого какие ещё варианты есть?
                      • 0
                        Вопрос к автору. Прошу прощения за нескромность. А какой у вас опыт в разработке?
                        Если вы начниающий разработчик и хотите выбрать для себя фрейморк, то не утруждайтесь и используйте Bootstrap
                        Просто если у вас нет большого опыта вы вряд ли сможете оценить каждый фреймворк
                        • 0
                          Не думаю, что начинающие разработчики будут писать свою IDE, это очень сложная система.
                          • 0
                            Ладно, ребят, не буду продолжать, извиняюсь еще раз за нескромный вопрос. Удачи вам и старанья!
                        • 0
                          не туда
                          • +1
                            Продолжения ждать не стоит? :(

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое