CodeFest 2018. Тим Чаптыков и Артур Стамбульцян (ВКонтакте) — Мимикрируем под нативные приложения с React

Посмотрите выступление Тима и Артура: https://2018.codefest.ru/lecture/1292/

У нас есть клиенты для iOS и Android. Мы стараемся релизиться как можно чаще, но частота обновлений клиентов все равно сильно уступает релизам в вебе. Поэтому было решено некоторые разделы клиентов, которые часто требуют правок, сделать в формате веб-приложений, которые открываются на веб-вью, не уводя пользователей в браузер. Мы расскажем вам про библиотеку компонентов, на основе которой можно просто и быстро создавать интерфейсы, которые внешне практически неотличимы от наших мобильных клиентов, а также осветим основные проблемы, возникшие в процессе разработки.

Transcript

1. Мимикрируем под нативные приложения 
 с помощью React Артур Стамбульцян vk.com/arthurstam Тим Чаптыков vk.com/tc
3. Постановка задачи 01
5. Сомнительная задача Сделать «веб» достаточно «нативным» невозможно.
6. Мобильный веб может быть удобнее.
7. Но… Зачем? Хороший вопрос перед любой беседой
8. Нативные приложения Еженедельные релизы Web-приложения Несколько релизов в день
9. Есть кадры
10. Кроссплатформенность iOS, Android и Web-приложение 
 в одном флаконе
11. Почему не React Native? Там же есть кроссплатформенность…
12. Web Хотим открывать в браузере Кроссплатформенность Хотим использовать один cлой представления 
 на всех платформах Открытость Мечтаем дать доступ сторонним разработчикам
16. Интерфейс 
 для разработчиков 02
17. Именование 02/1
19. <BoldButton size="40" color="blue" />
21. <BoldButton size="40" color="blue" />
23. <Button size="xl" type="primary" />
25. Декларативный интерфейс 02/2
26. HTML (1993) <ul> 
 <li>Account</li> 
 <li>General</li> 
 <li>Privacy</li> 
 </ul>
27. VKUI (2017) <List> 
 <ListItem>Account</ListItem> 
 <ListItem>General</ListItem> 
 <ListItem>Privacy</ListItem> 
 </List>

28. Add props <ListItem 
 expandable={true} 
 onClick={expandSomething} 
 icon={userIcon} 
 > 
 Account 
 </ListItem>
 

31. Props / Children
32. Props <Gallery 
 data={[ 
 { 
 source: 'image1.jpg', 
 altText: 'Image 1' 
 }, 
 { 
 source: 'image2.jpg', 
 altText: 'Image 2' 
 }, 
 { 
 source: 'image3.jpg', 
 altText: 'Image 3' 
 } 
 ]} 
 />
33. Children <Gallery> 
 <img src="image1.jpg" alt="Image 1" /> 
 <img src="image2.jpg" alt="Image 2" /> 
 <img src="image3.jpg" alt="Image 3" /> 
 </Gallery>
34. Приводим к массиву React.Children.toArray(props.children); 
 // OR 
 [].concat(props.children);
35. Обрезаем children children.filter(isVisible)
 

36. <Gallery /> <Group 
 title={title}
 description={description}
 > 
 <Gallery style={styles}> 
 <img src="image1.jpg" /> 
 <img src="image2.jpg" /> 
 <img src="image3.jpg" /> 
 </Gallery> 
 </Group>
37. Гибкость <Gallery> 
 <div> 
 <h1>Hello, World!</h1> 
 </div> 
 <img src="image1.jpg" alt="Image 1" /> 
 <img src="image2.jpg" alt="Image 2" /> 
 </Gallery>

38. Переход 
 между экранами 02/3
39. Для 
 пользователей
40. Для разработчиков <View activePanel={state.activePanel}> 
 <ScrollView id="settings" /> 
 <ScrollView id="account" /> 
 </View> 
 
 // Когда нужно будет сменить панель
 this.setState({ activePanel: 'account' }); 
 
 

41. Роутеры, хранилища и прочее по вкусу
42. Интерфейс — панели передаются как children Порядок — задекларирован в children Производительность — отображается 1—2 панели
43. Анимации 02/4
44. anime.js velocity.js react-motion react-css-transition-group CSS Animations
45. Обычное состояние <section> 
 <article className="Panel" /> 
 <article className="Panel Panel--active" /> 
 <article className="Panel" /> 
 <article className="Panel" /> 
 </section>
46. Переход <section> 
 <article className="Panel" /> 
 <article className="Panel Panel--prev" /> 
 <article className="Panel" /> 
 <article className="Panel Panel--next" /> 
 </section>
48. Окончание анимации nextPanel.addEventListener('animationend', () => { 
 this.setState({ 
 visiblePanels: [this.props.activePanel] 
 });
 });
49. Служебные props 02/5
50. Передать часть состояния <View> // Внутри ScrollView ничего не знаем о состоянии
 <ScrollView id="account" /> </View>
51. React.cloneElement React.cloneElement(panel, { isPrev: panel.id === this.state.prevPanel, isNext: panel.id === this.state.nextPanel, isActive: panel.id === this.state.activePanel, isSwiping: this.state.isSwiping });
52. shouldComponentUpdate
53. Развязываем руки 02/6
54. Дизайнер опять сделал отступ в двадцать пикселей вместо десяти…
55. Это норма.
56. Можно так. <div style={{ marginBottom: 10 }}> 
 <Button>Account</Button> 
 </div> 
 <Button>General</Button> 

57. Или так. <Button style={{ marginBottom: 10 }}> Account </Button>
 <Button>General</Button> 

58. Если дизайнер передумал и решил добавить кнопке отступ. И сделать эту кнопку красной. На зеленом фоне. С подчеркиванием. <Button 
 type="cell" 
 style={{ 
 color: 'red', 
 backgroundColor: '#8ffe09', 
 marginTop: 8, 
 textDecoration: 'underline' 
 }}> 
 Account
 </Button>
59. Кастомизация — className — style Решает большинство задач кастомизации компонентов
60. Разработчик лучше знает свою проблему
61. ...restProps 02/7
62. Пример <input onChange={this.props.onChange} value={this.props.value} />
63. Понадобился blur <input onChange={this.props.onChange} onBlur={this.props.onBlur} value={this.props.value} />
64. …и focus <input onChange={this.props.onChange} onBlur={this.props.onBlur} onFocus={this.props.onFocus} value={this.props.value} />
65. А как же disabled? <input onChange={this.props.onChange} onBlur={this.props.onBlur} onFocus={this.props.onFocus} value={this.props.value} disabled={this.props.disabled} />
66. Спустя месяц… <input 
 onChange={this.props.onChange} 
 onBlur={this.props.onBlur} 
 onFocus={this.props.onFocus} 
 onKeyDown={this.props.onKeyDown} 
 onKeyUp={this.props.onKeyUp} 
 value={this.props.value} 
 disabled={this.props.disabled} 
 readonly={this.props.readonly} 
 style={this.props.style} 
 className={this.props.className} 
 id={this.props.id} 
 placeholder={this.props.placeholder} 
 />
67. И где-то рядом PropTypes static propTypes = { 
 onChange: PropTypes.func, 
 onBlur: PropTypes.func, 
 onFocus: PropTypes.func, 
 onKeyDown: PropTypes.func, 
 onKeyUp: PropTypes.func, 
 value: PropTypes.string, 
 disabled: PropTypes.bool, 
 readonly: PropTypes.bool, 
 style: PropTypes.object, 
 className: PropTypes.string, 
 id: PropTypes.string, 
 placeholder: PropTypes.string
 };
68. Впереди еще десятки атрибутов
70. ...restProps const { onChange, ...restProps } = this.props; 
 
 return ( <input {...restProps} onChange={this.onChange} /> );
 

71. <Touch /> 02/8
72. Что умеет — Подписываться на touch-события — Засекать время и координаты — Обрабатывать multitouch — Определять ось движения (X, Y)
74. Slider — 165 LOC Gallery — 386 LOC Tappable — 298 LOC C учетом пустых строк, комментариев и деклараций propTypes.
75. Иконки 02/9
77. Результат import Icon24About from 'vkui/icons/24/about'; 
 // Используем
 <Icon24About />
78. currentColor <div style={{ color: 'red' }}> 
 <Icon24Settings /> 
 </div> 

79. Мобильная специфика 03
80. Fixed + Transform 03/1
82. Решение Запоминаем позицию fixed блоков 
 до трансформации и на время перехода превращаем их в absolute с указанием 
 свойства top.
84. Overscroll 03/2
86. Решение if (scrollTop <= 0) { 
 el.scrollTop = 1; 
 } else if (scrollTop >= scrollHeight - offsetHeight) { 
 el.scrollTop = scrollHeight - offsetHeight - 1; 
 }
87. Константин Земцовский vk.com/imcost Тарас Иванов vk.com/neoxaker
89. Safe-insets 03/3
91. Решение <meta name="viewport" content="viewport-fit=cover"> /* Используем в CSS */ .Header { 
 padding-top: env('safe-area-inset-top'); 
 } 
 .Footer { 
 padding-bottom: env('safe-area-inset-bottom'); 
 }
93. ayogo.com/blog/ios11-viewport
94. Пол пикселя 03/4
95. Пол пикселя — transform — box-shadow — gradients
96. Scale .a { 
 height: 1px; 
 background: #ccc; 
 transform: scaleY(50%); 
 transform-origin: 0 0; 
 }
97. .a { 
 transform: translateY(-0.5px); 
 } Translate
98. Box-shadow .a { 
 box-shadow: 0 0.5px 0 #ccc; 
 }
99. Gradient .a { 
 height: 1px; 
 background: linear-gradient( to top, transparent 50%, #ccc 50% ); 
 } 

100. Итоги 04
101. Масштаб 9 приложений, 48 компонентов Скорость обновления Быстро Скорость разработки Интерфейс из 16 экранов получилось накатать за 3.5 часа
102. Демо 04/1
104. README.md 04/2
105. npmjs.com/package/@vkontakte/vkui Пакет на NPM vkcom.github.io/vkui-styleguide/ Витрина и документация
106. Подключаем VKUI import { View, ScrollView } from '@vkontakte/vkui'; 
 import '@vkontakte/vkui/dist/vkui.css'; 

107. Пишем приложение <View activePanel="main"> 
 <ScrollView id="main"> <h1>Hello, World!</h1>
 </ScrollView> 
 </View>
108. Выводы 04/3
109. Мобильный веб может быть удобнее. #1 Гораздо удобнее, чем вы думаете.
110. Пишите понятный 
 и удобный код. #2 Особенно, если ваш пользователь — разработчик
111. Артур Стамбульцян vk.com/arthurstam Тим Чаптыков vk.com/tc
112. vk.cc/7TNsgL