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

А еще серверный рендеринг ускоряет визуализацию контента в браузере. Т.е. сначала, скажем, отдается 50кб html+css. Пользователь их сразу видит и может уже читать страничку, тыкать по ссылкам и т.д… А только потом уже незаметно для пользователя подгружается тяжелый js-bundle.
Это быстрее чем классические SPA, которые сначала показывают пустую страницу, потом тянут js-bundle целиком, и только потом пользователь что-то видит в браузере.

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

Классические SPA не дружат с поисковиками и индексированием (есть костыли, но они плохие). А изоморфные, благодаря серверному рендерингу, дружат.

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

Вся соль в том, что frontend-сервер и frontend-клиент теперь могут иметь 90+% общего кода.

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

У темы "изоморфных веб-приложений" много ненавистников. Увы. Хотя легко понять почему, всё очень сложно программируется, сотни статей на эту тему, а на выходе всё равно у всех получается страшный клиент весом 3 мегабайта.
Но когда-нибудь скоро все проблемы и подходы к их решению будут стандартизированы, и мы будем иметь легковесные изоморфные single page application.

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

Обычно когда речь про изоморфные веб-приложения, это не про API. Это исключительно про UI-ную часть.
API можно на чем угодно писать и дробить его на сколько угодно микросервисов.

Изоморфные 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 (в аргументы). Так что никакой сериализации. Просто данные можно хранить вне компонента, если нужно