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

image Привет, Хаброжители! В декабре мы издали книгу Алекса Бэнкса и Евы Порселло, цель которой — научить писать эффективные пользовательские интерфейсы при помощи React и систематизация новых технологий, позволяющая сразу же приступить к работе с React. Чтение книги не предполагает никаких предварительных знаний React. Все основы библиотеки будут представлены с самого начала. Сейчас мы рассмотрим раздел «Управление состоянием React»

До сих пор свойства использовались только для обработки данных в компонентах React. Свойства имеют неизменяемый характер. После отображения свойства компонента не изменяются. Чтобы изменить пользовательский интерфейс, понадобится другой механизм, способный заново отобразить дерево компонента с новыми свойствами. Состояние React является его неотъемлемой частью, предназначенной для управления данными, которые будут изменяться внутри компонента. Когда состояние приложения меняется, пользовательский интерфейс отображается заново, чтобы отразить эти нововведения.
Читать дальше →

Restate — или как превратить бревно Redux в дерево

История развития IT намного интереснее любой мыльной оперы, но пересказывать ее мы не будем. Скажем только, что были свидетили принципа «data-driven», адреналинщики с two-way-binding и беспредельщики без принципов и понятий.
Бог создал людей сильными и слабыми. Сэмюэл Кольт сделал их равными.
Примерно тоже самое сделали Flux и Redux.

Была только одна проблема — Redux по сути своей крайне примитивная хреновина, и чтобы с ним хоть как-то работать надо было добавить парочку middleware — thunk, saga, observable и так далее.

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


Читать дальше →

[Перевод] Управление состоянием в Polymer 2.0. За пределами parent/child биндингов

Организуем общее состояние между разделенными DOM-элементами без Redux


Чтобы продемонстрировать то, насколько фреймворк прост в использовании и то, насколько продуктивно вы будете с ним работать, предоставляемые примеры часто сознательно упрощаются так, чтобы соответствовать простым ситуациям. В упрощениях есть смысл при обучении людей, но иногда они могут оставить пробел в знаниях в тех случаях, когда вам нужно будет выйти за рамки тривиального и начать создавать более сложные, реальные приложения.
Читать дальше →

[recovery mode] redux-refine — простая радость перфекциониста

image


Скажите, люди, я один испытываю небольшой душевный зуд
от необходимости писать нечто вот эдакое? :


export const ADD_TODO = 'ADD_TODO'
export const DELETE_TODO = 'DELETE_TODO'
export const EDIT_TODO = 'EDIT_TODO'
export const COMPLETE_TODO = 'COMPLETE_TODO'
export const COMPLETE_ALL = 'COMPLETE_ALL'
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'

Я почему то думаю, что нет и иногда встречая в чьём то коде


if (action.type === ADD_TODO) {
  // ...
}

вместо ядрёного switch — case, я понимаю, что не единственный такой я на свете перфекционист, страдающий от этого "чуть-чуть не так как надо" в классическом Redux


Если Вам, уважаемый читатель, знакома эта боль, возрадуйтесь! под катом есть лекарство всего в две строчки кода :)

Читать дальше →

Изоморфное приложение React JS + Spring Boot



Про ReactJs, Java, Spring, рендеринг, Virtual DOM, Redux и прочие подобные вещи уже существует очень много всевозможных статей и практических наработок, поэтому я не буду в них углубляться.

Я не замерял производительность этой конструкции. Те кому интересно, могут провести свои личные тесты и сравнить например с NodeJS.

Я не особо заморачивался на стиле и качестве кода, так что извиняйте, кому не придётся по душе =)

Цель моей работы просто заставить работать воедино такие вещи как ReactJS + Redux + WebPack + Java/Spring.

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

С радостью исполняю желание читателей.
Читать дальше →

Удобное использование Redux в vue-компонентах

vue mixinsНедавно перешел с PolymerJS на VueJS для некоторых задач. Совместно с polymer использовал Redux через библиотеку polymer-redux. Поэтому вся бизнес-логика уже была сформирована на уровне redux store. Для связки vue и redux выбрал библиотеку vuedeux. В awesome vue в разделе redux представлена еще одна библиотека для связки с redux — revue, но мне показалось эффективней использовать именно vuedeux, за счет интеграции redux store непосредственно в «свой redux» для vue — vuex, для возможного использования его в будущем. После создание vuex store, используя плагин vuedeux доступ к необходимым разделам redux store может быть осуществлен через computed свойства экземпляра vue-компонента. Например, вот так(часть кода ...Далее...

[Перевод] Сокращаем использование Redux кода с помощью React Apollo

Всем привет! Хочу поделиться своим переводом интересной статьи Reducing our Redux code with React Apollo автора Peggy Rayzis. Статья о том, как автор и её команда внедряли технологию GraphQL в их проект. Перевод публикуется с разрешения автора.

Сокращаем использование Redux кода с помощью React Apollo Переключаемся на декларативный подход в Высшей Футбольной Лиге

Я твёрдо убеждена, что лучший код — это отсутствие кода. Чем больше кода, тем больше вероятности для появления багов и тем больше тратится времени на поддержку такого кода. В Высшей Футбольной Лиге у нас совсем небольшая команда, поэтому мы принимаем этот принцип близко к сердцу. Мы стараемся оптимизировать всё, что нам по силам, либо путём увеличения переиспользуемости кода, либо просто перестав обслуживать определённую часть кода.

В данной статье вы узнаете о том, как мы передали контроль над получением данных в Apollo, что позволило нам избавиться от почти 5,000 строчек кода. К тому же, после перехода на Apollo наше приложение стало не только намного меньше по объёму, оно также стало более декларативным, поскольку теперь наши компоненты запрашивают только те данные, которые им нужны.

...Далее...

Redux: попытка избавиться от потребности думать во время запросов к API, часть 2

Мы хотим создать пакет, который позволит нам избавиться от постоянного создания однотипных reducer'ов и action creator'ов для каждой модели, получаемой по API.


Первая часть — вот эта вот статья. В ней мы создали конфиг для нашего будущего пакета и выяснили, что он должен содержать action creator, middleware и reducer. Приступим к разработке!

Читать дальше →

Как сделать жизнь Redux разработчика проще?

Наверняка многие из вас, кто постоянно работают с React + Redux (а может не только с React), постоянно совершают множество однотипных действий. В оригинальном исполнении задача эта монотонная и включает в себя постоянное создание экшенов и редюсеров. Тем более, если приходится работать с какими-то экстраординарными кейсами, в игру включаются экшены с префиксами.
Ваш покорный слуга также испытал очень много батхерта страданий, пока работал по старинке, через switch -> case, но я взглянул на задачу немного с другой стороны и привёл к единообразию это в более удобную функционально — объектную форму записи.
И так — после некоторого времени я (master-7) и мой коллега (one-more) попробовали справиться с этим страшным сном фронтэндера и создали весьма интересную библиотечку Redux-Utils
Конечно же, мы попытались написать общепонятное и исчерпывающее ридми, но для затравки — несколько примеров в статье.

Читать дальше →

[Из песочницы] Все новое — это хорошо забытое старое

Вереница фреймворков и библиотек по очереди восседающих на троне трендов JavaScript мира это уже не новость. Разработчики из других областей даже подшучивают над нами на этот счет.

Вот и мне, в процессе работы, пришлось попрыгать по различным библиотекам и фреймворкам — qooxdoo, jQuery, Ext JS, Backbone.js, Knockout.js, Ember.js, Angular, React.

Не всегда выбор того или иного фреймворка был добровольный, модель outsource и outstaffing накладывает определенные ограничения на мою работу. Я думаю люди из этой же области поймут меня.
Читать дальше →


Последние посты