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кб.

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

На данный момент нативно Web Components очень мало где поддерживается

C полифилами ситуация лучше

Но полифилы отжирают ~120 кб.

И опять же — в Web Components — внутри все DOM-операции и отслеживание изменений состояния компонента нужно делать ручками, что не так удобно, как в React. Уровень абстракции другой

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

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

От Jquery UI до Ext.js: обзор библиотек виджетов для построения интерфейса на JS. Часть 2

Спору с вами нет. Web Component-ы это хорошо. Но лучше чуть погодя, чем сейчас

От Jquery UI до Ext.js: обзор библиотек виджетов для построения интерфейса на JS. Часть 2

Про некрофилию это всё враки. Вы, например, пробовали пользоваться встроенным браузером такого телефона https://market.yandex.ru/product--nokia-lumia-730-dual-sim/11030304 ?
Почему то там половина современных сайтов рассыпается и модальные окна улетают неизвестно куда. А телефон то не старый. Думаете такого хлама мало?

От Jquery UI до Ext.js: обзор библиотек виджетов для построения интерфейса на JS. Часть 2

Web Component-ы имеют не самую лучшую поддержку в браузерах https://www.polymer-project.org/1.0/docs/browsers. Через 2-5 лет, когда вымрут всякие старые девайсы с их чудо браузерами (привет Windows Mobile и встроенный браузер несвежего Android) — вот тогда с вами уже сложно будет поспорить

React Redux. Получение доступа к state из функции mapDispatchToProps()

В новой версии react-redux эта проблема и другие похожие решается более элегантно через

connectAdvanced(selectorFactory, [connectOptions])

https://github.com/reactjs/react-redux/blob/next/docs/api.md#connectadvancedselectorfactory-connectoptions
Там можно более гибко конфигурировать props для вложенного компонента.

Пример кода:

import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux'

function selectorFactory(dispatch) {
  let state = {}
  let ownProps = {}
  let result = {}
  const actions = bindActionCreators(actionCreators, dispatch)
  const addTodo = (text) => actions.addTodo(ownProps.userId, text)
  return (nextState, nextOwnProps) => {
    const todos = nextState.todos[nextProps.userId]
    const nextResult = { ...nextOwnProps, todos, addTodo }
    state = nextState
    ownProps = nextOwnProps
    if (!shallowEqual(result, nextResult)) result = nextResult
    return result
  }
}
export default connectAdvanced(selectorFactory)(TodoApp)

JavaScript и SEO в 2016 году

Сервер на nodejs целиком писать необязательно. Достаточно написать небольшую прослойку для рендеринга на nodejs. API, работа с БД и прочими штуками может быть реализована на каком угодно языке программирования

JavaScript и SEO в 2016 году

В 2016 уже есть фреймворки, которые могут в нормальный SPA с серверным рендерингом. Например React (http://redux.js.org/docs/recipes/ServerRendering.html) и Angular 2 (https://github.com/angular/universal).
Сама попытка делать пререндеринг сайта через PhantomJS это пережиток прошлого и ошибка природы

Enum-switch антипаттерн

В некоторых языках программирования, например в Haxe, использование связки enum-switch считается рекомендованным подходом http://haxe.org/manual/types-enum-using.html И про это пишут в документации

Выбираем состав изоморфных React-приложений на следующие 12 месяцев

0.15.0 (Oct 10, 2016)
Adding cancellation support (https://github.com/mzabriskie/axios/pull/452)

Паттерны React

Про key забыли.

<ul>
  {["first", "second"].map((item) => (
    <li>{item}</li>
  ))}
</ul>

<ul>
  {[
    <li>first</li>,
    <li>second</li>,
  ]}
</ul>

Будет предупреждение:

Warning: Each child in an array or iterator should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.

Выбираем состав изоморфных React-приложений на следующие 12 месяцев

Да — я читал про это. И от этого чтива у меня слезы на глазах наворачиваются — каждое с голубиное яйцо…
Вместо того, чтобы сделать API, которое можно, не напрягаясь, использовать всегда и везде — сделали еще одно неудобное API, вокруг которого будут и дальше писать десятки и сотни разных оберток. И в каждом проекте будет своя — не такая как в других…
А ведь им ничего не мешало сделать по-нормальному

Выбираем состав изоморфных React-приложений на следующие 12 месяцев

12. isomorphic-fetch для отправки HTTP-запросов (“AJAX”).

Имею неблагоприятный опыт работы с isomorphic-fetch и в целом с Fetch API.
Стандарт кривой и ничего толком не умеет, даже работать с query парамметрами [пруф. http://stackoverflow.com/questions/35038857/setting-query-string-using-es6-fetch-get-request/35039198#35039198 ]
А когда нужно писать изоморфный код, возникают еще и проблемы с headers["Authorization"] и baseUrl .

Рекомендую axios. Там всё очень круто и удобно

JavaScript: где мы сейчас и куда двигаться

Кстати — в React 15.3.0 добавили класс верхнего уровня React.PureComponent. Чтобы нормальные пацаны от него наследовались, а не от React.Component. Там render вызывается только, когда нужно

Интернационализация приложения в React (и не только)

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

Примеры кода с летней школы по Node.js и JavaScript в КПИ

JavaScript это, наверное, вредный язык для учебы в институте. Почему, например, не TypeScript? Там хоть компилятор будет бить по рукам, за то, что студенты пишут плохие программы. Да и более академично получится

Честный MVC на React + Redux

Насчет stateless и lifecycle: тут весьма неоднозначно. Сам компонент не знает в какой стадии жизненного цикла находится — из функции render и из других кастомных функций нельзя узнать в какой стадии жизненного цикла сейчас компонент.