Сегодня мы публикуем вторую часть перевода материала, посвящённого внутренним механизмам 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/
Рекомендации по созданию приложений на 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 компонентов.
Как управлять React Data Grid через Redux
6 мин
Это продолжение предыдущей статьи: Зачем писать свой React Data Grid в 2019
Для чего нужен Redux? Ответов много. Например, чтобы работать с общими данными в разных React-компонентах. Но можно воспринимать Redux еще как способ манипулирования компонентой. Сам взгляд интересный: любой React-компонент может управлять другим React-компонентом через Redux.
Возьмём React-компоненту, которая отображает данные в виде строк и колонок (Data Grid, грид). Каким функционалом у нее можно управлять? Составом колонок и строк. Выделением. Хорошо бы и прокруткой данных.
Заменяют ли хуки в React Redux?
13 мин
Перевод
С тех пор, как в React появились хуки, возникает много вопросов о том, способны ли они заменить Redux.
Я полагаю, что хуки и Redux имеют мало общего между собой. Хуки не дают нам неких новых удивительных возможностей по работе с состоянием. Они, вместо этого, расширяют API, позволяющие делать в React то, что в нём уже было возможным. Однако API хуков сделал гораздо удобнее работу со встроенными возможностями React по управлению состоянием. Оказалось, что новыми возможностями по работе с состоянием пользоваться легче, чем старыми, которые имелись в компонентах, основанных на классах. Теперь я гораздо чаще, чем раньше, использую средства по работе с состоянием компонентов. Естественно, поступаю я так лишь тогда, когда это уместно.
Для того чтобы объяснить моё отношение к хукам React и к Redux, мне хотелось бы сначала рассказать о том, в каких ситуациях обычно прибегают к использованию Redux.
Я полагаю, что хуки и Redux имеют мало общего между собой. Хуки не дают нам неких новых удивительных возможностей по работе с состоянием. Они, вместо этого, расширяют API, позволяющие делать в React то, что в нём уже было возможным. Однако API хуков сделал гораздо удобнее работу со встроенными возможностями React по управлению состоянием. Оказалось, что новыми возможностями по работе с состоянием пользоваться легче, чем старыми, которые имелись в компонентах, основанных на классах. Теперь я гораздо чаще, чем раньше, использую средства по работе с состоянием компонентов. Естественно, поступаю я так лишь тогда, когда это уместно.
Для того чтобы объяснить моё отношение к хукам React и к Redux, мне хотелось бы сначала рассказать о том, в каких ситуациях обычно прибегают к использованию Redux.
Статическая типизация в React приложении
4 мин
Перевод
В 2016 году TypeScript начал брать новые высоты. Разработчики принялись полностью переписывать на него многие популярные технологии и добавлять на существующие платформы поддержку статического анализа. Такой глобальный процесс добавил больше стабильности в кодовую базу тысяч, а то и десятков тысяч проектов.
Почему React? По состоянию на сегодняшний день эта библиотека бесспорно доминирует на фоне конкурентов. Вокруг React образовалось самое большое сообщество разработчиков в мире. Каждый третий SPA написан на данной платформе. Также есть множество отличных проектов, связанных с использованием React Native, платформы для iOS, UWP и Android приложений, основанной на React.js.
Поэтому сегодня мы взглянем на возможности, которые дает интеграция двух суперпопулярных инструментов: TypeScript и React.
Почему React? По состоянию на сегодняшний день эта библиотека бесспорно доминирует на фоне конкурентов. Вокруг React образовалось самое большое сообщество разработчиков в мире. Каждый третий SPA написан на данной платформе. Также есть множество отличных проектов, связанных с использованием React Native, платформы для iOS, UWP и Android приложений, основанной на React.js.
Поэтому сегодня мы взглянем на возможности, которые дает интеграция двух суперпопулярных инструментов: TypeScript и React.
Революция или боль? Доклад Яндекса о React Hooks
16 мин
Меня зовут Артём Березин, я разработчик нескольких внутренних сервисов Яндекса. Последние полгода я активно работал с React Hooks. По ходу дела возникали некоторые сложности, с которыми приходилось бороться. Теперь хочу поделиться этим опытом с вами. В докладе я разобрал React Hook API с практической точки зрения — зачем нужны хуки, стоит ли переходить, что лучше учитывать при портировании. В процессе перехода легко наделать ошибок, но избежать их тоже не так сложно.
— Хуки — это просто еще один способ описывать логику ваших компонентов. Он позволяет добавить к функциональным компонентам некоторые возможности, ранее присущие только компонентам на классах.
— Хуки — это просто еще один способ описывать логику ваших компонентов. Он позволяет добавить к функциональным компонентам некоторые возможности, ранее присущие только компонентам на классах.