Чаще всего при выборе этого языка ожидается, что разработка одного приложения под две платформы займёт в два раза меньше времени, чем разработка двух приложений. Но по итогу оказывается, что разработка занимает столько же, если не больше, из-за сложностей, скрытых под внешним блеском и маркетингом. Мы расскажем о некоторых подобных сложностях, с которыми нам пришлось столкнуться за последние несколько месяцев работы с React Native.
Реализация анимации в React Native
4 мин
Перевод
Перевод статьи подготовлен специально для студентов курса «ReactJS/React Native-разработчик».
Трудно себе представить мобильное приложение, в котором нет анимации. В вебе анимации обычно простые, если они есть вообще (максимум – одна страница сменяет другую). Анимации же в мобильных приложениях требуют к себе совсем другого внимания.
Трудно себе представить мобильное приложение, в котором нет анимации. В вебе анимации обычно простые, если они есть вообще (максимум – одна страница сменяет другую). Анимации же в мобильных приложениях требуют к себе совсем другого внимания.
Антипаттерны в React или вредные советы новичкам
7 мин
Привет, Хабр.
Ровно год прошел с момента, как я начал изучать React. За это время я успел выпустить несколько небольших мобильных приложений, написанных на React Native, и поучаствовать в разработке web-приложения с использованием ReactJS. Подводя итог и оглядываясь назад на все те грабли, на которые я успел наступить, у меня родилась идея выразить свой опыт в виде статьи. Оговорюсь, что до начала изучения реакта, у меня имелось 3 года опыта разработки на c++, python, а также мнение, что во фронтенд разработке нет ничего сложного и разобраться во всем мне не составит труда. Поэтому в первые месяцы я пренебрегал чтением обучающей литературы и в основном просто гуглил готовые примеры кода. Соответственно, примерный разработчик, который первым делом изучает документацию, скорее всего, не найдет для себя здесь ничего нового, но я все-таки считаю, что довольно много людей при изучении новой технологии предпочитают путь от практики к теории. Так что если данная статья убережет кого-то от граблей, то я старался не зря.
Ровно год прошел с момента, как я начал изучать React. За это время я успел выпустить несколько небольших мобильных приложений, написанных на React Native, и поучаствовать в разработке web-приложения с использованием ReactJS. Подводя итог и оглядываясь назад на все те грабли, на которые я успел наступить, у меня родилась идея выразить свой опыт в виде статьи. Оговорюсь, что до начала изучения реакта, у меня имелось 3 года опыта разработки на c++, python, а также мнение, что во фронтенд разработке нет ничего сложного и разобраться во всем мне не составит труда. Поэтому в первые месяцы я пренебрегал чтением обучающей литературы и в основном просто гуглил готовые примеры кода. Соответственно, примерный разработчик, который первым делом изучает документацию, скорее всего, не найдет для себя здесь ничего нового, но я все-таки считаю, что довольно много людей при изучении новой технологии предпочитают путь от практики к теории. Так что если данная статья убережет кого-то от граблей, то я старался не зря.
Опыт разработки тестового задания на React для Aviasales
6 мин
Привет, я хотел поделиться опытом разработки тестового задания для Aviasales.
Я недавно наткнулся на вакансию React разработчика в компанию Aviasales. Отправил заявку, после чего на следующий день мне ответил HR и сообщил, что я должен буду сделать тестовое задание. Я крайне не люблю делать тестовые задания, так как я должен потратить довольно много времени на их выполнение, а в случае неудачи это станет впустую. Но я согласился...
История о V8, React и падении производительности. Часть 2
9 мин
Перевод
Сегодня мы публикуем вторую часть перевода материала, посвящённого внутренним механизмам V8 и расследованию проблемы с производительностью React.
→ Первая часть
→ Первая часть
Angulareact
8 мин
У меня есть проблема. Приложение написано на Angular, а библиотека компонентов на React. Делать клон библиотеки слишком дорого. Значит, нужно использовать React-компоненты в Angular-приложении с минимальными затратами. Разбираемся как это делать.
Проблемы и нюансы при разработке под SmartTV с использованием React.js
4 мин
Хочу поделиться опытом разработки приложения с просмотром видео контента для SmartTV (Tizen и WebOS) и с какими проблемами мы столкнулись.
На современных телевизорах, как мы знаем, можно устанавливать разные приложения, для облегчения работы с какими-то ресурсами и контентом. В большинстве случаев, эти приложения под капотом это обычный браузер, на теликах это Chromium.
Так как это браузер, то ничего нам не мешало использовать React.js для разработки, что повлияло на некоторые проблемы с производительностью.
Я не буду рассказывать о том, как именно нужно делать с примерами кода, я расскажу о нюансах и решениях, которые были приняты.
На современных телевизорах, как мы знаем, можно устанавливать разные приложения, для облегчения работы с какими-то ресурсами и контентом. В большинстве случаев, эти приложения под капотом это обычный браузер, на теликах это Chromium.
Так как это браузер, то ничего нам не мешало использовать React.js для разработки, что повлияло на некоторые проблемы с производительностью.
Я не буду рассказывать о том, как именно нужно делать с примерами кода, я расскажу о нюансах и решениях, которые были приняты.
React Native: Создание анимированного поля ввода с помощью Animated API
4 мин
Перевод
Всем привет! Сегодня делимся с вами познавательным материалом, перевод которого подготовлен специально для студентов курса «ReactJS/React Native-разработчик».
Итак, начнем.
Все мы видели такие поля для ввода:
Надпись большая и выглядит как плейсхолдер, пока вы не наведете фокус на ввод. Она станет меньше и поднимется вверх.
Выглядит великолепно. Гладко. Безупречно.
А еще кажется, что только опытный разработчик может так сделать, не правда ли?
Ну, возможно, это и было так до появления React Native, в те времена, когда люди жили в пещерах и творили всякую дичь. Но это осталось в прошлом.
Итак, начнем.
Все мы видели такие поля для ввода:
Надпись большая и выглядит как плейсхолдер, пока вы не наведете фокус на ввод. Она станет меньше и поднимется вверх.
Выглядит великолепно. Гладко. Безупречно.
А еще кажется, что только опытный разработчик может так сделать, не правда ли?
Ну, возможно, это и было так до появления React Native, в те времена, когда люди жили в пещерах и творили всякую дичь. Но это осталось в прошлом.
Создание мобильного приложения на React Native
3 мин
Recovery Mode
Всем привет. Это будет первой частью в создании нашего мобильного приложения.
Мобильное приложение мы будем делать с помощью react native и expo. Мы создадим не большое новостное приложение. Для этого мы будем использовать php через rest api.
В нашем приложении мы будем выводить статьи, которые будут находиться в phpmyadmin.
История о V8, React и падении производительности. Часть 1
8 мин
Перевод
В материале, первую часть перевода которого мы публикуем сегодня, речь пойдёт о том, как JavaScript-движок V8 выбирает оптимальные способы представления различных JS-значений в памяти, и о том, как это влияет на внутренние механизмы V8, касающиеся работы с так называемыми формами объектов (Shape). Всё это поможет нам разобраться с сутью недавней проблемы, касающейся производительности React.
Мы забыли про делегирование в JavaScript. Event delegation in React
5 мин
Всем привет. Статья о делегирование событий в JavaScript и реализация его в react.js.
О чем собственно речь? Зачем и почему?
Для начала давайте кратко обсудим:
- что есть событие;
- как происходит распространение;
- обработка DOM Level 2 с примером на JavaScript;
И в конце: почему не надо забывать об делегировании в React.
Событие
JavaScript с HTML взаимодействуют между собой за счёт событий (events). Каждое событие служит для того, чтобы сказать JavaScript’у о том, что в документе или окне браузера что-то произошло. Для того чтобы отловить эти события нам нужны слушатели (listeners), этакие обработчики, которые запускаются в случае возникновения события.
Распространение событий
Порядок. Решая проблему: как понять, какой части страницы принадлежит событие? Было реализовано два способа: в Internet Explorer — “всплытие событий”, а в Netscape Communicator — “перехват событий”.
Три типовых ошибки в сфере безопасности, о которых должен знать каждый React-разработчик
8 мин
Перевод
Автор статьи, перевод которой мы сегодня публикуем, говорит, что React — это её любимая библиотека для создания интерактивных интерфейсов. React одновременно и лёгок в использовании, и достаточно хорошо защищён. Однако это не значит, что React-приложения совершенно неуязвимы. Очень легко впасть в неоправданное спокойствие, решив, что о XSS-атаках можно не волноваться из-за того, что в проекте используется React.
Уязвимости React чаще всего проявляются тогда, когда разработчик думает, что он использует защитные механизмы этой библиотеки, хотя на самом деле оказывается, что это не так. Поэтому важно правильно оценивать возможности React, и знать о том, какие задачи программисту нужно решать своими силами.
Сегодня мы поговорим о типичных уязвимостях React, о том, как находить их во время код-ревью, и о том, как от них защищаться.
Уязвимости React чаще всего проявляются тогда, когда разработчик думает, что он использует защитные механизмы этой библиотеки, хотя на самом деле оказывается, что это не так. Поэтому важно правильно оценивать возможности React, и знать о том, какие задачи программисту нужно решать своими силами.
Сегодня мы поговорим о типичных уязвимостях React, о том, как находить их во время код-ревью, и о том, как от них защищаться.
Приглашаем на JavaScript Meetup SuperJob 10 октября
1 мин
10 октября в офисе SuperJob состоится встреча JavaScript-разработчиков.
Специалисты SuperJob поделятся своим опытом оптимизации приложений на React/Redux, использования статических типов с Flow и работы с Node.js.
Традиционно в программе бургеры и неформальное общение.
Дата и время: 10 октября c 19:00 до 21:30
Адрес: Москва, Малая Дмитровка, дом 20
Регистрация: superjob-meetup.timepad.ru/event/1063170/
Специалисты SuperJob поделятся своим опытом оптимизации приложений на React/Redux, использования статических типов с Flow и работы с Node.js.
Традиционно в программе бургеры и неформальное общение.
Дата и время: 10 октября c 19:00 до 21:30
Адрес: Москва, Малая Дмитровка, дом 20
Регистрация: superjob-meetup.timepad.ru/event/1063170/
Ближайшие события
Firebird Conf: конференция для разработчиков и администраторов СУБД Firebird
6 июня
09:00 – 20:00
Москва
Рекомендации по созданию приложений на React Native. Часть 1
5 мин
Перевод
Добрый день, хабровчане. Сегодня делимся с вами переводом статьи, перевод которой был подготовлен специально для первого запуска курса «ReactJS/React Native-разработчик». Приятного прочтения.
Если вы новичок в мире React Native, то вы знаете, что в нем есть некоторые подводные камни, которых вам хотелось бы избежать. В некоторых случаях вам придется делать выбор наперед, не имея ни малейшего понятия, как и на что он повлияет.
Ниже я составил список лучших практических советов из своего личного опыта, которые, надеюсь, окажутся для вас полезными :)
Если вы новичок в мире React Native, то вы знаете, что в нем есть некоторые подводные камни, которых вам хотелось бы избежать. В некоторых случаях вам придется делать выбор наперед, не имея ни малейшего понятия, как и на что он повлияет.
Ниже я составил список лучших практических советов из своего личного опыта, которые, надеюсь, окажутся для вас полезными :)
Современное окружение для React Native приложений
4 мин
Туториал
Перевод
В этой статье мы рассмотрим настройку React Native окружения с использованием expo-cli, Typescript, и Jest.
Typescript поможет нам избежать ошибок при разработке и написать более эффективное мобильное приложение.
Современные разработки позволяют интегрировать Typescript в окружение разработки. Так же мы можем использовать VS Code, который отлично поддерживает Typescript.
Также интеграция с React Native даст нам возможность использовать сервис автодополнения, навигацию по коду и рефакторинг.
Expo — это набор инструментов, которые упрощают создание нативных React приложений. В этом уроке я собираюсь показать вам, как вы можете быстро создавать нативные React приложения, используя Expo.
Typescript поможет нам избежать ошибок при разработке и написать более эффективное мобильное приложение.
Современные разработки позволяют интегрировать Typescript в окружение разработки. Так же мы можем использовать VS Code, который отлично поддерживает Typescript.
Также интеграция с React Native даст нам возможность использовать сервис автодополнения, навигацию по коду и рефакторинг.
Expo — это набор инструментов, которые упрощают создание нативных React приложений. В этом уроке я собираюсь показать вам, как вы можете быстро создавать нативные React приложения, используя Expo.
Создание приложения для Slack с использованием функций 8base
8 мин
Перевод
Slack — отличное приложение для внутреннего общения между командами. Одна из особенностей, что мы можем легко его расширить, создавая и интегрируя чат-ботов и слэш команды чата, позволяющие пользователям взаимодействовать с внешними сервисами. Отличным ботом Slack, весьма популярным и полезным, является бот GitHub, который публикует обновления о пулреквестах, коммитах и ишью на канале.
В этой статье мы создадим Slack бота, который публикует обновления при создании заказа на придуманной нами e-commerce платформе, которой мы управляем.
E-commerce платформа — это бессерверное приложение, созданное с использованием 8base. В этой статье мы будем использовать функции 8base для прослушивания событий Create в модели данных с использованием триггеров.
Триггер это тип функции, которая запускается в ответ на событие мутации данных: создание, обновление или удаление объекта. 8base предоставляет два типа триггеров в зависимости от того, хочет ли разработчик выполнить функцию до или после изменения данных: trigger.before и trigger.after.
Вам понадобятся
- Базовое понимание React и Node.js. Перед началом работы убедитесь, что у вас установлены Node и npm / yarn.
- Мы будем использовать некоторые GraphQL запросы в проекте, так что пригодится знакомство с GraphQL.
- Создайте учетную запись 8base (если вы еще этого не сделали), посетив их веб-сайт.
Подготовка среды 8base
Создайте аккаунт или войдите в 8base. Для новых учетных записей 8base предоставляет бесплатный 30-дневный доступ.
14 советов по написанию чистого React-кода. Часть 2
11 мин
Перевод
Сегодня мы публикуем вторую часть материала о написании чистого кода при разработке React-приложений. Вот ещё несколько полезных советов.
→ Читать первую часть
→ Читать первую часть
fform: React & JSONSchema — максимальная гибкость
2 мин
Flexibile form (fform) — построитель форм с минимальной избыточностью кода, при этом максимально гибкий и расширяемый. Используемый стэк технологий: React (v16), Redux (опционально), JSONSchema, TypeScript. Основная идея — максиально возможное повторное использование схем, компонентов и функций.
14 советов по написанию чистого React-кода. Часть 1
12 мин
Перевод
Написание чистого кода — это навык, который становится обязательным на определённом этапе карьеры программиста. Особенно этот навык важен тогда, когда программист пытается найти свою первую работу. Это, по существу, то, что делает разработчика командным игроком, и то, что способно либо «завалить» собеседование, либо помочь его успешно пройти. Работодатели, принимая кадровые решения, смотрят на код, написанный их потенциальными сотрудниками. Код, который пишет программист, должен быть понятен не только машинам, но и людям.
В материале, первую часть перевода которого мы публикуем сегодня, представлены советы по написанию чистого кода React-приложений. Актуальность этих советов тем выше, чем больше размер проекта, в котором применяются изложенные в них принципы. В маленьких проектах, вероятно, можно обойтись и без применения этих принципов. Принимая решение о том, что нужно в каждой конкретной ситуации, стоит руководствоваться здравым смыслом.
В материале, первую часть перевода которого мы публикуем сегодня, представлены советы по написанию чистого кода React-приложений. Актуальность этих советов тем выше, чем больше размер проекта, в котором применяются изложенные в них принципы. В маленьких проектах, вероятно, можно обойтись и без применения этих принципов. Принимая решение о том, что нужно в каждой конкретной ситуации, стоит руководствоваться здравым смыслом.
Facebook Developer Circle: Moscow | Launch Event
1 мин
10 сентября присоединяйтесь к первой встрече сообщества Facebook Developer Circle: Moscow! На встрече, которая пройдет в нашем офисе, расскажем подробно о сообществе и поговорим про интересные технологии.
Среди спикеров:
- Вики-Мария Гиббонс (Facebook, EN) расскажет про Facebook Developer Circle.
- Маркус Брюннер (Facebook, EN) сделает обзор по технологиям, используемых в Facebook.
- Даниил Соколюк (Rambler Group, РУС) поделится опытом использования GraphQL: зачем он нужен и почему начали использовать в Афише.
- Кирилл Высоколов (Waves, РУС) расскажет про внедрение слотов в React и как с их помощью можно гибко и удобно делать композицию сложных UI компонентов.