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
- Снижение до минимума обращений к DOM
- Однопоточное связывание: обновления передаются от родителя к дочерним элементам
- Используется прекомпиляция и кэширование для высокой производительность
- Возможность использовать хуки
- Возможность рендерить html на стороне сервера для изоморфных приложений
Приверженность стандартам
- Мы не используем собственные стандарты - многое вам уже знакомо
- В результате рендеринга получается простой HTML, пригодный для сторонних инструментов
- Никаких дополнительных HTML элементов или
data-атрибутов - Отлично работает с jQuery
Легко применять инструменты
- Используйте ES6, Typescript, CoffeeScript, Jade, LiveScript или любой другой препроцессор
- Интегрируйте NPM, CommonJS, AMD, Bower или Component
- Разрабатывайте с Gulp, Grunt или Browserify
2. Простой и минималистичный
Минимализм - отличительная черта Riot:
1. Приятный синтаксис
Одна из целей проектирования была ввести мощный синтаксис тегов, который был бы как можно более лаконичен и прост:
- Возможность использовать выражения:
class={ enabled: is_enabled, hidden: hasErrors() } - Больше нет мусора, вроде
render,state,constructorилиshouldComponentUpdate - Вставка в html:
Add #{ items.length + 1 }илиclass="item { selected: flag }" - Необязательный тег
<script>для отделения логики и подсветки в редакторах кода - Компактный ES6 синтаксис методов
2. Лёгок в изучении
Riot в сравнении с другими библиотеками в 10-100 раз проще изучить.
- Меньший объём для изучения
- Отсутствие редких проприетарных стандартов
3. Крошечный размер
react.min.js – 33.27KB
polymer.min.js – 49.38KB
riot.min.js – 10.85KB
- Меньше багов
- Более быстрая загрузка и обработка браузером
- Встраиваемость. Библиотека должна быть меньше, чем приложение
- Меньше поддерживать. Нам не нужна большая команда, чтобы содержать Riot
4. Маленький, но самодостаточный
Riot имеет все необходимые модули для современных клиентских приложений:
- “Реактивные” интерфейсы
- Модуль для обработки событий
- Маршрутизатор, который заботится об URL и кнопке “назад”
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 за это важное открытие.