Заявки на доклады

Поиск по тегам:

Frontend

Пример эффективной frontend-разработки с помощью Adobe XD

Игорь Яковлев

- Пишем собственный плагин для конвертации макета в html-разметку. Кто, как и зачем пишет?
- Какой для этого графический редактор выбрать? Figma, Zeplin, Adobe XD?
- Какие требования предъявляются к работе дизайнера? Верстаем компоненты сразу в макете
- Для какого стека подход реализуем? Реальный опыт на vue проектах.
- Автоматизация тестирования с помощью Storybook и скриншотов компонентов
- Итог: растет качество, повышается скорость разработки, рождаются новые методы frontend-разработки

Адаптивные дизайн и вёрстка
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
,
Веб-графика, оптимизация изображений
,
Дизайн и работа с изображениями
,
Совместная работа дизайнеров и верстальщиков
,
Code Review
,
Автоматизация разработки и тестирования
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

История одной миграции

Никита Мостовой

Миграция проекта с одной технологии на другую — это всегда стресс и боль для бизнеса и разработки.

Наш основной проект, написанный на vanilla + jQuery с серверным XSLT и Python в качестве API Gateway, насчитывает больше 200 уникальных страниц и миллионы строк кода.

Полтора года назад мы приняли решение переезжать на React стек. И кроме обновления кодовой базы, мы решили перевести наш веб-сайт на SPA.

Мы не затормозили бизнес-разработку, и приняли концепцию частичной миграции. В ходе миграции мы решали большое количество вопросов, в том числе: как сделать, чтобы React приложение "знало свои рамки", а старое приложение не сломало новое? Как настроить клиентский роутинг в SPA, если главным "дирижером" выступает Python приложение, которое мы развивали более 5-ти лет?

Мы поговорим о инженерных решениях для перевода большого приложения с одного стека на другой, про UI ToolKit для двух миров и SSR.

Single page application, толстый клиент
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
Программный комитет ещё не принял решения по этому докладу

Бесконечная лента – без шуток

Валентин Каменек

Лирическая история о том, как делать бесконечную ленту контента, когда у тебя десятки миллионов пользователей, дюжина продуктов, в которые ты интегрируешься, а ты сам – часть Яндекса. В программе драматические этюды с патчами в React, пронзительная архитектура RPC внутри одного фронтенда и путешествие по лабиринтам змеиной гибкости системы сборки. Всё это под соусом неизбывной серьёзности по-настоящему высоких нагрузок.

Single page application, толстый клиент
,
Пакетные менеджеры и организация модульности
,
Оффлайн и кэширование в локальных хранилищах
,
JavaScript
,
Браузеры
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Camera Rig: как и зачем?

Наталья Габитова

Использование WebGL открывает массу возможностей вплоть до построения собственных миров. Окнами в эти миры являются камеры. Именно камера представляет пользователя в программном мире. Именно от того, как заанимированна камера, будет зависеть пользовательский опыт. Различные библиотеки, например, Three.js, предоставляют доступный интерфейс для работы с камерами. Но действительно ли просто управлять такой камерой? Те, кому приходилось заниматься созданием реалистичных облётов, разворотов и других фигур «пилотажа», знают, какой это может быть пыткой. Задача станет проще, если вспомнить, что камера - это физический объект, и воспользоваться приёмом «риг» (Rig). С помощью этого приёма в анимации упрощается работа с составными связанными системами.

Вы узнаете, что такое «риг», какие риги камер бывают, как риги устроены, и как создавать программный риг. Мы разберем, как управлять ригом во время анимации, и сформулируем общий подход создания собственного рига под конкретную задачу.

Веб-графика, оптимизация изображений
,
WebRTC, WebGL и веб-медиа в целом
,
Дизайн и работа с изображениями
Доклад принят в программу конференции

Приключения NodeJS сервера в современном DevOps стэке

Всеволод Родионов

- концепция CI/CD для фронтэнд-разработки и backend-for-frontend серверов
- современные системы контейнеризации и оркестрации. Docker, Kubernetes, Docker Swarm etc. Смешные и поучительные истории из жизни про PM2
- отказоустойчивость и подходы fail fast, graceful degradation, fault tolerance, fail safe
- crash-only и самовосстанавливающиеся системы
- rolling restart, green-blue, red-black деплои
- stateful и stateless сервисы
- горизонтальное и вертикальное масштабирование
- магия балансировщиков. Nginx, ingress, haproxy, traefik etc. Липкие сессии
- системы очередей задач и атомарного состояния системы. Kafka, RabbitMQ, 2x- и 3х-фазные коммиты
- системы управления логгированием и проблемы их отказоустойчивости. ELK, fluentd etc
- мониторинг состояния системы, метрики и работа с ними. Kibana, prometeus, graphite

Программный комитет ещё не принял решения по этому докладу

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

Анастасия Калашникова

Бывает так, что мы буквально обнаруживаем себя на каком-то месте работы, в какой-то роли и не понимаем, как вообще попали сюда.
Бывает так, что спустя 2-3 года разработки на каком-то языке становится понятно, что выбрал не то направление.
Или, например, когда-то согласился быть тимлидом, хотя никогда не было интересно заниматься управлением. Как согласился, почему выбрал такое направление - непонятно.

В своем докладе дам некий чек-лист вопросов к себе, своему руководителю, компании, которые стоит задать, чтобы карьерный и профессиональный рост не расходился с личными ожиданиями. Расскажу, каких результатов можно достичь, если видеть вектор своего развития и строить его самому.
Приведу успешные и не очень кейсы из практики.

Доклад принят в программу конференции

I'm Stencil 'Don't call me a framework' JS

Зар Захаров

Stencil - это компилятор, который создает веб-компоненты.
Как заявляют авторы, Stencil объединяет лучшие концепции самых популярных фреймворков в простой инструмент. Stencil использует такие функции, как:
- Виртуальный DOM
- Асинхронный рендеринг (вдохновленный React Fiber)
- Реактивная привязка данных
- TypeScript
- JSX

Программный комитет ещё не принял решения по этому докладу

Проектирование предметной области на TypeScript в функциональном стиле

Сергей Черепанов

Расскажу о том, как мы подходим к проектированию нетривиальных frontend-приложений.

Многие идеи из Domain Driven Design отлично применимы и в функциональной парадигме, однако применение их на практике не всегда может быть очевидны. Например, алгебраические типы данных, которые я объясню на примерах и пальцах, могут быть мощными помощниками для выражения инвариантов. А комбинаторный стиль позволяет удобно выразить создание сложных композитных типов данных, что будет отдельно продемонстрировано на разных примерах из нашей практики.

Архитектурные паттерны
,
Методы и техника разработки ПО
Доклад принят в программу конференции
Программный комитет ещё не принял решения по этому докладу

Offline by heart (Оффлайн на память)

Станислав Долгачев

Мой доклад о том, как мы написали приложение, которое работает без подключения к интернету с помощью Cordova, Angular и Ionic.

План:
1. Почему работа врежиме оффлайн важна
2. Что мы сделали правильно
3. Что сделали неправильно
4. Практические рекомендации

Программный комитет ещё не принял решения по этому докладу

Я создал Франкенштейна: 3 истории миграции

Денис Мишунов

Для многих полное переписывание проекта – единственно верный способ миграции. Несмотря на то, что это может дать отличный результат по сравнению с постепенной миграцией, большинство проектов не могут себе это позволить из-за нехватки ресурсов, времени, бюджета и других причин. В таком случае остается миграция "по частям", при которой, как правило, "старое" и "прошлое" сталкиваются в некое "старошлое", проект становится неповоротливым, сложным в управлении и поддержке. Что в итоге все равно, рано или поздно, приводит к полному переписыванию.

Но что, если бы мы могли мигрировать наши фронтенд-приложения постепенно, при этом не волноваться, что наш глобальный скоуп будет бесконечно испорчен, CSS начнет выливаться и заливаться во все возможные щели, а различные JS-библиотеки и фреймворки нашего проекта начнут крыть друг друга по матушке? Что, если бы мы могли разбить наше фронтенд-приложение на микро-сервисы, в рамках которых могли бы делать практически все что угодно без стандартных "прелестей" постепенной миграции?

Этот доклад в достаточно непринужденной форме расскажет три истории миграции трех приложений с различным подходом, различными архитектурными решениями и, соответственно, различным результатом. Слушатели получат базовое понимание общих подходов к фреймворк-независимой миграции фронтенд-приложений, используя микро-сервисную архитектуру, веб-компоненты и хорошее чувство юмора.

Пакетные менеджеры и организация модульности
,
JavaScript
,
CSS модули и веб компоненты
,
Фронтенд / другое
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Голый фронтенд

Андрей Яманов

Фронтенд постоянно радует нас большим числом новых стандартов призванных облегчить и упростить жизнь программистов, но не смотря на это, год от года сборки сайтов пухнут, а количество и сложность технологий растёт. В 2019-ом создать веб-приложение, отвечающее всем современным требованиям, силами одного разработчика почти нереально. Но возможно не всё потеряно, и есть шанс вернуть былую простоту в веб-разработку!

Программный комитет ещё не принял решения по этому докладу

Качаемся во фронтенд-разработчика 80-го уровня

Алексей Авдеев

В мои обязанности входит помощь в развитии и прокачке своих разработчиков.
Обсудим и похоливарим на тему нужных и ненужных для фронтенд-разработчика навыках.

- С чего начинать обучение фронтенду в почти 2020
- Какие опасности подстерегают разработчика на карьерной лестнице
- Кем тут вообще можно стать?

Программный комитет ещё не принял решения по этому докладу

Serverless для frontend разработчиков или можно ли обойтись без классического бэкэнда

Сергей Пугачёв

Из доклада frontend разработчики узнают о том, как с помощью serverless подхода можно реализовать хранение данных, авторизацию и исполнение кода в облаке без настройки и поддержки серверов. Рассматриваются функции как сервис (FaaS) на примере AWS Lambda с GraphQL API для синхронизации данных. Такой подход может использоваться как для быстрого прототипирования, так и в реальных сценариях, когда требуется неограниченное масштабирование вашего решения. На практических примерах мы рассмотрим существующие serverless фрэймворки и архитектуру serverless приложений.

Single page application, толстый клиент
,
Взаимодействие с серверной стороной (API)
,
Фронтенд / другое
,
Фреймворки
,
API
,
Бэкенд / другое
,
Микросервисы, SOA
,
Организация доступа к базам данных, ORM, собственные драйвера
,
Архитектурные паттерны
,
Работа с Amazon
Доклад принят в программу конференции

Интерактивное веб-приложение без программирования? Легко. Mavo вам в руки!

Дмитрий Шарабин

«Интерактивное веб-приложение без программирования? Это невозможно!» — скажете вы. Возможно! И это не пустые слова, а научно-обоснованное учёными Массачусетского технологического института (США) утверждение.
Многие люди могут создавать статические веб-страницы с помощью HTML и CSS, но им сложно или подчас просто невозможно самостоятельно запрограммировать интерактивное веб-приложение (например, редактируемый сайт-портфолио, список контактов, карточки для изучения иностранного языка, фитнес-трекер, багтрекер, ипотечный калькулятор и др.). Однако, для широкого класса CRUD-приложений этот разрыв может быть преодолен с помощью Mavo — нового подхода к разработке интерактивных веб-приложений, предложенного Лией Веру (Lea Verou).
Mavo расширяет декларативный синтаксис HTML. Используя Mavo, авторы с базовыми знаниями HTML неявно определяют сложные структуры данных при разработке HTML-макета будущего приложения. Им нужно всего лишь добавить несколько специальных атрибутов и выражений к HTML-элементам, чтобы преобразовать статический макет в полноценное управляемое данными веб-приложение. А данные эти, кстати, можно редактировать непосредственно(!) в браузере.
На примере построения небольшого веб-приложения мы убедимся, что даже пользователи без опыта программирования смогут быстро создавать веб-приложения с помощью Mavo.

Интерактивные приложения
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Сбор и аналитика клиентских ошибок на продакшене highload-проекта

Ярослав Колбин

Одновременно мы разрабатываем четыре высоконагруженных продукта. У нас больше 400 миллионов пользователей, 52 языка, много окружений и, конечно, спамеров, пытающихся к нам прорваться. На таких объемах неизбежно случаются миллионы ошибок в день, но мы научились с ними жить — собирать, анализировать и предотвращать последствия.

В докладе я расскажу, как наладить мониторинг клиентских браузерных ошибок на продакшене, как и какую информацию о них стоит собирать и как её обрабатывать. Сделаю обзор существующих на рынке решений и поделюсь, как это устроено в Badoo, а также приведу пример классических ошибок на стороне клиента и расскажу, чем такая система полезна бизнесу.

Материал будет полезен преимущественно frontend-разработчикам, так как описывает некоторую специфику дивного мира, где мы живем. Backend-разработчикам — тоже, в силу достаточно схожих механизмов и подходов для сбора ошибок. И, конечно, доклад заинтересует QA-инженеров.

Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Методы борьбы с legacy-кодом на примере GitLab

Илья Климов

Знакомьтесь, GitLab. Превосходная система для организации полного DevOps-цикла и настоящий кошмар для Frontend-программиста. В 2019 году у нас есть:
- AJAX-запросы, которые в ответ присылают jquery-код, который надо eval-ить;
- Адский микс из JQuery, Vue, VueX, Apollo, SPA и не-SPA подходов;
- Karma, Jest, RSpec + Capybara;
- CSS, SCSS, собственная дизайн-система на этапе разработки
и многое-многое другое.

Причина? Проекту 7 лет и frontend долгое время разрабатывался по "остаточному" принципу, без уделения нужного внимания best practices, правильным подходам и т.д.

Мы поговорим о структуре и инструментах для итеративного улучшения таких "backend-first" проектов. Мы поговорим о линтерах и их месте в CI, тестах, их надежности и мутационном тестировании, о пользе снапшотов, чтобы "быстро двигаться вперед", организации CSS и прочих болях

Фронтенд / другое
,
Производительность и мониторинг фронтенда
Доклад принят в программу конференции

Мне подложили джуниора

Павел Герасимов

Что делать, если мне внезапно выдали джуниора? Почему мне теперь не хватает времени на разработку? Как не делать работу за него, а прокачивать его скиллы? Наш опыт запуска программы для менторов и джуниоров в продуктовой компании. Инструкция для разработчиков, для которых пришло время обучать других разработчиков

Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Уменьшаем бандл проекта через устранение конфликтов зависимостей

Нуруллин Эдгар

В бандлах проектов часто затеривается что-то не нужное, в итоге они весят больше положенного, и находить причины бывает сложно. Их может быть множество: не правильное подключение пакетов (не модульное), случайное попадание кода для отладки или ненужные локали. Еще одной причиной может быть наличие конфликтов версий пакетов в дереве зависимостей. Особенно остро проблема стоит если, проект использует приватный npm и публикует свои пакеты используя lerna.

Есть решение по нахождению в собранном бандле дубликатов - duplicate-package-checker-webpack-plugin, но чтобы проверить гипотезу по устранению дублей, требуется полная переустановка всех зависимостей и пересборка бандла для его анализа. Процесс глупый и занимает много времени, так как частенько не получается добиться желаемого после первой итерации. Чтобы автоматизировать данный процесс был придуман cli инструмент ostap.

Cli ostap пытается подобрать минорное или патчевое изменение версии зависимостей в package.json, дабы устранить дубли и уменьшить получаемый суммарный вес бандла проекта.

Single page application, толстый клиент
,
Пакетные менеджеры и организация модульности
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Скриншотное тестирование: тернистый путь от идеи до внедрения

Алексей Оганезов

На примере личного опыта расскажем вам о том, когда может потребоваться скриншотное тестирование, какие непредвиденные проблемы могут возникнуть при его внедрении и каким образом их можно решить. Ну и, конечно, постараемся ответить на самый главный вопрос: стоит ли оно того?

Single page application, толстый клиент
,
Автоматизация тестирования
,
Тестирование фронтенда
Программный комитет ещё не принял решения по этому докладу

Продвинутый TypeScript

Михаил Башуров

Пишете на TypeScript, но хотите узнать больше о нем? Уже умеете делать union и intersection, но еще не разобрались в mapped types? Я вам в этом помогу, расскажу как жить с unknown, как делать номинальную совместимость и discriminated unions (и зачем это все нужно), рассмотрим как делать typelevel-программирование с помощью mapped types, conditional types и infer и коснемся продвинутых аспектов вывода типов.

JavaScript
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Разрываем монолит

Роман Бабанов

В больших приложениях всё чаще поднимается вопрос синхронизации и раздельной доставки различных частей фронтенда. Как единовременно обновить часть фронтенда на множестве сервисов? Как не допустить рассинхронизации в дизайне и поведении?

Программный комитет ещё не принял решения по этому докладу

О WebRTC просто и без магии: как устроен путь кадра в интернете

Кирилл Роговой

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

Я развиваю видеоплатформу в Skyeng и за последний год уменьшил негатив пользователей по видеосвязи в 4 раза, изучил все под капотом этой технологии — и хочу доступно рассказать о том, как передается видео в реальном времени через интернет.

Вы узнаете:

* как устроен путь одного видеокадра в мире WebRTC: от генерации вашей веб-камерой до отрисовки на экране собеседника

* какие препятствия его ждут и откуда берутся потери пакетов, пинг или jitter

* что будет, если кадр не дошел до получателя

* как работает видеокодек и почему нам часто хватает 3G для конференции в 720p, но все подвисает, когда в кадре происходит много резких действий

WebRTC, WebGL и веб-медиа в целом
,
Онлайн-медиа (видео/аудио)
Программный комитет ещё не принял решения по этому докладу

По ту сторону баннера

Дмитрий Дятчин

1. Cокращение времени на анимацию html 5 баннеров, благодаря Adobe Animate.
2. Подготовка баннеров под площадки размещения в пару кликов
3. Подготовка анимации для web
4. Создание анимации в Animate для использования в GSAP

Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Ускоряем веб-сайт, от простых практик к сложным

Никита Мостовой

Мы привыкли к быстрому интернету. Но как только мы спускаемся в метро, едем на поезде в Санкт-Петегрбург из Москвы или в роуминге оператор порезал скорость до 128 Кбит/сек мы не можем дождаться пока отобразится первая страница сайта.

В моем докладе мы рассмотрим как оптимизировать загрузку страницы, critical render path, варианты реализации, их преимущества и недостатки. Затронем темы кеширования, первой и последующей загрузок страницы, количества загружаемых ресурсов, использования сервис воркеров и другие нюансы оптимизации современных сайтов.

Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Монорепозитируй это

Иван Ботанов

Когда у вас большой проект, который разбит, например, на микросервисы или, как в нашем случае, много смежных проектов, возникает вопрос шаринга кода и экономии времени разработки. Ведь скорее всего этот код уже кто - то писал и нет смысла писать его еще раз. Эту проблему можно решить с помощью организации кода.

Есть разные подходы организовать свой код. Мы кратко рассмотрим популярные и остановимся на детальном рассмотрении монорепозитория.

Программный комитет ещё не принял решения по этому докладу

Speak my language %app%

Сергей Фетискин

текущий процесс перевода зачастую сломан: неправильные форматы, неправильные инструменты, непонимание масштабов проблемы. в итоге страдают все и пользователи и разработчики.

я хочу рассказать как не надо делать. использовать json, например, управлять строками руками и т.д.

и как надо делать. использовать специальные форматы, использовать платформы для перевода и т.д.

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

Программный комитет ещё не принял решения по этому докладу

Удобная разработка SPA произвольной архитектуры и сложности при помощи связки React и Redux

Владислав Григорян

Библиотека React - один из лидеров в мире инструментов для разработки SPA. Но при помощи одной библиотеки для работы с отображением нельзя построить сложное приложение и тем более - поддерживать его. Именно поэтому React, как правило, используется в связке с другими технологиями. Различных вариантов может быть много, но один из самых популярных - связка с Redux, библиотекой для работы с состоянием приложения.
Обе эти библиотеки достаточно специфичны. Настолько, что со стороны может показаться, что работая с ними, мы обязаны придерживаться определённых архитектурных паттернов. Так ли это? Ответ на этот вопрос мы попытались найти при разработке Xyjax - легковесной библиотеки, которая не использует никаких сторонних технологий, кроме React и Redux.
В рамках доклада мы рассмотрим следующие вопросы:
- Почему две библиотеки - это не совсем фреймворк?
- Можно ли разрабатывать сложные толстые клиенты с произвольной архитектурой без множества лишних зависимостей?
- Как снизить информационный шум в коде?
- Почему абстракции - это правда важно (и почему плохо, когда их слишком много)?

Single page application, толстый клиент
,
JavaScript
,
Фронтенд / другое
,
Devops / другое
,
Особенности процессов разработки и тестирования мобильного ПО
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Продуктовый дизайн в TradingView. Sketch vs. Figma

Александр Каменяр

Почему 2019 год будет годом борьбы дизайн-инструментов Skech и Figma. Почему они совершенно разные. Зачем мы в TradingView отказались от Sketch + Zeplin и перешли на Figma. Как переходили и что это дало. Как повысить эффективность продуктовой разработки, улучшить взаимодействие дизайнеров и фронтендеров и ускорить доставку новых фич пользователям.

Адаптивные дизайн и вёрстка
,
Дизайн и работа с изображениями
,
Совместная работа дизайнеров и верстальщиков
,
Совместная работа, система контроля версий, организация веток
,
Большие проекты/команды
,
Продуктовая разработка
,
Дизайн мобильный приложений
,
Прототипирование
Программный комитет ещё не принял решения по этому докладу

WebAssembly SPA фреймворки

Илья Черторыльский

Рассмотрим новые интересные тенденции в FrontEnd разработке. С появление WA писать сайты стало возможным не только на JS, но и на других языках программирования, таких как GO, RUST, C#, PHP. Раньше вставки на WA были лишь дополнением, теперь же появляются полноценные фреймворки, позволяющие не прибегать к JS, а писать сайт под ключ на привычном языке,

Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Как я расширение переписывал (название черновое)

Семен Левенсон

Не давно столкнулся с задачей переписать браузерное расширение компании, которое давно не поддерживалось. Поговорим про рефакторинг, и про выбор решений для нового подхода и какие проблемы с этим возникли. Ну и конечно про браузерные расширения

Пакетные менеджеры и организация модульности
,
Браузеры
,
CSS модули и веб компоненты
Программный комитет ещё не принял решения по этому докладу

Фронтендеры с Сатурна — дизайнеры с Плутона

Юлия Федоренко

Финальный внешний вид проекта совсем не похож на идеально вылизанный в скетче или фигме макет сайта или приложения? Кто в этом виноват — дизайнер или фронтендер?

В своём докладе я хочу попытаться разобраться так ли велика пропасть между дизайнерами и фронтендерами, почему происходит взаимонепонимание на проекте и как этого избежать, а также почему мы совершаем те ошибки, которые совершаем?

Мы поговорим, почему дизайнеры такие, какие они есть и как это изменить, обсудим адовые макеты и как сделать так, чтобы они не случались. Словом всё о том, как подружить дизайнера и разработчика, чтобы для обоих это не было мучительно больно.

Большие проекты/команды
,
Корпоративная культура и мотивация
,
Другое
Программный комитет ещё не принял решения по этому докладу

Make a World on Pure CSS

Юлия Музафарова

Каждый год CodePen подводит итоги самых популярных демок. Последние два года первые места занимают анимации на чистом CSS, а половина топ-100 в принципе про рисование CSS'ом.

Расскажу обо всем процессе как собрать сложную анимацию с персонажами на чистом CSS. И возможно в этом году самую популярную демку с тегом "pure css animation" сделает кто-то из вас.

Веб-графика, оптимизация изображений
Программный комитет ещё не принял решения по этому докладу

Event-Driven Architecture: C10m решить нельзя отравить.

Вадим Горбачев

Сейчас средний аппаратный узел готов преодолеть проблему 10 миллионов подключений. Так чего же мы ждем? Почему событийно-ориентированная архитектура (EDA) и в частности node.js не могут его преодолеть? Какие проблемы были обозначены за почти 20 лет с момента определения EDA?
Попробуем ответить на все эти вопросы и разобрать тонкости различных реализаций event loop, способы отравления обработчиков и поиск этих способов.

Взаимодействие с серверной стороной (API)
,
Node.js и io.js
,
Браузеры
Программный комитет ещё не принял решения по этому докладу

React Native для самых маленьких: опыт мобильной разработки

Артем Лашевский

Что делать, если в бэклоге продуктовой команды появилась задача по разработке мобильного приложения с целью проверки гипотезы востребованности продукта и его удобства для пользователей?
Я знаю ответ, ведь все это я прожил на собственном опыте.
В тот момент мне сильно помог React Native, именно поэтому он и станет основной темой моего доклада.
Почему его стоит выбрать?
Какие возможности это даст?
С какими проблемами можно столкнуться?
Помимо этого будут рассмотрены реальные кейсы и проблемы из практики, а также показан процесс создания первого приложения с возможностью быстрого перехода от React к React Native.

Фронтенд / другое
,
Кросплатформенная разработка
,
Мобильные приложения / другое
Программный комитет ещё не принял решения по этому докладу

Священный грааль: запуск React в Java

Олег Коровин

Много слухов ходит, про загадочный и суровый сайт в компании Одноклассники. Многие слышали, что там все делается на Java. Даже фронтенд.

А что же на самом деле там происходит?

В этом докладе будет история того, как это получилось, какие были проблемы, и как был найден путь решения с использованием новой виртуальной машины GraalVM и React.

Также будет обзор используемого стека и расскажем о том:
- почему мы не взяли NodeJS, Kotlin, Nashorn и другие решения
- Почему был выбран GraalVM
- Как работает JS в GraalVM и какие это дает приемущества
- Как собрать и запустить React в такой конфигурации
- Какие появляются задачи и способы их решения
- Как можно начать постепенную миграцию, огромного проекта

Программный комитет ещё не принял решения по этому докладу

display: grid; grid: subgrid;

Серёжа Попов

Про CSS Grid 2 уровня активно разговаривают на западе, а у нас это всё пока в разряде чёрной магии. Да, они ещё почти не поддерживаются, но вспомните, как быстро пришли гриды.

Я расскажу всё, что знаю про CSS Subgrid — что это такое, как это можно будет использовать и как это сможет упростить жизнь в будущем.

Шаблонизаторы и препроцессоры
,
Адаптивные дизайн и вёрстка
,
Фронтенд / другое
Доклад принят в программу конференции

Relay Modern: data fetching, mutations and subscriptions

Александр Руденко

В докладе будут раскрыты основные задачи, которые решались с помощью Relay Modern, а именно:
- data-fetching и refetch
- мутация данных
- подписки: что это такое в контексте Relay Modern и как их применять

Программный комитет ещё не принял решения по этому докладу

Давай сделаем так, а дизайн потом чуть изменим

Сергей Скорняков
Дмитрий Борисенков

Если вы несётесь в светлое будущее, то вам всегда не хватает времени. Сначала дизайнеры не успевают учесть все возможные состояния интерфейса, а разработчики не успевают учесть те состояния, которые учли дизайнеры. Потом дизайнеры хотят подвинуть пару пикселей, а у разработчиков задачи в очереди и тестовая среда пятисотит. После этого тестировщики насыпают и дизайнерам, и разработчикам багов, которые все надеются когда-то разобрать. А в конце ещё выясняется, что по дороге невзначай каждый изобрел пару велосипедов.

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

Совместная работа дизайнеров и верстальщиков
,
Большие проекты/команды
,
Поиск и развитие команды
,
Продуктовая разработка
Программный комитет ещё не принял решения по этому докладу

Погружение в глубокий офлайн — веб способен на это!

Максим Сальников

Прогрессивные веб-приложения уже получили действительно широкую известность и признание всеми вовлеченными сторонами: разработчиками браузеров (наконец, всеми!), разработчиками, пользователями. Идея приложений, не зависящих от подключения к сети, доказала свою жизнеспособность, и мы видим все больше и больше проектов, идущих по этому пути, что делает возможность работы в офлайне не только лучшей практикой, но просто и хорошей манерой в вебе. В моем докладе, основанном на глубоком исследовании возможностей Service Worker API (с использованием Cache Storage, Background Fetch, Background Sync) и собранных UX-находках, мы рассмотрим историю офлайн веба, важность рассмотрения подключения как привилегии, текущие проблемы (и их решения) и правильные инструменты.

В течение докдада мы спроектируем приложение, готовое к работе офлайн, применяя лучшие технологии и UX-практики и добавляя возможности одна за одной: оболочка приложения, кеширование ресурсов и данных, синхронизация при подключении к сети. Все ради наших пользователей, которые требуют нового уровня отказоустойчивости и скорости работы наших приложений.

Оффлайн и кэширование в локальных хранилищах
,
JavaScript
,
Браузеры
Доклад принят в программу конференции

Docker для фронтендера

Алексей Авдеев

* Почему именно фронтенд-разработчик, а не кто-то другой, должен уметь собирать своё приложение в контейнер.
* Зачем Docker может пригодиться для разработчика интерфейсов.
* Почему добавление новых людей в команду гораздо проще, если вы используете Docker.

Программный комитет ещё не принял решения по этому докладу

Пусть всем кажется, что всё грузится быстро - улучшаем ощущение от загрузки скелетонами

Виктор Русакович

Вы сделали хорошее приложение: красивое и сложное. Но была проблемка - API не успели сделать достаточно быстрым, и приложение грузится медленно. Решение выбрали простое - overlay с ajax-loader пока всё не загрузится.
Можно ли улучшить это решение? Можно ли сделать ваше приложение доступным, даже пока от сервера не пришли данные и показывать, казалось бы, нечего?
В докладе я расскажу об одной из самых популярных и простых техниках "ускорения" - приложение останется таким же медленным, но пользователи этого не заметят! Условимся - трогать API с его скоростью мы не будем, все сможет сделать FrontEnd разработчик!
Доклад о скелетонах: откуда они появились, как их можно использовать, как не стоит. Вы услышите, как мы использовали скелетоны в работе над проектом длиной в 5 лет. И как мы всё это измеряли и подтверждали - да, пользователи любят скелетоны.

Мобильные сайты и приложения на веб-технологиях
,
Оффлайн и кэширование в локальных хранилищах
,
Веб-графика, оптимизация изображений
,
Совместная работа дизайнеров и верстальщиков
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Entropic -- распределенный реестр пакетов для Node.js

Сергей Фетискин

**черновые тезисы**

- что это и откуда взялось
- история вопроса и текущая проблема c npm
- как это работает (??TBD?)
- что это дает (??TBD?), в чем будет разница с npm
- возможно демка

Пакетные менеджеры и организация модульности
Программный комитет ещё не принял решения по этому докладу

Про Angular для всех

Сергей Фетискин

Небольшой обзор того что есть Ангуляр в 2019

- перестаньте называть это angular.js!
- новый движок Ivy
- CLI и скематики (свои расширения cli для генерации кода)
- Server side rendering
- PWA
- тестирование и typescript из коробки
- rxjs -- настоящее реактивное программирование
- ленивая загрузка модулей
- роутинг из коробки
- dependency injection и как это помогает при тестировании.
- инкапсуляция стилей как web-компонентах

AngularJS, Backbone.js и другие JavaScript-фреймворки
Программный комитет ещё не принял решения по этому докладу

RUST + WEBASSEMBLY

Илья Барышников

* Зачем это нужно?
* О производительности в JavaScript, сильные и слабые стороны браузерных движков.
* Какие проблемы решает WebAssembly.
* Какие выгоды от использования Rust при компиляции в WebAssembly.
* Инструменты для разработки - сборка и публикация модулей, взаимодействие с JavaScript, отладка.
* Прирост производительности по сравнению с JavaScript.
* Внедрение в существующее веб-приложение.
* Опыт применения в реальном проекте.

Доклад принят в программу конференции

Пошумим! Generative art и градиентный шум

Егор Белов

Поговорим про Generative art. Расскажу про управляемый псевдорандом на примере шумов: для чего он нужен в анимациях, какие крутые штуки можно с ним делать. Объясню, для чего придумали и как работает алгоритм Перлина. Научимся делать в канвасе бесшовные зацикленные анимации с хаотично меняющимся облаком частиц, генерировать 3D- и псевдо-3D-ландшафты и облачка.

Веб-графика, оптимизация изображений
Программный комитет ещё не принял решения по этому докладу

Как правильно собирать npm-пакеты в 2к19 году

Денис Красновский

Я покажу вам нечто прекрасное, как маленький npm-пакет может погрузить ваше приложение в хаос.
А если серьезно, каждый день мы используем множество npm-пакетов в наших приложениях, но что мы о них знаем?
Я расскажу вам: как правильно собирать npm-пакеты, что выбрать: webpack или rollup? Какой негативный импакт можно занести в приложение используя не правильно собранный пакет.

Пакетные менеджеры и организация модульности
,
JavaScript
,
Фронтенд / другое
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Ролевые системы в личных кабинетах

Владимир

Современные сервисы из сферы бизнеса в плане программирования можно разделить на ведомые и ведущие. Последние отличаются тем, что пишут свою CRM "с нуля", а не заказывают сторонние CRM, которые их в итоге не устраивают по мере роста. О какие "камни" можно споткнуться, работая с такими заказчиками, зачем нужно требовать пользовательские сценарии и как их воплощать в жизнь. Планировщики задач - почему так дорого стоят, как запрограммировать календарь, системы мгновенных оповещений, предусмотреть hi-load, где применять горизонтальное масштабирование, а где другие "фишки". ЯП и технологии: PHP (нативный, без фреймворков), JS (JQuery), Bootstrap, XHTML, CSS 3, MySQL, SQLiite.

Программный комитет ещё не принял решения по этому докладу

Weak Management Needs Pay Equality

Егор Бугаенко

The average salary of American workers is growing 1% every year, while the pay gap between similar jobs is decreasing. What do I think about this trend? Does it sound like people are getting more every year and it’s good? Not at all. This trend is completely against what good management should fighting for: unequal pay for unequal contribution. A strong manager wants to work with free people, who get what they deserve because of their work, not because of their place in the company. Meritocracy is yet another name for the movement we are leading now in the industry of software development.

Методологии и процессы разработки ПО; Сроки и приоритеты
,
Большие проекты/команды
,
Модели руководства
,
Корпоративная культура и мотивация
Программный комитет ещё не принял решения по этому докладу

CSS — язык программирования

Никита Дубко

В Интернетах принято ругать CSS, если не понимаешь, как с ним работать. Тем не менее, CSS в связке с HTML — Тьюринг-полный язык программирования, а если к ним добавить Houdini API и CSS Custom Properties — можно творить настояющую магию.

Фронтенд / другое
Доклад принят в программу конференции

Dart: маленький паровозик, который смог

Тимофей Лавренюк

Dart - язык, который был призван исправить изьяны Javascript. И во многом у енго получилось! Но при этом он так и не смог стать популярным, пока не появился Flutter.
В этом докладе мы разберем:
- что такого привлекательно в Dart, чтобы использовать его в веб разработке вместо Javascript
- какой пусть он прошел с самого начала, и в какую сторону он будет развиваться
- почему стоит попробовать Dart, даже если ты никогда на нем не будешь писать
- как мы использовали Dart в небольшом проекте с небольшой командой, и почему готовы использовать его дальше

Single page application, толстый клиент
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Взаимодействие с Web-компонентами, cлабое связывание и dependency injection через DOM. Готовые рецепты для Micro Frontend решений

Александр Волков

Рассмотрим основные способы общения с Web-компонентами.
Разберем как организовавать сложное и слабосвязанное взаимодействие между ними.
Пройдемся по способам реализации внедрения зависимостей для Web-компонент через DOM и особенностям IoC контейнеров, работающих не через конструкторы.
Разберем конкретные проблемы и примеры решений в применении к Micro Frontend решениям, собранным из разных фрейморков.

Программный комитет ещё не принял решения по этому докладу

Роутер как у сына маминой подруги

Павел Малышев

Когда мы разрабатываем веб-приложения, мы часто используем маршрутизатор. Каждый фреймворк имеет свой собственный, хотя все они используют одни и те же принципы. Или нет? Действительно ли существующие маршрутизаторы достаточно гибки, чтобы покрыть все кейсы веб-разработки? Или "танцы с бубном" - это неотъемлемая часть работы с маршрутизацией. Давайте ответим на все эти вопросы, сравнив различные маршрутизаторы, попутно разработав свой собственный подход.

Single page application, толстый клиент
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

А так можно было? Нативное веб-приложение в Electron

Борис Гулай

Зачем что-то менять, когда у тебя есть традиционное веб-приложение со всеми его плюсами: прозрачное обновление, работа на любой ОС лишь бы в приличном браузере, простота разработки, дизайна и деплоя?

Незачем до того момента, когда тебе нужно взаимодействовать с оборудованием.

Сделать это из песочницы, в которой работает приложение в браузере затруднительно. Для того и создавалась песочница, чтобы защитить локальный компьютер от поползновений веб-сайтов. Что ещё хуже, есть устойчивая тенденция на ужесточение ограничений песочницы.

Мы столкнулись с этой историей, когда разрабатывали кассу. Для преодоления вышеописанных ограничений, мы использовали ActiveX. По сути, IE остался единственным браузером, допускающим прямой доступ к локальному компьютеру через проприетарную технологию COM. Это создавало множество проблем: ограничение по поддерживаемым ОС, длительная настройка браузера, неожиданные проблемы на клиентской стороне и тому подобное.

В докладе я расскажу про решение, которое спасло нас: Electron = Chrome + NodeJS. Оно требует установки на рабочие места, но даёт современный браузер и возможность выполнять код за пределами песочницы (благодаря NodeJS). Кроме того, позволяет приблизить UX к типичному десктопному. Сохраняя при этом большинство плюсов веб-приложения.

Single page application, толстый клиент
,
Node.js и io.js
,
Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Год с ReasonML в продакшне

Евгений Кочетков

Я расскажу как и зачем наша команда решила переписывать на ReasonML части крупного приложения, что из этого получилось, сделали бы мы это снова, и стоит ли вам поступать так же.

Фронтенд / другое
Программный комитет ещё не принял решения по этому докладу

Интерфейс для React Native-приложения: быстро и без боли

Константин Дзюин

Я поделюсь рецептом безболезненного запуска React Native-приложения за 6 недель командой из трёх человек. Расскажу о подходах, инструментах и техниках, которые нам для этого понадобились.

Начнем с главного ингредиента: берём стайл-гайд, симуляторы и реальные устройства и объединяем их в одну систему. Затем размещаем разработку, отладку компонент и их вариаций на один экран, одновременно отображая их на реальных устройствах. Получаем еще более значительное ускорение, чем ожидали. Нам также потребуется наличие детально документированных UI-композиций, готовых для интеграции с бизнес-логикой. И наконец, время на тестирование сокращаем с помощью проверенных на всех устройствах и платформах компонентов.

Результат — возможность вовремя выпустить приложение высокого качества, избежать повторяющихся манипуляций и снизить дальнейшую стоимость поддержки. Без нервов и боли!

Мобильные сайты и приложения на веб-технологиях
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
,
Разделение представления и бизнес-логики, шаблонизация
,
Методы и техника разработки ПО
,
Кросплатформенная разработка
Программный комитет ещё не принял решения по этому докладу

Цена типизации

Назим Гафаров

Типизация обходится дорого. Сегодня ты пишешь дженерики, завтра дженерики от дженериков, а послезавтра программируешь на типах и выносишь из дома вещи ради новой дозы типизации. Я расскажу, как получить преимущества типизации, прилагая минимум усилий или вовсе не используя типизацию. Обозначу условия, при которых типизация окупается.

Программный комитет ещё не принял решения по этому докладу

Профилирование NodeJS

Артем

Данный доклад расскажет о том, что такое профилирование, научит локализировать потенциальные утечки памяти, а также немного углубит понимание инструмента DevTools

Программный комитет ещё не принял решения по этому докладу

Typescript, сохрани и спаси мою логику.

Александр Пушкин

Расскажу зачем нужно писать типизацию, которая повторяет логику.
Покажу какими инструментами обладает TS для выражения логики на "языке" типизации.
Расскажу как мы типизировали формат взаимодействия с сервером и какие плюсы мы с этого получили.
Покажу на сколько современный TS богат и что можно типизировать даже сложно форматированную строку.

Фронтенд / другое
,
Стандарты кодирования
,
Рефакторинг
Программный комитет ещё не принял решения по этому докладу

Масштабируемость TypeScript приложений, проблемы и их решения.

Дмитрий Мещерин

Большинство команд использует потенциал TypeScript на 30-40 %, и это связано не только с пренебрежением строгой типизацией, куда более серьезная проблема кроется в том как мы структурируем и разделяем код. Будем говорить о том какие проблемы возникают при масштабировании проектов на TS, и о том как их можно решить командными усилиями.

Программный комитет ещё не принял решения по этому докладу

Человеческие собеседования

Семен Левенсон

Провел и прошел много собеседований, и стало ясно, что с этим много где печально. Идея доклада в том, что бы поднять проблему отвратительных собеседований и рассказать как можно сделать лучше. В докладе приведу как практические рекомендации для обоих сторон, так и будут идеи на подумать, от чего стоит вообще отталкиваться при поиске/найме.

Программный комитет ещё не принял решения по этому докладу

The state of soft skills

Андрей Смирнов

Вы заметили тот момент, когда все вокруг стали обсуждать soft skills? Разумеется, невероятно интересно обсуждать гибкие навыки на примере индустрии frontend-разработки, где благодаря низкому порогу входа собралось множество талантливых людей с абсолютно разным профессиональным бэкграундом. Но характерно то, что люди, объясняя пользу soft skills, приводят в качестве доказательной базы лишь рассуждения и истории из жизни.

У меня как и у многих есть сильное мнение, что в 2019 году разработчикам развивать soft skills важнее для успешной карьеры, чем hard skills, но мне бы хотелось это доказать необычным образом. Я приведу в пример различные статистические исследования (в том числе собственное) и проанализирую их результаты, а также расскажу, что из всего многообразия гибких навыков стоит развивать в первую очередь и как это легче всего сделать.

Программный комитет ещё не принял решения по этому докладу

Через REST и Redux к GraphQL и Apollo

Евгений Джумак

GraphQL и Apollo могут легко заменить REST API в связке с Redux. Я расскажу нашу историю перехода на GraphQL и сделаю обзор одного из GraphQL-клиентов, с которым работаю - Apollo. Расскажу об экосистеме Apollo, запросах, мутациях, подписках, о работе с кешем, об optimistic UI, батчинге запросов, пагинации, валидации, обработке ошибок, SSR и другом. А также рассмотрю инструменты и текущее состояние дел у Apollo.

Взаимодействие с серверной стороной (API)
,
JavaScript
Программный комитет ещё не принял решения по этому докладу

BDD тестирование веб-приложений

Иосса Александр

Рассмотрим что такое BDD тестирование и как оно помогает писать e2e тесты дешевле и быстрее.
Используя Gherkin синтакс в связке с Cypress рассмотрим, как сделать тесты понятными не только для разработчиков, но и для тестировщиков с менеджерами.
Определим место acceptance тестов в ci/cd пайплайне. Обсудим кто должен и может писать такие тесты и когда

Фронтенд / другое
,
Автоматизация разработки и тестирования
,
Автоматизация тестирования
,
Приёмочные и функциональные тесты
,
Тестирование фронтенда
Программный комитет ещё не принял решения по этому докладу

Angular + GraphQL. Год использования

Сергей Фетискин

Полтора года назад мы решили начать новый проект с использованием GraphQL. Спустя год в нашей команде уже 3 проекта с использованием этой технологии. Как мы смогли улучшить процесс разработки при помощи GraphQL, и какие проблемы возникли на этом пути.

Программный комитет ещё не принял решения по этому докладу

Docker. Управление сборкой MultiApp проекта

Пасынков Николай

В докладе я расскажу, как развивалась архитектура и сборка проекта на Angular. Как мы решили разбить одно приложение на несколько. Объясню выбор инструментов. Расскажу, как мы применяли Docker для сборки и деплоя, а также для управления версиями на релизах; разъясню какие плюсы и минусы мы для себя нашли в Jenkins и Gitlab CI; покажу что Sentry мощнее, чем кажется на первый взгляд.

Программный комитет ещё не принял решения по этому докладу

Тема доклада уточняется

Вадим Макеев

Описание доклада появится позднее.

Доклад принят в программу конференции

Самые быстрые First Paint - First Meaningful Paint

Юрий Дворжецкий

Этот доклад не про оптимизацию загрузки, или оптимизацию выполнения JS, а про отображение контента.

Познакомимся с RAIL, а так же First Paint, First Contentful Pain, First Meaningful Paint.
Разберёмся, как браузер рендерит страницы и отрисовывает контент.

В докладе будут разобраны приёмы, как максимально быстро показать страницу (от First Paint до First Meanigful Paint).
Сравним популярные подходы для построения каркаса страницы - CSS Grid, Flexbox и другие.
А также ответы на извечные вопросы - что делать со шрифтами и картинками.

Адаптивные дизайн и вёрстка
,
Веб-графика, оптимизация изображений
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Как мы пишем на JSX без Реакта

Павел Иванов

О личном опыте создания инфраструктуры для верстки лендингов с компонентнами на React, о преимуществах нашего подхода и сложностях, с которыми мы столкнулись.

Основные пункты:

- зачем стартапу в бьюти-индустрии более 150 лендингов
- история перехода от Groovy Static Pages к SPA на React с SSR
- оптимизация размера бандла - отказ от React'a на клиенте

Шаблонизаторы и препроцессоры
,
Single page application, толстый клиент
,
Генераторы статики
Программный комитет ещё не принял решения по этому докладу