Texture

Transcript

1. Виктор Даньшин @viktordanshin
2. План доклада 2 • Недостатки и преимущества UIKit • Недостатки и преимущества Texture • С чего начать работу с Texture • Примеры реализации верстки Texture • Фишки Texture
4. Угнать Посчитать за 16 мс • Констрейнты, heightForRowAtIndexPath, sizeThatFits • Декодинг UIImage • Отрисовка текста, градиентов, теней. • Жизненный цикл объектов UIView Стандарт Apple – 60 кадров в секунду 4
5. Недостатки UIKit 5 < 30 кадров в секунду при прокрутке ленты Твиттера на iPhone 6s
6. Недостатки UIKit • Непредсказуемые конфликты констрейнтов 6
7. Недостатки UIKit • Непредсказуемое поведение в новых релизах iOS 7
8. Недостатки UIKit 8
9. Преимущества UIKit •Работает из коробки •Официальная поддержка Apple •Меньше времени уходит на прототипирование и разработку 9
10. Преимущества Texture 10 • 60 кадров в секунду • Совместима c UIKit (можно использовать любые готовые сторонние компоненты) • Переиспользование кода (ASDisplayNode). • Универсальная верстка iPad и iPhone • Простой удобный синтаксис • Преимущества верстки кодом (мержинг, рефакторинг)
11. Недостатки Texture 11 • Поменять механизм отрисовки на другой будет проблематично • Ojective-C++ • Заточен под сеточную верстку (сложная физика и анимации не пройдут) • Сложность навигации по проекту из-за большого количетсва сабклассов ASDisplayNode
12. Сравенение с UIKit: отличия UIKit Texture Быстрое прототипирование + - Поддержка и развитие фреймворка + + Удобство быстрого изменения и поддержки верстки - + Автоматическая отрисовка анимаций - + Количество результатов на StackOverflow by Google 132,000 2,120 Совместная работа и мержинг - + Размер приложения 30,8mb 36,9mb 12
13. С чего начать работу 13 CSS FlexBox
14. С чего начать работу •ASDisplayNode – обертка над UIView •func layoutSpecThatFits(_:ASSizeRange) -> ASLayoutSpec •func animateLayoutTransition(_:ASContextTransitioning) •ASViewController - аналог UIViewController •AS{*}LayoutSpec - опции верстки 14
15. Пример #1 • UIKit: • UIStackView
 + • UILabel • contentHuggingPriority • contentCompressionResistance • Скрытые констрейнты стека 15
16. Пример #1 }Стек: иконка + текст Указываем, что имя должно ужиматься }Стек: иконка + текст + цена } Отступы по краям 16
17. Пример #2 flexWrap 17
18. Intelligent Preloading Диапазон Preload: Данные загружаются из источника. Диапазон Display: Выполняются задачи декодинга изображений и растерзации текста. Диапазон Visible: Нода находится на экране хотя бы на 1 пиксель. 18
19. ASNetworkImageNode 19 •Progressive JPEG Support •Automatic Caching •GIF Support
20. Layout Transition API •layoutSpecThatFits
 – initial + final •animateLayoutTransition 20
21. Виктор Даньшин @viktordanshin 60 FPS – в каждый дом