Особенноси мобильной разработки

Особенности мобильной разработки

Дмитрий Ляпунов

Я: Дмитрий Ляпунов

exфрилансер
двигать пиксели это ОК
немного пишу для SourceJS
разный open-source: DevShelf.us, Lego и другое.

Мобильный фронтенд?

Этот странный мобильный мир

~/Общее

Этот странный, странный мобильный мир
Mobile first

~/Общее

Этот странный, странный мобильный мир
Mobile first
Физиологические особенности

~/Общее

Этот странный, странный мобильный мир
Mobile first
Физиологические особенности
Browser !== webView
Непредсказуемая (..медленная!) сеть

~/Общее

.вёрстка

.вёрстка[GPU + CPU]

Дешевые CSS-анимации: transform (scale, translate, rotate), opacity

vs

.вёрстка[GPU + CPU]

Дешевые CSS-анимации: transform (scale, translate, rotate), opacity
Размер области (~1024x1024) и размера страницы ограничен

.вёрстка[GPU + CPU]

Размер области (~1024x1024) и размера страницы ограничен

If pages are too big they may take an unduly long time to load. In addition, mobile devices typically have restrictions on the largest page they can accommodate.

W3C - Mobile Web Best Practices 1.0

.вёрстка[GPU + CPU]

Дешевые CSS-анимации: transform (scale, translate, rotate), opacity
Размер области (~1024x1024) и размера страницы ограничен

text-indent: -9999pxtext-indent: -9999px

Контексты рендеринга // translate3d(0)
Коэффициенты плотности экранов

.вёрстка[графика]

data-uri в 6+ раз медленнее, чем ссылка на ресурс

.вёрстка[графика]

data-uri в 6+ раз медленнее, чем ссылка на ресурс
но у нас есть sprites, canvas, svg, emoji, иконочные шрифты
и конечно наша CSS магия

.вёрстка[ W3C ♥]

-webkit-tap-highlight-color

.вёрстка[ W3C ♥]

<input type="email, url, password, number, ..."/>

.вёрстка[ W3C ♥]

-webkit-tap-highlight-color // (покрытие: ~75%)
Правильные поля ввода
::-ms-expand, ::-moz-focus-inner, ::-webkit-scrollbar
:active
<style media="...">, <link media="...">

.вёрстка[ W3C ♥]

@media (min-device-pixel-ratio: 2) {...}@media (min-device-pixel-ratio: 1.5) {...}

-webkit-overflow-scrolling: touch
<a href='sms:29567811'>Send<a>
а еще – facetime:, mailto:, tel:
ARIA, (screen readers)

{ Javascript }

{ Javascript: "Особый подход" }

Javascript любезен, пока не трогют его DOM
requestAnimationFrame(callback)
window.ontouch* = function() {}
Application cache
Иннерционный скроллл
Full-screen mode

{ Javascript: "Особый подход" }

window.scrollTo(0, 1);
Andorid, iOS 6, iOS 7
<meta name="viewport" content="width=device-width, ... , minimal-ui" />
iOS 7 iOS8
body.requestFullScreen(); // хорошая попытка, mozilla!

{ JavaScript: "API" }

Ambient Light Events
Gamepad
Battery Status
The Network Information
Messaging
Screen Orientation

#Bugs

#Bugs-001

Нативный UI
Touch events
Шрифтовые иконки
Links
-webkit-overflow-scrolling: touch
Вёрстка + Unicode + :checked

CSS магия возвращается

> Инспектирование

Chrome Developer Tools

> Инспектирование

Firefox Application manager

> Инспектирование

Weinre

> Инспектирование

        $> npm i -g weinre
        $> weinre httpPort 3333 boundHost 127.0.0.1

> Инспектирование

Weinre
Chrome Developer Tools
XCode + Safari>Develop
Android SDK (Eclipse)
IE11+, Windows Phone SDK

Спасибо (:

Дмитрий Ляпунов

Слайды презентации — leikam.github.io

Особенности мобильной разработки

Дмитрий Ляпунов

Я: Дмитрий Ляпунов

exфрилансер
двигать пиксели это ОК
немного пишу для SourceJS
разный open-source: DevShelf.us, Lego и другое.

Мобильный фронтенд?

Этот странный мобильный мир

~/Общее

Этот странный, странный мобильный мир
Mobile first

~/Общее

Этот странный, странный мобильный мир
Mobile first
Физиологические особенности

~/Общее

Этот странный, странный мобильный мир
Mobile first
Физиологические особенности
Browser !== webView
Непредсказуемая (..медленная!) сеть

~/Общее

.вёрстка

.вёрстка[GPU + CPU]

Дешевые CSS-анимации: transform (scale, translate, rotate), opacity

vs

.вёрстка[GPU + CPU]

Дешевые CSS-анимации: transform (scale, translate, rotate), opacity
Размер области (~1024x1024) и размера страницы ограничен

.вёрстка[GPU + CPU]

Размер области (~1024x1024) и размера страницы ограничен

If pages are too big they may take an unduly long time to load. In addition, mobile devices typically have restrictions on the largest page they can accommodate.

W3C - Mobile Web Best Practices 1.0

.вёрстка[GPU + CPU]

Дешевые CSS-анимации: transform (scale, translate, rotate), opacity
Размер области (~1024x1024) и размера страницы ограничен

text-indent: -9999pxtext-indent: -9999px

Контексты рендеринга // translate3d(0)
Коэффициенты плотности экранов

.вёрстка[графика]

data-uri в 6+ раз медленнее, чем ссылка на ресурс

.вёрстка[графика]

data-uri в 6+ раз медленнее, чем ссылка на ресурс
но у нас есть sprites, canvas, svg, emoji, иконочные шрифты
и конечно наша CSS магия

.вёрстка[ W3C ♥]

-webkit-tap-highlight-color

.вёрстка[ W3C ♥]

<input type="email, url, password, number, ..."/>

.вёрстка[ W3C ♥]

-webkit-tap-highlight-color // (покрытие: ~75%)
Правильные поля ввода
::-ms-expand, ::-moz-focus-inner, ::-webkit-scrollbar
:active
<style media="...">, <link media="...">

.вёрстка[ W3C ♥]

@media (min-device-pixel-ratio: 2) {...}@media (min-device-pixel-ratio: 1.5) {...}

-webkit-overflow-scrolling: touch
<a href='sms:29567811'>Send<a>
а еще – facetime:, mailto:, tel:
ARIA, (screen readers)

{ Javascript }

{ Javascript: "Особый подход" }

Javascript любезен, пока не трогют его DOM
requestAnimationFrame(callback)
window.ontouch* = function() {}
Application cache
Иннерционный скроллл
Full-screen mode

{ Javascript: "Особый подход" }

window.scrollTo(0, 1);
Andorid, iOS 6, iOS 7
<meta name="viewport" content="width=device-width, ... , minimal-ui" />
iOS 7 iOS8
body.requestFullScreen(); // хорошая попытка, mozilla!

{ JavaScript: "API" }

Ambient Light Events
Gamepad
Battery Status
The Network Information
Messaging
Screen Orientation

#Bugs

#Bugs-001

Нативный UI
Touch events
Шрифтовые иконки
Links
-webkit-overflow-scrolling: touch
Вёрстка + Unicode + :checked

CSS магия возвращается

> Инспектирование

Chrome Developer Tools

> Инспектирование

Firefox Application manager

> Инспектирование

Weinre

> Инспектирование

        $> npm i -g weinre
        $> weinre httpPort 3333 boundHost 127.0.0.1

> Инспектирование

Weinre
Chrome Developer Tools
XCode + Safari>Develop
Android SDK (Eclipse)
IE11+, Windows Phone SDK

Спасибо (:

Дмитрий Ляпунов

Слайды презентации — leikam.github.io