Друзья, с позиции руководителя программного комитета Интерфейсная конференция Под катом я разместил краткий обзор шести самых полезных докладов с RIT++ 2018 по фронтенду.
В подборку вошёл рассказ о том, как настроить PWA-приложения и сделать их более родными.
Отдельно затронуто Проблемы транспиляции , где на примере API Яндекс.
Карт показано, как можно писать на ES2015, получая на выходе ES3, и обеспечивать поддержку IDE и линтеров.
Еще одна история о популярные форматы хранения изображений , их параметры сжатия и загрузки для мобильных устройств.
Не менее хардкорный отчет о том, как переносить нагрузку, связанную с расчет анимации, от процессора до видеокарты .
Плюс два отдельных отчета о Секреты CSS и лайфхаки .
Все доклады чисто практические, а некоторые вполне холиварны.
Словом, именно те, кого мы любим и выбираем для Frontend Conf Moscow.
Как сделать веб-приложение более нативным, а пользователя — более счастливым
Тимофей Лавренюк из продуктовой компании KeepSolid на основе опыта разработки собственного проекта рассказал о том, можно ли использовать PWA для создания приложения, которое будет вести себя практически как нативное.Тимофей перешел к концепции прогрессивного приложения в третьей версии своего клиента для новостного агрегатора, ориентированного на гиков (GeekInformer).
По сравнению с веб-версией прогрессивные приложения удобны большей интеграцией с ОС, в частности тем, что они доступны в стандартном списке приложений для Android. Как и в случае с собственными приложениями, пользователь может управлять разрешениями или удалять PWA.
Менее чем за час спикер обрисовывает, как работает PWA, а затем переходит к деталям — например, обеспечение работы приложения при отсутствии Интернета, настройка кэширования данных с сервера и т. д.
По упомянутым возможностям спикер даже дает субъективную оценку времени их интеграции в приложение:
Отчет наполнен интересными подробностями, ссылками на инструменты (и даже «костыли»), а также неподдельным энтузиазмом автора.
Подводя итог, спикер отмечает, что PWA имеют преимущества как веб-страниц (HTML5), так и нативных приложений.
Он ожидает, что PWA появятся на десктопах в ближайшем будущем (пока они доступны только на ChromeOS), поэтому предрекает этой технологии большое будущее.
Безграничные возможности транспиляции
Автор следующего отчета — Андрей Роенко, разработчик API Яндекс.Карт. Спикер рассказывает о своем опыте использования транспиляции.
Считая Бабеля основным транспилятором, он заглядывает, как выразился сам спикер, под «капот капота» процесса: объясняет, как все это работает в теории и как это можно применить к конкретным задачам.
При разработке API Яндекс.
Карт описанные подходы помогли написать на ES2015, на выходе получил ES3, а также обеспечить поддержку IDE и линтеров.
Кстати, в отчете есть ссылки на полезную литературу и интересные плагины.
Чтобы не вводить их вручную в строку браузера, автор специально выложил их в открытый доступ.
презентация , где все ссылки кликабельны.
Показ изображений пользователю: подробное руководство
От приложений в целом перейдем к деталям.Первое, на чем хочу остановиться — это картинки, загружаемые на мобильные устройства, о которых рассказал инженер-программист, фронтенд-разработчик компании iTechArt Group Никита Дубко.
Его доклад представляет собой обзор популярных форматов хранения изображений, их сжатия и вариантов загрузки на устройства.
Основную идею отчета можно сформулировать достаточно просто: параметры и методы сжатия, а также варианты загрузки необходимо выбирать с учетом вашей задачи, чтобы минимизировать нагрузку на процессор мобильного устройства и сетевой трафик.
Настоящий сок доклада сокрыт в частных случаях и специфике, связанной с ними – спикер подробно рассматривает плюсы и минусы разных подходов, предлагает кейсы их использования, приводит статистику поддержки той или иной опции в браузерах и делится лайфхаками и инструментами для выполнения конкретных операций.
Примечательно, что в беседе нашлось место обсуждению опыта пользователей с медленным интернетом и доступности картинок для людей с ограниченными возможностями.
Пиксельный путь
Еще один хардкорный доклад — рассказ энтузиаста анимации Юрия Артюха (Coderiver) о расчетах изображения с использованием ресурсов видеокарты.Юрий начинает свое выступление с нескольких очень интересных примеров своего творчества и не менее впечатляющей мечты - создать анимацию жирных пятен на поверхности горячего борща (ну сколько людей в детстве гоняли их по тарелке ложкой или куском хлеба?).
Но суть доклада не об этом, а о том, как перенести нагрузку, связанную с расчетом анимации, с ЦП на видеокарту.
Вместо долгих объяснений о том, в каких ситуациях это может понадобиться, вот карикатура от автора отчета:
Видео по ссылке, по сути, представляет собой подробное введение в WebGL с точки зрения анимации; о том, как перестроить голову с DOM на параллельный расчет пикселей.
По завершении введения докладчик в режиме реального времени покажет вам, как начать работу с шейдерами и создавать крутые эффекты с помощью всего лишь пары строк кода.
Еще больше секретов CSS
На десерт два доклада о возможностях CSS. Первый — англоязычный рассказ Леи Веру, разработчика нескольких проектов с открытым исходным кодом, исследователя MIT CSAIL и приглашенного эксперта из CSS Group, о 10 малоизвестных особенностях CSS. Кстати, Леа Веру также является автором книги «Секреты CSS», переведенной, в том числе, на русский язык.
Доклад является своеобразным продолжением выступлений, прозвучавших в 2011 – 2013 годах и посвященных секретам CSS.
Как и в тех докладах, вот 10 «хитростей», основанных только на возможностях CSS (без JavaScript).
Чтобы вам было лучше представить содержание, вот пара примеров:
Повествование основано на написании кода в реальном времени с подробным анализом принципов работы и деталей очередного «лайфхака», например, математики, которая лежит в основе режимов умножения и экрана в режиме наложения.
Учитывая, что некоторые «хитрости» возможны только благодаря нововведениям в CSS, спикер приводит статистику их поддержки в основных браузерах.
Увы, не все 10 трюков сегодня можно использовать в проектах (кое-где подкачала поддержка), но ситуация вполне перспективная.
Готов ли CSS заменить препроцессоры?
Еще один доклад — сравнение встроенных возможностей CSS и препроцессоров через призму среднестатистического проекта от Сергея Попова из League A./HTML Academy. Несмотря на «святость» темы (степень накала страстей становится понятна на этапе вопросов аудитории), автор своим выступлением призывает слушателей максимально отказаться от препроцессоров, по крайней мере в той части, где используется CSS. уже предлагает свое решение.
Начиная с истории развития препроцессоров, докладчик анализирует спрос на те или иные конструкции, возложенные на этот инструментарий, проводит параллели с возможностями CSS и PostCSS, приравнивая роль последнего в мире CSS к роли Babel для JavaScript.
Вместо трейлера к спектаклю предлагаем вот такую итоговую схему:
Ну а за пояснением того, что здесь изображено, рекомендуем обратиться к отчёту.
Друзья, спешим сообщить вам, что очередная конференция Frontend Conf 2018 Москва состоится совсем скоро – 4 и 5 октября.Теги: #Разработка сайтов #CSS #pwa #frontendconfРаботы, представленные и принятые в программу, можно найти по адресу: этот страница.
Это всего шесть докладов с последней Frontend Conf, но их было в 7 раз больше.
Если вы любите узнавать всё первым, подписывайтесь на YouTube-канал конференции , там уже выложены все видео прошлых лет и там же будут размещены материалы за 2018 год. Если вы предпочитаете получать информацию по асинхронным каналам, это для вас есть список рассылки .
Там публикуются стенограммы, анонсы интересных докладов, сообщения об открытии тех или иных видеороликов, митапах и так далее.
В общем – оставайтесь с нами! :)
-
Bgp Интер-Ас
19 Oct, 24 -
Выпуск Apache Deltacloud 1.0
19 Oct, 24 -
Введение В Nitrode — Выделенный Http-Сервер
19 Oct, 24
