В этом году на Frontend Live мы снова обсуждаем самые актуальные в разработке темы: будет 4 трека по архитектуре, производительности, тестированию и дизайну. Но будем обсуждать и смежные вопросы, так как frontend продолжает развиваться и расширяться, появляются интересные решения старых (и новых) проблем, и, конечно, новинки для изучения.
Как всегда, кроме докладов, будут ещё интенсивы, мастер-классы и воркшопы, и, конечно, открытые обсуждения (это может каждый — предложите тему для обсуждения и приглашайте участников).
Для расширения вашего горизонта мы снова выбрали только креативные и практичные доклады о реально работающих проектах. Будут доклады и о новых идеях, и демонстрации на тему, как это всё устроено и работает. На мастер-классах расскажем, как команды решают внезапно возникшие трудности, какие новые ноу-хау изобрели и что получили на выходе. А еще мы поговорим о красоте.
В треке общих вопросов докладчики не боятся копать технологии вглубь и возвращаться с интересными результатами. Они расскажут как еще на уровне кода предотвратить проникновения извне, а также о работе в рантайме статичной типизации TypeScript. Выступающие добавят и немного хардкора, а со стороны beautiful-side разработки будет много интересного о звуке, танцах и иконках.
Александр Инкин (Tinkoff.ru), увлечённый angular-разработчик, Google Developer Expert, композитор и киноман, покажет свое приложение для игры на синтезаторе в браузере. На своих невероятных демках Александр объяснит, как можно использовать императивный Web Audio API в декларативном стиле. А ещё поговорит о том, что поможет с лёгкостью повторно использовать созданные блоки, и вообще комфортно применять API в средах веб-компонентов или фреймворков с компонентным подходом.
Василика Климова (Avaloq), евангелист 3D из Люксембурга с 11-летним опытом веб-разработки, любила использовать 3D-технологии во фронтенде ещё в то время, когда это не было мэйнстримом. Была Frontend Team Lead в Artec3D, где познакомилась с 3D-миром WebGL.
Василика покажет, как научила танцевать свою 3D-модель, а вы узнаете, что такое риггинг, скиннинг моделей и зачем 3D-модели кости.
В нашей индустрии нечасто вспоминают про такие мелкие бытовые вещи, как svg-иконки. Никита Мостовой (HeadHunter), ведущий frontend-разработчик в команде архитектуры, погрузит нас в их прекрасный мир и расскажет в how-to докладе, как оптимизировать добавление иконок на сайт через инлайн-компонент. Ещё Никита покажет, как решить проблему некэширования иконки при SSR, как менять иконки и оптимизировать процесс их загрузки.
Если вы хотите опенсорсить и сэкономить пару-тройку недель на обучении, то Роман Седов из Tinkoff.ru, angular-разработчик и автор интерактивной книги по продвинутому angular), расскажет что нужно для этого уметь, делать и знать. Роман поддерживает и развивает opensource-проекты в мире Angular и знает на практике, как нескучно создавать NPM-библиотеки. А ещё как писать документацию, как пакет смотрится без лишнего кода, как не произвести впечатление сырцов вместо исходников, как настроить проверку кода и как его выкладывать.
После выкладывания кода нужно быть готовыми, что его поймут и хакеры. Татьяна Новикова (ЦАРКА), опытный pentester и аудитор исходных кодов с точки зрения безопасности, покажет, какие векторы атак существуют и как хакеры эксплуатируют уязвимости фронтенда. А также объяснит, почему веб-фреймворки не защищают разработчика от ошибок безопасности и как с этим всем бороться.
Татьяна проведёт экскурсию по миру уязвимостей фронтенда, начиная с XSS и заканчивая не самыми популярными типами атак, чтобы вы с уверенностью смогли сказать, что гигиенический минимум у вас есть.
И конечно, куда же без хардкора. Технологии во фронтенде непрерывно развиваются, и мы не всегда поспеваем за этим развитием. Александр Руденко (X5Labs), Senior Software Engineer / Community Lead в Facebook Developer Circle: Moscow, продолжит его ещё с прошлой конференции. В прошлом году Александр ввел нас в Relay Modern, а в этом расскажет, как работать в нём с Network & Data Layers.
Александр напомнит базовые принципы Relay Modern, после чего погрузит в слой данных и сетевой слой, чтобы рассказать о грамотном коннекте с серверной частью.
Майк Башуров (WiseBits), постоянный докладчик, TypeScript-самурай и фанат ReasonML, расскажет, как в TS перетащить статическую типизацию в рантайм. Зачем? Например, для валидации JSON, других данных или для property-based testing. Это непросто, но если очень хочется, то можно!
Майк покажет, что такое type-directed emit, как его применять, проведет сравнение с другими решениями, а также погрузит в особенности API транспиляторов (и мы увидим, какие есть грабли у такого подхода. Приходите смотреть, как типы переезжают в рантайм и валидируют данные.
Разработчикам тоже хочется работать в красивом и удобном коде. Конечно, трудно оценить, хороша архитектура или нет — в одном проекте она будет успешной, а в другой «что-то пойдёт не так». Тем не менее, понятная архитектура всегда помогает работе над проектом: расширение или изменение кода проходит без больших трудностей в его понимании и тестировании. Даже если вы только что получили чужой код в руки. Доклады трека «Архитектура» как раз о том, как облегчить жизнь разработчику.
Денис Красновский (ДомКлик), технический руководитель разработки, снова порадует докладом на тему оптимизации кода. В этот раз Денис расскажет про методологию рефакторинга, отточенную на множестве проектов. С ее помощью вы сможете вдохнуть новую жизнь в самый непонятный код.
С новым алгоритмом будет легче принять решение, чтобы справиться с проблемами, когда вы уже пришли на проект с legacy.
Иван Соловьев (Evrone), не только frontend-разработчик JS, но и практик Go и Rust — он любит сравнивать их друг с другом и с JavaScript. Иван расскажет о том, как выбор между монолитом и микросервисами, а также монорепозиторием и полирепой влияют на борьбу со сложностью в больших проектах.
Ещё Иван поделится, как выбранная архитектура поможет предотвратить такие болезни большого фронтенда как релиз-цикл, врастающий вендоринг, устаревание кода, оценка зависимостей, дублирование кода и общий код.
Али Рагимов (Okko), frontend-разработчик с 2013 года, расскажет о пользе TypeScript в архитектуре веб-разработки и почему разработчики все больше выбирают TypeScript для своих проектов. А ещё о плюсах и минусах использования языка и о том, как легко начать свой первый сайт на TypeScript.
Отдельный блок будет посвящён typings, краеугольному камню языка, о который спотыкаются даже опытные разработчики.
Андрей Марченко (Tinkoff.ru), techlead, разработчик платформы для разработчиков, расскажет историю своего проекта. Узнаем, как менялась и эволюционировала архитектура фронтенда в Tinkoff. Как в 2015 году 5 разработчиков создали сайт tinkoff.ru на React 0.13 и чем проект живёт сейчас.
Сейчас разработчиков уже 60, а монолит состоит из 40 отдельных приложений, микрофронтенды, монорепы и технических продуктов.
Владимир Гриненко (Яндекс), руководитель службы общих компонентов в отделе разработки поисковых интерфейсов, откроет вам, как найти идеальный баланс, чтобы не загонять всех в рамки единой дизайн-системы и при этом сохранить визуальную самоидентификацию. Так как Яндекс делает очень разные продукты (поиск, такси, музыка, еда, образование и кино), то консистентность (согласованность) интерфейсов в масштабах Яндекса — явление противоречивое и с визуальной, и с технологической точки зрения.
Владимир покажет формулу пользы общего кода: где он будет работать, а где лучше написать свой велосипед, и расскажет, как повторно использовать код без технофашизма и прекращения экспериментов.
Никому не хочется терять время на тестирование с непонятными результатами или продираться сквозь непролазные условия тестирования, даже если результаты будут хорошими. Чтобы результат соответствовал вашим ожиданиям, наши докладчики расскажут, как сделать тесты понятными даже тестировщикам и менеджерам, как тесты выглядят с позиции бывшего QA, который перешел в разработку. А ещё в «Тестирование», кроме докладов, будут и сами тесты, в частности, nodejs-web-сервисов и UI.
Александр Иосса (Diginavis), product manager, ведущий канала о боли и радостях software инженеров, расскажет о BDD-тестировании веб-приложений, и как оно помогает писать E2E-тесты дешевле и быстрее. Покажет, как Gherkin-синтаксис в связке с Cypress делает тесты понятными не только для разработчиков, но и для тестировщиков с менеджерами.
Александр научит, как писать тесты, а также кто и когда их должен и может писать. Вы сможете определять место acceptance-тестов в ci/cd-пайплайне, переиспользовать ранее написанные блоки, а после всего этого легко поддерживать и расширять процесс тестирования.
А еще Александр знает, что ловить в Иннополисе, где он живет уже более 4 лет. Не упустите шанс спросить его об этом )
Николай Москаленко (Райффайзенбанк), тестировщик с 10 летним опытом, frontend-разработчик на React и мультипликатор, задаст неудобные вопросы о качестве тестирования. Мы увидим ситуацию с тестами глазами бывшего QA, который перешел в разработку. И разберёмся в методике быстрого тестирования кода (дефектов больше, чем кажется!).
Также Николай расскажет, какие тесты лучше выбирать для экономии времени. Вы поймете, какие техники и инструменты избавляют от внешних зависимостей при тестировании frontend-приложений. Но и это ещё не всё! Николай расскажет, как ускорить написание автотестов на JavaScript и повысить их читаемость с помощью нотации Gherking, библиотеки jest-cucumber.
На десерт — паттерн PageObject для end-to-end-тестов на Puppeteer, который упрощает поддержку UI-автотестов.
И наконец целых 2 мастер-класса по тестированию проведет Максим Соснов (СКБ Контур), ведущий разработчик, двигатель культуры технического совершенства, который стремится быть agile и соответствовать DevOps-философии. Максим расскажет, какие паттерны и антипаттерны есть, как делать полезные тесты и как продать тесты команде, чтобы разработчики не воротили нос.
Мастер-класс 1. Тестируем nodejs-web-сервисы
На первом мастер-классе Максим покажет, как правильно тестировать nodejs сервис. Как с помощью mocha, chai, nock, supertest, используя лучшие практики тестирования и здравый смысл, получить надежные тесты на функционал. Узнаем, как такие тесты помогают в рефакторинге.
Мастер-класс 2. Тестирование UI
Вместе с Максимом адаптируем лучшие практики тестирование к верстке и разберёмся, какая комбинация тестов идеально подходит для тестирования UI. Будут рассмотрены такие практики как скриншот-тестирование и функциональное тестирование, и как их легко включить в свой процесс разработки. Используемые инструменты:
Что происходит у пользователя, когда он открывает приложение? Ждет ли он по 2 минуты после каждого клика или радостно погружается в работу?
В наше время производительность улучшают уже не задним числом, а в процессе разработки. Разработчики сразу проверяют, как архитектурные решения влияют на скорость загрузки, отрисовки, интерактивности, etc. Для этого нужны постоянные мониторинги. Для тестирования и измерения требуются метрики, которые зависят от огромного количества параметров. Например, на каком устройстве, в какой браузере, в какой сети и с каким файерволом открыл пользователь приложение? Не говоря уже о промежуточных серверах, кэше, прокси и прочих деталях. И даже после всех этих усилий ускорение остается проблемой и головной болью для разработчиков.
Несмотря на все эти сложности, Николай Рябов (Авито), занимается всем, что связано с производительностью фронтенда внутри Авито — сбор метрик, профилирование, оптимизации. Николай убеждён, что задача бизнеса — делать фичи качественно.
На конференции Николай предложит совместить в одном инструменте возможности Lighthouse, webpack-bundle-analyzer и Chrome DevTools Performance. Узнаем, почему этот ассортимент инструментов по отдельности не поможет следить за производительностью на постоянной основе.
Виктор Русакович (GP Solutions), frontend-разработчик, повидавший множество фреймворков и библиотек, работавший с jQuery, Backbone, Knockout, Angular, Elm, Clojure и RxJS и, наконец, React. Виктор подробно расскажет про метрики и инструменты для сбора статистики по производительности сайтов клиентов, о том, какие выводы можно сделать, как статистика не только собирает данные, но и улучшает скорость работы сайтов.
Слушатели доклада получат ответы на вопросы:
Виталий Сысолятин (Деливери Клаб), techlead, JavaScript и frontend-разработчик, расскажет, как сделать SSR максимально быстрым, и какие проблемы при этом придется решать. Примером послужит новый сайт delivery-club.ru, который запустили как Single Page Application с реализацией Server Side Rendering.
Виталий расскажет, по каким граблям они прошли, и что будет проблемой для frontend-разработчика на javascript в серверной среде. Вместе с Виталием научимся обходить слабые места JavaScript для эффективности приложения. Истории из реальной жизни тоже будут!
Александр Бальцевич (Synesis), лид и блогер с головой ученого, практикующий образовательные эксперименты. На Frontend Live Александр объяснит, как React выдает 60 fps даже при ежесекундном огромном потоке обновлений.Будем разбираться, как при самых передовых алгоритмах со скоростью сравнениях деревьев порядка O(n^3) React добился скорости сравнения порядка O(n).
И конечно, увидим боевые примеры того, как вы сможете выстрелить себе в ногу при таком ускорении!
Мозг разработчика и пользователя работает на разных волнах. Первому фича покажется гениальной, а второй просто запутается при попытке поменять количество товара в корзине. А то, что хочется пользователю, кажется невыносимо простым для гения. И все же, разработчики тоже пользуются приложениями и так же страдают, когда дизайн, интерфейс или даже цвет мешают им получить в руки заказанное. В треке дизайна будут как раз доклады о цвете и интерфейсе для пользователей.
Глафира Жур (SpurIT), teamlead и accessibility-разработчик, с юных лет увлекающаяся интерфейсами и их доступностью. На Frontend Live расскажет о психологическом влиянии цвета, которое не зависит от моды, трендов и прихоти заказчика. Она раскроет, как цвет в интерфейсе влияет на восприятие информации, и как разработчики через него могут управлять настроением, выбором и впечатлением клиента.
А ещё мы узнаем про доступность интерфейсов с точки зрения цветовых решений.
Анна Селезнёва (Spiral Scout), креативный frontend-разработчик, спикер на конференциях и митапах, соорганизатор митапов MinskCSS и MinskJS и конференции CSSMinskJS. Анна напомнит, что мы разрабатываем интерфейсы для пользователей -. Узнаем как при реализации интерфейса удерживать в голове мысль о том, что этим будут пользоваться живые люди.
По словам Анны, «ещё 10 лет назад нашей проблемой были кроссбраузерные скругленные уголки, а сейчас нужно делать сайт адаптивным, доступным и производительным».
И наконец о влиянии удобства сервиса на конверсию и ключевые показатели бизнеса расскажет Виталий Фридман (Smashing Magazine), соучредитель онлайн журнала, автор книг и frontend/UX консультант с широким кругозором. Доклад Виталия будет о разработке веб-форм для конечного пользователя, который именно по ним часто определяет удобство всего сервиса.
Нередко веб-формы недоступны и сложны в использовании, и Виталий опишет типичные болевые точки, с которыми клиенты сталкиваются слишком часто. Наконец мы узнаем, как создать интерфейс, который позволяет получать информацию от клиента дружественным способом, тем самым помогая и конверсии, и повышению ключевых показателей бизнеса.
Полный список докладов смотрите на сайте конференции. В мобильной версии сайта можно добавить понравившиеся доклады в свое расписание. Не забудьте забронировать билет (15 сентября цены вырастут).
Frontend Live 2020 пройдёт 23 сентября 2020 — 2 октября 2020 онлайн по всему миру. Мы создали ее новый формат, такой же эффективный, как и оффлайн-встречи. Вы сможете почувствовать энергию сообщества, зарядиться ею, пообщаться с коллегами по отрасли и получить консультацию от экспертов. Вы можете даже онлайн-афтепати провести с байками до утра за жизнь и карьеру. Всё как в жизни :)
Расписание каждого дня уже составлено, но возможны небольшие изменения. А об event-фишках конференции мы будем писать в телеграме, фейсбуке, твиттере, и вконтакте.
Как всегда, кроме докладов, будут ещё интенсивы, мастер-классы и воркшопы, и, конечно, открытые обсуждения (это может каждый — предложите тему для обсуждения и приглашайте участников).
Для расширения вашего горизонта мы снова выбрали только креативные и практичные доклады о реально работающих проектах. Будут доклады и о новых идеях, и демонстрации на тему, как это всё устроено и работает. На мастер-классах расскажем, как команды решают внезапно возникшие трудности, какие новые ноу-хау изобрели и что получили на выходе. А еще мы поговорим о красоте.
И красиво, и безопасно
В треке общих вопросов докладчики не боятся копать технологии вглубь и возвращаться с интересными результатами. Они расскажут как еще на уровне кода предотвратить проникновения извне, а также о работе в рантайме статичной типизации TypeScript. Выступающие добавят и немного хардкора, а со стороны beautiful-side разработки будет много интересного о звуке, танцах и иконках.
Александр Инкин (Tinkoff.ru), увлечённый angular-разработчик, Google Developer Expert, композитор и киноман, покажет свое приложение для игры на синтезаторе в браузере. На своих невероятных демках Александр объяснит, как можно использовать императивный Web Audio API в декларативном стиле. А ещё поговорит о том, что поможет с лёгкостью повторно использовать созданные блоки, и вообще комфортно применять API в средах веб-компонентов или фреймворков с компонентным подходом.
Василика Климова (Avaloq), евангелист 3D из Люксембурга с 11-летним опытом веб-разработки, любила использовать 3D-технологии во фронтенде ещё в то время, когда это не было мэйнстримом. Была Frontend Team Lead в Artec3D, где познакомилась с 3D-миром WebGL.
Василика покажет, как научила танцевать свою 3D-модель, а вы узнаете, что такое риггинг, скиннинг моделей и зачем 3D-модели кости.
В нашей индустрии нечасто вспоминают про такие мелкие бытовые вещи, как svg-иконки. Никита Мостовой (HeadHunter), ведущий frontend-разработчик в команде архитектуры, погрузит нас в их прекрасный мир и расскажет в how-to докладе, как оптимизировать добавление иконок на сайт через инлайн-компонент. Ещё Никита покажет, как решить проблему некэширования иконки при SSR, как менять иконки и оптимизировать процесс их загрузки.
Если вы хотите опенсорсить и сэкономить пару-тройку недель на обучении, то Роман Седов из Tinkoff.ru, angular-разработчик и автор интерактивной книги по продвинутому angular), расскажет что нужно для этого уметь, делать и знать. Роман поддерживает и развивает opensource-проекты в мире Angular и знает на практике, как нескучно создавать NPM-библиотеки. А ещё как писать документацию, как пакет смотрится без лишнего кода, как не произвести впечатление сырцов вместо исходников, как настроить проверку кода и как его выкладывать.
После выкладывания кода нужно быть готовыми, что его поймут и хакеры. Татьяна Новикова (ЦАРКА), опытный pentester и аудитор исходных кодов с точки зрения безопасности, покажет, какие векторы атак существуют и как хакеры эксплуатируют уязвимости фронтенда. А также объяснит, почему веб-фреймворки не защищают разработчика от ошибок безопасности и как с этим всем бороться.
Татьяна проведёт экскурсию по миру уязвимостей фронтенда, начиная с XSS и заканчивая не самыми популярными типами атак, чтобы вы с уверенностью смогли сказать, что гигиенический минимум у вас есть.
И конечно, куда же без хардкора. Технологии во фронтенде непрерывно развиваются, и мы не всегда поспеваем за этим развитием. Александр Руденко (X5Labs), Senior Software Engineer / Community Lead в Facebook Developer Circle: Moscow, продолжит его ещё с прошлой конференции. В прошлом году Александр ввел нас в Relay Modern, а в этом расскажет, как работать в нём с Network & Data Layers.
Александр напомнит базовые принципы Relay Modern, после чего погрузит в слой данных и сетевой слой, чтобы рассказать о грамотном коннекте с серверной частью.
Майк Башуров (WiseBits), постоянный докладчик, TypeScript-самурай и фанат ReasonML, расскажет, как в TS перетащить статическую типизацию в рантайм. Зачем? Например, для валидации JSON, других данных или для property-based testing. Это непросто, но если очень хочется, то можно!
Майк покажет, что такое type-directed emit, как его применять, проведет сравнение с другими решениями, а также погрузит в особенности API транспиляторов (и мы увидим, какие есть грабли у такого подхода. Приходите смотреть, как типы переезжают в рантайм и валидируют данные.
Красиво не только снаружи, но и внутри
Разработчикам тоже хочется работать в красивом и удобном коде. Конечно, трудно оценить, хороша архитектура или нет — в одном проекте она будет успешной, а в другой «что-то пойдёт не так». Тем не менее, понятная архитектура всегда помогает работе над проектом: расширение или изменение кода проходит без больших трудностей в его понимании и тестировании. Даже если вы только что получили чужой код в руки. Доклады трека «Архитектура» как раз о том, как облегчить жизнь разработчику.
Денис Красновский (ДомКлик), технический руководитель разработки, снова порадует докладом на тему оптимизации кода. В этот раз Денис расскажет про методологию рефакторинга, отточенную на множестве проектов. С ее помощью вы сможете вдохнуть новую жизнь в самый непонятный код.
С новым алгоритмом будет легче принять решение, чтобы справиться с проблемами, когда вы уже пришли на проект с legacy.
Иван Соловьев (Evrone), не только frontend-разработчик JS, но и практик Go и Rust — он любит сравнивать их друг с другом и с JavaScript. Иван расскажет о том, как выбор между монолитом и микросервисами, а также монорепозиторием и полирепой влияют на борьбу со сложностью в больших проектах.
Ещё Иван поделится, как выбранная архитектура поможет предотвратить такие болезни большого фронтенда как релиз-цикл, врастающий вендоринг, устаревание кода, оценка зависимостей, дублирование кода и общий код.
Али Рагимов (Okko), frontend-разработчик с 2013 года, расскажет о пользе TypeScript в архитектуре веб-разработки и почему разработчики все больше выбирают TypeScript для своих проектов. А ещё о плюсах и минусах использования языка и о том, как легко начать свой первый сайт на TypeScript.
Отдельный блок будет посвящён typings, краеугольному камню языка, о который спотыкаются даже опытные разработчики.
Андрей Марченко (Tinkoff.ru), techlead, разработчик платформы для разработчиков, расскажет историю своего проекта. Узнаем, как менялась и эволюционировала архитектура фронтенда в Tinkoff. Как в 2015 году 5 разработчиков создали сайт tinkoff.ru на React 0.13 и чем проект живёт сейчас.
Сейчас разработчиков уже 60, а монолит состоит из 40 отдельных приложений, микрофронтенды, монорепы и технических продуктов.
Владимир Гриненко (Яндекс), руководитель службы общих компонентов в отделе разработки поисковых интерфейсов, откроет вам, как найти идеальный баланс, чтобы не загонять всех в рамки единой дизайн-системы и при этом сохранить визуальную самоидентификацию. Так как Яндекс делает очень разные продукты (поиск, такси, музыка, еда, образование и кино), то консистентность (согласованность) интерфейсов в масштабах Яндекса — явление противоречивое и с визуальной, и с технологической точки зрения.
Владимир покажет формулу пользы общего кода: где он будет работать, а где лучше написать свой велосипед, и расскажет, как повторно использовать код без технофашизма и прекращения экспериментов.
Красиво и с результатом
Никому не хочется терять время на тестирование с непонятными результатами или продираться сквозь непролазные условия тестирования, даже если результаты будут хорошими. Чтобы результат соответствовал вашим ожиданиям, наши докладчики расскажут, как сделать тесты понятными даже тестировщикам и менеджерам, как тесты выглядят с позиции бывшего QA, который перешел в разработку. А ещё в «Тестирование», кроме докладов, будут и сами тесты, в частности, nodejs-web-сервисов и UI.
Александр Иосса (Diginavis), product manager, ведущий канала о боли и радостях software инженеров, расскажет о BDD-тестировании веб-приложений, и как оно помогает писать E2E-тесты дешевле и быстрее. Покажет, как Gherkin-синтаксис в связке с Cypress делает тесты понятными не только для разработчиков, но и для тестировщиков с менеджерами.
Александр научит, как писать тесты, а также кто и когда их должен и может писать. Вы сможете определять место acceptance-тестов в ci/cd-пайплайне, переиспользовать ранее написанные блоки, а после всего этого легко поддерживать и расширять процесс тестирования.
А еще Александр знает, что ловить в Иннополисе, где он живет уже более 4 лет. Не упустите шанс спросить его об этом )
Николай Москаленко (Райффайзенбанк), тестировщик с 10 летним опытом, frontend-разработчик на React и мультипликатор, задаст неудобные вопросы о качестве тестирования. Мы увидим ситуацию с тестами глазами бывшего QA, который перешел в разработку. И разберёмся в методике быстрого тестирования кода (дефектов больше, чем кажется!).
Также Николай расскажет, какие тесты лучше выбирать для экономии времени. Вы поймете, какие техники и инструменты избавляют от внешних зависимостей при тестировании frontend-приложений. Но и это ещё не всё! Николай расскажет, как ускорить написание автотестов на JavaScript и повысить их читаемость с помощью нотации Gherking, библиотеки jest-cucumber.
На десерт — паттерн PageObject для end-to-end-тестов на Puppeteer, который упрощает поддержку UI-автотестов.
И наконец целых 2 мастер-класса по тестированию проведет Максим Соснов (СКБ Контур), ведущий разработчик, двигатель культуры технического совершенства, который стремится быть agile и соответствовать DevOps-философии. Максим расскажет, какие паттерны и антипаттерны есть, как делать полезные тесты и как продать тесты команде, чтобы разработчики не воротили нос.
Мастер-класс 1. Тестируем nodejs-web-сервисы
На первом мастер-классе Максим покажет, как правильно тестировать nodejs сервис. Как с помощью mocha, chai, nock, supertest, используя лучшие практики тестирования и здравый смысл, получить надежные тесты на функционал. Узнаем, как такие тесты помогают в рефакторинге.
Мастер-класс 2. Тестирование UI
Вместе с Максимом адаптируем лучшие практики тестирование к верстке и разберёмся, какая комбинация тестов идеально подходит для тестирования UI. Будут рассмотрены такие практики как скриншот-тестирование и функциональное тестирование, и как их легко включить в свой процесс разработки. Используемые инструменты:
- storybook
- loki.js
- testing-library
- jest
Красиво и быстро
Что происходит у пользователя, когда он открывает приложение? Ждет ли он по 2 минуты после каждого клика или радостно погружается в работу?
В наше время производительность улучшают уже не задним числом, а в процессе разработки. Разработчики сразу проверяют, как архитектурные решения влияют на скорость загрузки, отрисовки, интерактивности, etc. Для этого нужны постоянные мониторинги. Для тестирования и измерения требуются метрики, которые зависят от огромного количества параметров. Например, на каком устройстве, в какой браузере, в какой сети и с каким файерволом открыл пользователь приложение? Не говоря уже о промежуточных серверах, кэше, прокси и прочих деталях. И даже после всех этих усилий ускорение остается проблемой и головной болью для разработчиков.
Несмотря на все эти сложности, Николай Рябов (Авито), занимается всем, что связано с производительностью фронтенда внутри Авито — сбор метрик, профилирование, оптимизации. Николай убеждён, что задача бизнеса — делать фичи качественно.
На конференции Николай предложит совместить в одном инструменте возможности Lighthouse, webpack-bundle-analyzer и Chrome DevTools Performance. Узнаем, почему этот ассортимент инструментов по отдельности не поможет следить за производительностью на постоянной основе.
Виктор Русакович (GP Solutions), frontend-разработчик, повидавший множество фреймворков и библиотек, работавший с jQuery, Backbone, Knockout, Angular, Elm, Clojure и RxJS и, наконец, React. Виктор подробно расскажет про метрики и инструменты для сбора статистики по производительности сайтов клиентов, о том, какие выводы можно сделать, как статистика не только собирает данные, но и улучшает скорость работы сайтов.
Слушатели доклада получат ответы на вопросы:
- Что и как собираем?
- Как и зачем анализируем?
- Зачем собирать статистику от пользователей?
- Как узнать, насколько быстро загружается и работает ваш сайт?
- Зачем вообще задумываться о скорости работы сайта?
Виталий Сысолятин (Деливери Клаб), techlead, JavaScript и frontend-разработчик, расскажет, как сделать SSR максимально быстрым, и какие проблемы при этом придется решать. Примером послужит новый сайт delivery-club.ru, который запустили как Single Page Application с реализацией Server Side Rendering.
Виталий расскажет, по каким граблям они прошли, и что будет проблемой для frontend-разработчика на javascript в серверной среде. Вместе с Виталием научимся обходить слабые места JavaScript для эффективности приложения. Истории из реальной жизни тоже будут!
Александр Бальцевич (Synesis), лид и блогер с головой ученого, практикующий образовательные эксперименты. На Frontend Live Александр объяснит, как React выдает 60 fps даже при ежесекундном огромном потоке обновлений.Будем разбираться, как при самых передовых алгоритмах со скоростью сравнениях деревьев порядка O(n^3) React добился скорости сравнения порядка O(n).
И конечно, увидим боевые примеры того, как вы сможете выстрелить себе в ногу при таком ускорении!
Красиво в квадрате
Мозг разработчика и пользователя работает на разных волнах. Первому фича покажется гениальной, а второй просто запутается при попытке поменять количество товара в корзине. А то, что хочется пользователю, кажется невыносимо простым для гения. И все же, разработчики тоже пользуются приложениями и так же страдают, когда дизайн, интерфейс или даже цвет мешают им получить в руки заказанное. В треке дизайна будут как раз доклады о цвете и интерфейсе для пользователей.
Глафира Жур (SpurIT), teamlead и accessibility-разработчик, с юных лет увлекающаяся интерфейсами и их доступностью. На Frontend Live расскажет о психологическом влиянии цвета, которое не зависит от моды, трендов и прихоти заказчика. Она раскроет, как цвет в интерфейсе влияет на восприятие информации, и как разработчики через него могут управлять настроением, выбором и впечатлением клиента.
А ещё мы узнаем про доступность интерфейсов с точки зрения цветовых решений.
Анна Селезнёва (Spiral Scout), креативный frontend-разработчик, спикер на конференциях и митапах, соорганизатор митапов MinskCSS и MinskJS и конференции CSSMinskJS. Анна напомнит, что мы разрабатываем интерфейсы для пользователей -. Узнаем как при реализации интерфейса удерживать в голове мысль о том, что этим будут пользоваться живые люди.
По словам Анны, «ещё 10 лет назад нашей проблемой были кроссбраузерные скругленные уголки, а сейчас нужно делать сайт адаптивным, доступным и производительным».
И наконец о влиянии удобства сервиса на конверсию и ключевые показатели бизнеса расскажет Виталий Фридман (Smashing Magazine), соучредитель онлайн журнала, автор книг и frontend/UX консультант с широким кругозором. Доклад Виталия будет о разработке веб-форм для конечного пользователя, который именно по ним часто определяет удобство всего сервиса.
Нередко веб-формы недоступны и сложны в использовании, и Виталий опишет типичные болевые точки, с которыми клиенты сталкиваются слишком часто. Наконец мы узнаем, как создать интерфейс, который позволяет получать информацию от клиента дружественным способом, тем самым помогая и конверсии, и повышению ключевых показателей бизнеса.
Полный список докладов смотрите на сайте конференции. В мобильной версии сайта можно добавить понравившиеся доклады в свое расписание. Не забудьте забронировать билет (15 сентября цены вырастут).
Frontend Live 2020 пройдёт 23 сентября 2020 — 2 октября 2020 онлайн по всему миру. Мы создали ее новый формат, такой же эффективный, как и оффлайн-встречи. Вы сможете почувствовать энергию сообщества, зарядиться ею, пообщаться с коллегами по отрасли и получить консультацию от экспертов. Вы можете даже онлайн-афтепати провести с байками до утра за жизнь и карьеру. Всё как в жизни :)
Расписание каждого дня уже составлено, но возможны небольшие изменения. А об event-фишках конференции мы будем писать в телеграме, фейсбуке, твиттере, и вконтакте.