Конференция завершена. Ждем вас на РИТ++ в следующий раз!

Принятые доклады

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

Адаптация

Почему не надо становиться руководителем

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

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

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

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

Новинки

Интерактивные проекции и 3D-маппинг с помощью web-технологий

Денис Радин

Многие из вас видели 3D-маппинг-шоу, но не многие из вас знают, что маппинг можно делать и с помощью web-технологий.

В этом докладе будет обобщен опыт автора по созданию проекций и арт-инсталляций для фестивалей искусств и IT-конференций на основе WebGL и CSS3D. Мы поговорим о подходах, которые можно использовать, а также о челленджах и преимуществах использования JavaScript в области создания интерактивного арта.

* Интерактивные проекции. Примеры.
* Почему web-технологии для проекций?
* Как это работает?
- CSS3D, метод, пример.
- WebGL, метод, пример.
* Преимущества.
* Проблемы.
* Как начать?

Фронтенд / другое
,
Оптимизация изображений
,
ES.Next
,
WebRTC, p2p
Доклад принят в программу конференции

Эмоциональное выгорание. История успеха

Анна Селезнёва

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

Я не планировала стать лицом выгорания и нести эту тему в массы. Но так вышло, что я выгорела, причём когда это ещё не было мейнстримом.

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

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

Web Components, или Туда и обратно

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

* Что делать, если хочется больше ванилы?
* Готовы ли веб-стандарты для решения прикладных задач разработки?
* Есть ли жизнь после фреймворков?

Single page application, толстый клиент
,
Фронтенд / другое
,
React, Vue, Angular и другие JavaScript-фреймворки
,
ES.Next
Доклад принят в программу конференции

The state of CSS

Серёжа Попов

Ежегодный опрос https://stateofcss.com/ навёл много шуму, так как большое количество технологий, указанных в нём, оказалось для разработчиков новинкой. Хотя большинство из этих технологий уже используются теми, кто об этом знает.

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

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

Простота. Надежность. WebAuthn

Алексей Носов

В Tomsguide пишут "It's Time to Kill Your Eight-Character Password". Но нет, настало время вообще избавиться от паролей, навсегда!

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

Безопасность в браузере
,
Мобильные приложения без native (PWA, AMP)
,
ES.Next
,
Node.js
,
Взаимодействие с серверной стороной (REST, GraphQL, gRPC)
Доклад принят в программу конференции

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

New Adventures in Front-End, 2019 Edition

Виталий Фридман

The beast is alive! Have you optimized your JavaScript/CSS delivery for performance with HTTP/2 yet? How are you using service workers and server workers these days? What about critical CSS and Server Push? Are you compiling your code base into WebAssembly yet? How do you feel about ASCII-alike CSS Grid layout with polyfluid sizing and ch unit? Have you ever tried to work around nested CSS Custom Properties, untamed 3rd-party scripts, painful web font reflows, shady CSS Houdini tricks and multi-dimensional variable fonts? Well, let’s bring it on!

Take the techniques with a grain of salt — we do not take responsibility for sleepless nights and nightmares caused by the content of this session. Beware: you will not be able to unlearn what you’ll learn in the session!

Браузеры
,
Фронтенд / другое
,
Дизайн-системы
,
Мобильные приложения без native (PWA, AMP)
,
Препроцессоры CSS
,
Доступность (Accessibility - a11y)
,
ES.Next
,
Адаптивная вёрстка
Доклад принят в программу конференции

Самый низкий уровень: пишем на WebGL и WebAssembly без фреймворков и транскомпиляторов

Антон Хлыновский

Говоря о WebGL, часто имеют в виду three.js или другие похожие фреймворки. Новичок на поле веб-технологий WebAssembly уже начинает ассоциироваться с языками C или Rust. А как же, ведь нужные утилиты и обёртки WebGL и WebAssembly сложны и непонятны. Или же нет?

Мы познакомимся с самыми основами WebGL и WebAssembly и напишем на их основе несложное визуальное приложение, используя только базовое API.

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

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

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

Юрий Артюх

Будет рассказано об истории создания одной анимации от получения макета до сдачи клиенту. История включает в себя язык WebGL, Three.js, GLSL, Canvas 2D, графы и немного математики.

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

Быстрые приложения в 2019

Иван Акулов

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

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

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

Приложения

Разработка UI для банкоматов

Дима Королев

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

Single page application, толстый клиент
,
Мобильные приложения без native (PWA, AMP)
Доклад принят в программу конференции

Как стать свободным от "всех цепей" старых браузеров

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

Что делать, если ваше приложение собрано по фэн-шую, но несмотря на это, оно все еще остается слишком тяжелым? Настало время обратить внимание на старые браузеры.

Я покажу вам на реальном примере их влияние на вес вашего приложения и расскажу, что можно сделать, чтобы не упасть лицом в плохой speed index.

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

Как поговорить с микроконтроллером из JS

Виктор Накоряков

- Какое бывает железо, что умеет, как с ним разговаривать.
- Способы физического сопряжения с PC.
- Какие варианты коммуникации есть у приложения на JS.
-- Пакет serialport + Firmata.
-- Пакет serialport + самописная прошивка на C++.
-- Espruino: программируем контроллер прямо на JS.
-- Raspberry Pi: обычный Linux-сервер, но с управляемыми ногами.
-- HTTP в локальной сети.
-- HTTP и MQTT через облако.

ES.Next
,
Взаимодействие с серверной стороной (REST, GraphQL, gRPC)
Доклад принят в программу конференции

WebGL на карте. Карта на WebGL

Мстислав Живодков

Недавно мы запустили обновленную версию 2gis.ru с новой 3D-картой, работающей на WebGL. Заходя на сайт, вы видите готовую картинку. Но карта — сложный механизм, в нем скрыто множество интересных деталей, о существовании которых можно даже и не подозревать.

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

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

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

Как мы делали свой визуальный (WYSIWYG) редактор статей для Life.ru и не только

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

Наша компания специализируется на порталах для СМИ, у нас в портфолио их несколько. Самый известный из них - Life.ru. Хочу рассказать историю про то, как мы создавали для него визуальный редактор, с какими проблемами столкнулись, и как это всё вообще работает.

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

«Алиса, пойдём во фронтенд!»

Никита Дубко

Голосовые помощники — уже не далёкое будущее, а реальная действительность. Алекса, Сири, Алиса и прочие встроенные в "умные" колонки боты постепенно меняют наш способ взаимодействия с приложениями.

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

Мобильные приложения без native (PWA, AMP)
,
Взаимодействие с серверной стороной (REST, GraphQL, gRPC)
Доклад принят в программу конференции

Особенности переноса нативного приложения в WEB, опыт KeepSolid Sign

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

Жило-было приложение для подписи документов. Оно было под все популярные платформы, и его основой было C++ ядро. И однажды поступила задача сделать веб-версию этого приложения.

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

Single page application, толстый клиент
,
Offline-приложения
,
ES.Next
,
Взаимодействие с серверной стороной (REST, GraphQL, gRPC)
Доклад принят в программу конференции

Качество

Hit Points вашего сервиса

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

Все мы пишем веб-сайты, приложения. Ими пользуются сотни, тысячи, десятки тысяч людей. В HeadHunter нагрузка достигает в пике 4000 RPS.

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

Давайте разбираться.

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

Продвижение опенсорс-проектов

Андрей Ситник

Андрей Ситник, создатель популярных Автопрефиксера, PostCSS, Браузерлиста и Nano ID расскажет про свой опыт продвижения опенсорс-проектов.

Доклад будет полезен опытным разработчикам, которые хотят начать свои опенсорс-проекты. Также доклад будет полезен новичкам — понимая методы маркетинга в опенсорсе, легче защититься от «хайпа» и выбирать технологии по их пользе для проекта.

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

Синдром качества

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

Илья - крутой разработчик! Он многое знает и многое умеет, а главное, он умеет быстро поставлять ценность для пользователя и для бизнеса. Илья сделал неимоверное количество фич. Вроде все довольны и так бы оно и продолжалось, если бы, однажды, Илья не сказал: "Тут совсем плохой код, я буду делать фичу минимум полгода. Давайте лучше все перепишем!". Бизнес даёт добро и Илья проваливается на полгода в переписывание, которое завершается полным провалом.

Почему же так произошло? Илья никогда не обращал внимание на качество кода и создавал технический долг. Это его и погубило.

Эта типичная история для IT. Эта история оказалась реальностью и для нас. В докладе я расскажу, как мы стали качественнее пилить фичи, и какие конкретно шаги предприняли в направлении культуры качества.

Code Review
,
Автоматизация разработки и тестирования
,
Корпоративная культура и мотивация
,
Поиск и развитие команды
,
Продуктовая разработка
Доклад принят в программу конференции

From bloody to sweety Enterprise

Зар Захаров

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

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

За время работы в Альфа-Банке — от продукта к продукту — я развивал и оттачивал приложения, делая их лучше и удобнее в разработке; менял библиотеки, стараясь снизить порог вхождения для новых сотрудников, совершенствовал существовавшие и предлагал новые практики и подходы. В этом докладе я хотел бы рассказать о пройденном пути и опыте: показать, как устроен стек, объяснить, зачем используем NodeJs и что помогает сделать нашу работу легкой и непринужденной.

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

Drag&Drop-компоненты для слепых пользователей. Вы шутите?

Сергей Кригер

Передвигать вещи для нас настолько естественно, что мы перенесли это из мира вещей в веб. Сортировка todo-списков, организация дашбордов, загрузка файлов — мы просто не можем себе представить все эти события без перетаскивания элементов на странице. А что, если бы мы не могли видеть экран? Было бы перетаскивание элементов все еще возможно и настолько же удобно, как прежде? Смогли бы мы выполнить все эти задачи без зрения?

В этом докладе вы узнаете основные принципы drag&drop-паттерна и как создавать перетаскиваемые элементы на странице доступными для людей с ограниченным зрением.

Фронтенд / другое
,
Доступность (Accessibility - a11y)
,
ES.Next
Доклад принят в программу конференции

Сравниваем ApolloClient и Relay, учимся работать с GraphQL-фрагментами

Павел Черторогов

В начале разберу архитектуру Apollo Client'а и Relay. Расскажу, что такое "волосатый" GraphQL, чем он полезен и чем отличается от RestQL. Покажу, как правильно использовать GraphQL на стороне клиента в react-apollo, как писать запросы «снизу-вверх» через фрагменты (прям как в фейсбуке). Все это дело подружу с TypeScript'ом, чтоб получить суровый интерпрайзный статический анализ.

Single page application, толстый клиент
,
ES.Next
,
QA / другое
,
Взаимодействие с серверной стороной (REST, GraphQL, gRPC)
Доклад принят в программу конференции

Инструменты

Реактивная печать PDF

Виталий Слободин

Рано или поздно разработчикам приходится сталкиваться с печатью в PDF: обычные страницы, счета и договора. Есть множество текущих решений, которые вполне выполняют свою задачу. Но что делать, когда нужно очень быстро и качественно печатать красивые PDF-файлы? А что, если поступила задача сделать предпросмотр PDF перед печатью с возможностью онлайн-редактирования? Вот об этом и многом другом будет этот доклад.

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

Production Ready Design

Ксения Лушникова

В нашей команде Яндекс.Денег мы выработали подход разработки и дизайна веб-интерфейсов.

Я покажу, как легко мы собираем живые интерфейсы и передаём их в продакшн, как создаётся дизайн Яндекс.Кассы и о нашем инструментарии.

CSS фреймворки
,
Адаптивная вёрстка
Доклад принят в программу конференции

Автоматический рефакторинг кода с помощью codemodes

Александр Мышов

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

Сodemode - это скрипт, работающий с абстрактным синтаксическим деревом (ast) JavaScript. Цель codemode - автоматизировать рефакторинг кода.

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

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

Токены в дизайн-системах

Юрий Ветров

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

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

Lottie-web. Используем Adobe After Effects для анимации в web

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

Существует ряд библиотек, позволяющих анимировать SVG: Snap.svg, Paper.js, Velocity.js и другие. Но им не хватает наглядности. Это делает работу над сложной анимацией прерогативой опытных креативных разработчиков и дистанцирует их от дизайнеров.

Поэтому наша команда взяла на вооружение еще один инструмент для работы над векторной анимацией: Adobe After Effects. В сочетании с плагином Bodymovin он позволяет создавать анимацию в формате json и воспроизводить при помощи библиотек Lottie не только в браузере, но и в мобильных приложениях на разных платформах.

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

Я расскажу о нашем опыте использования plugin’а, с какими сложностями мы столкнулись во время сложного анимационного проекта и как преодолевали их.

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

Как разрабатывать сотни A/B-экспериментов

Иван Бабков

А/Б-тестирование — это способ измерить эффективность нового функционала путем сравнения.

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

Я расскажу о нашей инфраструктуре для работы с А/Б-экспериментами, как мы её используем, с какими проблемами сталкивались и как их решали.

Фронтенд / другое
,
Методы и техника разработки ПО
,
Логирование и мониторинг
,
React, Vue, Angular и другие JavaScript-фреймворки
,
Внедрение и поддержка
,
Теории и техники анализа
Доклад принят в программу конференции

Самый мягкий и пушистый путь в Machine Learning и Deep Neural Networks

Алексей Охрименко

Если вы пытались научить машину чему-либо, если зачитали от корки до корки Machine Learning for Dummies, если вы заплатили за самые дорогие курсы по Deep Neural Networks, но у вас так ничего не получилось... то этот доклад для вас!

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

Мы научимся работать с TensorFlow.js - javascript-библиотекой для работы c Deep Neural Networks, отлаживать нейронные сети, генерировать данные для обучения и решать задачи, о решении которых вы раньше не могли и мечтать.

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

В поисках Стилевого Грааля

Артур Кенжаев

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

В докладе мы обсудим преимущества и недостатки различных подходов к стилизации приложений в контексте дизайн-системы Яндекс.Маркета, обслуживающей несколько сильно различающихся проектов. Я поделюсь нашей историей этого непростого приключения в поиске Стилевого Грааля, когда Performance не мешает Developer Experience, и также расскажу про наши решения и инструменты, позволяющие проводить гибкие и сложные A/B-тесты с помощью стилизации и Dependency Injection.

Фронтенд / другое
,
Дизайн-системы
,
Мобильные приложения без native (PWA, AMP)
,
Препроцессоры CSS
,
CSS фреймворки
,
ES.Next
Доклад принят в программу конференции

Как перестать выбирать фреймворки и начать жить

Саша Шинкевич

Представьте, что перед вами стоит задача повесить полку. Как вы её будете решать? Можно сразу взяться за любимый инструмент: молоток и гвозди. Если вы Senior MolotokJS Developer, то сможете молотком забить не только гвозди, но и шурупы. А можно выделить время на исследование, нужна ли вам вообще полка.

Так и во фронтенде. Фреймворк — всего лишь инструмент. Как у любого инструмента, у него есть задачи, для решения которых он был создан. В своем докладе я поделюсь, на что следует опираться при выборе подходящего инструмента и как перестать тратить на это время команды и деньги бизнеса.

Single page application, толстый клиент
,
React, Vue, Angular и другие JavaScript-фреймворки
,
ES.Next
Доклад принят в программу конференции

Анимация в вебе

Юлия Миоцен

Хорошая и уместная анимация может произвести впечатление, объяснить пользователю какое-то действие или просто быть предметом искусства.

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

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

Удобный CI своими руками

Дмитрий Кузнецов

Если к качеству продукта предъявляются строгие требования, его разработка рискует стать долгой и дорогой. Несмотря на большое количество CI/CD-инструментов, создать удобное и одновременно полезное решение, которым бы пользовалась вся команда, непросто.

В докладе я расскажу, каким образом мы кратно ускорили релизный процесс фронтовой js-библиотеки FormBuilder, не потеряв в качестве.

Непрерывное развертывание и деплой
,
ES.Next
,
Тестирование фронтенда
Доклад принят в программу конференции