Трехмерные визуализации прямо в браузере получают все большее распространение: к ним проявляет живой интерес бизнес из самых разных отраслей. Если некоторое время назад для создания 3D-интерактива приходилось разрабатывать отдельные приложения или генерировать огромное количество изображений, показывающих трехмерный объект с разных сторон, то в последнее время появилась хорошая альтернатива в виде WebGL, не требующая от пользователя дополнительных действий вроде установки плагинов, а также в ряде случаев значительно упрощающая разработку.

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

Сейчас веб-разработка стремительно развивается, и Offline First приложения уже не кажутся чем то нереальным. То, что было преимуществом нативных приложений, реализуемо и в веб-приложениях.

В этом докладе я расскажу:
- как я портировал нативное приложение для работы с документами, сохранив одно из его главных преимуществ - работу в Offline;
- какие библиотеки использовались для работы с IndexedDB;
- как получилось связать Worker'ы, работающие с БД, и само приложение;
- какие подводные камни получилось обнаружить.

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

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

С ростом приложений появляется целый ворох проблем и, решая одни, мы находим другие.

Представьте, у нас 22 отдельных приложения, и мы хотим зарелизить задачу, которая должна появиться у всех. Сколько человеко-часов нужно потратить?

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

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

Ethereum, блокчейн и смарт-контракты с точки зрения разработчика. Архитектура децентрализованных приложений DApps, примеры и жизненный цикл. Инструменты современного разработчика блокчейн-приложений. Использование библиотеки Web3 для работы со смарт-контрактами из JS.

Разберемся, зачем в действительности мы используем фреймворки, и почему классические фреймворки подходят не для всех проектов. Поговорим о новом тренде "исчезающих фреймворков" на примере SvelteJS, и почему это не «yet another javascript framework».

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

Вместе мы:
* пройдем увлекательный путь от базовых функций до генераторов;
* посмотрим на коллбэки, промисы и замыкания с позиции спецификации;
* узнаем, как связаны call stack и event loop с асинхронным JavaScript;
* определим, что относится к JavaScript, а что к API браузера;
* попытаемся понять, на самом ли деле асинхронный Javascript является асинхронным.

Feeling uninspired and tired of constantly building the same layouts? Let’s leverage the CSS superpowers you might have heard about before, but haven’t already used. Let’s explore new CSS features that give us a great set of tools and enable to do amazing things on the web! The future of web graphics and CSS as a design language is bright, and finally it will make us less dependent on the image editors. We’re entering the new era with in-browser designing. Don’t stay behind and get some fresh air of creativity directly in the web browser.

Технология WebAssembly стремительно ворвалась во все популярные браузеры и таким образом стала доступной для коммерческой разработки.

Я расскажу вам, какие реальные грабли мы собрали при переносе нашего большого приложения на C++ в браузер.

Мы обсудим:
— какие есть инструменты и что они могут;
— как пробрасывать объекты между JS и Wasm;
— какие при этом возникают проблемы и как их решить;
— что может Wasm, и чего он не может;
— как увидеть код C++ в отладчике браузера;
— на сколько Wasm быстрее JS.

Год назад один инвестор попросил проконсультировать его на следующую тему: «Можно ли майнить крипту в браузере, используя GPU?».

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

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


В мире фронтенда сервисный подход распространен не так сильно, как хотелось бы.

Если делать enterprise-SPA, все современные фреймворки в дружбе с webpack предоставляют механизм lazy-loading отдельных модулей, но он имеет минус, от которого нам хотелось избавиться. Этот минус - tree-shaking. Необходимость запуска webpack для пересборки всего приложения ради изменения одного модуля не дает нам деплоить, откатывать, включать/выключать модули независимо.

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

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

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

После доклада каждый знакомый с JavaScript разработчик сможет реализовать подобную систему микросервисного фронта независимо от используемого фреймворка.

Контекст:
- Большой сервис - 64 млн визитов.
- Прошлой осенью переехали на React/Redux-стек.
- И живем без SSR.

Почему мы выбрали такой путь:
- Дорого с точки зрения поддержки - мы хотим быстро двигаться, максимально быстро выпускать фичи и не хотим кратно увеличивать команду. К слову, на Ultimate Guitar в день происходит до 40 деплоев и запускается от 1 до 4-х экспериментов. И все это силами трех frontend-разработчиков.
- Дорого с точки зрения мощностей - на 30-50% больше серверных мощностей.

О чем будет доклад:
- Frontend-разработка через аналитику.
- Ограничения, которые ускоряют.
- Vendor-lock для ускорений - как живет Preact Web и React Native в одном репозитории.
- Чем плох async await с точки зрения конечного пользователя.
- Оптимистичный рендеринг.
- Code-split all the things.
- Адаптивная графика на лету.
- Асинхронная реклама.
- Как стиль программирования влияет на вес приложения.
- Сборка на спецификации ES2017.
- Так ли хороши service workers.
- Как приготовить Critical Rendering React :)

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

Все будет рассмотрено с использованием React, Redux, Handlebars.js, Node.js и MonogoDB.
Но это не значит, что этот способ не работает на других технологиях.

Inspired by a talk by Laura Carvajal, Manuel Matuzović performed an experiment and didn't use a mouse or trackpad for two weeks. He wanted to improve his understanding of how it is to use a computer and especially the web only with the keyboard.

He has documented all sites he has visited and the good and bad practices he came across. This talk illustrates the most common issues he encountered and possible ways to fix them. You'll learn why it's important to make websites keyboard accessible and who benefits from it. On top of that, Manuel will share his favorite keyboard shortcuts and some other handy tips and tricks with you.

Unfortunately, we still treat accessibility in the same way we deal with front-end development for older browsers, something to be done at the end. What if I tell you that we can use the latest Web APIs and still offer an inclusive and accessible experience.

In this talk, you'll learn how to combine Web APIs such as Speech Recognition and Geolocation, with performant Javascript techniques to create empathic user interfaces.

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

Эффектный проект не создать без эффектных анимаций.

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

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

Реактивное программирование - что это на самом деле, почему оно не ограничено Rx’ом, как с ним работать и как думать реактивно, а не проактивно. Как реактивный подход помогает организовать и уменьшить исходный код в проектах с богатым стеком технологий.

Краткое содержание:
- Реактивное программирование - это не Rx.
- Что такое проактивное программирование.
- Голливудский принцип.
- Что такое реактивное программирование.
- Концепты РП на реальных примерах.
- Используем реактивные типы вместо обычных.
- Наш опыт создания реактивной системы.
- События - это данные и наоборот.
- ФП или ООП как расширение возможностей РП. Выбираем лучшее решение.
- Примеры MVC, FLUX на РФП.
- Пишем реактивный компонент для всех фреймворков всего один раз.

Сколько ни пиши модульные тесты, но на процент покрытия нельзя полагаться. Изменения в коде могут не повлиять на результат тестов, но плачевно отразиться на пользователях.

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

DX, developer experience начинается с хорошо продуманного дизайна API. Но не только это имеет значение.

На какие детали при создании (или при выборе) продукта с API стоит обращать внимание, чтобы предоставить (или получить) лучший DX?

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

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

Заодно мы немного погрузимся в дивный новый мир современных AI-сервисов.

Браузер не только выполняет наш JavaScript, но и подчищает за ним оставшийся мусор.

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

Вы когда-нибудь пробовали написать плагин к PostCSS, который бы идеально подходил для вашего проекта? Задача может быть элементарной, но даже в самом простом деле не исключены нюансы. Я постараюсь дать основы обхода AST (абстрактного синтаксического дерева) и его изменения. Также расскажу, как PostCSS и CSSTree дополняют друг друга.

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

Кто из нас не верстал html-рассылку? Наверняка вы помните тот средневековый код, переполненный жуткими таблицами и инлайновыми стилями.

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

Расскажу, как готовить рассылки в 2018 году, победить Outlook и не завязнуть в вечном багфиксе.

Разберемся в спецификации JSON API.

Расскажу, в чём её суть, чем она дополняет RESTful и чем отличается от GraphQL.
Плюсы, минусы, подводные камни, опыт использования.

Я расскажу вам, почему каждый разработчик должен уметь делать прототипы, а XD поможет вам реактивно начать. Нет, это не просто смайлик. Это Adobe XD — быстрый, дерзкий, и простой, как три копейки.

Мы узнаем, как с помощью прототипа:
— сформулировать требования к продукту;
— спроектировать архитектуру продукта;
— проверить гипотезы без кода.

Мы сможем:
— играючи найти общий язык с любимым заказчиком;
— сэкономить бюджет проекта и сократить сроки разработки;
— протестировать интерфейс на людях до его реализации;
— снизить риски.

- Что такое REST API и его проблемы.
- Что такое GraphQL, его плюсы и проблемы.
- Обзор Relay и Apollo.
- Практические советы при работе с GraphQL и Apollo.

Часто видите ошибку “itShouldBeAnArray.map is not a function”? Автодополнение IDE дает список всех идентификаторов проекта? С трудом понимаете, что конкретно надо этому API? Коллеги с бэка смеются и советуют перейти на “настоящий” язык?

Нет! JavaScript мы не бросим! Потому что он хороший :). Мы его протипизируем! И поможет нам в этом Flow!

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

Небольшой рассказ о том, как небольшой интернет-банк начинался на Jquery и React (es5) и дорос до Typescript'а и nodejs. Пережил nodejs-падения "out of memory". И когда же наступит точка невозврата, при росте 30% кода в релиз.

Расскажем про то, как переходили с webpack 1.0 > 3.0 > 4.0, happypack-плагин, lazy-loading, commonChunk, dllPlugin и прочие возможности webpack. Покаемся, как мы собираем наш проект 14 минут, и это без минификации.

С 2014 года занимаюсь разработкой и поддержкой плагинов для всех популярных браузеров.

Расскажу:
– с каким проблемами сталкивался при разработке плагинов;
– про WebExtensions, поддержку в браузерах и будущее;
– как разрабатывать плагины под популярные браузеры на одной кодовой базе.

Кэширование в браузере - это достаточно гибкий механизм. Используете ли вы весь его потенциал?

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

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

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

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

Введение:
- Зачем нам нужен state management.

Основная часть:
1. redux
- Концепция.
- Иллюстрация в маленьких и больших проектах.
2. ngxs
- Концепция.
- Иллюстрация в маленьких и больших проектах.
3. vuex
- Концепция.
- Иллюстрация в маленьких и больших проектах.

Заключение:
- Актуальность mobx для angular, vue.
- Почему следует использовать ngxs, а не ngrx.
- Почему выбор фреймворка не так важен, чем выбор store?

How do you make a design system empathetic and whom should it be empathetic towards? At COMPANY_A, we decided to replace our outdated style guide with a newfangled design system that we started from scratch. And we made a great start.

But we forgot about accessibility, and our fellow coworkers and peers. Our engineers shouldered slow development times and new technologies, designs changed often, and variants were hard to implement. And we forgot about our users. Much of the design system was geared towards engineers.

So what did we learn in our first iteration? How did empathy help shape our ever-changing, morphing design system? Come learn how to build an empathetic design system!

Когда вы работаете в большой и/или распределенной команде, следить за качеством кода становится только сложнее. Тогда на помощь и приходят они - линтеры.

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

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

В докладе я расскажу как:
* Собрать бандл мечты - оптимальный по размеру и делению на чанки код.
* Как собрать бандл мечты за приемлемое время. Поделюсь опытом, как ускорить сборку с 25 минут до 3.
* Как управлять конфигурацией webpack.

Доклад о том, как, потеряв кучу времени, в конечном счете его сэкономить... но это не точно.

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

Grid с нами уже больше года. Мы прочитали и посмотрели уже всё, что можно было, но никто по-настоящему не рассматривал гриды под практическим углом. Это мы и сделаем.

За более чем 10 лет в разработке я скопил довольно много лайфаков: способов сделать что-то быстро и проще, чем кажется на первый взгляд.

Примеры:
1. Лайфхаки в консоли.
2. Как с локального компьютера показать результат своей работы.
3. Как сделать сайт за один вечер.
4. Как вести список задач.
И многое другое

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

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

Основные тезисы:
1. Для чего нужна дизайн-система.
2. Состояние "ДО".
3. Путь создания.
4. Участники процесса.
5. Результаты и планы.