Статьи

Инструментарий: Front-End Framework для современного Интернета

Ноябрь 20, 2018

Titon Toolkit , или просто Toolkit, — это проект, над которым я работал в свободное время последние 4 года. Он начинался как фреймворк пользовательского интерфейса MooTools, который постепенно перешел на jQuery с планами быть безпродавцами для 3.0. Так почему я написал другой фреймворк? В начале своего существования мир «фреймворков CSS / JavaScript» был еще молод, а Bootstrap и Foundation — около года. Я был заинтригован концепцией интерфейсной среды и намеревался создать свою собственную, основным преимуществом которой было настраиваемость и расширяемость.

Итак, что же такое Toolkit? Инструментарий — это интерфейсная среда, которая предоставляет набор мощных компонентов пользовательского интерфейса на основе состояния, специфичных для ролей и классов утилит для отзывчивой, мобильной и современной сети. Он использует новейшие и лучшие технологии — HTML5 для семантики, CSS3 для анимации и стилей, Sass для предварительной обработки CSS, Gulp для управления задачами и пакетами, а также мощные новые API-интерфейсы браузера для слоя JavaScript, и это лишь некоторые из них. ,

Веб-сайт Titon Toolkit

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

Итак, является ли Toolkit просто еще одним интерфейсом пользовательского интерфейса? Да, но, как уже упоминалось, с некоторыми ключевыми отличиями: Инструментарий был создан для чрезвычайно расширяемого, легко настраиваемого и эффективного проектирования .

Давайте посмотрим на некоторые из его уникальных особенностей.

Разъединены JavaScript, CSS и HTML

Действующая парадигма в разработке переднего плана связывает JavaScript с фиксированной структурой CSS через имена классов, а также фиксированную структуру HTML. Инструментарий не согласен с этим подходом и стремится максимально разделить CSS, JavaScript и HTML, что открывает возможность настраиваемых альтернатив. Инструментарий устраняет многие проблемы связывания, требуя определенных атрибутов данных — все они используются для обхода элементов, поиска и привязки событий.

В следующем примере в качестве доказательства концепции используется компонент карусели Toolkit . 

<div class="carousel" data-carousel>
  <div class="carousel-items">
    <ul data-carousel-items>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>

  <button type="button" class="carousel-prev" data-carousel-prev>
  </button>
  <button type="button" class="carousel-next" data-carousel-next>
  </button>
</div>

Благодаря развязке на месте, теперь возможен пользовательский HTML, что не так при использовании альтернативных фреймворков. Разметка больше не привязана к компоненту JavaScript; компонент JavaScript теперь привязан к разметке через атрибуты data-* Хотите добавить новую разметку для компонента? Действуй! Хотите изменить разметку в соответствии с проектом? Не стесняйтесь! Хотите удалить функциональность компонента? Удалить прочь! Атрибуты данных обеспечивают, как нам кажется, гораздо лучший уровень настройки.

Более простой стиль CSS

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

Кроме того, Toolkit отказался от предоставления переменных Sass для настройки темы CSS (например, для размера рамки, цвета фона, размера текста, семейства шрифтов и т. Д.). Если вы хотите стилизовать элемент, вы можете сделать это по старинке, используя CSS (или Sass, или Less)! Вы также можете сделать это еще дальше, интегрировав Toolkit в расширение Compass, которое позволяет импортировать файлы Sass Toolkit в область видимости и компилировать их непосредственно в свои собственные файлы Sass.

Настраиваемые имена классов CSS

Еще одна болевая точка в существующих фреймворках — это конфликт имен классов CSS. Инструментарий решает эту проблему одним из двух способов.

Первый способ — настраиваемые переменные Sass, которые позволяют настраивать большинство имен классов CSS. Использование этого подхода потребует компиляции файлов Sass либо через расширение Compass, либо непосредственно в исходном коде. 

 // Built-in BEM classes!
$carousel-class-items: bem("carousel", "slides");

Второй подход позволяет использовать глобальное пространство имен с помощью префиксов классов. Это чудесно работает при интеграции фреймворка в существующую кодовую базу, где коллизий много. Включить пространства имен так же просто, как изменить переменную Sass и свойство JavaScript. 

 $namespace: "tk-"; // Sass
 Toolkit.namespace = 'tk-'; // JavaScript

Однако обратите внимание, что пространства имен не применяются к именам состояний, анимации или поведенческих классов.

Расширяемый JavaScript

Весь слой JavaScript в Toolkit построен на гибкой объектно-ориентированной системе классов, основанной на наследовании. Каждый класс управляет своим собственным состоянием, событиями и поведением, которые допускают сложные взаимодействия, поскольку каждый экземпляр уникален. Поскольку этот уровень классов настолько гибок, он позволяет создавать собственные классы или расширять существующие классы посредством наследования. 

 var Toolkit.Tooltip = Toolkit.Component.extend({
  constructor: function() {
    // ...
  }
});

Кроме того, каждый класс поддерживает набор параметров для настройки . Эти параметры могут быть установлены глобально, через конструктор или как атрибуты данных . Группы опций и даже адаптивные опции встроены в ядро. 

 $('.carousel').carousel({
  itemsToShow: 1,
  itemsToCycle: 1,
  autoCycle: false,
  responsive: {
    tablet: {
      breakpoint: '(min-width: 641px)',
      itemsToShow: 2
    },
    desktop: {
      breakpoint: '(min-width: 1281px)',
      itemsToShow: 3
    }
  },
  groups: {
    static: {
      infinite: false,
      loop: false
    },
    dynamic: {
      infinite: true,
      autoCycle: true
    }
  }
});

Поддержка Flexbox

Несмотря на экспериментальность, Toolkit предлагает встроенную поддержку flexbox через компонент Flex . Компонент Flex сияет в построении макетов и структур на основе сетки благодаря концепции регионов и блоков. Регион — это объект, который содержит блоки или другие регионы, а блок — это объект, который содержит контент и выровнен по главной и поперечной осям. Хотя они и аналогичны строкам и столбцам, области и блоки упакованы с дополнительной поддержкой для роста, сжатия, упорядочения, переноса, вложения, выравнивания и отзывчивости. 

 <div class="region region--grid flow-center">
  <div class="block no-shrink">...</div>
  <div class="block">...</div>
  <div class="block order-2">...</div>
  <div class="block order-1">...</div>
  <div class="block">...</div>
  <div class="block no-grow">...</div>
</div>

Особенность упакована

Помимо уже упомянутых основных моментов, Toolkit поддерживает множество функций, которые включают в себя:

Если вы хотите протестировать некоторые компоненты Toolkit, посетите эту интерактивную демонстрационную страницу .

Вниз по трубопроводу

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

  • Целевые вечнозеленые браузеры и их предыдущие 3 выпуска.
  • Удалите jQuery как зависимость и заполните все функции, которых нет.
  • Перепишите слой JavaScript, используя функции ECMAScript 6, такие как классы, функции стрелок, модули, генераторы, обещания и многое другое.
  • Интеграция Babel для ES6 -> ES5 сборник.
  • Интегрируйте рендеринг шаблонов вместо манипуляций с DOM.
  • Изучите использование веб-пакета в качестве инструмента сборки и сборки.
  • Добавьте поддержку Less путем интеграции транспортера Sass to Less.
  • Перепишите компоненты, используя однонаправленную систему потоков данных на основе потоков

Также обсуждается интеграция с внешними фреймворками, но в настоящее время это RFC.

  • Интеграция Polyfill для отсутствующих функций браузера
  • Пользовательские веб-компоненты через Polymer или другой сервис
  • Интеграция компонентов React и Toolkit

Почему бы не помочь моей работе над Toolkit, предложив несколько советов о том, в каком направлении он должен идти? Отзывы и комментарии сообщества очень ценятся! Я всегда ищу новых членов команды и участников, поэтому, если вам интересно, приходите пообщаться в #titon на freenode.net.

В заключение

Это был замечательный опыт, демонстрирующий инструментарий и его возможности для всех вас. Надеюсь, вам понравилось, и вы нашли такое же полезное использование Toolkit, как и я. Если вам нужна дополнительная информация о Toolkit, я предлагаю посетить официальный веб-сайт , нашу учетную запись в Twitter или репозиторий GitHub . Ура!

37
Share: