CodeFest 2018. Андрей Оздьон (Lingualeo) — История одного портирования: о чем стоит подумать заранее при работе с React Native

Посмотрите выступление Оздьона: https://2018.codefest.ru/lecture/1300/

React Native — нестабильная, но крайне мощная при правильном использовании технология, мириться с проблемами которой имеет смысл только при определенных условиях в команде

При разработке приложения со сложной архитектурой и/или кастомным UI все равно нужен сильный нативный разработчик под каждую платформу и это обязательное условие

Интеграция React Native в существующее приложение — задача на порядок сложнее разработки с нуля по очевидным и не очень причинам, в том числе довольно слабой документированности этой возможности.

Интеграция в существующее приложение связана с добавлением ряда новых ограничений в работе приложения, с которыми дальше придется жить

Функционал библиотеки React Native на одной платформе может довольно сильно отличатся от другой платформы даже в рамках одного компонента, это нужно будет учитывать при разработке дизайна и проработке внутрикомандных паттернов реализации

Разработка часто сводится к поиску компромиссов в целях оптимизации производительности, а не к реализации задач разработки

Время разработки/портирования крайне сложно спрогнозировать ввиду возникновения серьезных заминок или ограничений в неожиданных местах: в целом разработка занимает столько же времени, сколько и нативная, если не больше

Transcript

1. REACT NATIVE ИСТОРИЯ ОДНОГО ПОРТИРОВАНИЯ
2. REACT NATIVE? ЧТО ТАКОЕ Технология компании Facebook, позволяющая создавать мобильные приложения на языке JavaScript
3. ОДИН КОД Проблема так или иначе встает перед каждой командой, но сколько у этой проблемы решений? И все ли они жизнеспособны? МНОГО ПЛАТФОРМ
4. РЕЙТИНГ КРОССПЛАТФОРМЕННЫХ ТЕХНОЛОГИЙ 03 02 00 01 ПОДКЛЮЧАЕМЫЕ БИБЛИОТЕКИ ИГРОВОЙ ДВИЖОК REACT NATIVE WEBVIEW APPLICATION ПО ВЕРСИИ LINGUALEO
5. WebView Application React Native Логика в библиотеках + outsource Логика в библиотеках Игровой движок СКОРОСТЬ РАЗРАБОТКИ КАЧЕСТВО УДОБСТВО
6. РАЗВИТИЕ ИДЕИ REACT NATIVE ДАЛЬШЕ БУДЕТ ЛУЧШЕ? Что дальше?
7. R E A C T N A T I V E В L I N G U A L E O УПОР НА МОБИЛЬНУЮ РАЗРАБОТКУ Ой, тут выступление идёт? Я не вовремя, да? Тихо-тихо, ухожу…
8. АЛЬФА-ПРОТОТИП Внутренние тестирование технологии ОТВЕТНЫЙ УДАР Перенос реализованного функционала на Android РЕЛИЗЫ В ОДНИ ВОРОТА Первый релиз React Native на iOS, последующее усиление функционала
9. ПОЛНЫЙ ПАРИТЕТ ТРЕНИРОВОК? Большую часть работы, проделанной в рамках одной платформы, удается перенести на другую, но не всегда в том виде и в те сроки, которые представляются вначале
10. ЧТО ПОД КАПОТОМ У REACT NATIVE Реализация кроет в себе львиную долю проблем, с которыми придется рано или поздно встретиться
11. КОМПРОМИСС - Разные гайдлайны под платформы - Изначально разная архитектура - Невозможность реализовать определенные вещи в силу ограничений платформы
12. EARLIER ADOPTERS - React Native сейчас имеет «стабильную» версию 0.5* - Каждое следующее изменение может быть несовместимым - Хвост обновления зависимостей проекта не поддается прогнозированию Ну, программируешь ты лучше, чем рисуешь… Чет я на себя не похож ;)
13. APPLE ПОШУТИЛИ, МЫ ГРУСТНО ПОСМЕЯЛИСЬ IPHONE X Feature Detection и так является не самой сильной стороной React Native. А скоро и вовсе станет бесполезен.
14. ОТЛАДКИ Поведение релизной и отладочной сборок отличается несколько больше, чем бы вам того хотелось Не все проблемы видны в отладочной сборке и не все, что кажется проблемой в отладочной сборке, стоит внимания Особняком выделяются проблемы производительности и утечки памяти на стыке технологий ИСКУССТВО Он такие слова во время отладки говорил… Страшные… Жуткие… А потом этим ртом с женой общался, кошмар!
15. Анимация Экономия View Тузы в рукаве Есть несколько способов решить проблемы и остаться в здравом уме. Но без жертв не обойдется О. ОПТИМИЗАЦИЯ СЛОВАРЬ REACT NATIVE
16. АНИМАЦИЯ React идеологически плохо совместим с анимацией. React Native умеет не делать ошибок старшего брата и дает опцию useNativeDriver. Только для свойств opacity и transform. И С П О Л Ь З У Й С И Л У Н А Т И В Н О Й С Т О Р О Н Ы
17. ЭКОНОМИЯ VIEW Большое количество анимированных объектов не спасает даже вывод анимации на сторону нативной реализации, нужно постоянно думать как их сэкономить М Е Н Ь Ш Е — Л У Ч Ш Е
18. ТУЗЫ В РУКАВЕ Иногда сама реализация жизненного цикла React не позволяет улучшить быстродействие. Тогда приходится идти на хитрости Р А Д И К А Л И З М К А К И Н С Т Р У М Е Н Т
19. Решает проблемы стилевой совместимости, разницы экранов, платформ и прочие экстремальные случаи ИНСТРУМЕНТЫ В ЯЩИКЕ Позволяет рационально использовать возможности сборщика React Native COMPATIBILITY LLCONTROLLER
20. COMPOSITION VIEW CONTROLLER LLCONTROLLER Отвечает за общение с внешним стейтом, расчет, преобразование и проксирование входных данных для View Компонент без привязки к стейту, имплементирующий интерфейс контроллера Совокупный компонент для внешнего использования М А Г И Я З Д Е С Ь
21. ПРИМЕР РЕАЛИЗАЦИИ В СТУДИЮ // controller.js export class Controller extends React.Component { render() { const {children: View} = this.props; return (<View {…this.props} {…this.state} />); }; } // view.ios.js export class ViewIOS extends React.Component {…} // view.android.js export class ViewAndroid extends React.Component {…}
22. ПРИМЕР РЕАЛИЗАЦИИ В СТУДИЮ // utils.js export function composeComponent(Controller, View) { class LLComposed extends React.Component { static displayName = ( `LLComposed(${Controller.displayName}|${View.displayName})` ); render() { return React.createElement( Controller, this.props, View ); } } return LLComposed; }
23. ПРИМЕР РЕАЛИЗАЦИИ В СТУДИЮ // component.js import {composeComponent} from ”./utils”; import Controller from ”./controller”; import View from ”./view”; export default composeComponent(Controller, View); // somewhere-else.js import Component from ”./component”; … render() { return <Component prop1=“val1” prop2={2} />; } …
24. В ЗАКЛЮЧЕНИИ ПОРА ОТВЕТИТЬ НА ЗАДАННЫЙ ВОПРОС О чём стоит задуматься перед тем, как выбрать React Native?
25. О З Д Ь О Н А Н Д Р Е Й Senior Frontend Developer A.OZDION@LINGUALEO.COM WWW.LINKEDIN.COM/IN/AAHZZYY Мог бы и представить, я что, зря выперся посреди выступления?