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

ReactJS *

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

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

Как добиться повторного использования React компонентов (Перевод)

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


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

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

React Native с колокольни Android-разработки часть 1

Время на прочтение7 мин
Количество просмотров31K
На хабре есть множество статей про react native, но я не могу понять кем и для кого они написаны. Почти все имеют такой посыл: «Ну, это такой же React как в вебе, только на мобилках». А вот люди, которые занимаются нативной разработкой под мобильные устройства в пролете, ведь разобраться в реакте после Android без двух литров без глубокого изучения никак не получится. А я расскажу за реакт опираясь, внезапно, не на веб разработку, а на Android. Всем заинтересованным добро пожаловать под кат.
Читать дальше →

Как организовать большое React-приложение и сделать его масштабируемым

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


Одной из лучших особенностей React является то, что он не накладывает каких-либо ограничений на файловую структуру проекта. Поэтому на StackOverflow и аналогичных ресурсах так много вопросов о том, как структурировать React-приложения. Это очень спорная тема. Не существует единственного правильного пути. Предлагаем разобраться в этом вопросе с помощью статьи Джека Франклина, в которой он рассказывает о подходе к структурированию больших React-приложений. Здесь вы узнаете, какие решения можно принимать при создании React-приложений: о выборе инструментов, структурировании файлов и разбивки компонентов на более мелкие части.
Читать дальше →

Руководство React Native — создаем приложение под iOS. Часть 1.4 — 1.5

Время на прочтение5 мин
Количество просмотров8.4K
→ Перевод отсюда
→ Продолжение. Предыдущие выпуски:

4. Фильтрация и отбор случайных обоев


В этом разделе мы будем отбирать определённое количество случайных обоев из заданной категории. Раздел больше посвящен JS, нежели React Native. Мы создадим новый модуль (файл), который будет генерировать случайное число. Если понятие «модуль» вам незнакомо, рекомендую обратиться к документации Node.js по модулям.
Найдите строку, объявляющую класс
class SplashWalls extends Component{/* ... */};
Читать дальше →

Руководство React Native — создаем приложение под iOS. Часть 1.2, 1.3

Время на прочтение7 мин
Количество просмотров20K
→ Перевод отсюда
→ Продолжение. Начало здесь

2. Извлечение данных из API


В этом разделе мы будем подключаться к API сайта Unsplash.it и запрашивать информацию о обоях. Но, прежде чем мы приступим к интересному, нам надо сделать кое-что.

Объявление классов в стиле ES2015


В файле index.ios.js вы видите существующий код. Он отвечает за вывод содержимого в эмулятор.

image

В файле index.ios.js мы видим строку var SplashWalls = React.createClass({ ... }). Мы будем менять ее. В этом руководстве мы будем использовать синтаксис ES2015 для объявления классов.
Мы, разработчики, любопытные. Вы, возможно, хотите спросить: «Зачем? Зачем использовать классы из ES2015?».
Читать дальше →

Руководство React Native — создаем приложение под iOS. Часть 1.1

Время на прочтение5 мин
Количество просмотров46K
Перевод отсюда.
Продолжение тут.

Идея создавать мобильные приложения на JS не нова. Мы видели, что фреймворки, такие как Ionic или PhoneGap, справляются с этой задачей и привлекли изрядное количество разработчиков.

Тем не менее ни эти фреймворки, ни идея создавать мобильные приложения на JavaScript никогда не привлекали меня. Я всегда думал, почему бы не изучить Swift/Objective-C или Java и просто делать настоящие приложения? Конечно, это потребует затраты значительных усилий на обучение, но разве непрерывное обучение — это не то, что мы, разработчики, делаем и должны делать хорошо? Быстро изучать новые языки и фреймворки? Тогда в чём смысл? Что касается меня, очевидные преимущества такого подхода никогда не перевешивали сомнения.
Читать дальше →

Неочевидные вещи при старте разработки под Android под Windows 7

Время на прочтение2 мин
Количество просмотров21K
Добрый день, друзья! Захотелось мне изучить react native под Windows7 64. На мою беду, у меня процессор AMD, который не поддерживает VT-x or SVM.

image

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

United Dev Conf 2017: итоги и полезные материалы

Время на прочтение2 мин
Количество просмотров1.9K
6-7 апреля в Минске прошла многопрофильная конференция United Dev Conf.

image



Это первый масштабный опыт для беларусского IT-сообщества, когда конференция объединяет 4 направления и уже знакомые проекты: Highload Dev Conf, Frontend Dev Conf, Mobicode, Marketing and Sales.

Аудитория конференции: разработчики мобильных приложений (iOS, Android, кросс-платформенная разработка), Frontend и HighLoad devs, UI / UX дизайнеры, специалисты по Marketing & Sales, PM и PdM, бизнес-аналитики и CEO IT компаний.

Цель такого эксперимента в создании нетворкинга, где будут задействованы все звенья, работающие в командах над проектом.

Более подробно об итогах и результатах.

image

Развёрнутый комментарий Дэна Абрамова к статье «Вещи, о которых никто вам не расскажет про React»

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

Всем привет! Недавно Дэн Абрамов, создатель Redux, оставил довольно массивный комментарий к статье на Medium Things nobody will tell you about React.js, который очень быстро разошёлся популярностью и довольно скоро набрал раза в 3 больше рекомендаций, чем сама статья :)
Собственно, текущая статья является моим переводом его комментария, так как последняя содержит ценные замечания по поводу актуального и будущего состояния React / React Router.
Надеюсь, кому-то это будет полезным.




Привет, спасибо за обратную связь! :)


Я ценю, что вы поделились своим неприятным опытом работы с React.


Ваш пост содержит широко распространенные в React сообществе заблуждения, поэтому мне захотелось воспользоваться моментом и разъяснить их для любого, у кого имеются те же проблемы.


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

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

Redux как сердце архитектуры фронтенда Единой фронтальной системы

Время на прочтение5 мин
Количество просмотров18K
В прошлой статье мы рассказали, как в целом устроен фронтенд программы, обсудили технологический стек. Данную статью посвятим обсуждению Redux  —  почему мы называем его сердцем архитектуры ЕФС.


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

Ужасный import кракен — как использовать ES6-модули и не сойти с ума

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

Глобальная область видимости (aka namespace в TypeScript) — уже давно не круто. Можно долго перечислять преимущества модулей (ES6 модулей, в частности), но лично для меня решающим стала возможность использовать SystemJS для динамической загрузки исходников и Rollup, для сборки бандла.


Однако, первое, с чем пришлось столкнуться при внедрении ES6-модулей- безумное количество import выражений, с безумным количеством точек внутри:


import { FieldGroup } from "../../../Common/Components/FieldGroup/FieldGroup";

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

Быстрый старт на React Native

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

Какие горизонты открывает React? Single Page Application (и веб-приложения, и десктопные приложения на Electron) — это цветочки. Очень заманчиво выглядит разработка мобильных приложений на React Native. Лозунг "learn once, write anywhere" стоит того, чтобы приложить некоторые усилия. Go!

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

За 5 минут сделать Single Page Application доступным для Google и Facebook

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

Введение


Динамические веб приложения (SPA, Single Page Applications) становятся все более популярными. Их использование позволяет упростить и ускорить разработку и поддержку за счет следующий преимуществ:


  • не требуется server-side рендеринг;
  • сайт — это набор статических файлов (html, js, css, images, fonts), которые лежат на CDN;
  • нет затрат на масштабирование frontend;
  • код frontend локализован в одном проекте. (Раньше часть кода была на server-side, часть в frontend.);
  • уменьшение затрат на разработку backend (только API);
  • уменьшение нагрузки на backend (только API запросы);
  • возможность вместо собственного backend использовать сервисы типа (https://scaphold.io), микросервисы, lambda.

Из популярных библиотек для SPA хочется отдельно выделить ReactJS. Его использование позволяет создавать сложные веб приложения быстро и просто, сохранить скорость разработки на большой базе кода, избежать регрессионных ошибок при добавлении новых функций.


Большой нерешенной проблемой SPA является их полная несовместимость с веб краулерами поисковых систем (индексация сайтов) и социальных сетей (sharing в соц. сетях). На текущий момент краулеры не выполняют на своей стороне javascript и поэтому не могут получить содержимое SPA в виде html кода. В 2015 году Google официально отказался от поддержки выполнения javascript кода на своей стороне.


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

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

Как мы оптимизировали Twitter Lite

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

Twitter Lite и высокопроизводительные прогрессивные веб-приложения на React




Взгляд на то, как удаляли обычные и необычные узкие места в производительности при создании одного из крупнейших в мире прогрессивных веб-приложений (PWA) на React.js — Twitter Lite

Создание быстрого веб-приложения требует многих циклов измерений, куда тратится время. Нужно понять, почему это происходит, и применить потенциальные исправления. К сожалению, не бывает одного простого решения. Производительность — это бесконечная игра, где мы ищем и измеряем области для улучшения. В Twitter Lite сделано много маленьких улучшений в разных сферах: от первоначального времени загрузки до рендеринга компонентов React (и предотвращения повторного рендеринга), загрузки изображений и много другого. Большинство изменений небольшие, но они складываются, и в конечном результате мы получили одно из самых больших и быстрых прогрессивных веб-приложений.
Читать дальше →

Java и isomorphic React

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

Для создания изоморфных приложений на React обычно используется Node.js в качестве серверной части. Но, если сервер пишется на Java, то не стоит отказываться от изоморфного приложения: в Java входит встроенный javascript движок (Nashorn), который вполне справится с серверным рендерингом HTML с помощью React.

Код приложения, демонстрирующего серверный рендеринг React с сервером на Java, находится на GitHub. В статье буду рассмотрены:

  • Сервер на Java в стиле микросервиса на основе Netty и JAX-RS (в реализации Resteasy) для обработки web-запросов, с возможностью запуска в Docker.
  • Dependency Injection с использованием библиотеки CDI (в реализации Weld SE).
  • Сборка javascript бандла с помощью Webpack 2.
  • Настройка редеринга HTML на сервере с помощью React.
  • Запуск отладки с поддержкой «горячей» перезагрузки страниц и стилей с использованием Webpack dev server.
Читать дальше →

Загрузка данных из REST API

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

Хочу поделиться ещё одним маленьким велосипедом — в первую очередь, чтобы получить бесценные советы. Дополнительные примеры можно посмотреть в исходниках фан-проекта на GitHub.

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

React медленный, React быстрый: оптимизация React-приложения на практике

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

Всем привет! Хочу поделиться своим переводом статьи React is Slow, React is Fast: Optimizing React Apps in Practice автора François Zaninotto. Надеюсь, это кому-то будет полезным.


Краткое содержание:


  1. Измерение производительности React
  2. Почему ты обновился?
  3. Оптимизация через разбиение на компоненты
  4. shouldComponentUpdate
  5. Recompose
  6. Redux
  7. Reselect
  8. Остерегайтесь объектных литералов в JSX
  9. Заключение

React может быть медленным. Я хочу сказать, что любое React приложение среднего размера может оказаться медленным. Но прежде, чем искать ему замену, вы должны знать, что и любое среднее приложение на Angular или Ember может также оказаться медленным.


Хорошая новость в том, что если вы действительно заботитесь о производительности, то сделать React приложение очень быстрым довольно легко. Об этом — далее в статье.

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

Книга «React.js. Быстрый старт»

Время на прочтение5 мин
Количество просмотров26K
image Привет, Хаброжители! Ранее у нас вышла незаменимая вводная книга по технологии React для взыскательных JavaScript-разработчиков. Все самое интересное о сверхпопулярном инструменте от компании Facebook. В книге рассмотрены основные концепции высокопроизводительного программирования при помощи React, реальные примеры кода и доступные блок-схемы. Прочитав ее, вы научитесь:

• Создавать и использовать собственные компоненты React наряду с универсальными компонентами DOM.
• Писать компоненты для таблиц данных, позволяющие редактировать, сортировать таблицу, выполнять в ней поиск и экспортировать ее содержимое.
• Использовать дополнительный синтаксис JSX в качестве альтернативы для вызовов функций.
• Запускать низкоуровневый гибкий процесс сборки, который освободит вам время и поможет сосредоточиться на работе с React.
• Работать с инструментами ESLint, Flow и Jest, позволяющими проверять и тестировать код по мере разработки приложения.
• Обеспечивать коммуникацию между компонентами при помощи Flux.
Читать дальше →

Разработка ускоренной главной страницы BBC News

Время на прочтение3 мин
Количество просмотров5.7K
Веб производительность это то, что меня беспокоит как разработчика, чья работа затрагивает миллионы людей по всему миру, так и пользователя, который часто получает доступ к веб используя медленное и ненадежное соединение. Я часто и громко жаловался, что сайт BBC News неоправданно медленный, поэтому когда мне предоставилась возможность помочь перестроить одну из самых посещаемых страниц на BBC News — я ухватился за этот шанс.
Читать дальше →

Способы отладки JS на клиенте

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

Применительно к разработке на create-react-app (CRA) в браузере и в IDE WebStorm. Если вам известны какие-либо другие способы отладки, большая просьба поделиться знаниями.

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

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