В прошедшую субботу в Яндексе был митап "Я❤️Frontend". На нём выступал мой коллега Антон Кастрицкий с докладом «Вебпак, вид сквозь монокль». Для меня это был один из самых интересных и полезных докладов.

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

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

#webpack #talk

https://www.youtube.com/watch?v=iWPu3Crpys0&t=6077

В 2017-ом году Анна Селезнёва из Злых Марсиан выступала на Web Standards Days с докладом "Знакомьтесь, модальное окно".

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

Доклад был в 2017-ом году. На данный момент его можно дополнить тем, что элемент <dialog> стал официальной частью стандарта HTML 5.2 в 2018-ом году.

#webstandards #ui #a11y #talk

https://www.youtube.com/watch?v=s6PI8pKQxgo

Пару недель назад у нас в Новосибирске был митап для фронтендеров JSParty. Один из докладов был от Тима Чаптыкова из ВКонтакте: "Оптимизация графики на практике".

В докладе Тим рассказал про практические приёмы оптимизации векторной и растровой графики. Очень подробно разобрал настройки при экспорте изображений из Photoshop, Illustrator и Sketch. Поделился наиболее оптимальными настройками для SVGO, малоизвестными трюками при работе с изображениями и хорошими чек-листами, с которыми можно сверяться при экспорте графики для веба. В докладе есть пара историй из жизни про генерацию графики на клиенте. Не знаю почему, но из доклада я запомнил такой факт, что при сжатии больших JPEG для Retina-дисплеев достаточно качества 51%.

К сожалению, записи видео не было, но есть запись доклада с Frontfest Moscow 2017. Обновлённые слайды можно найти тут.

#graphic #optimization #talk

https://www.youtube.com/watch?v=wexOXAflVX0

Сегодня нашёл в твиттере хороший доклад Андерса Хайлсберга (основной автор TypeScript) "TypeScript: Static types for JavaScript".

В 2010 году, перед тем как принять решение о создании нового языка, разработчики хотели открыть исходный код инструмента ScriptSharp, который переводил исходный код из C# в JS и который уже использовался командой Outlook.com. Но в итоге решили пойти другим путём и создать новый язык, который бы устранял ошибки в JavaScript и добавлял новые фичи, которых не хватало в JS (типы, классы, декораторы и т.п.). Так появился TypeScript.

В докладе Андерс рассказывает про разные возможности TypeScript. Объясняет, почему они ограничили вывод типов локально. Это было сделали из-за неявности, которую могут нести системы типов с нелокальным выводом типов. Больше про вывод типов Андерс не рассказывал, но мне хотелось бы услышать про эту фичу побольше. В самом конце рассказывает про то, как в обычном JS можно улучшить себе жизнь, используя тулинг TypeScript. Например, VSCode подтягивает файлы определений типов для библиотек и таким образом для них начинает работать автодополнение. Ещё в любой JS-файл можно добавить комментарий // @ts-check и TypeScript будет подсвечивать ошибки при неправильном использовании функций или если в коде есть опечатки.

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

#typescript #talk

https://www.youtube.com/watch?v=ET4kT88JRXs

На Microsoft Build 2019 пару дней назад был интересный доклад Дэниала Розенвассера про новые возможности в TypeScript "What’s new in TypeScript".

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

Было добавлено ключевое слово readonly, которое можно использовать вместо ReadonlyArray. Ещё теперь можно разворачивать кортеж типов в rest-параметрах функции, что позволяет избавиться от перечисления всех возможных параметров с помощью перегрузки типов. Это позволило улучшить типизацию методов bind и call у функций. Пример использования:

type MyTuple = [string, number];
declare function foo(...args: MyTuple): string;

После доклада автор TypeScript — Андерс Хайлсберг — отвечал на вопросы. Среди них был вопрос про компиляцию в WebAssembly. Если говорить кратко, это не имеет смысла. Для запуска TypeScript в WebAssembly необходим скомпилированный в WebAssembly JavaScript-движок, таким образом появляется избыточный слой (речь шла про браузерное окружение).

В общем, доклад хороший, советую посмотреть.

#typescript #webassembly #talk

https://www.youtube.com/watch?v=Au-rrY0afe4

Посмотрел доклад с прошедшего Google I/O'19 "Next-Generation 3D Graphics on the Web" про настоящее и будущее 3D-графики в Web'е.

Из первой части доклада запомнилось использование веб-компонентов для снижения сложности кода при использовании WebGL-фич. Вот так выглядит пример вставки просмотрщика 3D-моделей на страницу:

// импорт библиотеки
<script type="module" src="model-viewer.js"></script>
// добавление просмотрщика на страницу
<model-viewer src="astronaut.glb"></model-viewer>

Вторая часть доклада для меня была самой интересной. Она была посвящена новому API — WebGPU. Показали демо, где на сцене рендерилось 10000 объектов. Всё работало довольно производительно (~40fps). WebGPU способен отправить в три раза больше команд на отрисовку относительно WebGL.

Рассказали про то, что с помощью WebGPU теперь можно эффективнее работать с фильтрами пост-процессинга и алгоритмами машинного обучения, так как WebGPU гораздо гибче чем WebGL — он позволяет работать с разделяемой памятью GPU. Это также открывает возможность вынесения симуляции жидкости, скиннинга, параллельной сортировки и других алгоритмов с CPU на GPU.

Новое API доступно пока в Chrome Canary на macOS в экспериментальном режиме. API включается с помощью флага chrome://flags/#enable-unsafe-webgpu. Над новой спецификацией работают производители всех браузеров.

#talk #webgl #webgpu

https://www.youtube.com/watch?v=K2JzIUIHIhc

Посмотрел доклад Джефа Ши из Netflix про то, как развивалась их часть React-приложения, отвечающая за регистрацию нового пользователя — "Redux For Transactional Apps".

Из доклада мне запомнилось то, как они боролись с разобщённостью флоу процесса регистрации на разных платформах: Web, Mobile, TV. На каждой платформе транзакции описывались в самом приложении (в докладе под транзакцией подразумевается пошаговое изменение состояния приложения). Логика транзакций в итоге была перемещена в API, что позволило решить проблему.

Ещё в докладе Джеф рассказал про то, какой профит они получили при использовании Redux. Благодаря тому, что view отделено от стейта, они могут использовать одну и ту же логику изменения состояния на разных платформах, просто подменяя компоненты, отвечающие за представление.

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

#react #statemanagement #talk

https://youtu.be/V8oTJ8OZ5S0?t=1134

Facebook открыл исходный код JavaScript-движка Hermes, который был разработан для оптимизации работы React Native приложений на Android.

Hermes в отличие от V8 использует ahead-of-time компиляцию (парсинг и компиляция JS-кода в байткод происходит не на устройстве пользователя, а на этапе сборки программы). Приложения, использующие Hermes, запускаются гораздо быстрее (примерно в 2 раза быстрее в демо с Mattermost) и потребляют меньше памяти. При сборке приложений с новым движком apk-пакеты занимают меньше места. Для режима разработки предусмотрена ленивая компиляция кода на устройстве, чтобы фидбек при разработке оставался быстрым.

Движок поддерживает большую часть синтаксиса ES2015. В процессе разработки добавление const, let, ES-модулей, классов, вычисляемых свойств объектов. Исключены из поддержки Proxy, Reflect, with и другие редко-используемые части языка.

Hermes уже используется в production-приложениях Facebook. На данный момент разработчики не планируют адаптировать Hermes для работы на сервере или в web'е.

https://www.youtube.com/watch?v=zEjqDWqeDdg

#talk #reactnative #engine #announcement #facebook

Посмотрел доклад 2018 года Расса Олсена про функциональное программирование — "Functional Programming in 40 Minutes".

В отличие от статей про ФП, в которых говорится забыть все концепции программирования, Расс говорит о том, что не надо их выкидывать — их надо взять и немного порефакторить. Он на примере показывает как существующие концепции, которые известны всем программистам живут в ФП. Рассказывает про "три столпа" функционального программирования — чистые функции, иммутабельность и работу с сайд эффектами. Работа с сайд эффектами разбирается на примере Clojure — Атомы/Агенты/Акторы.

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

#talk #fp #clojure

https://www.youtube.com/watch?v=0if71HOyVjY

Джонатан Блоу — известный разработчик из мира игровой индустрии — в этом году приезжал в Москву, где он выступил с докладом "Preventing the Collapse of Civilization".

Развитие компьютерной индустрии и добавление абстракций идут бок о бок. Со временем число абстракций растёт, увеличивая сложность. С увеличением сложности увеличивается количество багов и снижается надёжность программ. В девяностых-двухтысячных среди вендоров железа и ПО была популярна фраза "Five 9s". Она означала, что система будет доступна 99.999% времени. Сейчас этот термин вышел из оборота.

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

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

#talk #musings

https://www.youtube.com/watch?v=pW-SOdj4Kkk

В этом году на React Conf был хороший доклад от Джен Крейгтон — "React is Fiction".

Джен в университете изучала литературу и хотела писать книги, но в итоге стала web-разработчиком. В докладе она рассказывает про принципы, использующиеся при написании книг, и как они ложатся на разработку на примере React-компонентов. Принцип "показывайте, а не рассказывайте" очень сильно пересекается с декларативностью. "У каждого персонажа должна быть мотивация" — с поиском подходящих границ между разными компонентами. "Пишите то, что знаете" — про баланс между KISS и DRY.

Доклад очень хороший. Рекомендую посмотреть, даже если вы не используете React.

#talk #react #musings

https://www.youtube.com/watch?v=kqh4lz2Lkzs

Посмотрел доклад Ричарда Хикки — "Hammock Driven Development".

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

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

Очень крутой доклад. Рекомендую посмотреть или почитать транскрипцию.

#talk #programming #musings

https://www.youtube.com/watch?v=f84n5oFoZBc
https://github.com/matthiasn/talk-transcripts/blob/master/Hickey_Rich/HammockDrivenDev.md

В проектах со сложной структурой и большой командой для поддержки инфраструктуры может использоваться специальный процесс — фронтопс. Анна Селезнёва на прошедшем Web Standards Days рассказала, что скрывается за этим термином в докладе "Фронтопс? Серьёзно?"

Фронтопс (так же как и девопс) — это методология, которая позволяет связать в одно целое процесс написания кода и его доставку до пользователя (то есть всю инфраструктуру). В компаниях, которые в той или иной мере следуют этой методологии, для решения инфраструктурных задач, связанных с фронтендом, выделяют отдельную команду разработчиков или разработчика. Подобные команды есть в Яндекс.Маркете, PayPal, Apple. В докладе рассказывается про историю появления термина "фронтопс" и задачи, которые решаются в его рамках: сборка, линтинг, тесты, сбор ошибок, ci и т.п.

Доклад хороший — рекомендую посмотреть, особенно, если в вашем проекте есть пробелы в инфраструктуре, и вы хотите что-то с этим сделать.

#frontops #talk

https://www.youtube.com/watch?v=yWPAW59e1AU

Есть очень быстрая библиотека для работы с картами — Leaflet (используют в Facebook, Github, 2ГИС). Она была разработана Владимиром Агафонкиным. Вова помешан на производительности; и вот месяц назад он рассказал доклад "Fast by default: algorithmic performance optimization".

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

В общем, доклад крутой. Рекомендую посмотреть.

#talk #performance #algorithm

https://www.youtube.com/watch?v=hh6SohUq1yQ&feature=youtu.be

Кристофер Хиллер из IBM рассказал как эффективно работать с Diagnostic Repots в Node.js — "Debugging NodeJS in Production with Diagnostic Reports".

Diagnostic Reports был добавлен в Node.js 11.8. С помощью этой фичи можно получить много полезной информации, которая может помочь при поиске проблем. Diagnostic Reports генерирует большой отчёт — JSON-файл, в котором есть данные про окружение, используемые разделяемые библиотеки, текущее состояние event loop и т.п. Кристофер представил утилиту report-toolkit, которая облегчает работу с отчётом. Эта утилита может быть полезна при поиск причин зависаний, анализ моргающих процессов (работает в одном окружении, падает в другом).

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

#talk #nodejs #debug

https://www.youtube.com/watch?v=PLiar_Aj9gs

В конце марта прошла конференция PerfMatters, на которой выступили с докладами Йоав Вайс, Пол Айриш, Арон Тёрнер и другие. Посмотрел оттуда доклад "Turbocharging Walmart.com" Васанта Кришнамурти (лид фронтенд-направления Wallmart).

Wallmart.com каждый месяц посещают 100 миллионов пользователей. Для того чтобы обеспечить наилучший пользовательский опыт, команда разработки сфокусировалась на производительности сайта. Применение всех техник, про которые рассказывается в докладе (код сплиттинг, использование сжатия brotli, resource hints и т.п.), уменьшило TTI более чем на 50%.

Из самого интересного. Использование хинта preload продиктовано наиболее распространёнными пользовательскими сценариями работы с сайтом — на каждой странице подгружается код бандла следующей страницы, на которую с большей вероятностью перейдёт пользователь. Preload отключают, если у пользователя включён режим экономии траффика ( NetworkInformation.saveData — доступен только в CHrome). Заголовок и подвал сайта рендерятся в отдельном сервисе, благодаря чему единожды отрендеренные куски HTML переиспользуются на всех страницах.

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

#performance #talk

https://www.youtube.com/watch?v=vB8JUx9Dp08

Неделю назад Владимир Гриненко представил Yandex UI — новую библиотеку React-компонентов, которая используется в проектах Яндекса.

Основными требованиями при создании библиотеки были: функциональность, доступность, скорость рендеринга, возможность переопределения компонентов и расширения поведения снаружи, поддержка TypeScript и темизации. Yandex UI под капотом использует bem-react. Поддержка БЭМ-подхода позволяет гибко управлять тем, какой именно код попадает в бандл приложения. Есть поддержка Dependency Injection, с помощью которой можно подменять функциональность компонентов, например, при проведении A/B-тестов или добавлении специфичной логики. Библиотека включает 24 компонента, в будущем планируется её расширение.

Мне лично очень понравилась поддержка DI, но хотелось бы видеть полноценное API на хуках для работы с модификаторами.

#react #yandex #talk

https://www.youtube.com/watch?v=trwdc0JCelA
https://github.com/bem/yandex-ui

Ричард Фельдман — автор книги "Elm in Action" — рассказал про сдвиг парадигм программирования — "The Next Paradigm Shift in Programming".

За 50 лет существования индустрии программирование эволюционировало от использования goto до идеи отказа от сайд эффектов. Технологии и подходы достигали своего пика и медленно сходили на нет. Ричард рассказывает про то, что на данный момент ООП достигло своего пика и рано или поздно оно будет заменено новыми подходами. Доказательство этому повышенный интерес к функциональному программированию. Практически все современные языки поддерживают фичи из фп. Можно найти книги от программирования в функционально стиле в JavaScript, в C++, Java и т.п. Более того основные фичи ООП (инкапсуляция, наследование, методы) либо признаны неэффективными, либо для них есть альтернативы (модули, композиция, функции первого класса).

Очень интересный доклад. Рекомендую посмотреть.

#talk #fp #history

https://www.youtube.com/watch?v=6YbK8o9rZfI

Эван Ю буквально пару часов назад на митапе Vue.js Amsterdam выступил с докладом "The Journey to Vue 3", где анонсировал официальный релиз Vue.js 3.

В начале доклада Эван рассказал про историю третьей версии, её разработка заняла два года. Первая идея о разработке Vue 3 появилась в феврале 2018 года. Затем в сентябре был представлен первый прототип. Потом последовал этап исследований. Были эксперименты с поддержкой классов, TypeScript, функциональных компонентов и time slicing. Какие-то идеи попали в релиз, например, функциональные компоненты в виде Composition API, от некоторых фич отказались, например, Class API.

Весь фреймворк был разбит на модули. Любую часть фреймворка при желании можно использовать в любом другом фреймоврке. Кодовая база была написана полностью на TypeScript. Появилась долгожданная поддержка TS в шаблонах. Система реактивности в третьей версии работает на базе Proxy, улучшая производительность. Реализована новая система рендеринга, использующая компиляцию шаблонов в оптимизированные функции рендеринга Virtual DOM. При необходимости система рендеринга откатывается в diff mode. Был ускорен Server Side Rendering. Фреймворк разрабатывался с учётом поддержки три-шейкинга. Добавлено новое Composition API для улучшения переиспользования и организации кода компонентов. На данный момент в процессе разработки инструменты для миграции со второй версии и поддержка IE11, работу над ними планируется закончить в четвёртом квартале 2020 года.

Также в докладе было обновление про статус второй версии. В первом квартале 2021 вторая версия получит последнее минорное обновление до версии 2.7. В неё попадут фичи из Vue 3, которые возможно портировать. Будут добавлены предупреждения для упрощения миграции на третью версию. Версия 2.7 будет последней минорной версией предыдущего мажорного релиза. Её поддержка закончится через 18 месяцев после даты релиза.

#vue #jsframeworks #release #talk

https://www.youtube.com/watch?v=Vp5ANvd88x0