Интерфейс для React Native приложения – быстро и без боли

Transcript

1. Константин Дзюин · 18 Апреля 2019 Интерфейс для React Native приложения — быстро и без боли
2. He11o!
3. Константин Дзюин UI Unit Lead, Frontend, Badoo
 17 лет в разработке интерфейсов, 6 лет в Badoo, 3 года в Лондоне
4. Вызов бизнеса –
 новое приложение на React Native
5. Lumen Дейтинг 50+
7. 1. Дано • React ~ React Native • UI в React Native 2. Решение • Подходы • Инструменты 3. Ответ
8. Шесть
 недель Жесткий тайминг как испытание для команды и технологии Команда из трех человек Максимальный результат минимальными ресурсами Судьба React Native Новые проекты для frontend vs fallback на нативные команды
9. Мы проверили, сможем ли мы сделать это быстро и качественно
10. Как выжить разработчику интерфейса в React Native приложении?
11. Как выжить разработчику интерфейса в React Native приложении? Как выжить разработчику интерфейса в React Native приложении? Особенно, когда специфика в новинку
12. Как выжить разработчику интерфейса в React Native приложении? Как выжить разработчику интерфейса в React Native приложении? Особенно, когда специфика в новинку Как выжить разработчику интерфейса в React Native приложении? Особенно, когда специфика в новинку Особенно, когда у тебя всего 6 недель
13. Но ведь React Native и React – 
 это примерно одно и то же?
14. Компонентный подход Компонент Композиция
15. import React from 'react'; import PropTypes from 'prop-types'; import ButtonGroup from 'Components/_new/_UI/ButtonGroup/ButtonGroup'; import Button from 'Components/_new/_UI/Button/Button'; function ContinueBlock(props) { const { onClickContinue, onClickDismiss, } = props; return ( <ButtonGroup> <Button text={'Continue'} onClick={onClickContinue} /> <Button color={Button.Color.NEUTRAL} text={'Dismiss'} onClick={onClickDismiss} /> </ButtonGroup> ); } ContinueBlock.propTypes = { onClickContinue: PropTypes.func, onClickDismiss: PropTypes.func, }; export default ContinueBlock;
16. <ButtonGroup> <Button text={'Continue'} onClick={onClickContinue} /> <Button color={Button.Color.NEUTRAL} text={'Dismiss'} onClick={onClickDismiss} /> </ButtonGroup>
17. Сначала я так думал, 
 но когда начал погружаться – 
 оно на меня набросилось.
18. Мир React Native отличается от привычного мира React и Web
19. <div /> <span /> <style /> <table /> <View /> <Text /> StyleSheet ???
20. Text and styles
21. <div>We can add text to block in web</div> <View>But not in React Native</View> {/* it will fail */} <View><Text>Only in the text node</Text></View> Text and styles
22. <div>We can add text to block in web</div> <View>But not in React Native</View> {/* it will fail */} <View><Text>Only in the text node</Text></View> <div style={{ color: 'red' }}> ... <div>Very red text via inheritance</div> ... </div> <View style={{ color: 'red' }}> {/* it will fail */} ... <Text style={{ color: 'blue'}}>Text color only on text elements</Text> ... </View> Text and styles
23. Layout в React Native https://yogalayout.com/docs/ http://facebook.github.io/react-native/docs/layout-props
24. Layout в React Native Position and units Только relative & absolute Многие свойства работают только с логическими пикселями https://yogalayout.com/docs/ http://facebook.github.io/react-native/docs/layout-props
25. Layout в React Native Position and units Только relative & absolute Многие свойства работают только с логическими пикселями Layout and Yoga flex: [number] По умолчанию – колонка, 
 а не ряд https://yogalayout.com/docs/ http://facebook.github.io/react-native/docs/layout-props
26. Layout в React Native Position and units Только relative & absolute Многие свойства работают только с логическими пикселями Layout and Yoga flex: [number] По умолчанию – колонка, 
 а не ряд Aspect 
 Ratio Отлично работает в React Native Еще не доступно в CSS https://yogalayout.com/docs/ http://facebook.github.io/react-native/docs/layout-props
27. Кто помнит, что это? <!--[if IE ]> <link href="ie.css" rel="stylesheet" type=“text/css" /> <![endif]—>
28. Кто помнит, что это? zoom: 1; display/*\**/: none\9;
29. Кто помнит, что это?
30. <TextInput styles={[ styles.textInput, ]} />
31. <TextInput styles={[ styles.textInput, Platform.OS === 'android' && { padding: 0, paddingTop: UIKit.Spacing.XSM + 1, paddingBottom: UIKit.Spacing.LG - 1 }, ]} />
32. <TextInput styles={[ styles.textInput, Platform.OS === 'android' && { padding: 0, paddingTop: UIKit.Spacing.XSM + 1, paddingBottom: UIKit.Spacing.LG - 1 }, Platform.OS === 'ios' && { marginTop: -0.5, padding: 0, paddingTop: UIKit.Spacing.XSM - 2, paddingBottom: UIKit.Spacing.LG + 1 }, ]} />
33. <TextInput styles={[ styles.textInput, Platform.OS === 'android' && { padding: 0, paddingTop: UIKit.Spacing.XSM + 1, paddingBottom: UIKit.Spacing.LG - 1 }, Platform.OS === 'ios' && { marginTop: -0.5, padding: 0, paddingTop: UIKit.Spacing.XSM - 2, paddingBottom: UIKit.Spacing.LG + 1 }, Platform.OS === 'ios' && !this.props.multiline && { paddingTop: UIKit.Spacing.XSM - 4, paddingBottom: UIKit.Spacing.LG + 1 }, ]} />
34. <TextInput styles={[ styles.textInput, Platform.OS === 'android' && { padding: 0, paddingTop: UIKit.Spacing.XSM + 1, paddingBottom: UIKit.Spacing.LG - 1 }, Platform.OS === 'ios' && { marginTop: -0.5, padding: 0, paddingTop: UIKit.Spacing.XSM - 2, paddingBottom: UIKit.Spacing.LG + 1 }, Platform.OS === 'ios' && !this.props.multiline && { paddingTop: UIKit.Spacing.XSM - 4, paddingBottom: UIKit.Spacing.LG + 1 }, Platform.OS === 'ios' && !value && { paddingTop: 5 } ]} />
38. Для некоторых примитивов из комплекта React Native нужен тюнинг
42. А некоторые компоненты 
 вообще не настроить
44. Отдельная история –
 отладка и инспектирование
 компонент и их фрагментов
47. После ошибки в коде 
 hot reload не сработает.
49. Что же нам поможет?
50. Что же нам поможет? Безошибочный код “на ощупь”
51. Что же нам поможет? Безошибочный код “на ощупь”
52. Что же нам поможет? Безошибочный код “на ощупь” Оптимальные подходы
53. Что же нам поможет? Безошибочный код “на ощупь” Оптимальные подходы Ускоряющие инструменты
54. Подходы и паттерны
55. Separation of concerns
56. Separation of concerns Logic Отвечает за логику и клиент- серверное взаимодействие UI Отвечает за презентацию и визуальные состояния
57. Separation of concerns Container Отвечает за логику и клиент- серверное взаимодействие View Отвечает за презентацию и визуальные состояния
58. Давайте договоримся
59. 1 Обсуждаем с продуктовой стороны Давайте договоримся
60. 1 Обсуждаем с продуктовой стороны 2 Обсуждаем с технической стороны Давайте договоримся
61. 1 Обсуждаем с продуктовой стороны 2 Обсуждаем с технической стороны 3 Common language Давайте договоримся
62. Что мы получаем?
63. 1 Протокол UI похож на API приложения Что мы получаем?
64. 1 Протокол UI похож на API приложения 2 Разработчики могут работать в изоляции Что мы получаем?
65. 1 Протокол UI похож на API приложения 2 Разработчики могут работать в изоляции 3 Планирование задач в два потока Что мы получаем?
66. Инструменты
67. Готовь сани летом,
 а дизайн систему перед фичами
68. Design system Styleguide
69. Инструменты Стайлгайд https://react-styleguidist.js.org/ https://storybook.js.org/
70. Инструменты Стайлгайд https://react-styleguidist.js.org/ https://storybook.js.org/
71. Инструменты Стайлгайд https://react-styleguidist.js.org/ https://storybook.js.org/
72. Инструменты Стайлгайд
73. Инструменты Стайлгайд
74. Инструменты Стайлгайд
75. Инструменты Стайлгайд
76. Инструменты Стайлгайд
77. Инструменты Стайлгайд
78. Инструменты Стайлгайд
79. Styleguide Visual Regression Testing
80. Инструменты VRT
81. Инструменты VRT
82. Инструменты VRT
83. Styleguide и VRT
 сокращают время тестирования Особенно важно, когда у тебя всего 6 недель
84. Это может показаться вам странным и неожиданным, но…
85. Организация рабочего пространства
88. Скорость, 
 польза и комфорт
89. Скорость и комфорт
90. Скорость и комфорт UI для новой фичи Выбор подходящих компонент и их композиций. Если компонент новый – разрабатываем удобно.
91. Скорость и комфорт UI для новой фичи Выбор подходящих компонент и их композиций. Если компонент новый – разрабатываем удобно. Скорость тестирования Интерфейс уже протестирован и машиной, и человеком.
92. Скорость и комфорт UI для новой фичи Выбор подходящих компонент и их композиций. Если компонент новый – разрабатываем удобно. Скорость тестирования Интерфейс уже протестирован и машиной, и человеком. Скорость разработки С использованием комплекса подходов и инструментов мы увеличили скорость разработки.
93. Challenge
94. 1 Приложение запущено, растёт и развивается Challenge
95. 1 Приложение запущено, растёт и развивается 2 6 недель – реально, даже если вас всего трое Challenge
96. 1 Приложение запущено, растёт и развивается 2 6 недель – реально, даже если вас всего трое 3 Бесценный опыт и mindset shift Challenge
97. Повторил бы я опыт с React Native в реальной жизни еще раз? – Да Особенно, когда у меня всего 6 недель
99. CHEERS! tech.badoo.com telegram / twitter / github @kdzuin