Ratchet — фреймворк для создания и быстрого прототипирования мобильных приложений и мобильных версий сайтов. Основан на технологиях HTML5 и CSS3. Первая версия создана в апреле 2013 года. Текущая версия 2.0.2
Основные компоненты В пакет фреймворка включены стили, JavaScript и шрифты 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, поэтому внешний вид приложения, которое писалось с Android-стилями, всё равно похож на iOS-интерфейс.
Список версий 1.0.0 — апрель 2013 1.0.2 — июль 2013 2.0.0 — февраль 2014 2.0.2 — 2 апреля 2014 Обратной совместимости между версиями нет.
См. также Twitter Bootstrap
Примечания
Ссылки Документация на английском языке (англ.)
Обзоры
Категория:HTML Категория:Каскадные таблицы стилей Категория:Фреймворки Категория:Программное обеспечение мобильных телефонов