Все сначала подумают что это какой нибудь React или Vue. Но нет, это все таки кое что другое. Очень многие его знают и используют, но для кого то это будет что-то новое.
Я сейчас ни хочу никого обидеть, сразу оговорюсь, те кто кодят на Ember например, считают его лучшим, кто на Angular его и так далее. Естественно я буду высказывать свое мнение, оно не экспертное возможно, как Вы увидите дальше.
В общем хватит лирики, пожалуй начну. Сейчас очень популярны два фреймворка, это Vue и React. Да, да, есть еще Angular, но он был более менее хорошим наверное где то на 2-ой своей версии, сейчас уже все ждут 6-ую версию, и что со всем этим зоопарком версий делать, я не знаю, увидев все это, любой мало мальский нормальный фронтэнд программист убежит оттуда и не оглянется, потому что все таки предполагаешь какую то длительную поддержку, какую то совместимость с новыми версиями и так далее.
Ок, разобрались с Angular'ом надеюсь. Его я считаю плохим именно по причине большого количества версий и конечно TypeScript, да, Вы можете меня не понять, но мне нравится JavaScript.
Почему не Vue ? Я работал и очень длительное время с его почти копией RactiveJS, замечательный фреймворк, у меня на нем целая CRM по управлению абонентами работает, отличный фреймворк, но Вы же понимаете что я нашел лучше ;)
React меня пугает, во первых магией, что я под этим подразумеваю? Ну например тот же JSX, да, изучишь его и никакой магии не будет, но все равно это дополнительный слой, подключаешь дополнительную библиотеку Babel для этого, а если что нибудь будет работать не так как ты хочешь чтобы оно работало? Что со всем этим делать? В общем смотрю я на него и боюсь. Чисто по как раз этой причине.
Поэтому Riot.JS - это почти копия React только маленький, быстрый, без дополнительных библиотек. Принцип точно такой же.
Вот например минимум того что нужно для работы.
1) подключаем сам фреймворк.
2) DIV#app - для размещения наших новых тегов
3) Подключаем теги и программу которая будет всем этим управлять.
Для примера вот у нас будет такой простой тег Hello world
Всем же понятно что он выведет на экран?
Сама программа, которая создаст нам тег и внедрит его в div#app
Все! На нашей странице будет красоваться Hello world
В нашем новом теге, или как правильно их называть компоненте можно добавлять шаблоны, JavaScript код который работает с компонентом непосредственно.
ну вот например, давайте чуть усложним наш пример и посмотрим следующий код:
2. строчка. Мы вставляем шаблон в наш HTML код {opts.name} opts - эта такая переменная, которую мы можем заполнить снаружи, когда создаем наш компонент через riot.mount("#app","hello", { ВОТ ЭТО ПОПАДАЕТ В opts });
3,4 добавляем поле INPUT для ввода имени и кнопку, по нажатию на которую в наше opts.name будет подставлено значение из INPUT text
6-19 тут хорошо видно, что мы можем в компоненте использовать JS код, если подробно, то:
var self = this; я всегда так делаю, потому что контекст может поменяться, например это будет jQuery, поэтому всегда так делаю чего и Вам советую.
this.on("EVENT", function() {}); это механизм событий в Riot.JS mount - тут в частности событие MOUNT происходит когда компонент внедряется в HTML страницу, и соответственно пока никого нет с кем можно поздороваться, он здоровается со всем миром в строке 10.
11 строка - это команда обновить компонент, Riot смотрит что должно быть изменено, только это и изменяет.
14-18 это событие для кнопки this.refs - это список изменяемых элементов формы откуда можно брать данные, подставляем в opts.name = this.refs.name.value; и обновляем компонент.
Все! На сайте у Riot.JS можно чего еще интересно, очень мощный и быстрый фреймворк, сейчас как раз пишу новую CRM с использованием уже этого фреймворка.
