Хабрахабр

Шесть наиболее полезных докладов с Frontend Conf 2018

Друзья, с позиции главы программного комитета Frontend Conf поместил под катом краткий обзор шести самых полезных докладов с РИТ++ 2018 по фронтенду.

Отдельно затронуты вопросы транспиляции, где на примере API Яндекс.Карт показано, как можно писать на ES2015, получая на выходе ES3, и обеспечить поддержку IDE и линтеров. В подборке нашлось место рассказу про то, как настраивать PWA-приложения и делать их более нативными. Не менее хардкорный доклад про то, как перенести нагрузку, связанную с расчетом анимации, с CPU на видеокарту. Еще одна история — про популярные форматы хранения изображений, их сжатие и варианты загрузки на мобильные устройства. Плюс два отдельных доклада про секреты и лайфхаки CSS.

Одним словом, именно такие, как мы любим, и отбираем для Frontend Conf Moscow. Все доклады — сугубо практические, а некоторые — вполне холиварные.

Как сделать веб-приложение нативнее, а пользователя счастливее

На базе опыта развития собственного проекта Тимофей Лавренюк из продуктовой компании KeepSolid рассказал, можно ли при помощи PWA создать приложение, которое будет вести себя почти как нативное.

На фоне веб-версии прогрессивные приложения удобны большей интеграцией с ОС, в частности, тем, что они доступны в стандартном списке приложений для Android. Тимофей перешел к концепции прогрессивного приложения в третьей версии своего клиента для новостного агрегатора, ориентированного на гиков (GeekInformer). Аналогично нативным приложениям пользователь может управлять разрешениями или деинсталлировать PWA.

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

Для упомянутых фич спикер даже приводит субъективную оценку времени их интеграции в приложение:

Подводя итоги, спикер отмечает, что PWA обладают плюсами как веб-страниц (HTML5), так и нативных приложений. Доклад наполнен интересными деталями, ссылками на инструменты (и даже «костыли»), а также неподдельным энтузиазмом автора. Он ожидает, что в ближайшее время PWA появятся и на десктопах (пока они есть только в ChromeOS), поэтому предсказывает технологии большое будущее.

Безграничные возможности транспиляции

Автор следующего доклада — Андрей Роенко, разработчик API Яндекс.Карт. Спикер рассказывает о своем опыте использования транспиляции. Рассматривая Babel как основной транспилятор, он заглядывает, по выражению самого спикера, под «капот капота» процесса: объясняет, как все это работает в теории и как может быть применимо к конкретным задачам.

В процессе разработки API Яндекс.Карт описанные подходы помогли писать на ES2015, получая на выходе ES3, и обеспечить поддержку IDE и линтеров.

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

Показываем картинки пользователю: подробное руководство

От приложений в целом перейдем к деталям. Первое, на чем хочется сделать акцент — картинки, загружаемые на мобильные устройства, о которых рассказывал Никита Дубко software ingeneer, фронтэндщик из компании iTechArt Group. Его доклад — обзор популярных форматов хранения изображений, их сжатия и вариантов загрузки на устройства.

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

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

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

Путь пикселя

Еще один хардкорный доклад — рассказ энтузиаста анимации Юрия Артюха (Coderiver) о расчетах картинки ресурсами видеокарты.

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

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

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

Even More CSS Secrets

На десерт сразу два доклада о возможностях CSS. Первый — англоязычный рассказ Lea Verou, разработчика нескольких open source-проектов, исследователя из MIT CSAIL и приглашенного эксперта из CSS Group, о 10 малоизвестных возможностях CSS. Кстати, Леа Веру также автор книги CSS secrets, переведенной, в том числе, и на русский язык.

Доклад — своеобразный сиквел выступлений, озвученных в 2011 — 2013 годах и посвященных секретам CSS.

Чтобы вы могли лучше представить содержание, приведем пару примеров: Как и в тех докладах, здесь представлены 10 «трюков», основанных только на возможностях CSS (без JavaScript).

Повествование построено на написании кода в режиме реального времени с подробным разбором принципов работы и деталей очередного «лайфхака», например, математики, которая кроется за режимами multiply и screen в blending mode.

Увы, не все 10 хитростей можно использовать в проектах уже сегодня (кое-где поддержка подкачала), но ситуация вполне многообещающая. Учитывая, что некоторые «трюки» возможны только благодаря нововведениям в CSS, для них спикер приводит статистику поддержки основными браузерами.

Готов ли CSS заменить препроцессоры?

Еще один доклад — сравнение встроенных возможностей CSS и препроцессоров через призму среднестатистического проекта от Сергея Попова из Лиги А./HTML Academy.

Несмотря на «холиварность» темы (степень накала страстей становится понятна на этапе вопросов из зала), своим выступлением автор призывает слушателей максимально отказываться от препроцессоров, по крайней мере в той части, где CSS уже сейчас предлагает свое собственное решение.

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

Вместо трейлера выступления предлагаем вот такую итоговую схему:

Ну а за пояснениями о том, что же здесь изображено, рекомендуем обратиться к докладу.

С поданными и принятыми в программу докладами можно ознакомиться на этой странице. Друзья, спешим сообщить, что очередная конференция Frontend Conf 2018 Moscow пройдет уже совсем скоро — 4 и 5 октября.

Если вы любите всё узнавать первым — подпишитесь на YouTube-канал конференции, туда уже выложены все видеозаписи прошлых лет и будут выложены материалы и 2018 года. Это только шесть докладов с последней Frontend Conf, а ведь их было в 7 раз больше.

Там публикуются расшифровки, анонсы интересных докладов, сообщения об открытии тех или иных видео, митапах и так далее. Если вы предпочитаете получать информацию по асинхронным каналам — для вас есть список рассылки.

🙂
В общем — оставайтесь с нами!

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть