Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.10.2015, 23:02
Профессор
Посмотреть профиль Найти все сообщения от Mаxmaxmаximus
 
Регистрация: 29.10.2015
Сообщений: 473

UIjs Альфа 1
Я тут ребят подумал и решил что до юишка будет рендеровой частью изоморфного фреймворка Mega.js по этому она должна уметь рендерить в строку, а для этого ей нужно работать не с реальным дом а с виртуальным. У меня сейчас ассинхронный датабиндинг, что позволяет рисовать огромные коллекции в миллион элементов ассинхронно не тормозя интерфейс, но если бы у меня был виртуальный дом то я например мог бы отрисовать миллион виртуальных элементов а фреймворк бы это учел и понял что браузер столько не потянет и нарисовал бы допустим только тычячу, и вставил бы 2 распорки сверху и снизу, которым бы задал огромную высоту, а когда человек скроллил бы то виртуал дом подрендеривал бы нужное меняя размеры распорок. в общем эти вещи если делать сейчас руками то это мозг взорвется, даже сейчас у меня рендеринг на промисах и их там около квадрилиона создается и код репитера похож на лапшу, приходится учитывать нарисовался уже элемент или еще нет и.т.п. а хочется просто отрисовать типа миллион виртуальных дом элементов а движок уж пусть там сам думает как это нарисовать, я уже молчу что при такой архитекторе он сможет отрендерить все это В СТРОКУ (а значит можно использовать на сервере nodejs в качестве пререндера что круто для поисковиков)


В общем вот текущая архитектура:




А вот рендер 100к элементов, попробуйте писать в инпат во время рендера, ничего не тормозит


<script src='//uijs.ru/ui.js'></script>
<script src='//uijs.ru/observe.js'></script>

<script>
ui.controller('User', function(){

  function createArr(length){
    var arr = []
    while(length--) arr.push(Math.random());
    return arr
  }

 return {
    arr: createArr(100000),
    change: function(){
        this.arr[2] = 'ЗАМЕНА ' + Math.random()
    },
    add: function(){
        this.arr.unshift( 'ВСТАВКА ' + Math.random() )
    }
 }

})
</script>


<div>{{text}}</div>
<input data-model='text' placeholder='Печатай тут пока оно рендерится'>

<hr>
Можно даже <button on-click='User.change()'>изменить</button> или <button on-click='User.add()'>добавить</button> в массив во время рендера и создастся второй поток рендера, у которого приоритет выше потому что изменений меньше ;)

<ul>
    <li data-repeat='val in User.arr'>{{val}}</li>
</ul>



Минус такой архитектуры в том что мы упираемся в браузер, когда количество физических элементов хододит до 50 тысяч браузер начинает тормозить при их вставке. И мы с этим ничего не можем поделать. Но нет смысла рисовать физически все элементы если можно вставить див распорку например которая бы высоту тупо давала для скроллбаров и.т.п. Я к тому что то что на экране нужно рисовать, а то что за пределами экрана не нужно, и если у нас есть виртуальный дом то мы можем все это контролировать. Вот какую архитектуру я буду делать для воторй альфы:



Чем это отличается от реакта? Ну тем что в реакте у нас датабиндинг ручной, нам руками приходится генерировать шаблоны из виртуальных дом в функции render. А у меня действуют все те же "директивы" ангуляра, которые внутри себя ЗНАЮТ как надо лучше биндинг сделать, например репитер делает аррей обсерв (я временно полифил подключил, потом кусок из него встрою). И он знает какие элементы изменились и удалились и тиолько их он изменит в виртуал дом, и это лучше чем реактовский бредовый render который нам ЗАНОГО создаст весь миллиард элементов, пусть и виртуальных.


А вот мой туду лист до завершения первой альфы:


всякие валидаторы на data-model всякие классы там добавлять
при верных данных не верных данных всякое такое прочее, сделать
удобным для использования в кастомных инпатах и сделать удобным
для наследования

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

если несколько одноименных компонентов конструируются на разных уровнях
одного элемента, то при @require() они перекрывают друг друга,
а должны быть каждый на своем... в общем решить эту неопределенность

суспендить еще и события внутри слипинг скоупов

сделать style-prop поддерживающими вендорные префиксы если они есть

SelectionSaver не работает в opera 12

доработать параметры сервиса http такие как таймаут и контент тайп

mouseenter mouseleave не работает в интернет експлорер)

on-wheel не работает в opera 12 (только on-mousewheel)

добавить многим ассинхронным сервисам опцию отключения
сохранения Async контекста, которая по умолчанию должна быть включена.
Так как многие ассинхронные сервисы, например анимейшенФрейм или
Промисы, используются в ядре, и ассинхронка там не нужна и работает
не корректно, так как это абстракция пользовательского левла.

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

сделать нормальную передачу ассинхронки в промисах,
ибо теряется ассинхронный контекст в функциях переданных в then
и вообще решить делать лиасинхронку в промисах, они ж
горячее место в коде теперь



А вот мой лист на сегодня:

сделать анимации в data-if
сделать анимации в data-repeat
доделать data-repeat
настроить чтобы таймер троттлинга очищался по завершению рендеринга


А еще у меня всякие наследования компонентов, шаблонов и контроллеров, автоматическая очистка мусора, виртуальная файловая система и модульность, даже кофескрипт в {{выражениях}} есть, а так же блекджек и немного шлюх

А о том что БУДЕТ это я уже молчу, там такие нанотехнологии будут что людям и не снились) особенно мне нравится шеред контролелры которые между вкладами работают, и возможност нарисовать триллион значений из базы данных, при том не думая будет оно тормозить или нет) ну это уже в Mega скорее а не в юишке)


п.с. привет матрешка))))))) как там твои сеттеры)?

Последний раз редактировалось Mаxmaxmаximus, 29.10.2015 в 23:45.
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2015, 02:33
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

О_о, возвращение легенды
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2015, 06:00
Профессор
Посмотреть профиль Найти все сообщения от Mаxmaxmаximus
 
Регистрация: 29.10.2015
Сообщений: 473

Decode, хэх, ну че, крутой у меня фреймворк получается https://github.com/Maxmaxmaximus/ui )?

(Понятно что не круче чем великая функция Class, но все же)

Последний раз редактировалось Mаxmaxmаximus, 30.10.2015 в 06:21.
Ответить с цитированием
  #4 (permalink)  
Старый 30.10.2015, 10:33
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Mаxmaxmаximus, о да, сколько раз ты уже анонсировал свой проект и забивал
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #5 (permalink)  
Старый 30.10.2015, 19:03
Профессор
Посмотреть профиль Найти все сообщения от Mаxmaxmаximus
 
Регистрация: 29.10.2015
Сообщений: 473

cyber, я не забивал, я все время разрабатывал её)
Ответить с цитированием
  #6 (permalink)  
Старый 30.10.2015, 21:17
Профессор
Посмотреть профиль Найти все сообщения от Mаxmaxmаximus
 
Регистрация: 29.10.2015
Сообщений: 473

Ну что почаны, отключил ассинхронку, щас буду писать виртуальный дом, че думаете, какой api элементам задать, такой же как нативному dom или удобняшнее сделать? типа node.attrs или node.on('click', fucntion(){}) node.copy() ?
Ответить с цитированием
  #7 (permalink)  
Старый 31.10.2015, 01:07
Интересующийся
Посмотреть профиль Найти все сообщения от Zaveshanie
 
Регистрация: 18.10.2015
Сообщений: 26

В мире много всяких библиотек, без документации ты впустую сотрясаешь воздух.

Матрешка тоже ещё та клоунада, но твоя даже внимания не заслуживает без хотя бы минимально наглядной доки.

Иди пиши или лох.
Ответить с цитированием
  #8 (permalink)  
Старый 31.10.2015, 04:13
Профессор
Посмотреть профиль Найти все сообщения от Mаxmaxmаximus
 
Регистрация: 29.10.2015
Сообщений: 473

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

Я просто этим тредом показал что работа идет и показал в каком направлении движусь, и что такое ассинхронный рендер в моем понимании. Вдруг кто увидет потенциал и примкнет к моей темной стороне например)


Последний раз редактировалось Mаxmaxmаximus, 31.10.2015 в 04:17.
Ответить с цитированием
  #9 (permalink)  
Старый 31.10.2015, 04:26
Профессор
Посмотреть профиль Найти все сообщения от Mаxmaxmаximus
 
Регистрация: 29.10.2015
Сообщений: 473

По поводу виртуал дом, кто нибудь когда нибудь делал виртуал дом?

Есть 2 варианта построения, делать 2 дерева, одно будет отражать физическое состояние элементов в браузере, а второе виртуальное, изменения производим с виртуальным деревом, а когда надо вычисляем разницу и отрисовываем недостающие куски и убираем лишние из "физического" дерева, а заодно и из самого дом. так делает реакт.

И есть второй способ я его только что придумал, есть просто отдно виртуальное дерево, где у каждой ноды есть свойство physical и там либо null либо ссылка на физический обьект, и не нужно ни какой разницы вычислять, если там нет ноды значит нужно её нарисовать, если элемент удаляется из виртуального дерева и в свойстве лежит нода, то и её надо из её родителя надо удалить


С другой стороны должна быть гибкость и возможность отрендерить в html строку, но я думаю тут свойство physical не помеха)

Последний раз редактировалось Mаxmaxmаximus, 31.10.2015 в 04:28.
Ответить с цитированием
  #10 (permalink)  
Старый 31.10.2015, 13:40
Интересующийся
Посмотреть профиль Найти все сообщения от Zaveshanie
 
Регистрация: 18.10.2015
Сообщений: 26

Сообщение от Mаxmaxmаximus
я не прав?
Да, ты не прав. Иди пиши или лох.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск