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

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

TODO-App. Там не все идеально, но вот большой пример с тем же подходом https://github.com/MrCheater/react-spa-todo

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

1. Ставить рамки это хорошо. Чем жестче ограничения, тем однообразнее будет код.

   
   

2. Да — я думаю, что state внутри компонента это плохая идея, и стоит избегать его использования. Единственный случай, когда это правда необходимо — это разработка компонента, который может работать в обоих, в Stateful и Stateless, режимах. Классический пример это React-овский Input. Он умеет Controlled/Uncontrolled режимы. И ведет себя сильно по-разному.

   
   

3. tryAutoFill ничем не отличается от updateLogin. Т.е. Компонент знает, что какие-то callback-и будут, знает интерфейс, но не имеет представления о реализации

   
   
4. "Умные" компоненты появляются только, когда лень реализовывать правильно.
   

   Не стоит загаживать хранилище такими вещами, иначе потом там сам черт ногу сломит.
   

Неужели вы ни разу не упирались в то, что с каким-то Stateful-компонентом со временным State не удается реализовать нужный сценарий, и приходится много переписывать?
Вас Undo/Redo не беспокоит? Или серверный рендеринг?
Проблемы не надуманы — они реально существуют

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

Я этого не хочу, но я видел, что так делают, а React это позволяет. Это одна из причин, которая заставила задуматься о том, как пресечь это на корню