Стачка.Frontend

Пользователь закрывает вкладку в браузере, и ваше замечательное фронтенд-приложение испаряется. А что если можно было бы оставить какие-то его части еще немного поработать во благо улучшения UX? Отреагировать на какие-то события, завершить начатое общение с сетью - в общем, исполнить немного кода при закрытой вкладке и даже браузере. Я расскажу о разных интересных возможностях API из семейства сервис-воркеров, позволяющих продлить жизнь приложения, чтобы всегда иметь под рукой свежие данные, не бояться проблем с сетью, уметь показывать уведомления - все ради отличного пользовательского опыта.

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

Многим фронтендерам не нравиться писать типы, многие ошибаются при их написании и использовании. Разработчиков понять можно. По большому счёту, статическая типизация нужна машинам, так почему бы машинам самим её не писать?!

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

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

В докладе мы разберемся что же такое WebAssembly.

Поговорим о WebAssembly как о формате, не привязанном к web, обсудим как WebAssembly живет в браузерах.

На примере V8 разберемся как выполняется JS и WASM.

Попробуем понять что влияет на скорость выполнения JS и WASM и в каких случаях WASM оказывается быстрее.

И наконец обсудим текущий статус технологии и возможности ее применения.

Этот доклад о том, как я делал небольшую оптимизацию размера бандла, подсмотренную в Google Closure Compiler — минификацию приватных полей. Расскажу об использовании babel-плагинов, трансформеров TypeScript и насколько в итоге получилось уменьшить размер production-сборки проекта.

Доклад будет полезен разработчикам, которые ищут дополнительные способы оптимизации своего кода и хотят узнать о том, как webpack, Babel и TypeScript могут в этом помочь.

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

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

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

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

Сегодня фронтенд-разаработчик занимается огромным списком задач: верстает, разрабатывает дизайн-системы, кодит на JS, спорит о типизации, выбирает лучший фреймворк. Но мы в Яндекс.Маркете пошли дальше и решили ещё писать серверный API для мобильного приложения силами команды разработки интерфейсов. Почему мы так поступили? Что из этого вышло? Стоит ли вам поступить так же? Ответы на эти и другие вопросы в моём докладе.

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

Проблема больших таблиц

Критерии выбора решений

Сравнение существующих решений

Оптимизация и ньюансы работы с готовыми решениями

Перечень типовых задач

Плюсы и минусы angular, react, vue

Сравнение технологий

Опыт что для чего лучше подходит.

Как определить тип проекта

Муки выбора технологий

Определения рисков

Как сделать так что бы вас потом не проклина

Состояние JS в 2020, новые тренды, пробитое дно. Что стоит попробовать, от чего стоит отказаться. Большинство проектов это монстры застывшие после релиза. Когда вы оптимизировали свой код последний раз? Знаете что такое PWA/TWA? Ваше приложение работает в оффлайне?

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

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

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

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

Функциональное программирование — сложная штука, но мы будет говорить про него так, что поймет даже ваша бабушка. Рассмотрим самые важные и прикладные штуки и разберемся, действительно ли, функциональное программирование поможет сделать JavaScript разработку проще?

Понятие Progressive Web Applications на слуху. Термит придуман в 2015, получил развитие 2018, поддержку в 2019. Активно поддерживается Google, PWA пользуют известные компании, например, Uber, Tinder, Twitter и другие. С весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка. Так чего же мы ждём? Давайте разберемся что это, как это работает и давайте внедрять! Это модно, современно и очень интересно.

Если раньше многие вкладывали и инвестировали в крутых и модных дизайнеров, то сейчас спрос идет на frontend-разработчиков. Границы дизайна и верстки стираются с каждым обновлением инструментария, с каждым самописным плагином, с каждым стайл-гайдом. Что произойдёт если вы будете брать крутых фронтов, как если бы вы брали крутых дизайнеров? Современный frontend-разработчик должен выйти за рамки написания качественного кода на проектах. О том как мы в AFFINAGE стираем границы дизайна и верстки семимильными шагами, какими навыками обладает мощный фронтендер, что такое дизайн глазами frontend-разработчика, почему наши верстальщики работают в figma/adobe xd и учат дизайнеров работать, и что из этого вышло? Ответы на эти вопросы вы узнаете из моего доклада.

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

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

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

Познакомимся с пятью популярными Headless CMS с открытым исходным кодом. Рассмотрим, как управлять контентом, формировать API. Интегрируем API с типовым сайтом на React. Сделаем выводы о сильных и слабых сторонах Headless CMS.

За годы своего существования (а это почти 30 лет) язык HTML зарекомендовал себя как исключительно дружелюбный язык, легко осваиваемый новичками. А в сочетании с CSS он позволяет достичь каких-то невероятных высот. Взять, к примеру, игру Mario Kart, написанную на чистом HTML и CSS.

Однако, есть задачи, с которыми HTML, даже в сочетании с CSS, пока справиться не может.

Что если бы мы могли писать веб-приложения на языке HTML без привлечения JavaScript? Что если бы у нас был столь же дружелюбный и простой в изучении инструмент, который позволил расширить возможности HTML и при этом не потерять его сильные стороны чрезмерным усложнением?

И такой инструмент есть. Это Mavo — будущее HTML в настоящем!

Mavo разрабатывается в Массачусетском технологическом институте (MIT) под руководством Лии Веру (Lea Verou).

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