Comments / Profile of nihil-pro / Habr

Константин Роман @nihil-pro

User

ProfileArticles5Posts1NewsComments163

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 19 at 17:59

Мой любимый прием)

Я всегда видя в резюме список технологий, прошу рассказать о недостатках пары представленных. Работает безотказно! Например, самый частый случай — module federation, только попросишь рассказать, так сразу — нууу, настраивал не я, там целая команда, бла, бла, бла…

+1

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 19 at 14:12

Какая-то безусловно, вопрос в количестве. Понятно, что из-за того как Map устроен, когда мы что-то в неё кладем, как минимум создается один объект типа { key: , value: }, и под него выделяется память. Я это имел ввиду.

0

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 19 at 11:31

Не знаю, что я из этого должен понять.

<!doctype HTML>
<html lang="en">
  <head>
    <script type="module">
      class MyCoolMap extends Map {}
      const a = new MyCoolMap;
      const b = new MyCoolMap;

      const fill = document.getElementById('fill')
      fill.addEventListener('click', () => {
          for (let i = 0; i < 100; i++) {
              a.set(Math.random(), Math.random());
              b.set(Math.random(), Math.random());
          }
      })

      const clear = document.getElementById('clear')
      clear.addEventListener('click', () => {
          a.clear()
      })
    </script>
  </head>

  <body>
    <button id="fill">fill</button>
    <button id="clear">clear</button>
  </body>
</html>

загрузка страницы

после нажатия на fill

после нажатия на clear

MyCoolMap использовал чтобы удобнее было фильтровать по классу.

Что именно мы пытаемся проверить?

0

CreateObservableStore: реактивный store с гранулярными подписками и идеальной интеграцией с React

nihil-pro Jul 19 at 09:48

store.$.user.age = 5

Напрямую это так: store.user.age = 5

store.update('user.age', 5)

Лишний вызов функции + непривычный способ обращения к свойству + высокая вероятность опечататься.

sotre.update(() => store.$.user.age, 4)

Лишний вызов уже двух функций + лишний чужеродный $.

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

0

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 19 at 09:01

Вы проверяли это?

Да, проверял.

0

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 19 at 07:24

тот же MobX под капотом приводит к аллокациям и диффам на каждый пересчёт каждого derivation, с целью отслеживания [новых] зависимостей, с дедупликацией оных.

Это хороший аргумент. В kr-observable, например, для этих целей используется один раз аллоцированный Map, который очищается перед выполнением эффекта, а во время выполнения в него кладутся ссылки на прочитанные объекты. К новым аллокациям это не приводит. Если в mobx также, то это дешевле чем structural sharing.

0

CreateObservableStore: реактивный store с гранулярными подписками и идеальной интеграцией с React

nihil-pro Jul 18 at 11:00

Меньше шаблонов. Разработка становится быстрее, предсказуемее и приятнее.

Разрешите не согласится.

const [name, setName] = userStore.useField("user.name");
const [age, setAge] = userStore.useField("user.age");

userStore.useEffect(["user.age"], ([age]) => {
  userStore.$.user.name = "qtpy"; 
});

const userStore = createReactStore(initialState, [], {
  customLimitsHistory: ($) => [
    ["user.age", 5],
    [(t) => $.items[t(1)], 3],
  ],
});

useStore([(t) => $.board[t(row)][t(col)]])

const store = createObservableStore<AppState, DepthPath>(initialState, [], {
  customLimitsHistory: ($) => [
    ["user.age", 5],
    [(t) => $.items[t(1)], 3],
  ],
});

createObservableStore — это реактивная система нового поколения

Увы, но нет.

+2

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 17 at 09:31

Сделайте с сеттерами пачку из 100 изменений, вызвав эффект лишь один раз по окончании пачки. Например, в массиве 100 объектов нужно выставить у каждого "active = false" и не триггернуть 100 последовательных перерисовок.

Пожалуйста

import { makeObservable, autorun } from "https://esm.sh/kr-observable";

const { data } = makeObservable({ data: [] });

for (let i = 0; i < 100; i++) {
  data.push({ active: false, id: i });
}

autorun(() => {
  console.log('effect', data.every(el => el.active === true))
})

data.forEach(el => el.active = true);

Лог:

effect false
effect true

Скопируйте, и вставьте на codepen.io (не могу дать ссылку, потому что из рабочей сети он заблокирован).

+2

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 16 at 18:46

<Родитель роль="Отец" имя="Виктор" возраст="32">
  <Ребенок имя="Катя" возрас="8" роль="дочь" />
  <Ребенок имя="Лена" возрас="12" роль="дочь" />
  <Ребенок имя="Максим" возрас="16" роль="сын" />
</Родитель>

или

<xuz role="Отец" name="Виктор" age="32">
  <qux name="Катя" age="8" role="дочь" />
  <qux name="Лена" age="12" role="дочь" />
  <qux name="Максим" age="16" role="сын" />
</xuz>

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

+5

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 16 at 17:27

Хоть это и странно, ибо если предлагаете – сами и продайте мне это. Убедите в том, что мне это нужно. Но ладно, мне не сложно:

$my_card_gallery $my_view

Что означает $my_card_gallery? А $my_view? Зачем нужен знак доллара? Пока непонятно.

count 0

А count это что? Наверное какая-то переменная, а 0, это видимо значение по умолчанию. Ну ок. Тогда получается, что ответ на предыдущий вопрос такой: $my_card_gallery это переменная, а $my_view это значение по умолчанию, хотя что такое $my_view все еще совершенно непонятно.

kids /

Эммм... Кажется, что kids это тоже переменная, а значение по умолчанию /? Как-то не верится, возможно предыдущие мои выводы – ошибочны.

Обоснуйте

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

Идем дальше.

<= Panel $my_panel

Тут какое-то выражение. Сходу кажется что один операнд забыт, а Panel это как тип для $my_panel. Это очень странно. Представляю, будто это какой-то строго-типизированный язык, но настолько строго, что тип нужно указывать каждый раз обращаясь к переменной, типа так:

for (int i = 0; int i <= int 5; int i++) {
  System.out.println("Итерация: " + int i);
}

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

tools /
	<= tools /

Да что такое то! Пропускаем. Может разгадка будет ниже.

<= Close $my_button
	hint @ \Close Gallery
	click? <=> close? null
	kids / <= Close_icon $my_icon_close

F***k!
Так, ладно. Очевидно все эти /\><=, это какие-то операторы, но как тогда это читать, и причем тут разметка?

Ок, что там еще?

<= Card*0 $my_card
	title <= card_title* \Element #{numb}
	click? <=> card_select*? null

Если пустота меньше или равно Card помноженный на 0, тогда $my_card, иначе, если title меньше или равно card_title помноженный на... Нет. Я сломался.

Я не знаю как иначе объяснить, что это нечитаемо.

+6

async2: эксперимент с поддержкой асинхронности в рантайме

nihil-pro Jul 16 at 16:25

Я фронтендер, мне было интересно и познавательно. Спасибо.

Пы сы: дотнет в глаза никогда не видел))

0

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 16 at 16:11

Так ведь действительно нечитаемый. Имхо

+7

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 16 at 13:55

обычном JS не ожидаешь открывающей угловой скобки

JSX это JS и HTML одновременно, так что видя угловую скобку, я воспринимаю это как HTML.

Дальше можно про className

Я про JSX, а не React. В Preact, например, я пишу class, а не className, for а не htmlFor и т.д. И это JSX.

+1

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 16 at 13:41

Приведите пример, где JSX выглядит более дико. Мне к jsx привыкать не приходилось.

0

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 16 at 13:04

Нормальный там DSL.

Звучит как тавтология.

Привыкайте к новому для вас языку и проблема решится сама собой :)

Вот счастье то! )) Типа мне HTML/JS/CSS недостаточно, надо еще привыкать к DSL-ю Vue. А ради чего?

0

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 16 at 05:38

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

// v-bind:href – это что?
// "url" – выглядит как текст, а на деле переменная
<a v-bind:href="url"

// v-on:click – это что?
// "doSomething" – выглядит как текст, а на деле переменная
<a v-on:click="doSomething"

// и т.д.
<div v-bind:id= // ?
<time :title="toTitleDate(date)" :datetime="date" // ?
<p v-if="seen" // ?

В этом смысле JSX выглядит немного привычнее.

+1

Steroids — ещё один фронтенд фреймворк на базе React?

nihil-pro Jul 15 at 06:58

Шо, опять?

+4

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 14 at 14:32

Да.

0

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 14 at 14:31

Отдельный метод порождает проблемы неконсистентности состояния.

Каким образом? За этой функцией заменяющей свойство, точно также есть какой-то объект хранящий это значение, будь это хоть переменной в замыкании.

+1

От React всё так же веет безумием, но все об этом молчат

nihil-pro Jul 14 at 14:21

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

Еще вопрос как такое состояние шарить между компонентами. Можно ли им в конструктор что-то передать состояние из вне? Как вызвать ререндер при изменении состояния?

+2

3

4 5 ...