Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

27 августа приглашаем на онлайн-митап Hot Frontend

Информационная безопасность *Разработка веб-сайтов *ВКонтакте API *Конференции Дизайн игр *
Всем привет! В июле мы провели в Краснодаре первый митап по Backend-технологиям – а теперь самое время обсудить Frontend. Приглашаем на онлайн-митап с разработчиками SimbirSoft. Как всегда, участие бесплатное, а за самые интересные вопросы спикеры подарят полезные подарки.

Читать дальше →
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 911
Комментарии 0

Изоморфное Приложение с React и Redux

JavaScript *ReactJS *
Перевод
Итак, я знаю что ты любишь Todo списки, то есть, что тебе очень нравится писать Todo списки, поэтому мне хочется, чтобы ты создал один из них, используя новый, восхитительный и питательный («nutritious» прим. пер.) Flux фреймворк, Redux! Я желаю тебе только лучшего.

В этой статье ты научишься как сконструировать свое собственное Redux приложение, не ограничиваясь, но так же включая.

  • Цельнозерновой рендеринг на сервере
  • Расширенный роутинг, богатый Omega-3
  • Маслянистая асинхронная загрузка данных
  • Гладкое функциональное послевкусие


Если это похоже на то, чего ты хочешь в этой жизни, вперед под кат, если нет, то не заморачивайся.
Читать дальше →
Всего голосов 13: ↑11 и ↓2 +9
Просмотры 98K
Комментарии 12

С 0 до 1. Разбираемся с Redux

JavaScript *ReactJS *
Из песочницы
Tutorial
Когда вышла версия 1.0 Redux, я решил потратить немного времени на серию рассказов о моем опыте работы с ним. Недавно я должен был выбрать “реализацию Flux” для клиентского приложения и до сих пор с удовольствием работаю с Redux.

Почему Redux?


Redux позиционирует себя как предсказуемый контейнер состояния (state) для JavaScript приложений. Редакс вдохновлен Flux и Elm. Если вы раньше использовали Flux, я советую прочитать, что Redux имеет с ним общего в разделе "Предшественники" новой (отличной!) документации.

Redux предлагает думать о приложении, как о начальном состоянии модифицируемом последовательностью действий (actions), что я считаю действительно хорошим подходом для сложных веб-приложений, открывающим много возможностей.
Читать дальше →
Всего голосов 15: ↑14 и ↓1 +13
Просмотры 327K
Комментарии 16

Реакция на долголетие: как мы обновили фронтенд Lingualeo

Блог компании Lingualeo JavaScript *
image

«Если вам не стыдно за первую версию своего продукта, то вы опоздали с выходом на рынок»

Эти слова оправдывают развитие фронтенда Lingualeo с самого начала, с 2010 года. В сложном многоплатформенном продукте с 5-летней историей код наслоился чуть толще, чем пласты почвы над археологической Трипольской культурой. И вот, этот день настал: мы решили разбежаться и прыгнуть как следует, обновив платформу web-клиента. Ниже мы расскажем, что сделали, чтобы приземлиться как можно дальше от точки отсчета.
Читать дальше →
Всего голосов 22: ↑20 и ↓2 +18
Просмотры 14K
Комментарии 30

О React Native

Разработка мобильных приложений *ReactJS *
Из песочницы


Несколько советов о том, что нужно знать, чтобы писать (или не писать) приложения под React Native.

Сразу оговорюсь, что я ни разу не писал приложения под iOS, однако участвовал уже минимум в 4 проектах с React.js, немного разбираюсь в objective-c и знаком с процессом разработки под Android.

Приложение довольно простое (todo лист), но думаю, что это хороший старт.

Задача: написать таск менеджер с монетизацией. Есть наброски интерфейса на invisionapp, остальное — дело техники.
Читать дальше →
Всего голосов 13: ↑12 и ↓1 +11
Просмотры 50K
Комментарии 25

How to ReactJS

Разработка веб-сайтов *JavaScript *ReactJS *
Перевод
Tutorial
Для новичка, экосистема вокруг React (как и фронтэнда в целом) может показаться запутанной. Этому есть несколько причин.

  • Изначально, React был нацелен на экспертов и ранних последователей
  • Facebook открывает исходный код только тех продуктов, которые использует сам, т. е. не нацеленные на проекты-меньше-чем-Facebook
  • Огромное количество гайдов по React совершенно разной сложности


Здесь и далее, я предполагаю, что вы уже знакомы с HTML, CSS и JavaScript.

Читать дальше →
Всего голосов 46: ↑35 и ↓11 +24
Просмотры 84K
Комментарии 24

Обучающий курс по Redux от создателя библиотеки

Разработка веб-сайтов *JavaScript *ReactJS *
Tutorial
Как-то обошло Хабр стороной появление видеокурса по Redux, созданного Даниилом Абрамовым, автором библиотеки. В первых роликах рассказывается о принципах Redux, а затем поэтапно разбирается разработка веб-приложения на нем.

Вот он: egghead.io/series/getting-started-with-redux

Под катом — перевод введения с сайта курса, egghead.io.
Читать дальше →
Всего голосов 20: ↑10 и ↓10 0
Просмотры 16K
Комментарии 9

Текстовый туториал по React.js и Redux на русском

JavaScript *ReactJS *
Из песочницы
Tutorial

(у учебника по Основам React вышло второе издание, Redux-учебник в процессе обновления)

Закончил работу над парой подробных текстовых туториалов на русском. Постарался уделить как можно больше времени практике. По ходу повествования есть вопросы, задачи и решения.


Курс про Redux попал в официальную документацию.


Оба руководства бесплатны и выложены на gitbook (можно скачать PDF, ePub, mobi).


В текстах нарочно участвуют термины переведенные на русский (например, состояние), английские (state), либо английский термин написанный по-русски — стейт. Считаю это допустимым, и даже более того, удобным для читателя.

Читать дальше →
Всего голосов 37: ↑35 и ↓2 +33
Просмотры 200K
Комментарии 22

Текстовый туториал по react-router, а так же react-router + redux. На русском

JavaScript *ReactJS *

Всем добрый день. Немного с задержкой, но все же выходит третий мини-учебник. На этот раз разобран react-router. А так же две главы посвещены интеграции react-router + redux.


В процессе интеграции rr+redux я не использовал react-router-redux и redux-router. Как указано в самой книге, из-за активного развития библиотек, мне хотелось бы «научить вас рыбачить», а не просто «дать рыбу».


Также, приведенный способ по интеграции основан на личном опыте, плюс ответах разработчика redux (его твиттер) на SO, и изучении различных репозиториев. Он не является «единственно верным». Пожалуйста, укажите ссылки на ваши репозитории, либо предложите свои варианты в комментариях.


Поехали!


book_screen

Читать дальше →
Всего голосов 11: ↑11 и ↓0 +11
Просмотры 43K
Комментарии 5

Mobx — управление состоянием вашего приложения

JavaScript *ReactJS *
Перевод

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


Основная идея


Состояние (state ориг.) это сердце каждого приложения и нет более быстрого способа создания забагованого, неуправляемого приложения, как отсутствие консистентности состояния. Или состояние, которое несогласованно с локальными переменными вокруг. Поэтому множество решений по управлению состоянием пытаются ограничить способы, которыми можно его изменять, например сделать состояние неизменяемым. Но это порождает новые проблемы, данные нуждаются в нормализации, нет гарантии ссылочной целостности и становится почти невозможно использовать такие мощные концепты как прототипы(prototypes ориг.).


MobX позволяет сделать управление состоянием вновь простым, вернувшись к корню проблемы: он делает невозможным инконсистентность состояния. Стратегия достижения этого довольно проста: убедится что, все что может быть вынуто из состояния, будет вынуто. Автоматически.

Читать дальше →
Всего голосов 9: ↑7 и ↓2 +5
Просмотры 105K
Комментарии 40

Руководство по работе с Redux

Блог компании VK Разработка веб-сайтов *JavaScript *Node.JS *ReactJS *
Перевод
Tutorial
Сегодня Redux — это одно из наиболее интересных явлений мира JavaScript. Он выделяется из сотни библиотек и фреймворков тем, что грамотно решает множество разных вопросов путем введения простой и предсказуемой модели состояний, уклоне на функциональное программирование и неизменяемые данные, предоставления компактного API. Что ещё нужно для счастья? Redux — библиотека очень маленькая, и выучить её API не сложно. Но у многих людей происходит своеобразный разрыв шаблона — небольшое количество компонентов и добровольные ограничения чистых функций и неизменяемых данных могут показаться неоправданным принуждением. Каким именно образом работать в таких условиях?

В этом руководстве мы рассмотрим создание с нуля full-stack приложения с использованием Redux и Immutable-js. Применив подход TDD, пройдём все этапы конструирования Node+Redux бэкенда и React+Redux фронтенда приложения. Помимо этого мы будем использовать такие инструменты, как ES6, Babel, Socket.io, Webpack и Mocha. Набор весьма любопытный, и вы мигом его освоите!
Читать дальше →
Всего голосов 65: ↑59 и ↓6 +53
Просмотры 272K
Комментарии 51

Оптимизируем React приложение для отображения списка элементов

JavaScript *Canvas *ReactJS *
Отображение списка (множества) элементов на странице — это стандартная задача для практически любого web-приложения. В этом посте я хотел бы поделиться некоторыми советами по повышению производительности.

Для тестового примера я создам небольшое приложение, которое рисует множество «целей» (кругов) на элементе canvas. Я буду использовать redux как хранилище данных, но эти советы подойдут и для многих других способов хранения состояния.
Так же эти оптимизации можно применять с react-redux, но для простоты описания я не буду использовать эту библиотеку.

Данные советы могут повысить производительность приложения в 20 раз.

Читать дальше →
Всего голосов 11: ↑11 и ↓0 +11
Просмотры 17K
Комментарии 18

Redux-Redents — (еще) один модуль для работы с серверными данными из React-Redux приложений.  

Разработка веб-сайтов *JavaScript *Node.JS *ReactJS *

React и Redux, в последнее время одни из самых популярных buzz-words в мире фронтенда. Поэтому когда мне потребовалось сделать веб-приложение, которое бы отображало данные, полученные с сервера, а также позволяло бы ими манипулировать (создавать, удалять и изменять), я решил построить его на основе связки React и Redux. Множество getting-started руководств покрывают только функционал создания компонентов, action creators и reducers. Но как только дело касается обмена с сервером, начинаются сложности — растет количество необходимых action creator, редьюсеров. Причем они очень похожи друг на друга, с миниальными отличиями. В большинстве случаев — только в типе (имени) активности. После того, как я создал третий одинаковый набор креаторов и редьюсеров, то появилось желание что-то изменить. Так родилась идея реализации redux-redents.

Читать дальше →
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 7.4K
Комментарии 11

Честный MVC на React + Redux

Блог компании Developer Soft JavaScript *Программирование *ReactJS *
Tutorial

MVC


Эта статья о том, как построить архитектуру web-приложения в соответствии с принципами MVC на основе React и Redux. Прежде всего, она будет интересна тем разработчикам, кто уже знаком с этими технологиями, или тем, кому предстоит использовать их в новом проекте.


Читать дальше →
Всего голосов 37: ↑29 и ↓8 +21
Просмотры 54K
Комментарии 44

JavaScript в 2016 году: функциональное программирование пришло всерьез и надолго

Блог компании Voximplant JavaScript *Функциональное программирование *
Перевод
В 2015 году вы могли заметить перемены в способе разработки приложений на JavaScript. Разработчики уходят от непредсказуемой архитектуры с мутабельным состоянием в сторону более предсказуемой иммутабельной архитектуры приложений.

С такими фреймворками как Backbone, было принято синхронизировать сами данные и представление данных – для этого приходилось вручную подписываться на нужные события dom. Такой способ был подвержен ошибкам и вынуждал использовать слишком много типового кода. Пришел Angular и исправил это с помощью автоматизированного двустороннего биндинга.

Но сейчас все движется в другом направлении.
Продолжение перевода под катом
Всего голосов 89: ↑46 и ↓43 +3
Просмотры 28K
Комментарии 88

Клон Trello на Phoenix и React. Части 1-3

Разработка веб-сайтов *Программирование *Erlang/OTP *Функциональное программирование *Elixir/Phoenix *
Перевод
Tutorial
image

Trello — одно из самых моих любимых приложений. Я пользуюсь им с момента появления, и мне очень нравится то, как оно работает, его простота и гибкость. Каждый раз, начиная изучать новую технологию, я предпочитаю создать полноценное приложение, в котором смогу применить на практике всё, что изучил, для решения реальных проблем, и проверить эти решения. Так что начав изучать Elixir и его Phoenix Framework я понял: я должен на практике использовать весь этот потрясающий материал, с которым познакомился, и поделиться им в виде руководства о том, как реализовать простое, но функциональное посвящение Trello.

Читать дальше →
Всего голосов 30: ↑29 и ↓1 +28
Просмотры 36K
Комментарии 29

Клон Trello на Phoenix и React. Части 4-5

Разработка веб-сайтов *Программирование *Erlang/OTP *Ruby on Rails *Функциональное программирование *
Перевод
Tutorial




Front-end для регистрации на React и Redux


Оригинал


Предыдущую публикацию мы закончили созданием модели User с проверкой корректности и необходимыми для генерации зашифрованного пароля трансформациями набора изменений (changeset); так же мы обновили файл маршрутизатора и создали контроллер RegistrationController, который обрабатывает запрос на создание нового пользователя и возвращает данные пользователя и его jwt-токен для аутентификации будущих запросов в формате JSON. Теперь двинемся дальше — к front-end.

Читать дальше →
Всего голосов 32: ↑32 и ↓0 +32
Просмотры 11K
Комментарии 3

Клон Trello на Phoenix и React. Части 6-7

Разработка веб-сайтов *Программирование *Erlang/OTP *Ruby on Rails *Функциональное программирование *
Перевод
Tutorial




Теперь, когда back-end готов обслуживать запросы на аутентификацию, давайте перейдём к front-end и посмотрим, как создать и отправить эти запросы и как использовать возвращённые данные для того, чтобы разрешить пользователю доступ к личным разделам.

Читать дальше →
Всего голосов 18: ↑17 и ↓1 +16
Просмотры 6.8K
Комментарии 3

Клон Trello на Phoenix и React. Части 8-9

Разработка веб-сайтов *Программирование *Erlang/OTP *Ruby on Rails *Функциональное программирование *
Перевод
Tutorial




Выводим список и создаём новые доски


Оригинал


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

Читать дальше →
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 6.2K
Комментарии 1

Выбираем состав изоморфных React-приложений на следующие 12 месяцев

JavaScript *Node.JS *ReactJS *
Друзья, уже шесть часов вечера, последний понедельник августа, а это значит — последняя неделя лета. Давайте подведём итог и немного пофантазируем?

Сейчас формируем некий Isomorphic React App бойлерплейт на следующие 12 месяцев, с которым можно быстро стартовать новые проекты. Пока видим такой набор:

1. React 15.
2. На сервере — Node.js и Express.
3. CSS modules и isomorphic-style-loader для автоматической генерации Critical CSS при Server-side Rendering. Или всё-таки JSS?
Читать дальше →
Всего голосов 57: ↑34 и ↓23 +11
Просмотры 21K
Комментарии 105