Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «rtsi»
[Из песочницы] Redux: попытка избавиться от потребности думать во время запросов к API 2017-06-07 13:57:34
И в чем же проблема?
Я начал изучать React и Redux не ...
+ развернуть текст сохранённая копия
И в чем же проблема?
Я начал изучать React и Redux не так давно, но он уже успел изрядно потрепать мне нервы. Буквально над каждым действием приходится задумываться — почти никакие изменения в коде невозможны без того, чтоб что-то оторвать. Чтоб просто получить список постов по API и вывести их, надо, пожалуй, написать не меньше сотни строк кода — создать корневой контейнер, создать store, добавить action для запроса к API, для успешного результата запроса, для неудачного результата запроса, создать action-creators, сматчить action-creators и props, сматчить dispatch и props, написать reducer на каждый action… Ух, продолжать не хочется. И все это мы должны делать заново для каждого веб-приложения — крайне нерациональная трата сил программиста.
Да, можно сказать новичку: "Смотри, тут десяток пакетов, которые могут сделать каждое действие из этого списка вместо тебя. Выбирай и пользуйся!" Но проблема в том, что надо разобраться в настройке и воспользоваться десятком пакетов, позаботившись о том, чтоб они совпадали с версией, которая описана в документации и не вступали друг с другом в конфликты… Слишком сложно. Хочется чего-то проще, такого же простого, как в мире Django, из которого я пришел. Какой-то один пакет, после установки которого в store сами по волшебству складываются все нужные данные — бери и пользуйся.
Ну, я и решил — если такого решения нет, напишу-ка я его сам.
Постановка задачи
Убирая всю лирику из первого абзаца, получаю задачу — нам нужно создать инструмент, который будет:
- Делать асинхронный GET-запрос к REST API.
- Анализировать полученные данные и данные, лежащие в store, и, если там не хватает связанных по foreign key данных, делать еще запросы.
- Складывать полученные данные в store и следить за актуальностью хранящихся данных.
По описанию выходит, что состоять пакет будет из action creator'а, middleware и reducer'а. Читать дальше →
Тэги: api, es6, javascript, middleware, npm, react, reactjs, redux, веб-сайтов, разработка
Как я свой Redux писал 2017-05-06 23:35:42
Или Охота на Кракена. В предыдущих заметках (тут и тут) я делился своим Braindump на тему ...
+ развернуть текст сохранённая копия
Или Охота на Кракена. В предыдущих заметках (тут и тут) я делился своим Braindump на тему различных архитектурных стилей, в частности Model-View-Controller и Flux.
Я отметил, что не увидел в лице Flux какой-то революции, этот шаблон не что-то новое. Я увидел в нем схожесть с Reenskaug-MVC 1979 года. Также, я упомянул, что решил убрать из своего кода Redux (одна из реализаций Flux). Мне кажется, эти моменты необходимо пояснить более развернуто. Моей целью не было убедить читателя в том, что Flux надо называть MVC, так же я не хотел сказать, что redux-модуль плох и от него нужно полностью отказаться.
Так как же относится тогда к Flux?
Для начала надо определится что же такое Flux. Во-первых это определенно архитектурный стиль, при чем на на данный момент, уже не только для клиентских web-приложений. Во-вторых это набор четко определенных компонентов и терминов.
Читать дальше →
Тэги: architecture, controller, design, flux, javascript, model, patterns, react.js, reactjs, redux, redux-thunk, software, view, веб-сайтов, разработка
[Перевод] Как мы оптимизировали Twitter Lite 2017-04-27 14:29:00
Twitter Lite и высокопроизводительные прогрессивные веб-приложения на React
 + развернуть текст сохранённая копия
Twitter Lite и высокопроизводительные прогрессивные веб-приложения на React
Взгляд на то, как удаляли обычные и необычные узкие места в производительности при создании одного из крупнейших в мире прогрессивных веб-приложений (PWA) на React.js — Twitter Lite
Создание быстрого веб-приложения требует многих циклов измерений, куда тратится время. Нужно понять, почему это происходит, и применить потенциальные исправления. К сожалению, не бывает одного простого решения. Производительность — это бесконечная игра, где мы ищем и измеряем области для улучшения. В Twitter Lite сделано много маленьких улучшений в разных сферах: от первоначального времени загрузки до рендеринга компонентов React (и предотвращения повторного рендеринга), загрузки изображений и много другого. Большинство изменений небольшие, но они складываются, и в конечном результате мы получили одно из самых больших и быстрых прогрессивных веб-приложений.
Читать дальше →
Тэги: javascript, lite, react, reactjs, redux, twitter, веб-сайтов, время, загрузки, клиентская, мобильных, оптимизация, приложений, разработка, сервис-воркеры
Архитектура модульных React + Redux приложений 2. Ядро 2017-04-24 10:04:48
В первой части я уделил внимание только общей концепции: редюсеры, компоненты и экшны чаще меняются ...
+ развернуть текст сохранённая копия
В первой части я уделил внимание только общей концепции: редюсеры, компоненты и экшны чаще меняются одновременно, а не по отдельности, поэтому и группировать и их целесообразнее по модулям, а не по отдельным папкам actions, components, reducers. Также к модулям были предъявлены требования:
- быть независимыми друг от друга
- взаимодействовать с приложением через API ядра
В этой части я расскажу о структуре ядра, подходящей для разработки data-driven систем. Читать дальше →
Тэги: javascript, react, redux, анализ, веб-сайтов, модульное, программирование, проектирование, разработка, рефакторинг, систем
Архитектура модульных React + Redux приложений 2017-04-14 03:27:24
...
+ развернуть текст сохранённая копия
Большинство разработчиков начинает знакомство с 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). Читать дальше →
Тэги: javascript, modules, react, react-router, redux, redux-thunk, анализ, веб-сайтов, проектирование, разработка, рефакторинг, систем
Главная / Главные темы / Тэг «rtsi»
|
Взлеты Топ 5
Падения Топ 5
|
