Рубрика «redux» - 11

Как я свой Redux писал

2017-05-06 в 20:35, admin, рубрики: design patterns, flux, javascript, Model View Controller, react.js, ReactJS, redux, redux-thunk, software architecture, Разработка веб-сайтов

Или Охота на Кракена. В предыдущих заметках (тут и тут) я делился своим Braindump на тему различных архитектурных стилей, в частности Model-View-Controller и Flux.

Я отметил, что не увидел в лице Flux какой-то революции, этот шаблон не что-то новое. Я увидел в нем схожесть с Reenskaug-MVC 1979 года. Также, я упомянул, что решил убрать из своего кода Redux (одна из реализаций Flux). Мне кажется, эти моменты необходимо пояснить более развернуто. Моей целью не было убедить читателя в том, что Flux надо называть MVC, так же я не хотел сказать, что redux-модуль плох и от него нужно полностью отказаться.

Так как же относится тогда к Flux?

Для начала надо определится что же такое Flux. Во-первых это определенно архитектурный стиль, при чем на на данный момент, уже не только для клиентских web-приложений. Во-вторых это набор четко определенных компонентов и терминов.
Читать полностью »

Развёрнутый комментарий Дэна Абрамова к статье «Вещи, о которых никто вам не расскажет про React»

2017-05-05 в 17:40, admin, рубрики: Dan Abramov, React, react-router, ReactJS, redux

Всем привет! Недавно Дэн Абрамов, создатель Redux, оставил довольно массивный комментарий к статье на Medium Things nobody will tell you about React.js, который очень быстро разошёлся популярностью и довольно скоро набрал раза в 3 больше рекомендаций, чем сама статья :)
Собственно, текущая статья является моим переводом его комментария, так как последняя содержит ценные замечания по поводу актуального и будущего состояния React / React Router.
Надеюсь, кому-то это будет полезным.

Привет, спасибо за обратную связь! :)

Я ценю, что вы поделились своим неприятным опытом работы с React.

Ваш пост содержит широко распространенные в React сообществе заблуждения, поэтому мне захотелось воспользоваться моментом и разъяснить их для любого, у кого имеются те же проблемы.

Это вовсе не означает, что React для всех работает одинаково хорошо, или что затронутые вами проблемы неактуальны. Но есть несколько моментов, которые, на мой взгляд, важно обозначить для правильного понимания этих проблем.Читать полностью »

Redux как сердце архитектуры фронтенда Единой фронтальной системы

2017-05-04 в 12:33, admin, рубрики: flux, iOS, javascript, ReactJS, ReactNative, redux, TypeScript, Блог компании Программа «Единая фронтальная система», ефс, мобильная разработка, платформа для мобильной разработки, программа ефс, Программирование, разработка мобильных приложений, Сбертех

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

Читать полностью »

Как мы оптимизировали Twitter Lite

2017-04-27 в 11:29, admin, рубрики: javascript, React, ReactJS, redux, twitter, Twitter Lite, время загрузки, Клиентская оптимизация, оптимизация, Разработка веб-сайтов, разработка мобильных приложений, сервис-воркеры

Twitter Lite и высокопроизводительные прогрессивные веб-приложения на React

Взгляд на то, как удаляли обычные и необычные узкие места в производительности при создании одного из крупнейших в мире прогрессивных веб-приложений (PWA) на React.js — Twitter Lite

Создание быстрого веб-приложения требует многих циклов измерений, куда тратится время. Нужно понять, почему это происходит, и применить потенциальные исправления. К сожалению, не бывает одного простого решения. Производительность — это бесконечная игра, где мы ищем и измеряем области для улучшения. В Twitter Lite сделано много маленьких улучшений в разных сферах: от первоначального времени загрузки до рендеринга компонентов React (и предотвращения повторного рендеринга), загрузки изображений и много другого. Большинство изменений небольшие, но они складываются, и в конечном результате мы получили одно из самых больших и быстрых прогрессивных веб-приложений.
Читать полностью »

React медленный, React быстрый: оптимизация React-приложения на практике

2017-04-25 в 15:53, admin, рубрики: React, ReactJS, recompose, redux, reselect, timeline, оптимизация

Всем привет! Хочу поделиться своим переводом статьи React is Slow, React is Fast: Optimizing React Apps in Practice автора François Zaninotto. Надеюсь, это кому-то будет полезным.

Краткое содержание:

Измерение производительности React
Почему ты обновился?
Оптимизация через разбиение на компоненты
shouldComponentUpdate
Recompose
Redux
Reselect
Остерегайтесь объектных литералов в JSX
Заключение

React может быть медленным. Я хочу сказать, что любое React приложение среднего размера может оказаться медленным. Но прежде, чем искать ему замену, вы должны знать, что и любое среднее приложение на Angular или Ember может также оказаться медленным.

Хорошая новость в том, что если вы действительно заботитесь о производительности, то сделать React приложение очень быстрым довольно легко. Об этом — далее в статье.Читать полностью »

Архитектура модульных React + Redux приложений 2. Ядро

2017-04-24 в 7:04, admin, рубрики: javascript, React, redux, Анализ и проектирование систем, модульное программирование, Проектирование и рефакторинг, Разработка веб-сайтов

В первой части я уделил внимание только общей концепции: редюсеры, компоненты и экшны чаще меняются одновременно, а не по отдельности, поэтому и группировать и их целесообразнее по модулям, а не по отдельным папкам actions, components, reducers. Также к модулям были предъявлены требования:

быть независимыми друг от друга
взаимодействовать с приложением через API ядра

В этой части я расскажу о структуре ядра, подходящей для разработки data-driven систем.Читать полностью »

Архитектура модульных React + Redux приложений

2017-04-14 в 0:27, admin, рубрики: javascript, modules, React, react-router, redux, redux-thunk, Анализ и проектирование систем, Проектирование и рефакторинг, Разработка веб-сайтов

Архитектура модульных React + Redux приложений - 1
Большинство разработчиков начинает знакомство с Redux с Todo List Project. Это приложение имеет следующую структуру:

actions/
  todos.js
components/
  todos/
    TodoItem.js
    ...
constants/
  actionTypes.js
reducers/
  todos.js
index.js
rootReducer.js

На первый взгляд такая организация кода кажется логичной, ведь она напоминает стандартные соглашения многих backend MVC-фреймворков:

app/
  controllers/
  models/
  views/

На самом деле, это неудачный выбор как для MVC, так и для React+Redux приложений по следующим причинам:

С ростом приложения следить за взаимосвязью между компонентами, экшнами и редюсерами становится крайне сложно
При изменении экшна или компонента с большой вероятностью потребуется внести изменения и в редюсер. Если количество файлов велико, скролить IDE вверх/вниз не удобно
Такая структура потворствует копипасте в редюсерах

Не удивительно, что многие авторы(раз, два, три) советуют структурировать приложение по «функциональности» (by feature).Читать полностью »

Введение в React и Redux для бекенд-разработчиков

2017-04-10 в 22:40, admin, рубрики: babel, javascript, npm, React, ReactJS, redux, Разработка веб-сайтов

Введение в React и Redux для бекенд-разработчиков - 1
Если вы как я долгое время считали, что JavaScript – это такой «игрушечный» язык на котором пишут анимашки для менюшек и падающий снежинки на форумах под новый год, а потом очнулись в 2016 году с мыслями WTF: react, flux redux, webpack, babel,… не отчаивайтесь. Вы не одиноки. Материалов по современному фронтенду в сети много, даже слишком много. Под катом еще одно альтернативное мнение о том, каково это учить JavaScript в 2016 году.
Читать полностью »

Все новое — это хорошо забытое старое

2017-04-10 в 8:23, admin, рубрики: AngularJS, braindump, Facebook, flux, IT-стандарты, java, javascript, model-view-presenter, mvc, mvp, React, ReactJS, redux, trygve

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

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

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

Эволюция на React+Redux

2017-04-07 в 7:21, admin, рубрики: Gamedev, javascript, node.js, nodejs, open source, React, ReactJS, redux, настольные игры, разработка игр

КДПВ

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