Изоморфные React-приложения: производительность и масштабирование

Спасибо за обзор.

"как изоморфные приложения отразятся на Вашей зарплате" — хотелось бы послушать и про это.

Про большой размер Bundle-JS: на самом деле можно всё распилить на небольшие чанки (отдельные куски js-кода) и грузить их динамически на клиенте через SystemJS. Webpack 2 нам поможет.

Пока что у React-а весьма плачевная ситуация с роутингом — с 2013 никто так и не осилил сделать всё по уму. Вся надежда на React Router v4. Но пока что там всё очень сыро и недоделано.

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

Разбор: как и зачем применять PureComponent в React

Я пал жертвой злых маркетологов и их "модных" названий :-(

Разбор: как и зачем применять PureComponent в React

Простите, а от чего кроме props и state может зависеть результат работы render?
Если вы про context, то юзать его можно и в PureComponent, и в Component.

Разбор: как и зачем применять PureComponent в React

PureComponent или "чистый компонент" подразумевает, что state внутри не будет, что весьма логично. "Чистый" — значит "без состояния".
Примеры несколько неудачны.

Кнопка или ссылка?

Золотое правило для Web:
Если при нажатии на кнопку, пользователя отправит на другую страницу, то эта кнопка должна быть тегом <a>. Ссылка с нее должна и копироваться нормально, и в статус-баре браузера отображаться.

Минимальное окружение для JS-разработки: ava, standard, chokidar-cli и precommit-hook

Не-не-не. Babel тут не причем. Babel не умеет CSS-Modules, SVG и прочие клевые штуки. Это задача webpack-loaders и webpack-plugins.

Минимальное окружение для JS-разработки: ava, standard, chokidar-cli и precommit-hook

У меня насчёт AVA вопрос:

Предположим, что у меня есть такой код:

import React from 'react';
import styles from './ExampleComponent.css';
import DemoIMG from '../assets/logo.png';
import DemoSVG from '../assets/dummy.svg';

export class ExampleComponent extends React.Component {
    render () {
        return (
            <div className = {styles['root']}>
                <img src = {process.env.CDN_ROOT_URL + '/image.jpg'}
                <img src = {DemoIMG}/>
                <DemoSVG width = {300} height = {300} className = {styles['normal']} />
            </div>
        );
    }
}

Этот код работает только благодаря loader-ам Webpack-а. Чем AVA лучше Mocha, если без компиляции кода теста, тест всё равно не завести?

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

Пример — preact весит всего 3кб. Умеет почти всё тоже самое, что и React, но нет Context-а. Если нужен Context, то подойдёт preact + preact-compat

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

То, что пробовал для написания UI — jquery, ember, angular (чутка), react и еще пару велосипедных. Не так уж и много — но с react-ом я ощущаю наименьшее количество боли при разработке

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

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

Дорогой JavaScript,

Попробуйте preact — всего 3кб

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

В Web Components огромные заморочки с настоящим CSS, поэтому я его не использовал. Но всегда можно взять что-то из аттрибутов(props) и на основе этого выставить style у нужных элементов. Внутри Shadow DOM там как-то не так CSS работает, я мало с этим работал — особо не подскажу.

Насчет микромодулей/микрофреймворка — для меня важна совместимость с React, так что это не мой путь. И я готов заплатить за него 20 лишними килобайтами

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

Лично мне бы не хотелось заставлять программиста, который использует мою библиотеку, подключать какие-то react/preact-ы. Ибо это детали реализации уже.
Но предложенный вами вариант тоже имеет место быть. Многим он подойдет

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

так что 8 компонентов на одной странице по 25 килобайт каждый

Я предполагаю, что разработчик компонентов даст вам эти 8 компонентов, собранных в одну либу вместе с одним preact-ом.

@salex772 предложил вариант получше https://habrahabr.ru/company/devexpress/blog/316358/?reply_to=9946908#comment_9946898
Я думаю, это вполне реально реализовать

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

Компонент можно написать так, чтобы он поддерживал помимо uncontrolled режима, в котором state внутри создается, еще и controlled режим, при котором state не нужен. В controlled режиме компонент будет дергать колбеки, они будут менять state и отдавать его обратно в props (в аргументы). Так что никакой сериализации. Просто данные можно хранить вне компонента, если нужно

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

Возможно вы и правы, но как реализовать динамическую подгрузку preact-а, чтобы компонент не успел до этого поломаться из-за ReferenceError это еще нужно серьезно подумать

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

Внутри компонента может быть свой state, свое внутреннее локальное состояние, которое никуда не денется, пока экземпляр компонента не будет уничтожен.
Если же компонент будет переодически уничтожаться и создаваться заново, и нужно чтобы данные не пропадали, или какой-то другой сложный сценарий использования компонента — тогда придется вынести состояние еще куда-то, но сделать это можно.

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

Про дублирование Preact-а на каждый компонент речи не идёт. Если 100 компонентов в сборке будет — то получится 100 компонентов + один Preact

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

Я думаю, что создание оберток можно автоматизировать. Например генерить их налету из propTypes

Пример PropTypes

DonutChart.propTypes = {
radius: React.PropTypes.number.isRequired,
holeSize: React.PropTypes.number.isRequired, //0...1
text: React.PropTypes.string.isRequired,
value: React.PropTypes.number.isRequired,
total: React.PropTypes.number.isRequired,
backgroundColor: React.PropTypes.string.isRequired,
valueColor: React.PropTypes.string.isRequired
};

Тогда 100 компонентов (вес их React-овского кода) + 20кб (preact + preact-compat) + десяток килобайт на код, который соберает налету обертки из PropTypes для любого компонента

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

В противовес попробуйте интегрировать один React компонент в не-React проект — у вас и оверхед React будет похуже оверхеда полифиллов + Polymer

В статье я показал, как добиться оверхеда в 20кб.