Реализации Flux, такие как Redux, мотивируют нас уделять больше внимания проектированию состояния приложения. Оказывается, это нетривиальная задача. Это похоже на классический пример из теории хаоса, когда, казалось бы, безобидный взмах крыльев бабочки ведёт к далеко идущим последствиям. Ниже приведены советы, которые помогут вам лучше организовать состояние приложения.
Читать полностью »
Рубрика «redux» - 13
Как избежать излишней сложности состояния приложения [перевод]
2016-11-24 в 16:12, admin, рубрики: flux, React, ReactJS, redux, state, Проектирование и рефакторингReact.js на русском языке. Часть третья
2016-11-21 в 8:01, admin, рубрики: javascript, mongodb, node.js, php, react.js, ReactJS, reduxПеревод официальной документации библиотеки React.js на русском языке.
Оглавление:
1 — Часть первая
2 — Часть вторая
3 — Часть третья
Отрисовка элементов
Элементы являются самыми мелкими компонентами приложения. Элемент описывает то, что вы хотите увидеть на экране:
const element = <h1>Hello, world</h1>;
В отличие от DOM-элементов браузера, элементы React являются простыми объектами, которые создаются проще. React DOM постоянно следит за обновлением элементов в DOM.
Примечание:
Элементы можно перепутать с более широким понятием, таким как «компоненты». В следующем разделе мы изучим компоненты. Элементы являются строительным материалом для компонентов и прежде, чем двигаться дальше, мы советуем вам ознакомиться с этим разделом.
React.js на русском языке. Часть вторая
2016-11-18 в 21:33, admin, рубрики: javascript, mongodb, node.js, php, react.js, ReactJS, reduxПеревод официальной документации библиотеки React.js на русском языке.
Оглавление:
1 — Часть первая
2 — Часть вторая
Внедрение JSX
Ознакомьтесь с этим объявлением переменных:
const element = <h1>Hello, world!</h1>;
Этот забавный синтаксис тега не представляет собой ни строку, ни HTML. Он называется JSX и представляет собой расширение языка в JavaScript. Мы рекомендуем использовать его при работе с React, чтобы описать как должен выглядеть UI. JSX может напоминать вам HTML разметку, но он полноценно работает в JavaScript.
JSX производит «элементы» React. В следующем разделе мы будем изучать их.
Читать полностью »
Использование ES6 генераторов на примере koa.js
2016-10-13 в 18:00, admin, рубрики: ES6, javascript, koa, koa.js, node.js, redux, Блог компании DataArt, генераторы, итераторы, фронтенд
Автор: Александр Трищенко, Senior Front-end Developer, DataArt
Содержание:
• Итераторы. Генераторы.
• Использование генераторов (Redux, Koa)
• Зачем нам использовать koa.js
• Будущее. Async Await и koa.js 2.x
Генераторы — новая спецификация, новая возможность, которую мы можем использовать в ECMAScript 6. Статью я начну с рассказа об итераторах, без которых понять генераторы не получится, расскажу непосредственно про спецификацию и о том, что такое генераторы вообще, про их использование в реальных кейсах. Рассмотрим два примера: React + Redux как фронтненд-случай и koa.js в качестве бэкенда. Затем подробнее остановлюсь на koa.js, будущем JavaScript, на асинхронных функциях и koa.js 2.Читать полностью »
DBGlass — Open-Source кросс-платформенный PostgreSQL GUI клиент
2016-10-07 в 17:32, admin, рубрики: electron, javascript, postgresql, React, ReactJS, reduxВсем привет!
Только что выложили бету DBGlass PostgreSQL GUI клиент — https://github.com/web-pal/DBGlass.
Стандартные функции клиента — просмотр и редактирование данных.
К сожалению мы не являемся специалистами в области баз данных и PostgreSQL, явно упустили важный функционал или особенности работы базы. Будем рады фидбэку или пулл реквестам.
Для тех, кто не знаком с интерфейсом гитхаба, скачать бинарники можно тут — http://dbglass.web-pal.com
Redux Action Creators. Без констант и головной боли
2016-09-26 в 9:35, admin, рубрики: front-end development, front-end разработка, javascript, npm, React, ReactJS, redux, Разработка веб-сайтовВсем привет! Эта статья будет полезна тем, кто устал использовать constants в Redux (частично показано на превью выше). Под катом я покажу очередной возможный велосипед и как на нем кататься.
React.js: собираем с нуля изоморфное – универсальное приложение. Часть 2: добавляем bootstrap, страницы и роутинг
2016-09-21 в 7:36, admin, рубрики: Bootstrap, isomorphic, javascript, node.js, react-router, react.js, ReactJS, reduxРазработка изоморфного приложения глазами моей жены
Это продолжение статьи про разработку изоморфного приложения с нуля на React.js. В этой части мы добавим несколько страниц, bootstrap, роутинг, концепцию Flux и ее популярную реализацию Redux.
Нянчим проект на React-redux с пелёнок
2016-09-21 в 7:28, admin, рубрики: javascript, React, ReactJS, redux, архитектура проектов, Блог компании HeadHunter, Программирование
В начале этого года мы в HeadHunter начали проект, нацеленный на автоматизацию различных HR-процессов у компаний-клиентов. Архитектурой этого проекта на фронте выбрали React-Redux стек.
За 9 месяцев он вырос из небольшого приложения для тестирования сотрудников в многомодульный проект, который сегодня называется “Оценка талантов”. По мере его роста мы сталкивались с вопросами:
- хранения стейта, его нормализации;
- построения масштабируемой архитектуры проекта, удобной иерархии — как в структуре, так и в бизнес-логике.
Это проявлялось в изменении подхода к построению компонентов, архитектуры редьюсеров.
Давайте поговорим о том, как мы развивали проект и какие решения принимали. Некоторые из них могут оказаться “холиварными”, а другие, напротив, “классикой” в построении большого проекта на redux. Надеюсь, что описанные ниже практики помогут вам при построении react-redux приложений, а живые примеры помогут разобраться, как работает тот или иной подход.
Читать полностью »
Доводы в пользу function tree
2016-09-18 в 20:50, admin, рубрики: AngularJS, cerebraljs, functions, javascript, pure functions, ReactJS, redux, side effects, state, функциональное программированиеВ этой статье мы поговорим о написании хорошего кода и о проблемах, с которыми мы при этом сталкиваемся. Понятный, декларативный, компонуемый и тестируемый — эти термины употребляются, когда речь заходит о написании хорошего кода. Решением проблем часто называют чистые функции. Но написание веб-приложений, в основном, связано с побочными эффектами и сложными асинхронными потоками операций, концепциями, которые по своей сути не являются чистыми. Ниже описан подход, который позволяет охватывать работу с побочными эффектами и сложными асинхронными потоками, сохраняя преимущества чистых функций.
Написание хорошего кода
Чистые функции — Святой Грааль в написании хорошего кода. Чистая функция — это функция, которая при одинаковых аргументах всегда возвращает одни и те же значения и не имеет видимых побочных эффектов.
function add(numA, numB) {
return numA + numB
}
Полезным свойством чистых функций является то, что их легко тестировать.
test.equals(add(2, 2), 4)
Компонуемость тоже является их сильной стороной.
test.equals(multiply(add(4, 4), 2), 16)
К тому же их очень легко использовать декларативно.
const totalPoints = users
.map(takePoints)
.reduce(sum, 0)
Но давайте взглянем на ваше приложение. Какая его часть действительно может быть выражена чистыми функциями? Насколько часто речь идёт о преобразовании значений, которые традиционно выполняют чистые функции? Могу предположить, что большая часть вашего кода работает с побочными эффектами. Вы выполняете сетевые запросы, DOM манипуляции, используете вебсокеты, локальные хранилища, изменяете состояние приложения и так далее. Это всё описывает разработку приложения, по крайней мере в Интернете.Читать полностью »
10 особенностей Webpack
2016-09-05 в 13:07, admin, рубрики: framework, javascript, JS, React, ReactJS, redux, webpack, Блог компании Plarium, джаваскрипт, Программирование, разработка мобильных приложений, фреймфорк, фреймфоркиWebpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.