React Server Components — что это?

Это же PHP десятилетней давности — запрос к БД и отрисовка HTML в одном файле. Только PHP уже тогда за это ругали и рекомендовали разделять ответственности, а в мире реакта это оказывается ново, модно и удобно.

Использование Effector в стеке React + TypeScript

mobx.js.org/observable-state.html#makeobservable
Не хотите классы — не используйте:

import { makeAutoObservable } from "mobx"

function createDoubler(value) {
    return makeAutoObservable({
        value,
        get double() {
            return this.value * 2
        },
        increment() {
            this.value++
        }
    })
}

PhpStorm 2020.3: PHP 8, атрибуты, PHPStan и Psalm, Xdebug 3, Tailwind CSS и совместная разработка

Подскажите, а как делать проверку Immutable / ArrayShape на CI? Можно ли использовать PHPStorm как статический анализатор на CI?

RxJS и Angular: искусство отписки от уведомлений

Обилие способов отписаться и отсутствие единого способа это сделать — один из множества минусов RxJS для управления состоянием. Сначала проблему создали, потом её решаем костылями. Идиоматичный RxJS это автоматический subscribe и автоматические отписки. Ручные подписки — это неправильное использование RxJS, которое, увы, встречается повсеместно.

Удалённые игры вызвали вспышку мошенничества и взаимных подозрений в шахматах

Ввод хода соперника так же как и свой ход может тоже выполняться с помощью программы.

Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее

Потому что генераторы не дружат с TypeScript:

const test = yield 1; // у переменной test тип any вместо number

Простой state manager для простой работы

Общий размер Mobx + mobx-react-lite на современном React — 15.4 + 1.8кб, а не 50. Ссылки на bundlephobia в посте выше. MST даёт дополнительные инструменты вроде рантайм проверки типов, нормализации из коробки и time travel, что вряд ли нужно в простом приложении.

Простой state manager для простой работы

Mobx в gzip весит 15кб. А обвязка к реакту — 1.8кб. Если версия реакта позволяет использовать хуки, то можно использовать официальный mobx-react-lite вместо mobx-react.

автор предложил достаточно крутое решение, чтобы избавить redux от бойлерплейта

Проблема в том, что тут чуть ли не каждый второй пост про стейт-менеджер это презентация своего велосипеда или обёртки над Redux:
— Организация reducer'а через стандартный класс
— Redux-symbiote — пишем действия и редьюсеры почти без боли
— Redux — пересмотр логики reducer'a и actions
— Оверинжинирг 80 уровня или редьсюеры: путь от switch-case до классов
Люди решают проблемы, которые уже давно решены другими инструментами, проверенными временем. Поэтому появляются люди, рассказывающие об этих инструментах.

Простой state manager для простой работы

Представим что нужно декрементировать значение. С statirjs это будет быстро и просто:

+     decrement: (state) => ({ count: state.count - 1 })

Быстро и просто это так:

state.count--

Аналогично для dispatch'а. Просто — это когда counter.increment(), а не хуки на все экшны:

const increment = useDispatch((dispatch) => dispatch.counter.increment);

Опыт использования MobX в большом приложении

Спасибо, что поделились своим опытом. Проблема inject в том, что его нельзя типизировать без костылей, примеры костылей описаны в этой статье. С хуками компонент Player может выглядеть так, у него нет проблем с типизацией:

function Player() {
  const { model } = useStore();
  return (
    <div>
      <Loader visible={model.isLoading} />
      <AudioComponent visible={!model.hasAudio && !model.hasErrors} />
    </div>
  );
}

export default observer(Player)

Опыт использования MobX в большом приложении

В MST как раз предлагают использовать flow и генераторы, вместо async/await: mobx-state-tree.js.org/concepts/async-actions
Тоже самое доступно в Mobx. Я не тут не вижу проблемы — код на yield выглядит и читается так же как на async/await.

Переносим Angular проект на ESLint, с Prettier, Husky и lint-staged

Вот точно такая же статья на первой странице хаба Angular:



Ключевые слова те же «eslint», «prettier», «husky», «lint-staged». Зачем писать ещё одну?

Введение в Redux & React-redux

У реакта на 100% типизированы шаблоны если использовать TypeScript. В том же Angular, который написан на TS и постоянно этим кичится, до сих пор нет способа на уровне типов гарантировать обязательность пропса, не говоря уже про более сложные сценарии, которые поддерживает TSX:
— Наследование пропсов: stackoverflow.com/a/45677919
— Generic компоненты: react-typescript-cheatsheet.netlify.app/docs/advanced/guides/generic_components
— Типизация children

Новый взгляд на code style

А как расстановка отступов вручную помогает держать мозг в тонусе? Это монотонная работа которую проще полностью делегировать компьютеру: prettier.io/docs/en/why-prettier.html

Новый взгляд на code style

Тут можно без else, почитайте про early return: habr.com/ru/post/348074

Новый взгляд на code style

Согласен, Prettier давным-давно закрыл все вопросы касательно код-стайла, не понимаю что тут можно ещё обсуждать.

Продвинутый TypeScript

Типы внутри метода будут нормально работать если написать type guard или использовать оператор in:

type Task = {}

type State =
    | { isFetching: true }
    | { isFetching: false; task: Task }
    | { isFetching: false; error: Error }

function foo(state: State) {
  if ('error' in state) {
    // Тип сузился до { isFetching: false; error: Error }
  } else if ('task' in state) {
    // Тип { isFetching: false; task: Task }
  } else {
    // Тип { isFetching: true }
  }
}

Было бы интересно взглянуть на ваш пример из-за которого завис компилятор TypeScript.

Ещё один однострочный пакет npm сломал экосистему JavaScript

del

Angular для Vue разработчиков

Геттер, который заменяет вычисляемое значение. Его логика работы отличается от Vue

Вы тут умолчали о том, что в примере на Vue у вас есть мемоизация и автоматическое вычисление зависимостей (благодаря Transparent Reactive Programming). В примере на Angular функция будет пересчитываться на каждый вызов Change Detection, что гораздо менее эффективно. Не говоря уже о том, что во Vue вам не нужно делать подписку на интервал вне Zone.js, а в Angular вы рано или поздно столкнётесь с необходимостью так делать. Я как-то добавлял таймер обратного отсчёта в Angular приложение, таймер был вверху дерева компонентов и на каждый тик триггерил CD рекурсивно у всех компонентов ниже. Тут ещё спасает OnPush, но во Vue это не нужно.

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

Без RxJS можно прекрасно обойтись даже в Angular, посмотрите например Mobx-Angular. Я был на проекте, который писали фулстеки с уклоном в бекенд, и им было очень тяжело совладать с RxJS и его операторами, в коде были все возможные антипаттерны RxJS — вложенные подписки, отсутствие отписок, непонимание разницы между switchMap/mergeMap/concatMap и как следствие трудновоспроизводимые баги. Mobx зашёл на ура разработчикам из-за привычной модели программирования, писать код стало проще. Ну и вот возьмём ваш пример на RxJS, в нём ведь тоже есть проблемы:
— Лишний BehaviorSubject. Вместо того, чтобы считать количество кликов через оператор scan вы ввели состояние, которое мутируете вручную. Это императивный подход. Такой код люди пишут постоянно, потому что ломать голову операторами RxJS сложно.
— Подписка на интервал в шаблоне у вас скорее всего через async pipe, а это опять будет триггерить CD на каждый тик. На интервалы/таймеры нужно подписываться вне Zone.js

Вся эта ненужная сложность, отсутствие девтулзов и ещё вагон проблем с типизацией (она в Angular слишком щадящая) и побудили меня отказаться от этого фреймворка в пользу React.

Пишем современный маршрутизатор на JavaScript

Ну и хорошо, что наследование не будет работать, вместо него лучше композиция: en.wikipedia.org/wiki/Composition_over_inheritance
Необходимость помнить о потере this — лишняя когнитивная нагрузка, а бесконечный поток статей про контекст в JS тому подтверждение.