IT-инфраструктура для бизнеса и творчества

React Native vs Real Native. Выбираем между нативной и кроссплатформенной разработкой

В чем хороша кроссплатформенная разработка на React Native, зачем JS-командам нужны нативщики, и в чем преимущества и недостатки обоих способов в реальном проекте. Кратко законспектировали техноверсус парней из Mercury Development с прошлого фестиваля, полную версию которого можно посмотреть в видео.

Но лучше не стоит: кажется, звукорежиссер не пережил афтепати, пришлось писать звук на старый андроид 🙂

Мы еще застали WebView и Phone Gap, писали на Xamarin и других фреймворках: набивали шишки, пробовали, разочаровались и снова пробовали, а в итоге забрасывали. И только с React Native вышло иначе. На RN пишем с 2017 года и с успехом выпустили в релиз 14 проектов. Этот фреймворк делает ровно то, что обещает.

Павел Белобородов
Главный по развитию бизнеса и PM в Mercury Development

Раунд 1. Цена и время

На React Native на одном из проектов удалось добиться до 95% повторного использования кода между iOS и Android. Вторую платформу получили по цене тестирования и дебаггинга, поэтому скорость разработки на RN выше.

Раунд 2. Требования к команде

Еще одно преимущество React Native перед нативной разработкой в экономии рабочих часов, но есть нюанс.

Был случай, когда писали 2000-часовой проект на React Native под iPad. Благодаря RN, нам удалось переписать приложение под Microsoft Surface за 11% дополнительного времени. Быстро пересобрали прогу, пофиксили баги и все заработало.

Павел Белобородов
Главный по развитию бизнеса и PM в Mercury Development

Не всегда модули React Native работают как надо. В таких случаях нам остается два варианта: менять некорректно работающий модуль на другие компоненты или чинить баги в нативном коде. В первом случае мы усложняем код, а для второго в команде должны быть нативные разработчики. Хорошо когда они сидят в соседнем кабинете и плохо, когда такой роскоши нет.

Михаил Самолинов

Отвечает за мобильную разработку в Mercury Development, PM

Wix.com переписали свое приложение на React Native, и сейчас в их команде сидят примерно 10% нативных разработчиков на случай возможных форс-мажоров.

Раунд 3. Сопровождение и развитие продукта

Стоимость

После релиза команда хочет как можно меньше ресурсов тратить на сопровождение проекта, а в интересах заказчика платить меньше за поддержку уже реализованного продукта. В этом смысле приложения на React Native дешевле и для заказчика, и для разработчика — на сопровождении нужен один JS-программист вместо двух нативных.

Feature Parity

Нативная разработка под Android и iOS не равна по времени. Чем дольше длится проект, тем сильнее расходятся код и архитектура. Как следствие, новая фича может ложиться на одну реализацию и не ложиться на другую.

Зависимости

React, как опенсорс-проект, собран из множества разных библиотек и сторонних компонентов, из-за чего количество зависимостей намного больше, чем в нативе. В 2017–2018 годах была огромная проблема с их стабильностью, рефакторингом и дебаггингом, но в последние год-два она практически исчезла и зрелые зависимости обновляются разработчиками быстро и часто.

Раунд 4. Look & Feel

Из коробки на React Native можно получить быстрый интерфейс с близким к нативному пользовательским опытом, а GUI накидывается в среднем в полтора раза быстрее.

С другой стороны, приложение с таким интерфейсом едва ли зафичерят в AppStore или Play Market — интерфейс приложения будет отличаться и не в пользу RN.

Раунд 5. Производительность

React Native хуже справляется с обработкой больших массивов данных. Кроме того, приложения на нем запускаются дольше, чем нативные приложения. Если нужна максимальная производительность — лучше выбрать нативную разработку.

Бонус React Native

Мобильное приложение на React Native легко превратить в веб-приложение и запустить на UWP.

Сравниваем

Что использовать

Эксперты из Меркури спорят касательно многих моментов, но сходятся в одном: все, что можно делать на React Native, нужно делать именно на нем. Конечно, при условии, что у вас сильная веб-команда. Вот только можно далеко не все: максимальная производительность, нативный UI или тесная синхронизация с аппаратными компонентами остается за нативной разработкой.

Приглашение на 404fest 2021

В этом году Фестиваль 404 пройдет 25-26 сентября в Самаре, в шикарном пятизвездочном отеле Лотте. В числе спикеров Руслан Фазлыев — программист из Ульяновска , продавший свой стартап за $500 млн, дизайнер и блогер Артемий Лебедев, лидеры сообщества «Веб-стандарты» Вадим Макеев и Никита Дубко, Юрий Ветров, Илья Бирман и еще много крутейших авторов со своим уникальным бэкграундом.

Промокод на 1000 рублей — VCRU

Приходите сами и друзей зовите 😎

{ "author_name": "Фестиваль 404", "author_type": "self", "tags": [], "comments": 6, "likes": 3, "favorites": 11, "is_advertisement": false, "subsite_label": "dev", "id": 290891, "is_wide": true, "is_ugc": true, "date": "Wed, 08 Sep 2021 15:23:27 +0300", "is_special": false }
(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ { name: 'camera', url: `${cdnUrl}CameraCat`, text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', link: 'https://vc.ru/selectel/306690', num: 3 }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
6 комментариев
Популярные
По порядку
Написать комментарий...

С другой стороны, приложение с таким интерфейсом едва ли зафичерят в AppStore или Play Market — интерфейс приложения будет отличаться и не в пользу Реакта.

React Native как раз-таки стоит над платформой и оперирует платформенными примитивами. Если есть специальный платформенный UI Kit, то можно использовать его и никто не отличит React Native от не React Native приложения в плане Look & Feel. Что не скажешь, например, про Flutter.

4

Спасибо за уточнения!

0

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

0

 React, как опенсорс-проект, собран из множества разных библиотек и сторонних компонентов, из-за чего количество зависимостей намного больше, чем в нативе. В 2017–2018 годах была огромная проблема с их стабильностью, рефакторингом и дебаггингом, но в последние год-два она практически исчезла и зрелые зависимости обновляются разработчиками быстро и часто.

На самом деле проблем с зависимостями, из которых собран React Native, нет. Да и на ранних этапах я их не помню. Другое дело, что сторонние либы для RN могут конфликтовать друг с другом. У нас был прям недавно такой кейс.

2

промокод смешной получился, коненчо

1

у вас jpeg головного мозга ред.

0
Читать все 6 комментариев
Путин объявил «нерабочими» дни с 30 октября по 7 ноября с сохранением зарплаты Статьи редакции

Регионы могут сами установить сроки — начать уже с 23 октября.

Разбор: «Яндекс» действительно притворяется системным сообщением iOS на iPhone

Чтобы убедиться, так ли это, я решил открыть сайт одиозной компании «Яндекс» на компьютере в браузере Safari, включив режим отладки и используя «юзер-агент» iPhone. И проверить, действительно ли это системное сообщение или «Яндекс» имитирует системное сообщение iOS, используя фишинговый методы?

Сделай сам: умная камера для наблюдения за питомцами

Обучаем нейросеть на котиках.

Sports.ru снял документальный фильм про «Зенит»-2008

В центре внимания — «золотое поколение» футбольного клуба, завоевавшее Кубок и Суперкубок УЕФА в 2008 году.

Трейлер фильма «Зенит-2008. Победная песня»
М.Видео-Эльдорадо получила две награды престижной HR-премии «Хрустальная пирамида»
«Яндекс.Афиша» уже второй год не может вернуть мне деньги за билет

В феврале 2020 года, когда про коронавирус только начали говорить(и его еще не признали пандемией) я купил билет на концерт IAMX в Санкт-Петербурге, который должен был состояться 3 апреля 2020 года.

Арт-экология. Уличные тренды и успешные городские проекты

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

Ленд-арт объект "Рогатка желаний" на фестивале ленд-арт в Муслюмово фото: организаторы фестиваля
Делал дизайн, пока говорил по телефону: история Пола Рэнда, который создал логотипы для IBM и Стива Джобса Статьи редакции

Рисовал антифашистский журнал, работал арт-директором в Esquire и делал рекламу на азбуке Морзе.

Пол Рэнд   monitorbox
Retail Innovation Tech Alliance (RITA) дал старт новому отбору стартапов

Retail Innovation Tech Alliance (RITA) объявляет о шестом отборе стартапов для реализации совместных проектов с крупнейшими ритейл и технологическими корпорациями России и Казахстана.

null