LINUX.ORG.RU

Coffee библиотека redtea - прошу либить и жаловать

 ,


0

2

## Почему наши web-интерфейсы такие медленные и сложные?

Если вы помните как писались древние пхп сайты (еще до того как туда притащили rails-way фрэймворки), то это была жуткая мешанина html, sql, php и т.д... Но кто объяснит чем это

html
<li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
  <div class="view">
    <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="toggleCompleted(todo)">
    <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
    <button class="destroy" ng-click="removeTodo(todo)"></button>
  </div>
  <form ng-submit="saveEdits(todo, 'submit')">
    <input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEdits(todo)" ng-blur="saveEdits(todo, 'blur')" todo-focus="todo == editedTodo">
  </form>
</li>
лучше? Кто вообще объяснит, почему управление содержимым страницы **на клиенте** должно осуществляться через xml?

И это только первая часть проблемы, другая ее часть менее очевидна. Это то, что я называю *основным потоком инициализации*. Т.е. существует основной поток инициализации, в рамках которого вы можете применять все эти чудесные шаблоны, привязки и практики. Но после его прохождения (т.е. после инициализации компонента), все это применять уже невозможно совсем.

...

И далее в readme (код, примеры, панцея).
https://github.com/special-k/redtea

Ответ на: комментарий от Vit

сбацали html на сервере, и продолжили в браузере

Реакт так работает, это вообще достаточно просто сделать, если у тебя явный стейт у компонентов.

zz ★★★★
()
Ответ на: комментарий от zz

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

Они юзают textContent для текстовых нод, он не сильно медленнее чем nodeValue. В следующей версии не будет span'ов и можно будет померить еще раз с nodeValue. Но непосредственно рендеринг и так отстает всего на 5-6мс, а остальное - это логика для того чего в db-monster нет.

zz ★★★★
()
Ответ на: комментарий от zz

У меня пока нет понимания, как это в проекте организовать.

Сейчас наборы (шаблон + перевод + клиентский скрипт) разложены по папкам https://github.com/nodeca/nodeca.forum/tree/master/client/forum. Соотвественно, и на сервере и на клиенте для рендеринга страницы надо только хелперы синхронизировать.

А вот как это в riot / react, когда надо что-то куда-то монтировать, я пока разумом не объял. Возьмешься проконсультировать?

Vit ★★★★★
()
Ответ на: комментарий от Vit

У реакта по сути для этого одна фича - reconciler перед первым рендером делает из того что лежит в целевом элементе virtual dom и потом дифает как обычно. Остальное на плечах приложения: если у тебя на фронтенде отдастся тот же vdom что и с сервера - то перерендера не будет, просто заатачатся эвенты.

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

https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rende...

https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRenderi...

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

zz ★★★★
()
Последнее исправление: zz (всего исправлений: 1)
Ответ на: комментарий от zz

Это надо бы голосом обсудить, чтобы клавиатуру не стереть. Тема для меня новая (раньше кнокаута хватало), поэтому в голове с трудом укладывается. Не сам принцип, а как это все между собой переклеить. Если поможешь порядок в мыслях навести - благодарность будет существеннее, чем пиво и многопива.

vitaly@rcdesign.ru - если согласный, кидай сюда скайп или чего там удобно.

Vit ★★★★★
()
Ответ на: комментарий от Vit

Типа у самых модных посонов уже имеется.

Мода это конечно хорошо, но с другой стороны, всякие там микроформаты и прочая сеошная лабуда, в этих наших шустрых шевелящихся виджетах зачем? Не лучше ли разработать специальный инструмент, который будет отдавать сайт роботам в чудноиндексирумом формате. Это же ведь проще, производительнее, эффективнее. И не говоря о том, что далеко не всем веб-приложениям вообще нужна индексация.

Например, сбацали html на сервере, и продолжили в браузере.

Та же ситуация, но зачем? Можно в теле страницы инициализировать модели с джейсониной внутри, там можно больше данных передать гораздо.

Как-то оно нецелесообразно на мой взгляд.

special-k ★★★
() автор топика
Ответ на: комментарий от zz

реакт отстает в основном изза того, что делает больше всего

Логично, но чем это хорошо, кроме ускорения глобального потепления? На крупных интерфейсах в 100500 виджетов, корявость обсерверов и датабиндинга, мешанины xml-js, тормознутостью работы с DOM, просто приведет тебя в тупик.

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

В огромном количестве случаев не нужна компиляция на сервере, но нужен быстрый интерфейс.

special-k ★★★
() автор топика
Последнее исправление: special-k (всего исправлений: 1)
Ответ на: комментарий от special-k

Не лучше ли разработать специальный инструмент, который будет отдавать сайт роботам в чудноиндексирумом формате. Это же ведь проще, производительнее, эффективнее.

Ага, и поддерживать два независимых проекта. Не прикалывает.

Та же ситуация, но зачем? Можно в теле страницы инициализировать модели с джейсониной внутри, там можно больше данных передать гораздо.

Мне б блин хоть как-то, для начала.

Vit ★★★★★
()
Ответ на: комментарий от Vit

Ага, и поддерживать два независимых проекта. Не прикалывает.

Т.е. сеооптимизация виджетов - прикалывает...

Как бы два, но один значительно проще другого. Вот взять лор, тут всего 2 шаблона - топики с превью (раз), которые ведут на комменты (2). Ну ок, еще есть список тем форума (3). Кнопки всякие не нужны, заморачиваться с внешним видом не надо... Задача в таком ключе выглядит гораздо тривиальней виртуального дома с сеооптимизацией.

special-k ★★★
() автор топика
Ответ на: комментарий от special-k

Да я понимаю. Но рука не поднимается такое делать :) . Пока не приперло еще. Должна быть хотя бы уверенность, что мой текущий вариант, переписанный на виджеты, станет проще. А ее нет.

Vit ★★★★★
()
Ответ на: комментарий от special-k

Ждем более сложный пример. Хотя бы добавь поддержку изменения ENV.rows для начала. Тормознутости дома с реактом не наблюдается, наблюдается более большой оверхед фреймворка чем у тебя просто потому что я могу много чего разного сделать с этой разметкой, но не делаю.

zz ★★★★
()
Ответ на: комментарий от zz

Ждем более сложный пример.

Будет.

ENV.rows

Добавлю, но едва ли это будет показателем (только если не менять его постоянно).

special-k ★★★
() автор топика
Ответ на: комментарий от special-k

Не лучше ли разработать специальный инструмент, который будет отдавать сайт роботам в чудноиндексирумом формате.

Вообще-то это антисео. Если индексатор пропалит, что ты разный контент для разных UA отдаешь, то по головке не погладит.

A1
()
Ответ на: комментарий от special-k

корявость обсерверов и датабиндинга

Ты путаешь реакт с чем то другим, наверно ангуляром.

мешанины xml-js

Ты ничего не понял. jsx это просто сахарок для декларативного описания иерархии компонентов. Можно например взять livescript и получить edsl еще слаще:

        $ Swipeable,
            class-name: \full
            on-swiping-down: @pull-to-refresh
            on-swiped-down: @pull-to-refresh-done
            $div class-name: 'mobscreen scrollable', ref: \scroll,
                if @state.fetching-data or @state.pull or !@props.data.tabs.1
                    $ RefreshIndicator,
                        class-name: 'boo'
                        ref: 'status'
                        size: 40
                        status: 'loading'
                        style:
                            left: '50%'
                            margin-left: -20px
                            top: 20px
                            transform: if @state.pull then 'scale(0)' else 'scale(1.0)'
                for cell in @props.data.tabs.1 or ['&nbsp;']
                    $div class-name: \aspect-2x1,
                        $div class-name: \with-aspect, for r in cell
                            if r.item_type == \release
                                $ Release, release: r.object
                            else if r.item_type == \playlist
                                $ Playlist, playlist: r.object

тормознутостью работы с DOM

Все изменения DOM исключительно локальны, поэтому реакт скейлится.

На крупных интерфейсах в 100500 виджетов

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

Ты же предлагаешь пердолится с DOM по событиям как деды. Ты просто не делал сложных интерфейсов, вот такой вывод можно сделать.

A1
()
Ответ на: комментарий от special-k

Лапша в параметрах методов?

Ты опять ничего не понял. Никто ж не заставляет.

A1
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.