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-интерфейс.

Список версий

  • 1.0.0 — апрель 2013
  • 1.0.2 — июль 2013
  • 2.0.0 — февраль 2014
  • 2.0.2 — 2 апреля 2014

Обратной совместимости между версиями нет.

См. также

Примечания

  1. . Дата обращения: 26 апреля 2014. 11 октября 2014 года.

Ссылки

  • (англ.)
  • (недоступная ссылка) (рус.)

Обзоры

  • . infoq.com. Дата обращения: 9 мая 2014.
  • . blog.teamtreehouse.com. Дата обращения: 9 мая 2014.
  • . codersgrid.com. Дата обращения: 9 мая 2014.
  • . coenraets.org. Дата обращения: 9 мая 2014.
Источник —

Same as Ratchet (фреймворк)