Наша цель, написать offline-first приложение — SPA которое загружается и сохраняет полную функциональность в отсутствии интернет-соединения. В первой части повествования мы научились пользоваться браузерной базой данных. Сегодня мы настроим синхронизацию с серверной бд и подключим авторизацию. В результате мы получим возможность редактировать наши данные на разных устройствах даже в оффлайне с последующей синхронизацией при появлении соединения.
Рубрика «ReactJS» - 55
Offline-first приложение с Hoodie & React. Часть вторая: авторизация
2016-09-09 в 10:14, admin, рубрики: couchdb, hoodie, javascript, pouchdb, react.js, ReactJS, Разработка веб-сайтовСтроим свой full-stack на JavaScript: Основы
2016-09-09 в 0:44, admin, рубрики: contoso-express, express.js, full-stack apps, javascript, node.js, postgresql, React, ReactJS, sequelize, TypeScript, vue.js, Проектирование и рефакторингСтроим свой full-stack на JavaScript
В мире JavaScript очень легко набрать свой стек технологий, используя набор небольших пакетов, каждый из которых решают свою конкретную проблему. И это хорошо, c одной стороны, а с другой стороны, у вас особо нет выбора — фреймворки которые выполняют широкий спектр задач в JavaScript не популярны.
В этом цикле статей я хочу поделиться своим практическим опытом построения JS стека.
Offline-first приложение с Hoodie & React. Часть первая: браузерная база данных
2016-09-07 в 15:50, admin, рубрики: hoodie, javascript, pouchdb, ReactJS, Разработка веб-сайтов, метки: offline-firstСовременный веб позволяет решать часть задач которые раньше были прерогативой нативных мобильных приложений. Мы с вами создадим веб-приложение (сайт) которое будет загружаться и сохранит полную функциональность даже в отсутствии интернета, а при его появлении автоматически синхронизируется с сервером. На мобильном устройстве для такого приложения достаточно создать ярлык и в плане автономности мы получим аналог нативного приложения.
Мы напишем подобие todo-листа, с одним отличием: "выполненные" задачи будут не удаляться, а переноситься в конец списка и по мере решения остальных задач всплывать вверх. Такой список удобно использовать для повторяющихся вещей, таких как различные спортивные активности, развлечения, еда и т.п. Одна моя социально-реализованная знакомая использует его, чтобы равномерно поддерживать контакт с многочисленной популяцией своей френдзоны.
То, что получится в результате можно посмотреть тут. Попробуйте внести некоторые изменения, закрыть вкладку, отключить интернет и снова открыть сайт. Вы обнаружите, что он открывается и сохраняет полную функциональность. Если вы залогинитесь на разных устройствах и внесёте изменения в оффлайне, по восстановлении соединения изменения синхронизируются интуитивно ожидаемым образом.
Вы удивитесь насколько мало кода нам потребуется для реализации этого функционала.
Привет! Предлагаю вашему вниманию свободный перевод статьи «React Patterns» Майкла Чана, с некоторыми моими примечаниями и дополнениями.
Прежде всего хотел бы поблагодарить автора оригинального текста. В переводе я использовал понятие «Простой компонент» как обозначение Stateless Component aka Dump Component aka Component vs Container
Конструктивная критика, а так же альтернативные паттерны и фичи React приветствуются в комментах.
Оглавление
- Простые компоненты — Stateless function
- JSX распределение атрибутов — JSX Spread Attributes
- Деструктуризация аргументов — Destructuring Arguments
- Условный рендеринг — Conditional Rendering
- Типы потомков — Children Types
- Массив как потомок — Array as children
- Функция как потомок — Function as children
- Функция в render — Render callback
- Проход по потомкам — Children pass-through
- Перенаправление компонента — Proxy component
- Стилизация компонентов — Style component
- Переключатель событий — Event switch
- Компонент-макет — Layout component
- Компонент-контейнер — Container component
- Компоненты высшего порядка — Higher-order component
Поехали!
Читать полностью »
Решаем головоломки шаманов в World of Warcraft генетическим алгоритмом
2016-09-06 в 21:31, admin, рубрики: javascript, ReactJS, world of warcraft, Алгоритмы, генетический алгоритм, головоломки, Программирование, разработка игр
Привет, Хабражитель!
Не так давно, вышло очередное дополнение World of Warcraft Legion. Первым делом я принялся прокачивать шамана. В оплоте шаманов я забрел к Мастеру головоломок Ло и увидел то, что вы подумали — головоломку.
Передо мной был квадрат из огненных и водных тотемов 5 на 5, после того как кликаешь на тотем, он меняется на противоположный, например водный на огненный или огненный на водный и так же меняет соседние тотемы сверху, снизу, слева и справа. Необходимо сделать так, что бы все тотемы стали водными. После первого клика я понял, что срочно нужно написать решение для этой классной головоломки.
Что из этого получилось, читай под катом.
10 особенностей Webpack
2016-09-05 в 13:07, admin, рубрики: framework, javascript, JS, React, ReactJS, redux, webpack, Блог компании Plarium, джаваскрипт, Программирование, разработка мобильных приложений, фреймфорк, фреймфоркиWebpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.
RxConnect — когда React встречает RxJS
2016-09-05 в 11:58, admin, рубрики: javascript, React, reactive, ReactJS, redux, rx, rxjsДанный перевод является русскоязычной интерпретацией документации, которую я сам и написал, поэтому не стесняйтесь задавать вопросы.
Введение
Обрабатывать пользовательский ввод может быть не так просто, как кажется. Мы же не хотим отправлять запросы на сервер пока пользователь всё ещё набирает свой запрос? И, конечно же, пользователь должен всегда видеть результат на последний запрос, который он отослал.
Существуют разные способы реагирования на интерактивные события в React приложениях, и, по моему мнению, реактивный подход (благодаря таким библиотекам, как RxJS или Bacon) — один из самых лучших. Вот только для того, чтобы использовать RxJS и React одновременно, Вам придётся иметь дело с жизненным циклом React компонента, вручную управлять подписками на потоки и так далее. Хорошая новость — всё это можно делать автоматически с помощью RxConnect — библиотеки, разработанной в процессе миграции с Angular на React в ZeroTurnaround.
Webpack + React. Как уменьшить бандл в 15 раз
2016-08-31 в 11:37, admin, рубрики: javascript, javascript webpack reactjs, node.js, ReactJS, метки: javascript webpack reactjs
Ясной инструкции по сборке webpack для продакшена я не нашел. Поэтому решил написать эту статью. Надеюсь, пригодится. Существует множество сборщиков скриптов. Я выбрал для себя Webpack по таким критериям:
- Гибкость настройки
- Большое количество плагинов и лоадеров
- Lazy loading
- Использование es6 и es7 синтаксиса с помощью babel-loader
Из недостатков я бы выделил отсутствие ясной документации. Для тех, кто никогда не сталкивался с Webpack, я рекомендую скринкаст от Ильи Кантора. В данной статье хочу рассказать о настройках сборки проекта, написанного на React + Redux.
Я не буду углубляться в основы, а расскажу, какие плагины использую для сборки.
Читать полностью »
Выбираем состав изоморфных React-приложений на следующие 12 месяцев
2016-08-29 в 15:58, admin, рубрики: boilerplate, eslint, javascript, node.js, npm, ReactJS, redux, starter kit, webpackДрузья, уже шесть часов вечера, последний понедельник августа, а это значит — последняя неделя лета. Давайте подведём итог и немного пофантазируем?
Сейчас формируем некий Isomorphic React App бойлерплейт на следующие 12 месяцев, с которым можно быстро стартовать новые проекты. Пока видим такой набор:
1. React 15.
2. На сервере — Node.js и Express.
3. CSS modules и isomorphic-style-loader для автоматической генерации Critical CSS при Server-side Rendering. Или всё-таки JSS? Читать полностью »
Год использования ReactJS: подводим итоги
2016-08-22 в 9:18, admin, рубрики: ReactJS, Блог компании Voximplant, откровения о ReactJS, Программирование, Разработка веб-сайтов, Тестирование веб-сервисов, метки: откровения о ReactJS
React мы в Voximplant любим и ценим. Вовсе не из-за хайпа (полторы тысячи твитов о новом SDK просто потому, что это React Native) а потому, что фреймворк действительно удобный. Простое дробление интерфейса на маленькие изолированные кусочки – это то, чего так не хватало и Jade/Pug, и Web Components, и даже Angular. Под катом адаптированный перевод статьи, в которой разработчики JetRuby Agency делятся впечатлениями о React: что использовали, что не использовали и что еще только планируют использовать.
Читать полностью »