Все потоки
Поиск
Написать публикацию
Обновить
28.01

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

Создание React VR-приложения, работающего в реальном времени

Время на прочтение11 мин
Количество просмотров19K


Библиотека React VR позволяет писать для веба приложения виртуальной реальности с использованием JavaScript и React поверх WebVR API. Эта спецификация поддерживается последними (в некоторых случаях — экспериментальными) версиями браузеров Chrome, Firefox и Edge. И для этого вам не нужны очки VR.


WebVR Experiments — это сайт-витрина, демонстрирующий возможности WebVR. Моё внимание привлёк проект The Musical Forest, созданный замечательным человеком из Google Creative Lab, который использовал A-Frame, веб-фреймворк для WebVR, разработанный командой Mozilla VR.

Как мы писали стратегический кликер на хакатон ReactRiot

Время на прочтение5 мин
Количество просмотров7.1K

Привет. Не так давно мы с rjericho увидели статью Как я участвовал в хакатоне Angular Attack, и что из этого вышло. У нас в Барнауле хакатоны начали проводиться всего год назад. При этом они больше были ориентированы на быстрый старт IT-стартапа. Поэтому на них не получалось насладиться использованием всяких прикольных хипстерских библиотек, а приходилось пилить продукт на старых добрых PHP или Java. Однако нам давно хотелось поучаствовать в каком-нибудь фановом мероприятии, где можно просто запилить то, что душе угодно и не придумывать, как это монетизировать.


Был найден хакатон от тех же организаторов, что и AngularAttack: ReactRiot. То, что о реакте мы знали только по статьям на хабре только добавляло интерес к данному мероприятию.


Скриншот интерфейса получившейся игры

Читать дальше →

Бешеные псы: Angular 2 vs React: доклад Евгения Гусева и Ильи Таратухина

Время на прочтение1 мин
Количество просмотров17K
Angular2 отрелижен, React и подавно. Копья поломаны, мечи перекованы на орала, страсти уже поутихли и, вроде как, статус кво восстановлен. Кто-то использует один инструмент, кто-то другой, разве что, иногда раздаются возгласы: «А у них...!»



Однако не всё так просто. В конце концов, мы не только пишем код, но и решаем однотипные проблемы:

  • Как сделать наше приложение быстрым?
  • Как писать понятнее и проще?
  • Как писать быстрее?

Кто-то может сказать: «Эту тему уже миллион раз обсасывали, зачем опять?». Но, все же, если вы запускаете новый проект или решили переписать старый, перед вами всё равно встанет проблема выбора. И даже если вы считаете, что всё очевидно — это далеко не так.
Читать дальше →

Таблицы! Таблицы? Таблицы…

Уровень сложностиПростой
Время на прочтение16 мин
Количество просмотров59K

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

Читать дальше →

Ненормальный GraphQL в Electron или как я писал десктопный клиент для Tinder

Время на прочтение7 мин
Количество просмотров15K

Предыстория


фрустрация и решение


Привет, Хабр. В начале зимы 2016 года я снова стал одинок. Спустя какое-то время я решил завести себе профиль в Tinder. Всё бы ничего, но постепенно стала накапливаться усталость из-за невозможности нормально печатать на физической клавиатуре. Мне виделось несколько решений этой проблемы:


  • Смириться и продолжать использовать официальное приложение для смартфона
  • Использовать BlueStacks с официальным приложением на Android
  • Использовать существующие клиенты для десктопа (Tinder++)
  • Написать свой

Первый вариант меня не устраивал из-за принципиального превосходства реальной клавиатуры над экранной. Второй вариант не подходил из-за того, что всё-таки это было бы приложение, не оптимизированное под десктоп. Третий вариант был всем хорош кроме дизайна, багов, и малой активности в репозитории. Позже Tinder++ получил письмо от юристов Tinder и проект был и вовсе свёрнут. Таким образом, лично для меня выбор был очевиден.

Что из этого вышло

Сокращаем использование Redux кода с помощью React Apollo

Время на прочтение8 мин
Количество просмотров28K

Всем привет! Хочу поделиться своим переводом интересной статьи Reducing our Redux code with React Apollo автора Peggy Rayzis. Статья о том, как автор и её команда внедряли технологию GraphQL в их проект. Перевод публикуется с разрешения автора.


Сокращаем использование Redux кода с помощью React Apollo
Переключаемся на декларативный подход в Высшей Футбольной Лиге


Я твёрдо убеждена, что лучший код — это отсутствие кода. Чем больше кода, тем больше вероятности для появления багов и тем больше тратится времени на поддержку такого кода. В Высшей Футбольной Лиге у нас совсем небольшая команда, поэтому мы принимаем этот принцип близко к сердцу. Мы стараемся оптимизировать всё, что нам по силам, либо путём увеличения переиспользуемости кода, либо просто перестав обслуживать определённую часть кода.


В данной статье вы узнаете о том, как мы передали контроль над получением данных в Apollo, что позволило нам избавиться от почти 5,000 строчек кода. К тому же, после перехода на Apollo наше приложение стало не только намного меньше по объёму, оно также стало более декларативным, поскольку теперь наши компоненты запрашивают только те данные, которые им нужны.

Работа с периферией из JavaScript: от теории к практике

Время на прочтение8 мин
Количество просмотров22K
Работа сотрудника банка опасна и трудна. В Единой фронтальной системе мы стараемся помочь сотруднику банка и автоматизировать его работу. Одна из многочисленных задач, которую нам нужно решить, — доработать тонкий клиент для возможности работы с периферийным банковским оборудованием. Но сделать это не так-то просто. В данной статье мы расскажем, как мы пытались решить задачу, и к чему это привело.

Статья будет полезна архитекторам и опытным front-end разработчикам систем масштаба предприятий, столкнувшихся с проблемой доступа к периферийному оборудованию из тонкого клиента своей системы.


Читать дальше →

Сервис сбора статистики с Flussonic

Время на прочтение2 мин
Количество просмотров3.6K
Всем привет, хочу рассказать про наш первый сервис, который мы собираемся оказывать нашим клиентам: сбор статистики и отчеты.

Много лет мы только продавали софт, теперь мы приготовили к запуску сервис по сбору статистики и предоставлению отчетов. У нас берут Flussonic, запускают его на своих серверах, абоненты смотрят видео с этих инстансов Flussonic и создаются записи о сессиях просмотра.

Эти сессии как раз сливаются в наш сервис и мы покажем отчеты, сделанные по ним, в личном кабинете.
Читать дальше →

Идиоматичный Redux: Дао Redux'а, Часть 1 — Реализация и Замысел

Время на прочтение20 мин
Количество просмотров20K

Мысли о том, какие требования выдвигает Redux, как задумано использование Redux и что возможно с Redux.


Введение


Я потратил много времени, обсуждая онлайн паттерны использования Redux, была ли это помощь тем, кто изучает Redux в Reactiflux каналах, дискуссии о возможных изменениях в API библиотеки Redux на Github'е, или обсуждение различных аспектов Redux'а в комментариях к тредам на Reddit'е или HN (HackerNews). С течением времени, я выработал свое собственное мнение о том, что представляет собой хороший, идиоматичный Redux код, и я хотел бы поделиться некоторыми из этих мыслей. Несмотря на мой статус мейнтейнера Redux'а, это всего лишь мнения, но я предпочитаю думать, что они являются достаточно хорошими подходами.


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


Несмотря на эту простоту, или, возможно, вследствие ее, существует широкий спектр походов, мнений и взглядов о том, как использовать Redux. Многие из этих подходов широко расходятся с концепциями и примерами из документации.


В то же время, продолжаются жалобы на то, как Redux «заставляет» вас делать вещи определенными способами. Многие из этих жалоб на самом деле включают концепции связанные с тем, как Redux обычно используется, а не фактическими ограничениями наложенными самой библиотекой Redux. (Например, только в одном недавнем HN треде я видел жалобы: «слишком много шаблонного кода», «константы action'ов и action creator'ы не нужны», «я вынужден редактировать слишком много файлов чтобы добавить одну фичу», «почему я должен переключаться между файлами чтобы добраться до своей логики?», «термины и названия слишком сложны для изучения или запутанны», и слишком много других.)

Читать дальше →

Интеграция React и DataTables — не так тяжело, как рекламируют

Время на прочтение5 мин
Количество просмотров17K

Несколько месяцев назад я искал React-компонент для отображения таблицы данных в одном из наших веб-приложений в Undertone. В предыдущем проекте, который не был основан на высокоуровневой библиотеке, такой как React, мы использовали jQuery-плагин DataTables, и мы были очень довольны той гибкостью, которую он предлагает. Теперь я искал нечто похожее, которое можно легко интегрировать как React-компонент в наше новое приложение.


Проведя довольно обширные исследования, я узнал две вещи. Во-первых, это то, что не рекомендуется использовать DataTables вместе с React, потому что обе библиотеки управляют DOM. Во-вторых, не было библиотеки, которая обеспечивала гибкость, необходимую для нашего веб-приложения (с момента моего исследования). Крайний срок для сдачи проекта приближался, и мне нужно было что-то выбрать. Я решил пойти по непопулярному пути и интегрировать DataTables в свой проект. Результат получился намного лучше, чем я ожидал, и весь процесс интеграции на самом деле был довольно плавным. В следующих разделах я опишу схему проекта, в котором работает интеграция React и DataTables.

Читать дальше →

Redux: попытка избавиться от потребности думать во время запросов к API, часть 2

Время на прочтение5 мин
Количество просмотров9.9K

Мы хотим создать пакет, который позволит нам избавиться от постоянного создания однотипных reducer'ов и action creator'ов для каждой модели, получаемой по API.


Первая часть — вот эта вот статья. В ней мы создали конфиг для нашего будущего пакета и выяснили, что он должен содержать action creator, middleware и reducer. Приступим к разработке!

Читать дальше →

DevConf::Frontend — 17 июня в Москве: Angular 4, React Native, выбор JS-фреймоврка для крупного проекта + Lua Meetup

Время на прочтение1 мин
Количество просмотров6.7K

17 июня в Москве, Измайлово пройдет конференция Devconf::FrontEnd

Откроет ее Виталий Грин, лидер Frontend разработки Альфа Лаборатории, Ex-Яндекс.Карты,
который расскажет как сделать общую библиотеку компонентов с одной стороны стабильной для десятков команд, а с другой стороны гибкой и расширяемой

Сергей Аверин, tech-менеджер из компании Acronis поведает о том, как важен правильный выбор JS-фреймоврка для крупного проекта в условиях, когда любое более-менее важное технологическое решение сразу затрагивает с десяток команд, несколько сотен человек и права «случайно все сломать» нет.
Читать дальше →

Дзен не позвонит

Время на прочтение3 мин
Количество просмотров21K
image

На дворе 2017 год, а это значит, что я уже как полтора года занимаюсь мазохизмом. Два года назад я был весел и жизнелюбив, сейчас не хочется ни шутить ни развлекаться. За два года redux сделал меня фаталистом. Моя уверенность в ужасном будущем так называемого “frontend” увеличивается с каждым днём. В конце концов, сбербанк сделал redux основой своего стека, а эти ребята хорошего не выберут. Шутка! Я уверен, там работают замечательные специалисты.
Читать дальше →

Ближайшие события

Redux: попытка избавиться от потребности думать во время запросов к API

Время на прочтение4 мин
Количество просмотров9.9K

И в чем же проблема?


Я начал изучать React и Redux не так давно, но он уже успел изрядно потрепать мне нервы. Буквально над каждым действием приходится задумываться — почти никакие изменения в коде невозможны без того, чтоб что-то оторвать. Чтоб просто получить список постов по API и вывести их, надо, пожалуй, написать не меньше сотни строк кода — создать корневой контейнер, создать store, добавить action для запроса к API, для успешного результата запроса, для неудачного результата запроса, создать action-creators, сматчить action-creators и props, сматчить dispatch и props, написать reducer на каждый action… Ух, продолжать не хочется. И все это мы должны делать заново для каждого веб-приложения — крайне нерациональная трата сил программиста.


Да, можно сказать новичку: "Смотри, тут десяток пакетов, которые могут сделать каждое действие из этого списка вместо тебя. Выбирай и пользуйся!" Но проблема в том, что надо разобраться в настройке и воспользоваться десятком пакетов, позаботившись о том, чтоб они совпадали с версией, которая описана в документации и не вступали друг с другом в конфликты… Слишком сложно. Хочется чего-то проще, такого же простого, как в мире Django, из которого я пришел. Какой-то один пакет, после установки которого в store сами по волшебству складываются все нужные данные — бери и пользуйся.


Ну, я и решил — если такого решения нет, напишу-ка я его сам.


Постановка задачи


Убирая всю лирику из первого абзаца, получаю задачу — нам нужно создать инструмент, который будет:


  1. Делать асинхронный GET-запрос к REST API.
  2. Анализировать полученные данные и данные, лежащие в store, и, если там не хватает связанных по foreign key данных, делать еще запросы.
  3. Складывать полученные данные в store и следить за актуальностью хранящихся данных.

По описанию выходит, что состоять пакет будет из action creator'а, middleware и reducer'а.

Читать дальше →

Добавляем в jsx циклы и условия

Время на прочтение5 мин
Количество просмотров45K
Если вы используете библиотеку React, то наверняка используете и jsx. Конечно, это не обязательно, и можно писать только js, используя React.createElement, но с jsx получится гораздо лаконичнее, что повышает читаемость. И всё замечательно до появления первой необходимости вывести данные в цикле. В jsx циклы не предусмотрены. Зато предусмотрена вставка js-кода. И тут вновь возникает вопрос читаемости, но теперь она значительно ухудшается. Возникает ситуация, когда в js-коде пишется html, в котором пишется js-код с html. Конечно, можно выделить html в отдельную функцию. Но тогда html будет появляться в коде то тут, то там. А хотелось бы локализовать всё в одном месте. К счастью, в современном javascript почти для любой проблемы, есть решение в виде библиотеки или плагина. Выше обозначенную проблему легко решает плагин для babel transform-react-statements.


Читать дальше →

Анонс RamblerFront& #1

Время на прочтение2 мин
Количество просмотров3.3K


8 июня на Мансарде Rambler&Co состоится первый внешний RamblerFront& meetup, на котором наши сотрудники поделятся прикладными знаниями в области frontend-разработки.
Читать дальше →

Визуальный редактор писем на React+Redux. Обзор, пример использования и расширения

Время на прочтение12 мин
Количество просмотров9.2K

Введение


Всем привет! Не так давно мне поступила задача встроить визуальный редактор email в наш сервис внутренней рассылки, ибо людям надоело набирать html руками и компоновать валидные шаблоны для писем. Побродив по интернету, я нашёл 2 редактора, которые, как мне тогда казалось, прекрасно подойдут для этих целей. Ссылки на них приведу в конце топика. Изучив их более внимательно (EmailEditor написан с использованием jQuery, который я в своё время неплохо изучил, а Mosaico был на KnockoutJS, с ним я знаком лишь поверхностно), я остановился на EmailEditor, и снова окунулся в то дерьмо из которого год назад так успешно выбрался с помощью Angular и Ionic, а именно — файлы по 2-3к строк, повсеместное и рандомное изменение DOM различными способами из различных мест и т.д., ну вы меня понимаете).


Потратив больше месяца на попытки пофиксить все баги, запилить нужные нам для рассылки строительные блоки и прочее, я сдался… Решил попробовать Mosaico и даже начал активно изучать Knockout, но проблема в том, что этот монстр (я про Mosaico) был настолько сложно написан, что EmailEditor показался не таким уж и плохим. Плюс ко всему, а точнее минус, у Mosaico практически нет вменяемой документации и если в первом я интуитивно понимал как всё работает и как создать свои блоки, то тут никакая интуиция мне не помогла. Возможно, просто не хватило мозга, терпения и желания разбираться, не знаю, просто гляньте на досуге исходники этих редакторов… А сроки поджимали...


Что же делать?!

Читать дальше →

Простой туториал React Router v4

Время на прочтение8 мин
Количество просмотров416K
image

Автор @pshrmnОригинальная статьяВремя чтения: 10 минут

React Router v4 — это переработанный вариант популярного React дополнения. Зависимые от платформы конфигурации роутов из прошлой версии были удалены и теперь всё является простыми компонентами.

CSS в JavaScript: будущее компонентных стилей

Время на прочтение8 мин
Количество просмотров36K


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


Чтобы получить больше информации о проблемах CSS, решаемых в JavaScript, вы можете посмотреть презентацию «React CSS в JS» (React CSS in JS), а для того чтобы изучить улучшение производительности с помощью Aphrodite, прочитайте статью Inline CSS at Khan Academy: Aphrodite. Если же вы хотите узнать больше о лучших практиках CSS в JavaScript, ознакомьтесь с руководством Airbnb (Airbnb’s styleguide).


Здесь речь пойдет об использовании встроенных стилей JavaScript для создания компонентов, позволяющих решить основные проблемы дизайна, о которых я рассказывал ранее в статье «Прежде чем осваивать дизайн, необходимо ознакомиться с основами» (Before you can master design, you must first master the fundamentals).

Читать дальше →

ИТ-конференция «Продвижение»: суббота с пользой

Время на прочтение8 мин
Количество просмотров4.3K
На субботу 3 июня в Москве обещают +11 и лёгкий дождь. Нелётная погода, ну то есть не велосипедная и не особо прогулочная. А душа требует лета, общения, азарта и новых событий. Мы придумали для вас мега насыщенный день в Телеграфе, где пройдёт IT-конференция «Продвижение». Неважно, фанатеете вы от React, занимаетесь дизайном, пытаетесь внедрить Agile или просто считаете себя гиком и книголюбом, — места, нетворкинга и интересных моментов программы хватит всем. Дело за малым — зарегистрироваться и прийти. Ну и почитать подробности под катом.

 
Читать дальше →

Вклад авторов