React-подобная UI микробиблиотека

Пользовательские теги • Чистый синтаксис • Виртуальный DOM • Компактность

Зачем нам новая UI библиотека?

Фронтенд часто бывает загружен фреймворками и библиотеками, и мы считаем, что это - проблема, которую ещё только предстоит решить. Мы верим, что Riot предлагает верный баланс для решения этой сложной задачи. Не смотря на то, что React пытается это делать, он обладает рядом недостатков, которые восполняет в себе Riot.

Итак, вот причины, из-за которых стоит использовать Riot:

1. Пользовательские теги

Riot позволяет создавать пользовательские теги в любом браузере.

<todo>

  <!-- шаблон -->
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input>
    <button>Add #{ items.length + 1 }</button>
  </form>

  <!-- стили -->
  <style scoped>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- логика -->
  <script>
    this.items = []

    add(e) {
      var input = e.target[0]
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>

В пользовательском теге содержатся HTML, его стили и JavaScript, из которых складывается компонент, который можно повторно использовать в любом месте вашего приложения. Это как React + Polymer, но с приятным синтаксисом и простой в изучении.

Легко читаемый

Пользовательские теги позволяют создавать сложные интерфейсы, используя простой html. Ваше приложение может выглядеть например, так:

<body>

  <h1>Acme community</h1>

  <forum-header/>

  <forum-content>
    <forum-threads/>
    <forum-sidebar/>
  </forum-content>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>

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

Пользовательские теги компилируются в чистый JavaScript, который будет использоваться в браузере.

Виртуальный DOM

Приверженность стандартам

Легко применять инструменты

2. Простой и минималистичный

Минимализм - отличительная черта Riot:

1. Приятный синтаксис

Одна из целей проектирования была ввести мощный синтаксис тегов, который был бы как можно более лаконичен и прост:

2. Лёгок в изучении

Riot в сравнении с другими библиотеками в 10-100 раз проще изучить.

3. Крошечный размер

react.min.js – 45.05KB

polymer.min.js – 45.69KB

riot.min.js – 9.92KB

4. Маленький, но самодостаточный

Riot имеет все необходимые модули для современных клиентских приложений:

Riot - открытый проект, он не заточен под чьи-либо конкретные потребности. С помощью инструментов, заложенных в Riot, вы можете сочетать и смешивать шаблоны проектирования. Системы, вроде Facebook Flux можно создать всего десятком строк.

Я посмотрел на примеры riot.js, и он показался мне настолько чистым, это страшно @paulbjensen

Просто возился с #RiotJS в течение часа. Установил его с Gulp, Browsesify, и Babel в кратчайшие сроки. Мне он очень нравится до сих пор! @AndrewDelPrete

Сегодня я использовал #riotjs 2,0 впервые, и я не мог не признать, что это будут долгосрочные отношения #js рекомендуется. @gianlucaguarini

Мне понравилась идея о #reactjs с #flux но мне нравится #riotjs с #riotcontrol еще больше! @tscok

Глядя на RiotJS https://muut.com/riotjs/ — был потрясён его простотой. @defeated

Поиграл с riot.js и он понравился мне гораздо больше, чем React. Минималистичный, быстрый и с понятным API. @juriansluiman

Заключение

Riot - это Web-компоненты для всех. Это как React + Polymer, но не раздутый. Он интуитивно понятный и почти ничего не весит. И он работает уже сегодня. Это не ещё один велосипед, а, скорее, сочетание лучших идей, которое делает Riot простым и удобным.

Мы должны сосредоточиться на повторном использовании компонентов, а не на шаблонах. Согласно разработчикам React,

“Templates separate technologies, not concerns.”

Шаблоны разделяют технологии, не ответственность. Помещая шаблон и логику вместе в одном компоненте, в целом, мы делаем систему более чистой. Мы уважаем React за это важное открытие.

Изначальная запись в блоге

From React to Riot 2.0