- Зачем верстальщику Selenium, Борис Сердюк. (Страница доклада)
- Автоматическое тестирование в Поиске, Сергей Белов. (Страница доклада)
- "Hello, World!", Антон Корзунов. (Страница доклада)
- Секретный доклад API Яндекс.Карт, Кирилл Дмитренко. (Страница доклада)
- FrontTalks: путь бобра, Олег Мохов. (Страница доклада)
- Не гзипом единым, Георгий Мостоловица. (Страница доклада)
- Про шаблонизатор BEM-XJST, Вячеслав Олиянчук. (Страница доклада)
- Новости из мира БЭМ, Владимир Гриненко. (Страница доклада)
Доброе февральское утро! Хотите, я расскажу вам про Я.субботник?
events.yandex.ru/events/yasubbo… – тут программа, а также видео-трансляция.
Первый доклад – Зачем верстальщику Selenium, Борис Сердюк.
Таки зачем тестирование верстальщику? А чтобы не сломать старое, пока пилите новое.
Начнём с юнит-тестирования. Как бы нам разбить код на модули? Вариантов несколько: от банального IIFE до ES6 модулей.
Тест должен быть маленьким и проверять что-то одно. Тесты можно и нужно объединять в тест-сюиты.
Но даже покрыв весь код юнит-тестами на 140% до пользователя всё равно может докатиться нерабочий код.
Нужно писать ещё и интеграционные тесты, выполняя действия конечного пользователя.
Для эмуляции действий пользователя все используют Селениум, если осилили его установку.
Поставить селениум можно простой и изящной командой `$ npm i selenium-standalone`
А чтобы не писать запросы к селениуму можно взять webdriver.io
И... Мы продолжаем писать тесты на JS.
Если что-то пошло не так, то можно сделать скриншот
browser. saveScreenshot ('test-screenshot.png');
Недостаток - будт 100500 скриншотов.
Для удобной работы с отчётами можно использовать Allure - инструмент, разрабатываемый в Яндексе. Борисом в том числе.
Для проверки результата используйте матчеры. Можно писать кастомные матчеры. pic.twitter.com/rhtLS2sINt
Для удобной работы с объектами на странице используйте паттерн PageObject.
Для быстрого старта в тестирование можно использовать шаблон, подготовленный Борисом github.com/just-boris/wdi…
Вопрос: насколько быстро работают тесты?
Ответ: дольше, чем юнит-тесты, до десятков минут. Но это единственный способ проверки в браузере.
Интеграционных тестов может быть немного. Можно начинать с простых, типа "страница вообще открывается".
Профит от формирования отчёта в том, что тесты можно запускать автоматически, в каком-нибудь облачном сервисе.
@_elergy_ главное начать. А потом можно найти логику во всех этих матчерах.
Вы также можете подписаться на хеш-тег #yasubbotnik. Там много интересного.
— Можно ли ускорить селиниум-тесты за счёт параллельности/асинхронности?
— Да, есть возможность запускать тесты в несколько потоков.
— Можно ли автоматизировать оценку доступности (accesability)
— Вопрос сложный, если можно формализовать критерии – то да.
@Sigiller в перерыве сервер перезапустят, должно починиться.
— Как всё-таки протестирать вёрстку, проверить, что ничего не уползло?
— Об этом будет следующий доклад на этом субботнике.
Второй доклад "Автоматическое тестирование в Поиске", Сергей Белов.
Автоматизация это не только автотесты, но и генерация заготовок для тестов, это CI + автодеплой, это и мониторинг сервисов в продакшне.
Слайды доклада: yadi.sk/i/XI5RzbFEpaane
Картинка про виды тестов и их относительное количество. pic.twitter.com/hw9iCBulsj
А теперь переходим к практике тестирования в Яндексе, во фронтенде.
Код проходит несколько ступеней трансформации. pic.twitter.com/u2CIwLjCXR
Исторически в Яндексе были такие тесты:
— смоук-тесты на http-ответ и контент
— юнит-тесты
— селениум
— тесты производительности шаблонов
Было много ручной работы, потому что в отчёте было много ложных срабатываний — выкатили новую функциональность.
Разработка была оторвана от написания тестов. Как следствие расхождение версий и часто тесты были избыточны и менее качественный код.
Сейчас появились новые виды юнит-тестов — модульное тестирование шаблонов, а так же модульное тестирование верстки.
Также начали писать селениум-тесты, но не на Java, а на JavaScript.
Результат:
— Код и тесты на одном языке (JS)
— Тесты пишут разработчики
— Совпадение версий кода и тестов
Профит:
— Меньше багов, тривиальные баги ловят автотесты
— Повысилось качество кода
— Снизилось число итераций разработка-тестирование
К чему хочется прийти: все автотесты пишут разработчики на одном языке и в единой терминологии. Свести ручное тестирование к минимуму.
Нужны ли тестировщики? Конечно, но они должны заниматься вещами, которые сложно и невыгодно автоматизировать.
Для тестирования шаблонов (не бэм) есть github.com/bem/html-differ
Для модульного тестирования верстки — github.com/gemini-testing…
Для генерации тестов на данные от api можно использовать json-schema.org. Можно использовать как инструмент мониторинга.
Доклад про Gemini events.yandex.ru/lib/talks/2594/
@koloskof events.yandex.ru/lib/talks/2594/
— Сколько времени занимают тесты?
— Полный прогон занимает 13-15 минут. Но мы прогоняем не все тесты. Хотим ускориться до 10 минут и меньше.
Третий доклад: "Hello, World!", Антон Корзунов. Слайды: yadi.sk/i/KpvxK4E3pb4Dg
Изначально было только 256 символов и растровые шрифты. Но сейчас (уже давно) шрифты стали векторными.
Со шрифтом можно работать в браузере, используя github.com/nodebox/openty…
В современном фронтенде (html, svg, canvas) есть возможность вывести текст во всех технологиях. Кроме WebGL.
Так повелось со времён, когда компьютеры были большие, а видеокарты оооочень слабые.
Каждый символ разбивается на треугольники. pic.twitter.com/JMrWsrT4bc
Сложности фразы в 3D сопоставима со сложностью монстра в первом квейке.
Один из методов оптимизации — текстурные атласы. Плохой пример реализации PIXI.js
Процесс растеризации выглядит как-то так. Берём шейдеры, и трансформируем их. pic.twitter.com/BtcfiYV3hw
Шейдеры позволяют масштабировать текстуры с сохранение резкости контура.
Valve пошла дальше и придумала SDF (Signed Distance Field). Можно почитать про это в статье habrahabr.ru/post/215905/
Для улучшение качества — добавим магии фильтрации en.wikipedia.org/wiki/Bilinear_…
Чтобы сглаживание было контура было лучше, используется антиалиасинг. Хотя иногда он не нужен, например на ретине.
Генератор SDF от Mapbox, работает быстро и сравнительно качественно github.com/mapbox/fontnik
Недостаток SDF — острые углы скругляются. pic.twitter.com/cD1dwSW5f6
Следующий способ растеризации CPCF (Closest Point Coordinate Field) pic.twitter.com/lD2c3DILe8
Достоинства и недостатки CPCF. pic.twitter.com/l12Eavgzrl
Коллективное бессознательное каждого первого фронтендера в этом зале. pic.twitter.com/bH2dokpUqD
Пятый способ Vector Textures. Чем выше качество, тем медленнее.
Итоговая таблица: как переживает сдвиг и поворот пиксела, масштаб, качество, скорость и потребление памяти. pic.twitter.com/h6q2B4hBAP
Короче, хотите хорошо и красиво — купите много-много памяти.
С помощью WebGL можно делать на фронтенде то, что можно было делать на PC лет 10 назад.
Если просто использовать фреймворки и не знать, что лежит в основе можно выбрать не тот интструмент и всё будет тормозить.
Следующий доклад — API Яндекс.панорам, Кирилл Дмитриенко. Слайды yadi.sk/i/KpvxK4E3pb4Dg
Кирилл продолжает забивать гвозди высшей математики в головы слушателей.
Как работает преобразование сферы в прямоугольную картинку, в общих чертах. pic.twitter.com/uEcaf4c5K4
Разбивку на треугольники в каждом кадре вынесли в пререндеринг, чтобы работало быстрее. Но, к сожалению, это потребляло много памяти.
По этой и нескольким другим причинам, подход с Canvas 2D был заменён на WebGL
Однако, у большего числа пользователей максимальный размер текстуры 16 тыс.пикселов на сторону, но текстуры панорам сильно больше.
Поэтому панарома режется на куски и отображатеся по частям.
Яндекс открывает API панорам. При этом можно использовать API для отображения своих собственных панорам.
Нужно чтобы панорама была сферическая равноугольная. А сторона тайла — степень двойки.
Панорама может быть обрезана сверху или снизу, но обязательно должна быть полной сферой по горизонтали.
На панораму можно накидать объекты:
- Маркеры
- Переходы
- Связи
И когда? Скоро. В марте. Наверно. Следите за yandex.ru/blog/ymaps/
Первый доклад после перерыва — Олег Мохов, «Путь бобра». Про становление @FrontTalks
Название появилось в результате долгих сокращений Ekaterinburg Frontend Talks.
Где проводить? Кафе в субботу с утра рады предоставить площадку, всё равно у них пусто.
@chicoxyzzy и чем спам в хештеге лучше платных видео на конференции?
Используйте возможность поучиться у других. Например, совместное проведение мероприятия с Я.Субботником.
Как сделать так, чтобы участники не уставали к вечеру? Работать по схеме 30 + 10 + 10 (доклад, вопросы, перерыв)
Слушатели часто не понимают отличие митапа от конференции. В Екб временно отказались от митапов. Это было не правильно - встречи стали реже.
В этом году Олег пробует новый формат — @frontendfellows. В планах даже организация телемоста.
В прошлом году также провели эксперимент. Нетехнический доклад "36" от Вадима @makishvili
Сложный вопрос - плата за участие. В прошлом году FrontTalks брали небольшую плату за вход.
Внезапно платная конференция собрала больше участников, а также была выше вовлечённость.
Обычно на бесплатную конференцию приходит 50-60% заявившихся. На FrontTalks — было больше 90.
Как получить качественные доклады? 100% работает один вариант — платить докладчикам.
Нет денег? Нужно готовить докладчиков. Одному это провернуть тяжело. Олег позвал двух хороших ребят в помощь.
Осенью будет очередной эксперимент — двухдневная конференция, один из дней — полностью англоязычные доклады.
Следующий доклад — «Не гзипом единым», Георгий Мостоловица.
Сейчас браузеры поддерживают множество способов сжатия. И сейчас уже можно не бояться их использовать.
Примеры бессмысленной оптимизации. Отдача превью в WebP не даёт никакого прироста, если картинки могут быть отданы за 1 RTT.
@ya_events а слайды будут?
Gzip — алгорит сжатия, ставший стандартом де-факто в вебе сейчас. Но около четверти сайтов из TOP500 посещаемости его всё ещё не используют.
Zopfli — более новый формат сжатия, даёт результат на 4-8% лучше, чем gzip. Но работает сильно медленнее gzip.
В nginx можно указать путь до предварительно сжатых файлов и потерь на сжатие в zopfli не будет. Поддержка zopfli — 100%
brotli — новый формат, даёт выигрыш в 10-20% по сравнению с zopfli. Чтобы использовать нужно ставить отдельный модуль для nginx.
Уровень поддержки brotli сейчас — 4%. До конца года будет более 70%.
Brotli стоит включать только для https-only. Потому что всякие прокси могут поломать нужные headers.
SDCH — алгоритм сжатия с немного другим подходом, словари идут отдельно от сжатого файла.
SDCH может дать прирост на 3-5 раз по сравнению с gzip. Но почти ни один сервер его не поддерживает, а из браузеров — один Хром.
Но недавно Яндекс запилил модуль SDCH для nginx. Правда в Яндексе SDCH пока что не используется.
Сейчас SDCH тестируется в Поиске и Почте. Скорость отдачи файлов вырастает от 50 до 300%.
А вот, кстати, слайды yadi.sk/i/HizwF-7ApcGnK
@chicoxyzzy github.com/yandex/sdch_mo…
Поддерживается только Chromium-based сайтами. И тоже https-only.
Следующий доклад — «Шаблонизатор BEM-XJST», Слава Олиянчук.
Слава настоятельно рекомендует посмотреть доклад «Шаблонизация. Как дедушка завещал» с последнего MoscowJS.
Шаблонизатор, как вы понимаете, помогает трансформировать данные в html-разметку.
bem-xjst взял ключевые принципы из XSLT, но позволяет делать всё на JS.
В более традиционных подходах к шаблонизации мы фактически хардкодим путь к нужному объекту данных.
@ya_events очень хочется слайды на этой странице events.yandex.ru/events/yasubbo…. Спасибо.
BEMJON позволяет описать структуру страницы в виде json-дерева и бесплатно получить базовую вёрстку.
Многовложенные решения в шаблонах изящно решается подходом под названием pattern-matching.
Ещё очень хорошо поддерживается переопределение и доопределение шаблонов.
Работает в браузере и на ноде, не требует компиляции шаблонов, всё на JS.
Онлайн-демо: bem.github.io/bem-xjst/
Последний доклад — «Новости из мира БЭМ», Владимир Гриненко.
Слайды — tadatuta.github.io/ya-subbotnik-2…
Генератор статических сайтов github.com/tadatuta/bem-b… и работа поверх express github.com/tadatuta/bem-e…
А ещё есть библиотека готовых компонент ru.bem.info/libs/bem-compo…, и всё это можно подключить с CDN.
Со сборкой вообще праздник. Их снова куча вариантов.
Можно собирать на ENB, на gulp и даже вебпаком.
А ещё есть много готовых библиотек от других команд: tadatuta.github.io/ya-subbotnik-2…
И новая более лучшая документация.
На этом на сегодня всё. Всем спасибо за внимание.