Трогательный фронтенд

трогать — to touch

📱 ⌚️ 🖥

Смартфоны 📱

3 500 000 000 🤳
из
7 763 035 303 🌐

45%

Что я знаю
о смартфонах?

Доверяйте данным,
а не внутренним ощущениям.
Стивен Хубер

2014

70%

Трафика в месяц (в эксабайтах)

1 Эксабайт
=
1 000 000 000 Гигабайт

Motorola Moto G4

400 000 000 фичефонов продано в 2019 г.

150 000 000 человек живёт в России

Время парсинга 1МБ JavaScript (мс)

5 секунд ⏱

Что делать?

Про производительность

• Harry Roberts: FaCSSt—CSS and Performance
• Addy Osmani :: The Cost of JavaScript :: #PerfMatters Conference 2019
• Steve Souders | Make JavaScript Faster | performance.now() 2018
• Дорогая цена стилей — Никита Дубко

Ожидание
⬋      ⬊
пассивное        активное

Optimistic UI 😀

12px
=
Минимальный размер текста

Лучше крупнее

44px — минимальный размер интерактивного элемента

48px — требования Lighthouse

34.43%

Точность — критична ❌

Возможность отменить действие ✅

Визуальный фидбек ✅

Номофобия 😱

66%

3 часа 15 минут ⏳

Нет интернета 🏕

Offline 📼

Служебные работяги! 👷‍♂️

Service Workers 👷‍♂️

0.64%

const PRECACHE = 'precache-v1';
const RUNTIME = 'runtime';
const PRECACHE_URLS = ['index.html', './', 'styles.css', 'demo.js'];

self.addEventListener('install', event => {
    event.waitUntil(
    caches.open(PRECACHE)
        .then(cache => cache.addAll(PRECACHE_URLS))
        .then(self.skipWaiting())
    );
});

self.addEventListener('activate', event => {
    const currentCaches = [PRECACHE, RUNTIME];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
        }).then(cachesToDelete => {
            return Promise.all(cachesToDelete.map(cacheToDelete => {
                return caches.delete(cacheToDelete);
            }));
        }).then(() => self.clients.claim())
    );
});

self.addEventListener('fetch', event => {
    if (event.request.url.startsWith(self.location.origin)) {
        event.respondWith(
            caches.match(event.request).then(cachedResponse => {
                if (cachedResponse) {
                    return cachedResponse;
                }

                return caches.open(RUNTIME).then(cache => {
                    return fetch(event.request).then(response => {
                        return cache.put(event.request, response.clone()).then(() => {
                            return response;
                        });
                    });
                });
            })
        );
    }
});

Скорость интернета 🐌

20% 2G/Edge

Скучно 😒

Отложенное на «потом» 💡

Семантика

«Потом» — короткое ⌛️

Метро 🚇

Кофе-брейк ☕️

40% в уборной 🧻

12% в душе 🚿

5.59 секунд
на контент ⏱

Надо зацепить

Первый экран ⚠️

Как переоткрыть вкладку на смартфоне? 🤔

Интересное ⚖️ Полезное

Личное ⚖️ Интересное

Помогайте ⚡️

<input autocomplete="one-time-code"/>

Можно не спрашивать — не спрашивайте.
Конфуций этого не говорил

Autocomplete: 62 значения

29.62%

inputmode

<input type="text" inputmode="numeric" />

<input type="text" inputmode="tel" />

<input type="text" inputmode="email" />

CPU 🔋

Web Vitals

Total Blocking Time
(TBT)

prefers-reduced-motion

.animation {
    -webkit-animation: boom 0.3s linear infinite both;
    animation: boom 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
    .animation {
        animation: none;
        -webkit-animation: none;
    }
}

Battery Status API

navigator.getBattery().then(battery => {
    battery.addEventListener('levelchange', () => {
        if (battery.level < 0.2) {
            // сделать добро
        }
    });
});

.disable-animation *,
.disable-animation *:before,
.disable-animation *:after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

~ 30%

env()

env(safe-area-inset-top)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
env(safe-area-inset-right)

header {
    /* Высота статус-бара в iOS 10 */
    padding-top: 20px;

    /* Высота статус-бара в iOS 11.0 */
    padding-top: constant(safe-area-inset-top);

    /* Высота статус-бара в iOS 11+ */
    padding-top: env(safe-area-inset-top);
}

@media (spanning: single-fold-vertical) {
    body {
        flex-direction: row;
    }

    .map {
        flex: 1 1 env(fold-left);
    }

    .locations-list {
        flex: 1;
    }
}

❤️

zoom 🔍

<meta name="viewport"
      content="user-scalable=no">

<meta name="viewport"
      content="maximum-scale=1">

<meta name="viewport"
      content="width=device-width, initial-scale=1">

Safari, iOS 10 🤘

2 года 10 месяцев 📅

Вспомнить пароль? 🤔

Помогите им!
Разметьте формы!

email: 56.42%

tel: 36.7%

<form id="login" action="/login" method="post">
    <input type="email" autocomplete="username">
    <input type="password" autocomplete="current-password">
    <input type="submit" value="Пусти!">
</form>

Touch-свойства

• touch-action
• text-size-adjust
• -webkit-tap-highlight-color
• -webkit-touch-callout
• -webkit-overflow-scrolling

У смартфонов есть

• камера — Media Capture and Streams API
• гироскоп — Gyroscope API
• батарея — Battery Status API
• динамик — Web Audio API
• Bluetooth — Web Bluetooth API
• GPS — Geolocation API
• ...

Ambient Light Sensor API

window.addEventListener("devicelight", function (event) {
    var luminosity = event.value;
    // 10 ~ 50 lux : тусклое освещение
    // 100 ~ 1000 lux : нормальное
    // > 10000 lux : яркое
});

if ('AmbientLightSensor' in window) {
    const sensor = new AmbientLightSensor();
    sensor.onreading = () => {
        console.log('Светит на ' + sensor.illuminance);
    };
    sensor.onerror = (event) => {
        console.log(event.error.name, event.error.message);
    };
    sensor.start();
}

Vibration API

window.navigator.vibrate([200, 100, 200]);

Web NFC 💎

Просите, когда надо ⏰

Отдельная версия

• Facebook
• VK
• Twitter
• Google
• Яндекс

Адаптив

• Medium
• BBC
• CSS-Tricks
• Smashing Magazine

Отзывчивый UI 🐛

/* laptop/desktop */
@media (hover: hover) {}

/* smartphones/touchscreens */
@media (hover: none) and (pointer: coarse) {}

/* device with stylus */
@media (hover: none) and (pointer: fine) {}

/* Wii/Kinect/etc */
@media (hover: hover) and (pointer: coarse) {}

/* mouse/touchpad */
@media (hover: hover) and (pointer: fine) {}

Mobile first 📱

2014

2016

Facebook: ~10%

1. Исследуйте статистику 📈

2. Креативно воруйте 🎨

3. Применяйте 🛠

4. Замеряйте 📏