Ratchet 2.0 — самый красивый HTML5-фреймворк теперь дружит и с iOS, и с Android



    Ratchet — так называется HTML5-фреймворк для быстрого прототипирования мобильных приложений, который 1,5 года назад создали те же парни, которые когда-то выпустили Bootstrap.

    Инструмент позволяет быстро создать красивый интерфейс мобильного приложения — и дает вам красивые стили и замечательные иконки, согласованные с гайдлайном в зависимости от платформы. Можно сделать прототип, а можно завернуть в PhoneGap и без особых усилий получить сравнимый с нативным интерфейс приложения в продакшене.
    Фреймворк очень прост в использовании и прекрасно документирован.

    Я являюсь поклонником Ratchet с момента выхода первой версии. Тогда он был доступен только под iOS.
    Не так давно вышла вторая версия, которая наряду с iOS поддерживает Android. Ура-ура!
    (правда, обратной совместимости с первой версией нет)

    Кому интересно про новые возможности Ratchet 2.0 — прошу под кат!

    Лицензии


    Ratchet выпускается под MIT-лицензией.
    Документация к нему распространяется под лицензией CC BY 3.0

    Начало


    Скачиваем фреймворк и видим такую структуру — стили, js и иконки
    ratchet/
    ├── 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
    

    *.min.css и *.min.js ровно такие же, как одноименные файлы без min, только сжатые.

    Как мы видим, доступны стили под iOS, под Android и базовый стиль.
    Менять внешний вид приложения вы теперь можете просто подключая нужный файлик стилей и вообще не трогая html. По мне, так это самое вкусное в новом фреймворке.

    Чтобы начать работу, читаем страничку Getting Started, там же есть шаблон html, который удобно использовать для начала работы.

    Компоненты




    Фреймворк содержит все основные компоненты, которые могут понадобиться разработчикам — хедер, кнопки, списки, элементы форм, табики и т.д.
    Просматривать их — одно удовольствие.
    Попробуйте сами, просто скроллируя вниз.

    Внешний их вид показан во всех трех вариантах — под iOS, под Android и базовом (переключатель между ними появляется, если, опять же, начать скроллить вниз).
    По мне, базовый стиль самый красивый.

    Иконки доступны в качестве отдельного шрифта. Ну разве не симпатяжки?


    Ссылки


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

    Основная документация

    На английском http://goratchet.com/
    На русском http://rusratchet.org/

    А также

    Ratchet на Гитхабе https://github.com/twbs/ratchet
    Первая версия, для тех, кто хочет создать что-то в стилях старых версий iOS http://goratchet.com/1.0.2/
    (NB! Обратной совместимости нет)

    P.S.


    Фреймворк стал одним из моих любимцев. Отлично годится и для быстрого прототипирования, и для продакшена — как для мобильной версии сайта, так и в качестве мобильного приложения (в последнем случае его надо завернуть в PhoneGap).

    Всем удачи и приятной работы над проектами!
    Share post

    Similar posts

    Comments 19

      0
      Круто. Надо будет поковыряться.
        +4
        Радует, что называется, «от создателей»
          0
          ага, рука мастера очень чувствуется
          +19
          Они спроецировали iOS дизайн на Android — на мой взгляд это не очень. Все же у Android-а свои шаблоны построение интерфейса.
          +1
          прототип на phoneGap построить самое то, а может и не только прототип
            0
            Правильно ли я понимаю, что весь этот прототип можно завернуть каким нибудь phoneGap-ом, не забыв про логику и получить приложение с почти нативным видом?
              +1
              да, абсолютно.
              Мы так и делаем, собственно) Спасибо, добавлю про это в основной пост.
                +2
                Замечательно, надо на досуг попробовать, а то у меня всегда всё упирается в убогий интерфейс.
                  0
                  да, в этом случае ratchet (или другой подобный инструмент, но остальные не так круто выглядят) точно облегчит жизнь
              +6
              Еще есть Framework7.
                +3
                И Ionic. Но там еще интеграция с AngularJS. Есть мелкие недочеты но оч. симпатичный и удобный.
                  +1
                  Я вот им больше всего и пользуюсь в последнее время. Поддержка AngularJS «из коробки» очень радует.
                  0
                  Framework 7 — восхитителен. Владимир, его создатель — очень классный разработчик. Недостаток документации компенсируется получением ответов на интересующие вопросы в течение 15 минут с момента публикации.
                  0
                  Никогда не работал с подобными технологиями, но очень интересно, поэтому вопрос: как здесь реализуется собственно модель приложения? Ну т.е. все эти иконки, кнопки, формы — классно, на каком языке реализуются все внутренности (вычисления, БД, сеть, работа с файлами, многопоточность и пр.)?
                    +1
                    Подозреваю, что тут ключевое слово — «прототипирование».
                    В случае PhoneGap на JavaScript.
                      +1
                      по смыслу оболочка приложения, реализованная на HTML5, мало чем отличается от оболочки веб-приложения, реализованной на том же HTML5, поэтому внутренности для таких приложений пишутся на том же, на чем могли бы быть написаны внутренности веб-приложения
                      0
                      UPD: документация на русском http://rusratchet.org/
                        0
                        This Domain Name is Suspended

                      Only users with full accounts can post comments. Log in, please.