# Почему не # pixel perfect? [Ссылка на доклад](https://hackmd.io/@dv0MYzVgRIuMiLqpNVkLEg/Syfz_fbIo) --- ### Краткие ответы на некоторые "Почему не?" вопросы --- ## Почему не ## нативная разработка? - Две платформы - две команды --- ## Нативная разработка - В два раза дороже - В два раза больше коммуникаций - В два раза больше компромиссов - Не используется системный функционал  --- ## Кроссплатформа - Возможность кросс-ревью с вебом - Избежать конкуренции с банком в найме нативщиков - Одно решение для двух платформ  --- ## Почему не ## другой фреймворк? - Популярность технологии - Примеры крупных проектов - Возможность выйти за рамки --- ## Популярность  --- ## Flutter ## Примеры крупных проектов  --- ## React native ## Примеры крупных проектов  --- ## Выйти за рамки сложно Но возможно использовать нативные api - Оплата - Пуши  ---  --- ## React to native Превращаем результат работы React в нативные представление --- Превращаем `<View>` в Web | iOS | Android :----------------:|:------------------:|:------------------: `<div>` | `UIView` | `android.view` --- --- ## На самом деле все сложнее Например наследование стилей отсутствует Реализовано только очень ограниченно для текста <span style="font-size:23px"> ```jsx <Text style={styles.bold}> I am bold <Text style={styles.red}> and red</Text> </Text> ``` </span> Превращается в нечто совершенно иное <span style="font-size:23px"> ```swift! let fAttributes = [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 36)] let sAttributes = [NSAttributedString.Key.foregroundColor: UIColor.red] let fString = NSMutableAttributedString(string: "I am bold ", attributes: fAttributes) let sString = NSAttributedString(string: " and red", attributes: sAttributes) firstString.append(secondString) ``` </span> --- #### Фреймворк пытается подружить различия #### И привести к общему знаменателю  --- #### Но иногда не понимает как это сделать #### И оставляет решение за нами ```javascript! import { Platform } from 'react-native'; if (Platform.OS === 'android' && Platform.Version >= 29) { console.log('Андроид 10, не меньше!'); } if (Platform.OS === 'ios') { console.log("Ммм, айфон!") } ``` --- #### Скорее исключение ```javascript if (isAndroid) { transparentBorders } ```  --- ## Ожидания и реальность  --- ## Пример компонента в коде Макет - 12 | Приложение - 10 :----------------:|:------------------: | ```javascript <Картинка /> <View style={contentWithCover}> <Texts.BodyM>{"Путешествия по миру 16.01.19"}</Texts.BodyM> <Texts.Heading3>{"Что посмотреть в Париже за один день"}</Texts.Heading3> <Bubble count={17} /> </View> ``` --- Отступы и цвета ```css .contentWithCover { paddingBottom: Spacing.size20, paddingHorizontal: Spacing.size20, borderBottomLeftRadius: Spacing.size15, borderBottomRightRadius: Spacing.size15, backgroundColor: getDynamicColor(ColorTokens.SURFACE_PRIMARY), }, ``` --- ## Почему не ## совпадают отступы  --- ## Отличается реализация И отступы не должны совпадать Макет отцентрован  --- Приложение ```javascript <ImageBackground> <View style={отступСлева: 2}> <Bubble count={21} /> </View> </ImageBackground> ``` --- #### По разному работает на разных системах ```javascript if (isAndroid) { transparentBorders } ```  --- ## Макет статический а приложение динамическое  --- ## Отличаются токены дизайн системы --- ## Токены отступов в дизайне Дизайн | Приложение :----------------:|:------------------:  |  --- ## Токены бордер радиуса Дизайн | Приложение :----------------:|:------------------:  |  --- ## Почему не ## выровнен текст по вертикали --- ## Дизайн токены совпадают Заголовки в дизайн-системе  Заголовки в коде ```javascript [TextPresets.HEADING1]: { fontSize: FontSize.HEADING1, lineHeight: LineHeight.HEADING1, fontWeight: FontWeight.bold, color: SURFACE_ON_PRIMARY_COLOR, } ```  --- ### Высота текста складывается из различных параметров шрифта  --- ## Текст в приложении это не только текст  --- ## Внутри этой коробочки ## текст может располагаться по разному  --- ## Android и iOS считают lineHeight по разному  --- ## Токены цветов Токены | Цветовая тема :----------------:|:------------------: | --- ## Почему не ## Svg - Svg не поддерживается из коробки - В iOS поддержку добавили в 2020 - Xcode 12 Используем png --- ## Отличия от веба Веб отличается от веба - Движок не вечнозеленый - Обратная совместимость - Использование того, что точно поддерживается - Предоставляемые фреймворком компоненты - отличаются аттрибуты - Верстка только flex --- ## Отличия от веба - Батарейка - Ширина экрана - перенестись может все что угодно - Интернет может отсутствовать, но приложение продолжит работать - Траффик и скорость --- ## Dev-tools существуют Хоть и не такие удобные как в вебе  --- ## Сcылки [Ссылка сюда](https://hackmd.io/@dv0MYzVgRIuMiLqpNVkLEg/Syfz_fbIo) [Медуза и флаттер](https://habr.com/ru/company/meduza/blog/501786) [Andoroid and iOS text quirks](https://codeburst.io/react-native-quirks-2fb1ae0bbf80) ---