Interested Article - Ratchet (фреймворк)

Ratchet — фреймворк для создания и быстрого прототипирования мобильных приложений и мобильных версий сайтов. Основан на технологиях HTML5 и CSS3 . Первая версия создана в апреле 2013 года. Текущая версия 2.0.2

Основные компоненты

В пакет фреймворка включены стили, джаваскрипт и шрифты ratchicons, которые используются для отображения иконок. Фреймворк доступен как в скомпилированном виде, так и в виде исходного кода. Стили поставляются в трех пакетах — базовом, заточенном по iOS и заточенном под Android. JS и иконки от платформы к платформе не меняются.

Структура прекомпилированного пакета

CSS

  ├── ratchet.css
  ├── ratchet.min.css
  ├── ratchet-theme-android.css
  ├── ratchet-theme-android.min.css
  ├── ratchet-theme-ios.css
  └── ratchet-theme-ios.min.css

JS

  ├── ratchet.js
  └── ratchet.min.js

Fonts

   ├── ratchicons.eot
   ├── ratchicons.svg
   ├── ratchicons.ttf
   └── ratchicons.woff

Базовые элементы интерфейса, включенные в Ratchet

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

плашка заголовка
плашка закладок (табов)
списки элементов плоские
списки элементов с шевронами
кнопки
блочные кнопки (т.н. "большие кнопки")
сегментированный контрол
поля формы (текстовое поле, поле поиска, поле электронной почты и textarea)
всплывающие окна
модальные окна
слайдер

Push.js

Страницы связываются между собой с помощью компонента push.js. Этот компонент отличает Ratchet от вебовских фреймворков и дает возможность сделать внешний вид похожим на нативное приложение.

Преимущества и недостатки

Поскольку Ratchet является html5-фреймворком, идеологически он крайне близок html5-фреймворкам для веба. Основное отличие Ratchet от остальных html5-фреймворков для мобильного прототипирования в том, что он позволяет создать интерфейсы под разные платформы (поддерживаются только iOS и Android, остальные не поддерживаются), используя один и тот же HTML-код. Таким образом, все различие во внешнем виде, включая перемещения элементов, происходят за счет CSS и JS.

Преимущества

Основным преимуществом Ratchet считается легкость в освоении этой технологии. За счет идеологической близости к вебу и использования веб-технологий в основе, фреймворк легко осваивается веб-разработчиками. Код Ratchet легко изменять и модифицировать, в том числе используя метаязык Sass , что упрощает работу с фреймворком для фронтенд-разработчиков.

Создателями фреймворка также особенно подчеркивается легкость, с которой можно одновременно создать прототип приложения для двух платформ (технически это выполняется заменой строки кода со стилями без изменения остального HTML-кода).

Критика

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