От React до Riot 2.0

[@StreetStrider]

Muut не должен использовать популярные фреймворки

Можно ли реализовать подобное React, но без его недостатков? Мы знали, что да, и вот появился Riot 2.0.

Лютый NIH. А потом их Riot начнёт расти в размере, и вот, у нас появился React.

Впрочем, посмотреть чего они достигли всё же надо.

[@Azy]

И вообще рассказывать о технологии без примеров использования это как предлагать жениться не показывая невесту

[@Milovan]

Версии 2.0 всего 3 недели, поэтому вряд ли используется широко

Can I use Riot in production?
We think so. We do that extensively under muut.com website: on registrations, forum settings and on account page. But not all scenarios are thoroughly tested, since 2.0 is a big rewrite and not widely used yet.

Также вот здесь повторение обучающего курса для React (блок комментариев), но на RiotJS

[@FractalizeR]

Честно говоря, я из этой статьи не получил вообще никакой информации чем этот очередной велосипед лучше / хуже, чем React кроме того, что он меньше по размеру.

Разумеется, это претензия к автору статьи, а не к переводчику. За упоминание спасибо. Надо будет глянуть, что они там изобрели.

[@batment]

Вот довольно наглядная статья, сравнение Riot и React в коде:
https://muut.com/riotjs/compare.html

[@kompot]

Загзипованный React 0.13 весит 34 КБ.
В среднего размера проекте далеко не React будет составлять основной объем кода.

[@KeepYourMind]

А где TodoMVC?

[@nwalker]

из туториала

<comment-list>
<comment each={ opts.comments } />
</comment-list>

Вот в первом же примере кода видна фундаментальная ошибка авторов, которые не поняли главной фишки jsx. А она именно в том, что это простой синтаксический сахар, а весь control flow описывается строго JS-ом.

Фактически, они как раз сделали то, в чем несведущие люди пытаются обвинять React — они сделали client-side PHP.

[@nwalker]

Любителям минимализма и pure JS рекомендую взглянуть на mithril.js. Он гораздо изящнее и лучше спроектирован.

[@Aetet]

А как же крутой github.com/Raynos/mercury

[@nwalker]

А его я еще не встречал. Теперь погляжу.
Навскидку он как-то менее минималистичен.

[@anotherpit]

Про фундаментальную ошибку непонятно. Вы можете рассказать, как тот же самый список комментов должен реализовываться на React и в чём принципиальная разница?

[@nwalker]

Упрощая до предела — вот так:

var CommentList = React.createClass({
  render: function() {
    return this.props.comments.map(function (c) {
      return (<Comment data={c}></Comment>)
    });
  },
});

Фундаментальная ошибка в том, что они сделали yet another templating dsl, в котором есть свои инструкции control flow — в данном случае, each. В react нет никакого способа описать control flow, кроме обычного JS, а jsx — очень тонкий синтаксический сахар. То есть, мой пример абсолютно очевидным образом превратится в следующее:

var CommentList = React.createClass({displayName: "CommentList",
  render: function() {
    return this.props.comments.map(function (c) {
      return (React.createElement(Comment, {data: c}))
    });
  },
});

[@nwalker]

Можно обобщить — riot dsl слишком много на себя берет, это очень толстая абстракция. Он не встраивается в JS — он оборачивает его в себя, принося новую сомнительную и ненужную семантику. Это серьезный проигрыш относительно react.

[@PaulMaly]

Куда катится мир… неужели с появлением ReactJS все забыли, почему мы с своё время убирали PHP код из HTML и разносили все по отдельным файлам. Остро чувствуется возврат к прошлым ошибкам.

[@turbo_exe]

мы убрали php из html потому что бизнес логика должна быть отделена от представления. когда речь идёт о логике представления (например показываем username в хедере, когда пользователь залогинен), мы по прежнему используем php в html — например в yii/yii2. да и любой template engine это всего лишь обёртка над php, ничего не мешает по прежнему использовать php в html для логики представления.

ситуация с react аналогична: вам нужно писать реквесты к api, модели данных, валидацию форм и прочее по прежнему отдельно. react всего лишь решает проблему рендеринга представления, это только view слой. бизнес логика приложения по прежнему хранится отдельно от компонентов react.

[@ajaxtelamonid]

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

[@PaulMaly]

Завидую я вам. У вас видимо такие аккуратные верстальщики.

[@cavin]

>> Минифицированная версия React имеет размер 124K, и это проблема. Мы не можем заставлять наших пользователей загружать такие огромные библиотеки.

Сайт демонстрации muut.com/riotjs/ подгружает:
105КБ виджет intercom.io (кажется уникальный урл скрипта, который может быть не закешен)
91КБ jQuery тянет за собой виджет intercom
55КБ скрипт optimizely.com (который включает в себя еще одну версию jQuery, совсем уж старую)
46КБ скрипт muut.com
38.5КБ… сюрприз, скрипт комментариев тянет за собой свою версию jQuery!
35КБ аналитика segment.com, слава богу без jQuery
И еще мелких скриптов килобайт на 50+ и ~100КБ шрифтов

И никто не жалуется. Как же создатели Riot позволили себе создать документацию на Muut)

[@JC_Piligrim]

> Минифицированная версия React имеет размер 124K, и это проблема. Мы не можем заставлять наших пользователей загружать такие огромные библиотеки.

Пффффффф…

Вот они — победители чемпионата по высасыванию проблемы из пальца. Кто-нибудь, расскажите им про CDN и кеш в браузере.

[@WhiteAngel]

CDN очень ненадежная штука в production.

[@saggid]

Хорошая библиотека) Поигрался часок с нею. Она реально простая в использовании и даёт всё что надо для написания динамических JS-приложений. Скачал официальный пример todo, добавил в него функции удаления и редактирования. Всё очень даже удобно, весь код приложения находится в одном месте. Как раз подобную маленькую библиотеку я и искал в последнее время, если честно) Спасибо её авторам, надеюсь, что начну использовать её в разработке.

Реакт мне лично кажется реально слишком сложным и перегруженным, а в API данной библиотеки я разобрался за час игры с их примером)

[@YNile]

Реакт перегружен? :) Да там же нет практически никакого API. Парочка componentWillMount и все. Остальное обычный JS

[@saggid]

Видимо, вы просто не пользовались Riot.js и поэтому думаете, что Реакт не перегружен. Всё-таки, риот намного более лаконичный и простой.

[@gentee]

Весьма интересная библиотека. Почему-то все бросились обсуждать размер, там же не это главное.
По мне, так если бы Riot весил более 100 КБ, он все равно заслуживал бы внимания.
У них, кстати, односторонее связывание данных, а не two-way binding, и много других отличий.
Может разработчикам следовало в описании сделать упор на что-нибудь другое, а не на размер.

[@asm0dey]

Когда я читаю про то, что 124кб это много мне становится немного грустно. Потому что у нас в приложении на ангуляре 1 метр вендорного кода до гзипа. И ещё сколько-то нашего собственного.

[@cavin]

Но первые две картинки, появляющиеся у пользователя на экране могут быть ужн больше чем мегабайт скриптов, которые закешируются. Я периодически смотрю, сколько грузится HTML кода (без учета gzip) на одну страницу различных ресурсов и понимаю, что проблема размера кешируемого скрипта или css — и не проблема вовсе.

Например Flickr на данный момент это 167КБ — включая стили в теге style. Заметим, Flickr, не ванпейджер, а значит этот код грузиться почти почти каждый клик. Но это мало кого пугает — на лендинге Flickr предзагружается 3.5МБ видео, 2МБ картинок. Я уже не говорю о любой другой странице, где картинок может быть еще больше.

Flickr использует ascii-art в исходниках

<!--
                     _
           . -  ` : `   '.' ``  .            - '` ` .
         ' ,gi$@$q  pggq   pggq .            ' pggq
        + j@@@P*\7  @@@@   @@@@         _    : @@@@ !  ._  , .  _  - .
     . .  @@@K      @@@@        ;  -` `_,_ ` . @@@@ ;/           ` _,,_ `
     ; pgg@@@@gggq  @@@@   @@@@ .' ,iS@@@@@Si  @@@@  .6@@@P' !!!! j!!!!7 ;
       @@@@@@@@@@@  @@@@   @@@@ ` j@@@P*"*+Y7  @@@@ .6@@@P   !!!!47*"*+;
     `_   @@@@      @@@@   @@@@  .@@@7  .   `  @@@@.6@@@P  ` !!!!;  .    '
       .  @@@@   '  @@@@   @@@@  :@@@!  !:     @@@@7@@@K  `; !!!!  '  ` '
          @@@@   .  @@@@   @@@@  `%@@@.     .  @@@@`7@@@b  . !!!!  :
       !  @@@@      @@@@   @@@@   \@@@$+,,+4b  @@@@ `7@@@b   !!!!
          @@@@   :  @@@@   @@@@    `7%S@@hX!P' @@@@  `7@@@b  !!!!  .
       :  """"      """"   """"  :.   `^"^`    """"   `""""" ''''
        ` -  .   .       _._    `                 _._        _  . -
                , ` ,glllllllllg,    `-: '    .~ . . . ~.  `
                 ,jlllllllllllllllp,  .!'  .+. . . . . . .+. `.
              ` jllllllllllllllllllll  `  +. . . . . . . . .+  .
            .  jllllllllllllllllllllll   . . . . . . . . . . .
              .l@@@@@@@lllllllllllllll. j. . . . . . . :::::::l `
            ; ;@@@@@@@@@@@@@@@@@@@lllll :. . :::::::::::::::::: ;
              :l@@@@@@@@@@@@@@@@@@@@@l; ::::::::::::::::::::::;
            `  Y@@@@@@@@@@@@@@@@@@@@@P   :::::::::::::::::::::  '
             -  Y@@@@@@@@@@@@@@@@@@@P  .  :::::::::::::::::::  .
                 `*@@@@@@@@@@@@@@@*` `  `  `:::::::::::::::`
                `.  `*%@@@@@@@%*`  .      `  `+:::::::::+`  '
                    .    ```   _ '          - .   ```     -
                       `  '                     `  '  `

	You're reading. We're hiring.
	https://www.flickr.com/jobs/
-->

[@jMas]

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