Чаще всего при выборе этого языка ожидается, что разработка одного приложения под две платформы займёт в два раза меньше времени, чем разработка двух приложений. Но по итогу оказывается, что разработка занимает столько же, если не больше, из-за сложностей, скрытых под внешним блеском и маркетингом. Мы расскажем о некоторых подобных сложностях, с которыми нам пришлось столкнуться за последние несколько месяцев работы с React Native.
ReactJS *
JavaScript-библиотека для создания интерфейсов
Реализация анимации в React Native
Трудно себе представить мобильное приложение, в котором нет анимации. В вебе анимации обычно простые, если они есть вообще (максимум – одна страница сменяет другую). Анимации же в мобильных приложениях требуют к себе совсем другого внимания.
Антипаттерны в React или вредные советы новичкам
Ровно год прошел с момента, как я начал изучать React. За это время я успел выпустить несколько небольших мобильных приложений, написанных на React Native, и поучаствовать в разработке web-приложения с использованием ReactJS. Подводя итог и оглядываясь назад на все те грабли, на которые я успел наступить, у меня родилась идея выразить свой опыт в виде статьи. Оговорюсь, что до начала изучения реакта, у меня имелось 3 года опыта разработки на c++, python, а также мнение, что во фронтенд разработке нет ничего сложного и разобраться во всем мне не составит труда. Поэтому в первые месяцы я пренебрегал чтением обучающей литературы и в основном просто гуглил готовые примеры кода. Соответственно, примерный разработчик, который первым делом изучает документацию, скорее всего, не найдет для себя здесь ничего нового, но я все-таки считаю, что довольно много людей при изучении новой технологии предпочитают путь от практики к теории. Так что если данная статья убережет кого-то от граблей, то я старался не зря.
Опыт разработки тестового задания на React для Aviasales
Привет, я хотел поделиться опытом разработки тестового задания для Aviasales.
Я недавно наткнулся на вакансию React разработчика в компанию Aviasales. Отправил заявку, после чего на следующий день мне ответил HR и сообщил, что я должен буду сделать тестовое задание. Я крайне не люблю делать тестовые задания, так как я должен потратить довольно много времени на их выполнение, а в случае неудачи это станет впустую. Но я согласился...
Истории
История о V8, React и падении производительности. Часть 2
→ Первая часть
Angulareact
У меня есть проблема. Приложение написано на Angular, а библиотека компонентов на React. Делать клон библиотеки слишком дорого. Значит, нужно использовать React-компоненты в Angular-приложении с минимальными затратами. Разбираемся как это делать.
Проблемы и нюансы при разработке под SmartTV с использованием React.js
На современных телевизорах, как мы знаем, можно устанавливать разные приложения, для облегчения работы с какими-то ресурсами и контентом. В большинстве случаев, эти приложения под капотом это обычный браузер, на теликах это Chromium.
Так как это браузер, то ничего нам не мешало использовать React.js для разработки, что повлияло на некоторые проблемы с производительностью.
Я не буду рассказывать о том, как именно нужно делать с примерами кода, я расскажу о нюансах и решениях, которые были приняты.
React Native: Создание анимированного поля ввода с помощью Animated API
Итак, начнем.
Все мы видели такие поля для ввода:
Надпись большая и выглядит как плейсхолдер, пока вы не наведете фокус на ввод. Она станет меньше и поднимется вверх.
Выглядит великолепно. Гладко. Безупречно.
А еще кажется, что только опытный разработчик может так сделать, не правда ли?
Ну, возможно, это и было так до появления React Native, в те времена, когда люди жили в пещерах и творили всякую дичь. Но это осталось в прошлом.
Создание мобильного приложения на React Native
Всем привет. Это будет первой частью в создании нашего мобильного приложения.
Мобильное приложение мы будем делать с помощью react native и expo. Мы создадим не большое новостное приложение. Для этого мы будем использовать php через rest api.
В нашем приложении мы будем выводить статьи, которые будут находиться в phpmyadmin.
История о V8, React и падении производительности. Часть 1
Мы забыли про делегирование в JavaScript. Event delegation in React
Всем привет. Статья о делегирование событий в JavaScript и реализация его в react.js.
О чем собственно речь? Зачем и почему?
Для начала давайте кратко обсудим:
- что есть событие;
- как происходит распространение;
- обработка DOM Level 2 с примером на JavaScript;
И в конце: почему не надо забывать об делегировании в React.
Событие
JavaScript с HTML взаимодействуют между собой за счёт событий (events). Каждое событие служит для того, чтобы сказать JavaScript’у о том, что в документе или окне браузера что-то произошло. Для того чтобы отловить эти события нам нужны слушатели (listeners), этакие обработчики, которые запускаются в случае возникновения события.
Распространение событий
Порядок. Решая проблему: как понять, какой части страницы принадлежит событие? Было реализовано два способа: в Internet Explorer — “всплытие событий”, а в Netscape Communicator — “перехват событий”.
Три типовых ошибки в сфере безопасности, о которых должен знать каждый React-разработчик
Уязвимости React чаще всего проявляются тогда, когда разработчик думает, что он использует защитные механизмы этой библиотеки, хотя на самом деле оказывается, что это не так. Поэтому важно правильно оценивать возможности React, и знать о том, какие задачи программисту нужно решать своими силами.
Сегодня мы поговорим о типичных уязвимостях React, о том, как находить их во время код-ревью, и о том, как от них защищаться.
Приглашаем на JavaScript Meetup SuperJob 10 октября
Специалисты SuperJob поделятся своим опытом оптимизации приложений на React/Redux, использования статических типов с Flow и работы с Node.js.
Традиционно в программе бургеры и неформальное общение.
Дата и время: 10 октября c 19:00 до 21:30
Адрес: Москва, Малая Дмитровка, дом 20
Регистрация: superjob-meetup.timepad.ru/event/1063170/
Ближайшие события
Рекомендации по созданию приложений на React Native. Часть 1
Если вы новичок в мире React Native, то вы знаете, что в нем есть некоторые подводные камни, которых вам хотелось бы избежать. В некоторых случаях вам придется делать выбор наперед, не имея ни малейшего понятия, как и на что он повлияет.
Ниже я составил список лучших практических советов из своего личного опыта, которые, надеюсь, окажутся для вас полезными :)
Современное окружение для React Native приложений
Typescript поможет нам избежать ошибок при разработке и написать более эффективное мобильное приложение.
Современные разработки позволяют интегрировать Typescript в окружение разработки. Так же мы можем использовать VS Code, который отлично поддерживает Typescript.
Также интеграция с React Native даст нам возможность использовать сервис автодополнения, навигацию по коду и рефакторинг.
Expo — это набор инструментов, которые упрощают создание нативных React приложений. В этом уроке я собираюсь показать вам, как вы можете быстро создавать нативные React приложения, используя Expo.
Создание приложения для Slack с использованием функций 8base
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
→ Читать первую часть
fform: React & JSONSchema — максимальная гибкость
Flexibile form (fform) — построитель форм с минимальной избыточностью кода, при этом максимально гибкий и расширяемый. Используемый стэк технологий: React (v16), Redux (опционально), JSONSchema, TypeScript. Основная идея — максиально возможное повторное использование схем, компонентов и функций.
14 советов по написанию чистого React-кода. Часть 1
В материале, первую часть перевода которого мы публикуем сегодня, представлены советы по написанию чистого кода React-приложений. Актуальность этих советов тем выше, чем больше размер проекта, в котором применяются изложенные в них принципы. В маленьких проектах, вероятно, можно обойтись и без применения этих принципов. Принимая решение о том, что нужно в каждой конкретной ситуации, стоит руководствоваться здравым смыслом.
Facebook Developer Circle: Moscow | Launch Event
10 сентября присоединяйтесь к первой встрече сообщества Facebook Developer Circle: Moscow! На встрече, которая пройдет в нашем офисе, расскажем подробно о сообществе и поговорим про интересные технологии.
Среди спикеров:
- Вики-Мария Гиббонс (Facebook, EN) расскажет про Facebook Developer Circle.
- Маркус Брюннер (Facebook, EN) сделает обзор по технологиям, используемых в Facebook.
- Даниил Соколюк (Rambler Group, РУС) поделится опытом использования GraphQL: зачем он нужен и почему начали использовать в Афише.
- Кирилл Высоколов (Waves, РУС) расскажет про внедрение слотов в React и как с их помощью можно гибко и удобно делать композицию сложных UI компонентов.
Вклад авторов
ru_vds 1186.4aio350 439.5jarvis394 375.0artalar 265.0MrCheater 199.4varanio 191.0EFS_programm 168.0maxfarseer 163.8comerc 161.6kashey 155.0