Post mortem: cледи за middleware или как мы сломали комментарии

В мобильной версии (андроид) частенько невозможно голосовать за статью. Кнопок-стрелок просто нет.

Размыкаем замыкания и внедряем Dependency Injection в JavaScript

Я — библиотечный. И пачки тестов на него. Поэтому такая проф. деформация

Размыкаем замыкания и внедряем Dependency Injection в JavaScript

То, что вы говорите, справедливо для разработки приложения, решения прикладных задач. Но для разработки библиотеки — не факт. Авторы многих npm-пакетов жертвуют читаемостью ради тестов.

Размыкаем замыкания и внедряем Dependency Injection в JavaScript

Это вы еще DI на классах и декораторах не видели :) www.npmjs.com/package/@decorators/di

Размыкаем замыкания и внедряем Dependency Injection в JavaScript

В целом соглашусь с вами.

комбинаторный взрыв никуда не исчезает

варианты A и B ниже имеют одинаковое количество состояний

Но юнит-тесты не гарантируют работоспособность программы в целом, только её кусочков. (см. примечание автора про терминологию). Юнит-тестов все-таки получится меньше.

А если же мы хотим протестировать весь модуль, то должны на него писать функциональные тесты. А в функциональных тестах можно и ограничиться основными use-case-ами.

Размыкаем замыкания и внедряем Dependency Injection в JavaScript

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

CQRS: принцип «разделяй и властвуй» на службе у программиста

JavaScript, CQRS, EventSourcing, websocket-ы, условный todo-list github.com/reimagined/resolve/tree/master/examples/shopping-list

Возвращение Geektimes на Хабр

Пользуясь случаем — очень ждем фичу «Несколько авторов у одной статьи»! Удачи Хабр!

Четыре уровня одностраничных приложений, о которых вам нужно знать

Так медленно не создание новой функции. Медленно отрывать от DOM узла одну функцию и всаживать другую.

Четыре уровня одностраничных приложений, о которых вам нужно знать

Нужно создавать заранее замкнутые на props колбеки и дальше уже их всем кому надо прокидывать.
В React-Redux из коробки есть connectAdvanced для таких вещей https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples-1

Четыре уровня одностраничных приложений, о которых вам нужно знать

Ещё вот это антипаттерн:

<button onClick={() => likeArticle(article)} />

На каждый рендеринг компонента создается новая функция, и изменения доходят вплоть до настоящего DOM браузера, а это дорого.

Четыре уровня одностраничных приложений, о которых вам нужно знать

Презентационные компоненты знают о домене и сервисах. Так быть не должно.

// ArticleComponent.js:

import type {Article} from "../domain/Article";
import * as articleUiService from "../services/ArticleUiService";

Почитайте Дэна Абрамова https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0. Он определяет чёткие признаки, того чем Контейнеры о Компонентов отличаются.

// ArticleContainer.js:

import {articleStore} from "../store/ArticleStore";

Для серьезного проекта это тоже неуместно. Получается, что articleStore это глобальный объект. И это работает только потому, что один браузер — один инстанс store. Если захочется, сделать Server Side Rendering, то придется весь код выбрасывать. Ибо там один инстанс сервера — множество инстансов store. Рекомендуется для пробрасывания store использовать Context API .

Hyperapp для беженцев с React/Redux

Хочу обратить внимание, что я не автор. А это перевод.
Но с React/Redux работаю давно. И архитектура React не позволит некоторые "упрощения" hyperapp реализовать. Например, автоматический биндинг action creators сделать не получится без каких-то серьезных проломов и глобальных переменных. Максимум, что-то похожее можно отыскать тут redux-actions.
А в остальном вы правы, что-то похожее можно и на React/Redux изобразить, если приложить усилий. Думаю, в hyperapp упор именно на "изкоробочность".

Hyperapp для беженцев с React/Redux

По-идее — в объекте actions будут лежать обертки, которые не требуют ручной передачи state

Hyperapp для беженцев с React/Redux

1. Интерфейс дергает upLater
2. upLater ждет секунду и дергает up
3. up меняет state
4. Интерфейс обновляется

Hyperapp для беженцев с React/Redux

Fixed

Hyperapp для беженцев с React/Redux

Как-то так:

const actions = {
  upLater: value => (state, actions) => {
    setTimeout(actions.up, 1000, value)
  },
  // Called one second after upLater
  up: value => state => ({ count: state.count + value })
}

P.S. — добавил пример в текст статьи

Hyperapp для беженцев с React/Redux

Может и сложновато, зато единообразно во всех приложениях всегда. Для кого-то это будет плюсом

Hyperapp для беженцев с React/Redux

То, что только рут компонент является "умным", а все дочерние "глупыми" — нормально. Многие и на React/Redux так пишут

Книга «React и Redux: функциональная веб-разработка»

Одному из первых довелось прочитать эту книгу. Хорошее руководство для начинающего frontend-разработчика. Здесь обо всём понемногу. Для быстрого старта это самое то.
Свежий React+Redux на практике; Введение в функциональное программирование; Новый синтаксис ES6, JSX; Общие сведения про тестирование и линтинг (Jest + ESLint); Новый React-Router (v4); И даже раскрыта тема изоморфных приложений и Server Side Rendering.