Howto: интерактивная визуализация на сотни тысяч элементов внутри браузера
В данном докладе мы рассмотрим комплексный подход к решению проблемы взаимодействия в режиме реального времени с датасетами в сотни тысяч элементов. Посмотрим и проверим, что сработало, а какие идеи не выстрелили. В моем докладе мы поговорим о технологиях в браузере, которые могут быть использованы в подобных сценариях: WebAssembly, WebWorkers, WebGL. Спойлер: не все из них пригодились и принесли ожидаемые результаты. И в завершение постараемся немного заглянуть в будущее и посмотреть, как подобное может решаться в браузере через несколько лет.
FrontendConf
48 min
Самый низкий уровень: пишем на WebGL и WebAssembly без фреймворков и транскомпиляторов
Антон Хлыновский
Говоря о WebGL, часто имеют в виду three.js или другие похожие фреймворки. Новичок на поле веб-технологий WebAssembly уже начинает ассоциироваться с языками C или Rust. А как же, ведь нужные утилиты …
OdessaFrontend Meetup
46 min
Пощупать 3д в браузере
Константин Плаксивый
Веб технологии давно позволяют прикоснуться ко всем 3 измерениям в браузере используя WebGL, и для этого достаточно понять самые простые принципы трехмерной графики. Что такое геометрия и материал. К…
Я ❤︎ Фронтенд
44 min
Копаемся под капотом браузера: как работает event loop и compositing
Сергей Чикуёнок
Сейчас, в эпоху клиентских фреймворков, мало кто задумывается, как работают привычные нам вещи в браузере, вроде событий или анимаций. Мы часто следуем „лучшим практикам“ и не задумываемся, почему он…
Chrome Dev Summit
30 min
The main thread is overworked & underpaid
Surma
Amongst all the platforms for app development, the web is arguably the only one that does not make good use of threading. On the web, the main thread has a lot of responsibilities, and we keep adding…
FrontendConf
53 min
История одной анимации
Юрий Артюх
Будет рассказано об истории создания одной анимации от получения макета до сдачи клиенту. История включает в себя язык WebGL, Three.js, GLSL, Canvas 2D, графы и немного математики.
React Advanced
24 min
What a Drag
Vojtech Miksu
"Can we do this thing drag and droppable?". That’s one of the sentences that every front end developer fears the most. There are many DnD libraries out there but did you ever consider building someth…
Я.Субботник
65 min
Скорость веб-страниц
Данила Авдошин
Расскажу про то, как делать веб быстрым, почему нужно заниматься скоростью, как измерять скорость и покажу примеры из жизни настоящих ускорений.
Я ❤︎ Фронтенд
43 min
Web Vitals: увидеть и оптимизировать
Артем Белов
В индустрии уже давно сформированы стандарты производительности веб-приложений — это инициатива Web Vitals. Тем не менее, это не страхует программистов от ложных путей оптимизации Performance-метрик.…
CSSCAMP
32 min
Mind over Matter: Optimize Performance Without Code
Stéphanie Walter
Did you already optimize every. single. line. of. code. to be found on your website or mobile app? Are you getting tired of hearing about load times and TTFB(Time to first byte)? Do you need to remin…
React Advanced
41 min
Keynote: Performance is magic
Ken Wheeler
This talk will explore strategies for fixing performance issues in your apps when they arise. We will look at how we can make our React apps “Blazing” fast, and when it’s time to bail out of React in…
ITeaConf
34 min
Рендеринг, Почему никто не следит за потерянными кадрами
Сергей Иванов
Современная фронтенд разработка,в частности вопрос производительности, сводится к тому, чтобы удовлетворить набор требований lighthouse или метрик Core Web Vitals. Однако почему среднестатистический …
React Advanced
28 min
Hooked on D3: Creating Animated Ch(art)s with D3 and React Hooks
Monica Wojciechowska
From a quick glance, it might not seem like D3 and React are a match made in heaven. After all, they’re both all about being in charge - who gets to render, who gets to update, who gets to decide how…
Chrome Dev Summit
33 min
Chrome extensions and the world of tomorrow
Simeon Vincent
Chrome's extensions platform is undergoing a sea change. Nearly 6 years after the current manifest version was introduced, we are revving it again. Manifest V3 rethinks several of the basics about ho…
Tver.io
41 min
Wasm 101
Полина Гуртовая
Совсем не хардкорное введение в WebAssembly. Напишем немного кода для стековой виртуальной машины, заглянем под капот v8. И, чтобы нам точно было не скучно, добавим немного C++ и Rust.
web.dev
38 min
Optimize for Core Web Vitals
Addy Osmani
In this hands-on talk, we cover tips & tricks for optimizing your user-experience to meet the Core Web Vitals. We use tools like Lighthouse & DevTools, show you code snippets for fixes, and highlight…
Я ❤︎ Фронтенд
43 min
WebAssembly и веб на TypeScript
Александр Коротаев
Многих останавливает разработка на WASM, потому что придётся учить С или Rust, популярные в WASM-сообществе, но есть решение — AssemblyScript. Он позволяет писать на TypeScript и компилировать бинарн…
Я ❤︎ Фронтенд
58 min
Распутываем браузерные потоки
Полина Гуртовая
Многие что-то слышали про основной поток и о том, что его нельзя блокировать. Но что это на самом деле такое? Если есть основной, значит, есть и второстепенные? Попробуем разобраться и не запутаться.
PiterJS
30 min
Фоновые сервисы в браузерах — есть ли жизнь после закрытия вкладки?
Максим Сальников
Пользователь закрывает вкладку в браузере и ваше замечательное фронтенд-приложение испаряется. А что, если можно было бы оставить какие-то его части, и еще немного поработать во благо улучшения UX? О…
Chrome Dev Summit
25 min
Oh the things you’ll compile - modern WebAssembly
Thomas Nattestad, Ingvar Stepanyan
WebAssembly is an entirely new language format for the Web that lets you run languages that were previously impossible on the Web. Come to this talk to see how you can use WebAssembly in new ways, le…