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

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

Приложения

Как мы разработали полностью Offline First приложение с использованием Persistent Storage

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

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

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

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

Что нам стоит 3D построить

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

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

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

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

Building decentralised apps with JS

Михаил Кузнецов

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

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

React, Vue или Aurelia: как мы выбирали фреймворк

Александр Таран

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



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

Зарелизить задачу для 22 приложений и не потерять разум

Андрей Марченко

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

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

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

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

Retrofitting Webapps into PWA

Aayush Arora

PWA’s huge reach, low friction, high re-engagement and lower costs have worked for all businesses. Uber? or Pinterest? With PWA, the enormous growth in webapp speed has increased up to 60% of core user engagements. In this talk, we’ll learn retrofitting principles to convert our webapps into PWA’s.

I hope, we all agree with the fact that web applications can increase the user reach while Mobile applications help in their engagement. Why not retrofit every web application to a PWA? Can we increase the user reach as well as engagement then? After understanding the process flow, you will be able to take the right decisions on the tools and techniques while retrofitting your current web applications to Progressive Web Apps.

In this talk, we will go through the PWA process flow with the sequential steps of Analyzing, Prioritizing, Tooling, Implementing & finally Evaluating. As an example, Aayush will be going to use Open Event Webapp to showcase how his team finally retrofitted the app into a PWA which is engaging and reaching thousands of users every year in 30+ conferences.

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

Угрожают ли Low Code-платформы фронтенду, каким мы его знаем

Владимир Осипов

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

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

Во второй части доклада на реальном примере разработки веб-приложения c использованием Low Code-платформы, React и GraphQL мы ознакомимся с основными аспектами и особенностями данного подхода.

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

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

Этот безумный, безумный, безумный, безумный инпут. Часть 1

Роман Прудников

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

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

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

Creating mobile ready web apps in 2018

Avi Aryan

Creating mobile-ready web apps is critical for a product these days. With technologies like Service Workers and App Manifest, it’s totally possible to do so. This session will give you a detailed account of using these technologies so that you can confidently start using them in your next project.

In this session, we will go from zero to publishing first-class mobile optimized progressive web applications (PWAs), stuff that in the true sense are “applications” and not “websites”. We will be starting with a very basic web application, and then slowly add features to make it more like a real “application”, something that works natively on both desktop and mobile platforms. We will go through the concepts of Service Workers to see how we can make our apps offline-first, and how we can add app-like features to it like push notifications and background data sync. Then we will learn how to create a Web App Manifest to make our apps installable on phones, and to do other cool things like specifying app icons, setting up splash screens and app themes, etc. Overall, this session aims to give the audience a solid idea about Mobile Web Development so that they can start developing mobile-optimized web apps as soon as possible.

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

Новинки

Разработка под WebAssembly: реальные грабли и примеры

Андрей Нагих

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

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

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

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

How the heck we built a Cryptocurrency with JS?

Ignacio Anaya

Many times, when we talk about cryptocurrencies we usually think of two things: very smart people changing the world or scammers who want to take our money. Luckily, the world is not so binary, in this talk I want to tell you my humble experience of how we built metronome.io using mostly Ethereum and JavaScript.

This is not a cryptocurrency talk, is more about how to deal with Ethereum dynamics, ecosystem and tools to use for any kind of DApp.

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

Instant VR. Just add browser

Ruben van der Leun

With VR really taking off, there is one particular industry that can play an important part in its adaption: The Web. This talk will cover how the browser is an important tool to bring VR to the masses. Bring your Google Cardboard, because there will be live tech-demos.

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

Bringing Mixed Reality to the Web

Marko Letic

This topic can be interesting for anyone that has a basic web development and Javascript knowledge. I will show how easy it is to build a VR/AR enabled interactive project using the latest trends in front-end development using WebXR.

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

Исчезающие фреймворки

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

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

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

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

Майним криптовалюты в браузере: GPU, Web Assembly и прочие быстрые вещи...

Денис Радин

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

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

JavaScript
,
WebRTC, WebGL и веб-медиа в целом
,
Производительность и мониторинг фронтенда
,
Блокчейн-технология
Программный комитет ещё не принял решения по этому докладу

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

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

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

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

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

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

Translating React

Jennifer Wong

We often use React and write JSX without thinking about the syntax. But what’s React actually doing under the hood? What’s that JavaScript look like?

Let’s translate React into JavaScript then transpile that and see what we get. Let’s pick apart what React is really doing. We’ll get at the heart of React. We’ll talk about the importance and usefulness of knowing its baselines for beginners and experts alike.

From that, we’ll gain a clearer understanding of where React’s magic originates. So the next time you use React or write JSX, you’ll be secretly translating in your head for deeper insight and edification.

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

Слабоумие и отвага - можно ли делать быстрый сервис без Server Side Rendering

Андрей Якобчук

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

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

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

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

Адаптация

Как мы в АльфаБанк сложные данные превращаем в легкодоступные и универсальные для любого приложения

Зар Захаров

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

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

Шаблонизаторы и препроцессоры
,
Взаимодействие с серверной стороной (API)
,
Node.js и io.js
,
AngularJS, Backbone.js и другие JavaScript-фреймворки
,
JavaScript
,
Интерактивные приложения
,
Фронтенд / другое
,
Производительность и мониторинг фронтенда
Программный комитет ещё не принял решения по этому докладу

Как построить современную frontend-архитектуру на монолите с 20-летней историей

Максим Чагин

В этом докладе будут рассматриваться вопросы:
- что делать, если backend вашего сайта написан много лет назад, когда понятий SPA и SSR еще не существовало;
- как спроектировать полностью независимый frontend и создать современную архитектуру;
- как организовать frontend при условии, что ваш сайт - это множество проектов, каждый из которых имеет свой уникальный дизайн, стек технологий и структуру;
- применение компонентного подхода при сборке проекта;
- преимущества подключения шаблонов как JS-объектов.

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

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

Бэкенд Lamoda переезжает на go, а мы за ним на vue.js

Роман Пятаков

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

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

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

Качество

О том, как styleguide помог улучшить наш компонентный подход, качество кода и взаимодействие с дизайнерами

Владислав Смирнов

Компонентный подход - это настоящее и будущее web-разработки. При использовании этого подхода необходимо создавать самодостаточные, переиспользуемые компоненты. А такие компоненты создаются не только разработчиком, но и UX-дизайнером.

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

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

Accessibility vs latest Web APIs. Can’t we just get along?

Mauricio Palma

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.

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

«Реактивный» интерфейс

Артём Белов

В браузерном JavaScript интерфейсы стали предсказуемы: «однопоточные», с транзакционным сценарием отрисовки (пустой экран → загрузка → интерфейс).

C упором на закон Парето расскажу, как, потратив 20% времени, отрисовать приложение на 80% быстрее за счёт приёмов «реактивного дизайна» — ещё не сформулированных, но уже используемых в продуктах с приоритетом на UX. Доклад не является монолитом и легко может быть применён «по-модульно».

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

What is this thing, and what does it do?

Karl Groves

There are 3 factors that can be used to measure usability: Ease of Use, Ease of Learning, and Ease of Recall. This talk discusses how we can leverage design and development to ensure Accessible User Experience.

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

Организация анимации из разных источников в рамках одного проекта

Наталья Габитова
Егор Савинцев

Эффектный дизайн, динамичная анимация, интуитивное взаимодействие на различных устройствах – креативные и арт-директора ставят перед разработчиками все более амбициозные задачи. Разнообразие средств анимации и разработки: Adobe Animate, Adobe After Effects, GSAP, createjs, SnapSVG и т.д., широкий спектр возможностей браузеров: HTML5, CSS3, Canvas, SVG, WebGL позволяют справляться с задачами, но и усложняют процесс работы над проектом. Стоит ли использовать разнообразные средства на одном проекте? Стоит.
Ознакомимся с достоинствами такого подхода. На примерах кейсов «Как я провел этим годом», «BOSS. Немецкая волна», «Бунтарь. Воин. Атеист» , «10 лет Nissan Qashqai» разберемся, как при помощи фабрик, специализации интерфейсов, адаптеров, четкой изоляции и продуманной архитектуры поддерживать порядок на проекте, удерживать контроль и избегать утечек памяти, а также упростить сотрудничество с моушн-дизайнерами и младшими разработчиками. Рассмотрим методы и лайфхаки, используемые для синхронизации анимации из разных источников.

Кейсы: Как я провел этим годом, BOSS. Немецкая волна, Бунтарь. Воин. Атеист.

Примеры кейсов, на основе которых мы будем разбирать анимацию:
1. http://2017.rambler-co.ru/
2. http://boss.lenta.ru/
3. https://vereshchagin.lenta.ru/

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

Vue.js: тестирование здорового человека

Игорь Шеко

Расскажу, как построить фронтенд так, чтобы перестать факапить и начать жить. Покажу, как быстро научить команду тестировать так, чтобы они полюбили этот процесс. Затрону темы отличия тестирования vue-компонентов от тестирования обычных страниц.

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

I threw away my mouse

Manuel Matuzović

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.

JavaScript
,
Accessibility
,
CSS модули и веб компоненты
,
Фронтенд / другое
Доклад принят в программу конференции

Ликбез: полное руководство по современным стратегиям загрузки шрифтов

Сергей Болтрукевич

11 способов загрузки веб-шрифтов, и какой именно должен подойти вам. Как легко оптимизировать шрифт и уменьшить его размер до 3-х и более раз.

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

Optimizing apps with Code Splitting

Glenn Reyes

Shipping apps is easy, but shipping GREAT apps takes quite some effort. We want to build faster web apps and deliver as less as needed. But how? The new import() provide a convenient capability to load components. We’ll leverage Code Splitting with minimal effort and discuss common approaches.

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

Что не так с Emoji

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

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

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

Конечные автоматы в построении UI

Сергей Болтрукевич

О том, как можно уменьшить сложность и сократить количество ошибок при построении UI, используя теорию конечных автоматов.

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

Реактивное программирование - как думать реактивно, а не проактивно

Виталий Дмитриев

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

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

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

Developer experience при работе с AI API как продуктом

Анастасия Горячева

Developer experience - это про то, что чувствуют разработчики пока пользуются вашим АПИ. Это как будто бы про эмоции, но всё же это возможно измерить. Есть соблазн думать, что раз уж ваш продукт для таких продвинутых людей, как разработчики, то главное, чтобы хоть как-то работало, а ребята разберутся. Но "разработчики тоже люди". И мы увидим в докладе, как понимание этого полезно для бизнеса.

Почему мы в Intento можем рассуждать об этом? Пока мы делаем свой продукт, мы взаимодействуем со множеством сервисов искусственного интеллекта от самых разных производителей. И наблюдаем трудности в самых разных аспектах. Сложности в работе с очередным АПИ могут возникать не только из-за слабой производительности, низкой скорости ответа, недостаточного (в случае машинного перевода) разнообразия языковых пар. Может быть провальная документация, невнятные сообщения об ошибках, бюрократический процесс подписания договора, отсутствие SLA, сложный billing и много других деталей, которые усложняют жизнь разработчика, а значит и бизнеса.

В индустрии АПИ есть стандарт openapi. Это прекрасная инициатива: есть инструменты вроде swagger UI, которые позволяют быстро попробовать чужой АПИ. Но это только если у производителей АПИ есть ресурсы на поддержание openapi спецификаций к своему продукту. А помимо "просто попробовать" есть задачи по решению проблем с отказоустойчивостью сервиса, дебагом ответов с ошибками в сложных случаях и прочее, чего openapi не решает.

Хорошими примерами АПИ как продукта мы считаем Stripe - в сфере банковских платежей и Twilio - в сфере коммуникационных сервисов. Мы делаем универсальный АПИ для AI сервисов. И, зная множество проблем AI API, в своем продукте стараемся сгладить эти недостатки.

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

Эти же подходы могут оказаться полезными и в случаях, если вы делаете АПИ внутри своей команды. Например, когда бэкендеры готовят серверную часть для SPA, которое пишут фронтендеры. Бэкендеры лучше представят, какой developer experience они создают для своих фронтенд-коллег. А фронтендеры смогут более предметно поговорить о том, что в бэкенд АПИ больше всего усложняет их жизнь.

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

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

Внутренние стандарты разработки

Алексей Захаренко

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

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

Расскажу о следующем опыте:
- когда и как мы поняли, что это боль;
- какие методы решения проблемы выбрали и почему;
- последовательность и этапы решения;
- процесс внедрения в команды подрядчиков.

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

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

Flex и Grid: удобство и возможные проблемы

Сергей Кузнецов

С развитием CSS появляются новые свойства, которые значительно упрощают жизнь верстальщику. Flex и Grid – одни из них. Они появились сравнительно недавно, но сегодня уже практически все браузеры поддерживают эти инструменты, а многие верстальщики оценили ух удобство и возможность экономить время. Теперь не нужно выдумывать какие-то хаки или применять JS в попытках реализовать сложные дизайн-решения. Но зачастую все еще возникает путаница в том, какое свойство лучше применять в конкретном случае, а некоторые и вовсе считают, что Flex и Grid – практически одно и то же. В своем докладе я раскрою следующие вопросы:

1) Flex: что умеет и где лучше использовать;
2) Grid: что умеет и где лучше использовать;
3) Комбинированные решения и частые паттерны;
4) Известные проблемы, баги и варианты решений.

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

Accessing Accessible Accessibility

Jennifer Wong

The World Health Organization states that one billion people live with disabilities. And estimates put internet usage with a screen reader as high as 7.5% of all internet traffic around the world. Web accessibility can help.

So what is web accessibility and who needs it? Is engineering accessibility enough? How do you build an cross-functional accessibility culture? And what can you do to prevent accessibility regressions?

I had all the same questions… and a need to push our accessibility project. Well, what happened? Come learn what it takes to lead a web accessibility movement within your company!

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

Мутационный анализ или как тестировать тесты

Марк Ланговой

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

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

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

Инструменты

Типизируй этo

Александр Шушунов

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

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

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

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

garbage.collect()

Андрей Роенко

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

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

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

Собираем бандл мечты с помощью Webpack

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

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

Немного посмотрим, как выглядит бандл изнутри, и как работает tree shaking.
Ну и, собственно, разберем, как собрать бандл мечты - какие плагины и какие настройки делают наш бандл и сборку лучше!

* Какие встроенные средства есть.
* Как правильно грузить CSS - тема важная и непростая.
* Как правильно поделить код - чтобы пользователь не грузил лишнего.
* Как значительно ускорить сборку, на нашем проекте мы ускорились с 25 минут до 3.
* Как сделать, чтобы пользователь перезагружал не весь бандл, после вашего релиза.
* И другие интересные вещи.

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

Bridging the Gap - Angular without Angular

Aayush Arora

Have you ever tried using Angular code inside React Application or any of Vue, Preact? What if, you can use Angular Material components inside any framework of your choice? In this session, with the newest Angular elements, we’ll learn how we can use Angular inside React, Vue & any other frameworks.

Have you ever imagined the combination of Angular and ReactJS or How the combination of Vue and the Angular application will look like? Let’s try this mad thing with Angular Elements !! Angular Elements has given a new direction for bridging the gap between the frameworks. It is based on Custom Elements which is the platform feature supported by Chrome, Mozilla & Safari. A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. Angular uses the createCustomElement() API to expose the components inside the DOM. Once they are exposed, they can be imported inside any framework like a simple Javascript Module.

In this talk, you will learn how you can use the power of angular into other frameworks with ease. The talk will be full of demos showing the advantages of using Angular outside Angular.

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

Parcel-bundler : New kid on the block

Abhishek Gupta

I will be talking about the zero config module bundler i.e. Parcel and how it speeds up the developer experience. I will also be showing a demo to remove Webpack from CRA and adding Parcel to it which will decrease the build time.

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

Grid Layout как основа современной раскладки

Сергей Попов

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

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

Webpack: собери меня, если сможешь

Александр Черников

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

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

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

Дизайн-система Tinkoff.ru

Никита Прилепский

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

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

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

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

PWA with PWF

Ignacio Anaya

PWA is the new the black and one of the hottest topics in mobile/web development. Vue.js, the progressive web framework (PWF) that changed the way we create web application, makes it easy to add progressive web app functionality.

In this talk, I will show you why PWA is so important for mobile/web developers and why Vue.js is a great choice to consider for your next PWA project.

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

Плагины для браузеров в 2018 году

Виталий Глибин

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

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

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

StoreWars (ngxs, redux, vuex)

Кирилл Юсупов
Максим Иванов

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

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

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

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

Качество кода

Иван Ботанов

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

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

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

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

Lint yourself

Дмитрий Кунин

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

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

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

Лайфхаки для фронтенд-разработчкиков

Алексей Золотых

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

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

Angular modularity in the real world

Saif eddine Jerbi

This talk will focus on the modularity at runtime. One of the most challenging requirement today is developing and deploying in modular way. So you can patch, add or remove some bricks without breaking the availability of your app.

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

Apollo - год спустя (To the moon) / Apollo 365

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

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

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

Прототипировали, прототипировали, выпрототипировали! PDD-подход для планирования IT-проекта

Ксения Коновалова

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

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

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

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

Работа Webpack изнутри

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

Webpack стал де факто стандартом сборки фронтенд-проектов. Но как он работает изнутри?

Что ж, давайте пройдем путь от конфига до готового бандла вместе с Webpack! Окунемся во внутреннюю архитектуру Webpack, узнаем про механизм, лежащий в основе всего, и рассмотрим пару примеров, которые используют этот механизм на полную!

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

GraphQL на клиенте

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

Facebook за последние 6 лет отряхнул от пыли старый добрый компонентный подход, приправив хорошей связкой инструментов - React, GraphQL, Relay, Flowtype, Jest. Речь пойдет о том, как все это добро работает вместе.

Сделаю упор на статический анализ и рефакторинг. Связующей вещью всего и вся является GraphQL. Если у вас его еще нет, то приходите послушать. А еще я расскажу, почему ненавижу Redux, REST API, Swagger и считаю это прошлым веком, да вы и сами это поймете.

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

Augmented Reality in Your Browser using Vanilla JavaScript

Felix Wu

Despite Augmented Reality being in the phase of Disilliousment according to Gartner, AR is becoming more and more popular among artists, developers, and business. This talk will introduce and explore the future ShapeDetection Browser API, including coding a live Snapchat-like Filter Service!

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

Сборка статических ресурсов на webpack. Как поменять систему сборки в монолите и не погрязнуть в легаси

Алексей Павлов

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

В своём докладе я расскажу об опыте переноса сборки статики с gulp/browserify на webpack, причинах такого решения, проблемах, возникших в процессе, и способах их преодоления. Вы узнаете, какие расширения и модули могут понадобиться для тех или иных задач, о тонкостях настройки сборки для production и способах оптимизации сборки.

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

Как мы подружили контент-отдел с веб-отделом, позволив эффективно менять контент на сайтах наших продуктов с помощью CMS

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

У нашей компании есть немалое количетство сайтов продуктов, которые содержат как описание продукта, так и различные Tutorial'ы и FAQ. И с каждой новой версией продукта приходят правки контента.

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

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

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

Кэширование, гонки и Redux

Вадим Швецов

Как организовать хранение серверных данных в Redux, закэшировать все на свете, отловить сетевые ошибки, железно избежать race conditions и не написать ни строки бойлерплейта.

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

Закэшируй это

Всеволод Шмыров

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

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

Оффлайн и кэширование в локальных хранилищах
,
Node.js и io.js
,
Фронтенд / другое
,
Производительность и мониторинг фронтенда
Доклад принят в программу конференции

Empathetic Design Systems

Jennifer Wong

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!

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

Как не писать лишний код. Проверка дизайн-решений уже на старте

Саввотин Руслан Игоревич

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

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

Рассылай и властвуй: верстка рассылки без боли

Александр Хлебников

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

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

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

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

JSON API - работаем по спецификации

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

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

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

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