Я Фронтенд

Открытие

Автоматизируем сервис-воркер с Workbox 6

«Задеплоил сервис-воркер — нужно покупать новый домен» — известная шутка о том, как сложно писать собственную логику кеширования. С приходом шестой версии библиотеки Workbox для прогрессивных веб-приложений (PWA) больше не нужен компромисс между гибкостью и удобством автоматизации сетевых задач. Я расскажу, как начать работу с Workbox 6, реализовать типовую функциональность для офлайнового веб-приложения и пойти дальше, добавив собственную логику кеширования.

Смотреть на YouTube

Архитектура менеджера состояния

Стейт-менеджмент — многогранный подход, который позволяет как обслуживать небольшие задачи для более детерминированного описания вычислительных процессов, так и строить целые архитектуры вокруг этого паттерна, чтобы решать проблемы зацепленности кода и автоматически оптимизировать производительность вычисления комплексных потоков данных. Реализация стейт-менеджмента изобилует особенностями и подводными камнями, которые в зависимости от задачи могут быть актуальными или нет. Об этом и поговорим.

Смотреть на YouTube

JSON: push the limits

Формат JSON настолько прост — о чём тут можно говорить? И я так думал, пока не попробовал делать то, чего обычно не делают, ведь всё уже придумано до нас (спойлер: на самом деле нет). И оказалось, что JSON — богатый и плохо изученный мир с проблемами, которые можно решить, и это интересно. Доклад основан на моей работе в этом направлении, в частности над проблемами JSON большого (>100 MB) размера:

• Большой JSON — это сколько?
• Реальные пределы размера JSON.
• Большой JSON — это не больно, или как правильно его готовить.
• Как отдать большой JSON, загрузить его в браузер, чтобы при этом никто не умер.
• Гвоздь программы: как сделать прогрессбар загрузки данных в браузере и сохранить веру во фронтенд.
• Альтернативная реальность: JSON — это не только получение ответа от сервера.
• И главный вопрос: зачем это нужно?

Смотреть на YouTube

Перерыв

Пользовательский опыт незрячего человека

Отличается ли то, как зрячий и незрячий человек пользуются сайтом, как воспринимают его и управляют интерфейсом? И да и нет. В чём отличие и в чём сходство? Посмотрим на реальных примерах и обсудим, как создаются барьеры.

Смотреть на YouTube

ES6-коллекции на примере V8: у ней внутре неонка

В инструментарий JS-разработчиков прочно вошли коллекции Map/Set, а также их Weak-вариации, появившиеся пять лет назад. Ныне их можно встретить как в популярных библиотеках, так и в Node.js core. При этом, как принято в ECMAScript, спецификация не задаёт жёстких требований к реализации стандарта, а лишь описывает поведение коллекций на высоком уровне, оставляя JS-движкам пространство для манёвра.

Встречаются случаи, когда разработчику нужно понимать особенности реализации того же Map, чтобы принять взвешенное решение. Именно это и будет темой доклада. На примере V8 мы пройдёмся по конкретным алгоритмам, их сложности в пресловутой big O нотации, расходу памяти и прочей внутрянке коллекций Map/Set. Напоследок поговорим о том, как именно работают Weak-коллекции и почему WeakMap !== Map + WeakRef.

Смотреть на YouTube

Расширяем реальность

Как давно мы смотрим фильмы о виртуальной реальности — и как захватывающе она выглядит! Может, вы не заметили, но виртуальная и дополненная реальность уже встречается и в нашей жизни, в том числе и в браузерах. Появляется всё больше способов применять эти технологии. Давайте поближе познакомимся с VR и AR и посмотрим, как они разрабатываются в реале.

Смотреть на YouTube

Разбор заданий Capture the flag и награждение победителей

Смотреть на YouTube

Палка, палка, огуречик. Рисуем персонажную анимацию на CSS [Воркшоп]

Как собрать анимацию абстрактных объектов — более-менее понятно. Но как анимировать персонажей и движение камеры, и всё это на CSS? Вместе пройдём весь процесс сборки небольшой анимашки на два персонажа: разбивку на ключевые кадры и планы, отрисовку простых и сложных объектов, отрисовку персонажей, анимацию и отладку.

Смотреть на YouTube

Теория и практика dependency inversion [Воркшоп]

Разберёмся, что такое внедрение зависимости (dependency injection), как оно связано с инверсией зависимости (dependency inversion), зачем нужны IoC-контейнеры, что такое антипаттерн Service Locator и почему иногда внедрение зависимостей ещё не означает, что мы получили слабо связанный и легко поддерживаемый код.

Смотреть на YouTube

Создание приложений для голосовых ассистентов: тренды, возможности, разработка [Воркшоп]

Какой интерфейс можно назвать самым естественным? Конечно же, голос! За голосовыми приложениями не только будущее, но и настоящее. На воркшопе я расскажу об основных возможностях навыков Алисы и поделюсь опытом создания голосовых приложений. А все, кто пишут на Node.js, смогут разработать прототип собственного навыка Алисы.

Смотреть на YouTube