От React до Riot 2.0

Автор оригинала: Tero Piirainen
  • Перевод


Эта популярная запись в блоге была отправной точкой в наших исследованиях минимализма. Мы начали с того, что Muut не должен использовать популярные фреймворки: Backbone, Angular или Ember.

Наша мотивация:

1) малый размер клиентского приложения. Неприемлемо, когда фреймворк гораздо больше самого приложения;
2) небольшой фреймворк, работа которого полностью понятна и прозрачна. Все популярные фреймворки поставляются со очень большим количеством методов API, свойств и других плюшек. Полное понимание было особенно важно, так как у нас было встраиваемое на сторонние сайты приложение.

Мы задались вопросом, а нужен ли фреймворк вообще? Пока API отделен от UI, проблем нет никаких. С помощью системы событий можно построить автономные компоненты, а «нативный» pushState позволяет подружить приложение с кнопкой «Back» браузера.

С этимы мыслями мы начали работу над Riot 1.0.

Riot 1.0


Riot был реализацией концепции «Без-фреймворков», описанной в блоге. Что должен представлять из себя минималистичный набор для реализации MVP? Riot стартовал как вспомогательный продукт, но по мере накопления опыта он начинал взрослеть. Riot 1.0 уже включал следующие возможности:
  1. реализация шаблона MVP;
  2. реализация концепции observable для отделения API от представления и создания автономных компонентов;
  3. роутер, который работает с URL и кнопкой Back.



Riot 1.0 был успешным продуктом. Конечно, не для всех, ведь он так сильно отличался от других. Его любили и ненавидели, не в последнюю очередь за мотивы его создания.

Facebook React


React был другим. Идея объединить разметку и логику отдельного компонента в автономный блок хороша. UI компонентов — это всегда сочетание HTML и JavaScript, так что их связь в компоненте очевидна.

Нет необходимости запоминать какие элементы связаны с разными событиями. Все это находится в одном месте, внутри компонента.
Templates separate technologies, not concerns.

Шаблоны разделяют технологии, не ответственность. Спасибо за эту идею, Facebook!

Компоненты уменьшают код приложения, меньше манипуляций с DOM, меньше jQuery-селекторов. Код UI становится легче для понимания. Вы можете просто менять код JavaScript, а представление позаботится о себе само.

Недостатки React


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

Большое количество кода — признак излишней сложности. Массовое обновление, отрисовка поддеревьев, грязные проверки… должен быть более простой способ делать это.

Слишком многословный синтаксис: много специфичных конструкций, двоеточий, фигурных скобок, большой список методов. Очень много лишнего «из коробки» для наших целей.

JSX почти то, что нужно, но мы искали более простой способ объединения HTML и JS.

В React реализована система специфичных событий и поддерживаемых HTML-тегов. Мы не хотели таких ограничений и хотели бы работать с DOM как обычно.

Riot 2.0


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



Мы заимствовали идеи из Riot 1.0 (минимализм), React (виртуальный DOM, компоненты) и HTML5 (пользовательские теги).
Мы хотели небольшой API. Мы хотели HTML и JavaScript безо всяких специфичных штук типа атрибутов riot- и прочих.
Мы превзошли сами себя. Riot 2.0 оказался гораздо меньше и проще, чем мы ожидали. Не в 10 раз меньше, а в 24 раза меньше, чем React и только 9 методов API.

Что дальше?


Следующие версии Riot будут включать:
  1. компилятор в браузере, чтобы избежать сборки на сервере. Наш компилятор маленьких и быстрый, поэтому можно будет смело использовать в продакшене (уже реализовано — прим. перев.);
  2. генерация HTML на сервере. Это тренд сейчас и позволяет создавать изоморфные приложения. Это должно быть просто реализовать, так как генерация HTML уже в ядре;
  3. серверные тесты. Больший набор тестов с использованием jsdom;
  4. валидация с помощью HTML-атрибутов.

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

Правда, изменений от 1.0 к 2.0 очень много. Но мы считаем, что 2.0 намного лучше. Пользовательские теги прекрасно работают и мы используем их на данном сайте.

Попробуйте, дайте Riot шанс!

RiotJS на сайте Muut
RiotJS на GitHub

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Вы попробуете RiotJS?

  • 0,0%уже использую 1.00
  • 5,0%уже использую 2.025
  • 75,6%стало интересно, попробую374
  • 19,4%не буду пробовать96

Комментарии 28

    +14
    Muut не должен использовать популярные фреймворки
    Можно ли реализовать подобное React, но без его недостатков? Мы знали, что да, и вот появился Riot 2.0.
    Лютый NIH. А потом их Riot начнёт расти в размере, и вот, у нас появился React.

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

      И вообще рассказывать о технологии без примеров использования это как предлагать жениться не показывая невесту
        0
        Версии 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
        +13
        Честно говоря, я из этой статьи не получил вообще никакой информации чем этот очередной велосипед лучше / хуже, чем React кроме того, что он меньше по размеру.

        Разумеется, это претензия к автору статьи, а не к переводчику. За упоминание спасибо. Надо будет глянуть, что они там изобрели.
        +2
        Загзипованный React 0.13 весит 34 КБ.
        В среднего размера проекте далеко не React будет составлять основной объем кода.
          +3
          А где TodoMVC?
            +3
            из туториала
            <comment-list>
            <comment each={ opts.comments } />
            </comment-list>


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

            Фактически, они как раз сделали то, в чем несведущие люди пытаются обвинять React — они сделали client-side PHP.
              +1
              Любителям минимализма и pure JS рекомендую взглянуть на mithril.js. Он гораздо изящнее и лучше спроектирован.
                0
                А как же крутой github.com/Raynos/mercury
                  0
                  А его я еще не встречал. Теперь погляжу.
                  Навскидку он как-то менее минималистичен.
                0
                Про фундаментальную ошибку непонятно. Вы можете рассказать, как тот же самый список комментов должен реализовываться на React и в чём принципиальная разница?
                  +2
                  Упрощая до предела — вот так:
                  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}))
                      });
                    },
                  });
                  
                    +1
                    Можно обобщить — riot dsl слишком много на себя берет, это очень толстая абстракция. Он не встраивается в JS — он оборачивает его в себя, принося новую сомнительную и ненужную семантику. Это серьезный проигрыш относительно react.
                  0
                  Куда катится мир… неужели с появлением ReactJS все забыли, почему мы с своё время убирали PHP код из HTML и разносили все по отдельным файлам. Остро чувствуется возврат к прошлым ошибкам.
                    +1
                    мы убрали php из html потому что бизнес логика должна быть отделена от представления. когда речь идёт о логике представления (например показываем username в хедере, когда пользователь залогинен), мы по прежнему используем php в html — например в yii/yii2. да и любой template engine это всего лишь обёртка над php, ничего не мешает по прежнему использовать php в html для логики представления.

                    ситуация с react аналогична: вам нужно писать реквесты к api, модели данных, валидацию форм и прочее по прежнему отдельно. react всего лишь решает проблему рендеринга представления, это только view слой. бизнес логика приложения по прежнему хранится отдельно от компонентов react.
                      0
                      Создатели Реакта выкинули эту заскорузлую схему вместе с MVC и правильно сделали. Компоненты — это динамические вьюхи и само собой там должен быть код. Относить его в другой файл — это молиться богу абстракции в надежде на то, что код волшебным образом станет более поддерживаемым. В случае фронтэнда — не станет.
                        +1
                        Завидую я вам. У вас видимо такие аккуратные верстальщики.
                      +2
                      >> Минифицированная версия 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)
                        +4
                        > Минифицированная версия React имеет размер 124K, и это проблема. Мы не можем заставлять наших пользователей загружать такие огромные библиотеки.

                        Пффффффф…

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

                          Реакт мне лично кажется реально слишком сложным и перегруженным, а в API данной библиотеки я разобрался за час игры с их примером)
                            0
                            Реакт перегружен? :) Да там же нет практически никакого API. Парочка componentWillMount и все. Остальное обычный JS
                              0
                              Видимо, вы просто не пользовались Riot.js и поэтому думаете, что Реакт не перегружен. Всё-таки, риот намного более лаконичный и простой.
                            +1
                            Весьма интересная библиотека. Почему-то все бросились обсуждать размер, там же не это главное.
                            По мне, так если бы Riot весил более 100 КБ, он все равно заслуживал бы внимания.
                            У них, кстати, односторонее связывание данных, а не two-way binding, и много других отличий.
                            Может разработчикам следовало в описании сделать упор на что-нибудь другое, а не на размер.
                              0
                              Когда я читаю про то, что 124кб это много мне становится немного грустно. Потому что у нас в приложении на ангуляре 1 метр вендорного кода до гзипа. И ещё сколько-то нашего собственного.
                                0
                                Но первые две картинки, появляющиеся у пользователя на экране могут быть ужн больше чем мегабайт скриптов, которые закешируются. Я периодически смотрю, сколько грузится 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/
                                -->
                                

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

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое