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

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

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

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

ex-фрилансер
делаю фронтенды для Одноклассников
немного пишу для Sourcejs
комичу в DevShelf.us

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

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

~/Общее

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

~/Общее

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

~/Общее

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

.вёрстка

GPU + CPU
Графика
Избранное от W3C

.вёрстка[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]

Размер области (~1024x1024) и размера страницы ограничен
text-indent: -9999px
Дешевые CSS-анимации: translate, transform, opacity
Контексты рендеринга

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

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

.вёрстка[data-uri]

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

.вёрстка[избранное от W3C]

-webkit-tap-highlight-color

.вёрстка[inputs]

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

.вёрстка[избранное от W3C]

-webkit-tap-highlight-color (покрытие: ~60%)
Правильные инпуты
:active
<style media="...">
@media (min-device-pixel-ratio: 1.5) {...}

{ Javascript }

Frameworks: можно, но осторожно
Особый подход
APIs

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

JavaScript — любезен, пока вы не трогаете его dom
requestAnimationFrame(func)
Fullscreen

{ Javascript: "Fullscreen" }

window.scrollTo(0, 1) // Andorid, iPhone 6-
<meta name="app-mobile-web-appcapable" content="yes"> // iPhone
body.requestFullScreen() // Mozilla, светлое будущее

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

JavaScript — любезен, пока не трогают его dom
requestAnimationFrame(func)
Fullscreen
Application cache
window.ontouchstart = func
Иннерционный скроллл

{ JavaScript: "API" }

Ambient Light Events
Gamepad
Battery Status
The Network Information
Messaging

#Bugs-001

Козни нативного UI
Touch Events
hDPI дисплеи и остальные
Шрифтовые иконки
Links
Вёрстка + Unicode + :checked

CSS магия. Опять.

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

Weinre

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

		$> weinre httpPort 7771 boundHost 127.0.0.1

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

Chrome Developer Tools

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

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

Firefox OS

Спасибо!

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

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