Pull to refresh
21
0
Сергей Радченко @avrelian

User

Send message

Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite

Reading time11 min
Views48K

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…


В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.


Читать дальше →
Total votes 22: ↑21 and ↓1+20
Comments5

Децентрализованная конфигурация webpack или как упростить сборку проекта

Reading time8 min
Views8.8K

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

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

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

Если вам хочется сделать работу со сборкой проще и надёжнее при модификациях, то добро пожаловать под кат.

Читать далее
Total votes 51: ↑51 and ↓0+51
Comments19

Мой опыт технического собеседования: как не превратить его в экзамен и найти профпригодного сотрудника

Reading time21 min
Views28K
image

Привет, Хабр! Меня зовут Леонид Титов, я бэкенд разработчик в #CloudMTS. Так уж сложилось, что я не только пишу код, но и иногда собеседую кандидатов. Мне нравится процесс, и, думаю, у меня это получается.

Начал я этим заниматься ещё на предыдущем месте работы, где мы с тимлидом собирали новую команду. С тех пор прошло уже N лет, практика продолжилась, и после очередного собеседования я решил упорядочить свои знания. Кто-то считает, что от собеседований вообще толку нет, а кто-то наоборот (не будем показывать пальцем) проводит их в 3-5 раундов. Я уверен, что собеседования нужны, но важно четко понимать, зачем именно.

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

Еще я поделюсь неожиданными впечатлениями от ситуации, когда оказался «по ту сторону», лайфхаками, фейлами и неплохо зарекомендовавшими себя практиками. Про soft skills тут ничего не будет — это отдельная важная тема. Прежде всего мы затронем вопрос профпригодности, определения ее наличия или отсутствия. Во второй половине статьи приведу собственный список вопросов, переведенный на русский, с комментариями.
Читать дальше →
Total votes 60: ↑48 and ↓12+36
Comments68

Chrome DevTools: Хитрости при отладке

Reading time7 min
Views45K

В сети полно обзоров Chrome DevTools, которые демонстрируют многочисленные возможности этого прекрасного инструмента. DevTools настолько большие, что познать их полностью, как мне кажется, уже почти невозможно.

В этой заметке я бы хотел остановиться на различных нюансах, полезных при отладке. Какие-то из них я почерпнул в сети (например в комментариях на Хабре), до каких-то додумался сам. Надеюсь вы найдёте для себя что-нибудь полезное.

Под катом:

— Как отладить popup-ы, которые исчезают при потере фокуса
— Как убить повисший JS-цикл, не убивая вкладку
— Различные нюансы работы с breakpoint-ми
— Методы ведения войны с sourceMaps
— Перехват network-запросов
— Как отладить race-condition
— Почему стоит опасаться галочки "disable cache"
— Что делать если у вас не Hi-DPI экран?

Подробнее
Total votes 50: ↑49 and ↓1+48
Comments41

22 интересные фичи, которые стоит добавить в Telegram

Reading time7 min
Views58K


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

Читать дальше →
Total votes 12: ↑9 and ↓3+6
Comments108

Как развитие алгоритмов сжатия остановилось 20 лет назад, или о новом конкурсе на 200 тысяч евро

Reading time18 min
Views70K

В октябре прошлого года я опубликовал статью «О талантах, деньгах и алгоритмах сжатия данных», где с юмором описал, как «изобретают» новые алгоритмы сжатия люди, не имеющие достаточно навыков для реализации своих идей. А заодно рассказал про существующие конкурсы по новым алгоритмам, в том числе двигавшийся тогда к завершению конкурс алгоритмов сжатия с призовым фондом 50 тысяч евро.

Пост набрал 206 «плюсов», вышел на 2 место топа недели и вызвал оживленную дискуссию, в которой мне больше всего понравился комментарий: «Коммерческого интереса эффективность по сжатию алгоритмов сжатия без потерь сегодня не представляет, в силу отсутствия принципиально более эффективных алгоритмов. Деньги сегодня — в сжатии аудио-видео. И там и алгоритмы другие. Тема сжатия без потерь удобна именно лёгкостью верификации алгоритма, и не слегка устарела. Лет на 20.» 

Поскольку я сам уже 20 лет в области сжатия видео, с ее бурным развитием мне спорить сложно. А вот что сжатие без потерь развиваться перестало… Хотя логика тут понятна каждому. Я до сих пор пользуюсь ZIP, все мои друзья пользуются ZIP с 1989 года — значит, ничего нового не появляется. Так ведь? Похоже рассуждают сторонники плоской земли. ))) Я не видел, знакомые не видели, и даже некоторые авторитеты утверждают, значит, это так! 

О том, как Intel просили меня не прекращать читать курс по сжатию, ибо людей нет новые алгоритмы делать, я в прошлый раз писал. Но тут и Huawei в ту же дуду дует! Вместо того, чтобы раздать призы и должности победителям, а затем успокоиться, поскольку развитие давно встало, эти эксцентричные люди посчитали конкурс крайне успешным и запустили новый с призовым фондом 200 тысяч EUR.

Развивались ли алгоритмы сжатия без потерь в последние 20 лет? Чем закончился прошлый конкурс и на сколько опередили baseline? Сколько денег получили русские таланты, а сколько зарубежные? И есть ли вообще жизнь на Марсе в сжатии без потерь? 

Кому интересно — добро пожаловать под кат! 
Читать дальше →
Total votes 259: ↑258 and ↓1+257
Comments134

Приёмы ускорения кода на JS и других языках: подборка от разработчика поиска Яндекса

Reading time17 min
Views66K
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript. То, что получилось в итоге, собрано в этом материале.

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


Читать дальше →
Total votes 80: ↑80 and ↓0+80
Comments51

Шпаргалка по функциональному программированию

Reading time23 min
Views37K

Привет, меня зовут Григорий Бизюкин, я преподаватель Школы разработки интерфейсов и фронтенд-разработчик в Яндексе. Давайте поговорим о функциональном программировании в мире JavaScript. Мы все про ФП что-то слышали, нам всем оно интересно, но у меня, когда я искал полезные материалы для подготовки к лекциям, сложилось такое впечатление: есть куча статей, каждая из которых либо говорит об ФП общими словами, либо раскрывает отдельный маленький кусочек темы, чего, конечно, недостаточно.



Добавим функционального света


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

Читать дальше →
Total votes 39: ↑36 and ↓3+33
Comments18

Модуляризация iOS-приложения: зачем и как мы разбиваем Badoo на модули

Reading time12 min
Views9.5K

В iOS-разработке Badoo мы уже несколько лет занимаемся созданием модулей, и большая часть нового кода разрабатывается вне кодовой базы приложений. Сейчас у нас более 100 модулей для Badoo и Bumble. В этой статье я расскажу о нашем опыте и отвечу на самые популярные вопросы о модуляризации: 

— по какому принципу выделять модули; 

— как организовать связи между ними; 

— достаточно ли для фичи одного фреймворка; 

— как сократить время запуска многомодульного приложения; 

— зачем в этом процессе мониторинг;

— можно ли автоматизировать создание новых модулей и так далее. 

Мой коллега, лид команды iOS-разработки и Core-команды Артем Лоенко, в начале года говорил об этом на митапе FunCorp в докладе «Катастрофически полезные последствия модуляризации». Я приведу более подробный разбор процесса модуляризации и некоторых опущенных в его рассказе деталей.

Читать далее
Total votes 25: ↑24 and ↓1+23
Comments8

Чаты на вебсокетах, когда на бэкенде WAMP. Теперь про Android

Reading time7 min
Views6.8K

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

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

Читать далее
Total votes 50: ↑50 and ↓0+50
Comments3

Чаты на вебсокетах в iOS, если у вас WAMP

Reading time7 min
Views4.6K


Разработка заняла примерно 9 месяцев, а я занимался реализацией клиент-серверного общения по сокету для iOS. Особенности нашей ситуации:

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

Примечание: описанные ниже способы декодирования, можно применить и в других задачах.
Читать дальше →
Total votes 44: ↑44 and ↓0+44
Comments18

Код на React и TypeScript, который работает быстро. Доклад Яндекса

Reading time16 min
Views27K
Евангелисты Svelte и других библиотек любят показывать примеры тормозящих компонентов на React. React и TypeScript дают много возможностей создавать медленный код. После доклада Виктора victor-homyakov вы сможете писать более производительные компоненты без усложнения кода.

— Здравствуйте, меня зовут Виктор, я один из разработчиков страницы поиска Яндекса. На ней каждый день сотни миллионов пользователей вводят свои запросы, получают страницу со ссылками или сразу с правильными ответами. Из-за такого количества запросов нам очень важно, чтобы наш код работал оптимально. И, конечно, я сразу должен затронуть тему преждевременной оптимизации кода.
Читать дальше →
Total votes 25: ↑24 and ↓1+23
Comments30

Micro-frontends. Асинхронный подход к мультикомандной разработке

Reading time12 min
Views6.8K

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

Читать дальше →
Total votes 7: ↑4 and ↓3+1
Comments19

Jupyter для .NET. «Как в питоне»

Reading time3 min
Views8.8K
Несколько месяцев назад Microsoft рассказали о Jupyter в .NET. Но активности по этому топику очень мало, а ведь тема очень интересная. Но что такое прикольное придумать? Я решил сделать удобный вывод класса Entity из библиотеки символьной алгебры:



Выглядит круче, чем в питоне. Делается просто, доставляет массу удовольствия. Приглашаю под кат!
Читать дальше →
Total votes 24: ↑24 and ↓0+24
Comments11

Как приручить Charles Proxy?

Reading time10 min
Views305K
Привет! Многие из тех, кто приходит к нам на собеседование на должность тестировщика, с гордостью заверяют, что они могут пользоваться Charles Proxy. Но когда погружаешься в техническую часть, то становится очевидно, что кандидат только слышал об этом инструменте. Давайте уже наконец скорее приручим эту вазу!


Читать дальше →
Total votes 27: ↑27 and ↓0+27
Comments25

RBK.money выпустила первый в мире open-source платежный процессинг — творим будущее вместе

Reading time15 min
Views40K


Привет!


Если вы читали наши предыдущие посты (читали же?), то точно помните, что мы в RBK.money очень сильно за опенсорс. Настолько, что выложили в открытый доступ наш антифрод в виде открытых исходников под лицензией Apache 2.0.


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


Зачем мы это сделали? Как это работает внутри? Как теперь жить дальше? Читайте под катом. Я гарантирую, что такого вы еще не встречали — еще никто в мире не опенсорсил платежную систему такого уровня.


История меняется прямо сейчас на ваших глазах!

Читать дальше →
Total votes 86: ↑84 and ↓2+82
Comments43

Современные архитектуры фронт-энда

Reading time12 min
Views47K

image


В статье "Contemporary Front-end Architectures" рассмотрены архитектуры фронт-энда с точки зрения потоков данных в исторической ретроспективе.


Материал состоит из трех частей


  1. Теория и история
  2. Реализация
  3. Перспективы

Читать дальше →
Total votes 25: ↑24 and ↓1+23
Comments14

Чистая Архитектура для веб-приложений

Reading time36 min
Views102K
Хочу поделиться с вами подходом который я уже много лет использую в разработке приложений, в том числе и веб-приложений. Многим разработчикам настольных, серверных и мобильных приложений этот подход хорошо знаком, т.к. является фундаментальным при построении таких приложений, однако в вебе он представлен очень скудно, хотя желающие использовать такой подход однозначно есть. Кроме того на таком подходе написан редактор VS Code.

Чистая Архитектура

В результате применения этого подхода вы отвяжетесь от конкретного фреймворка. Сможете легко переключать библиотеку представления внутри вашего приложения, например React, Preact, Vue, Mithril без переписывания бизнес логики, а в большинстве случаев даже вьюхи. Если у вас есть приложение на Angular 1, вы без проблем сможете перевести его на Angular 2+, React, Svelte, WebComponents или даже свою библиотеку представления. Если у вас есть приложение на Angular 2+, но нету специалистов для него, то вы без проблем сможете перевести приложение на более популярную библиотеку без переписывания бизнес логики. А в итоге вообще забыть про проблему миграции с фремворка на фреймворк. Что же это за магия такая?
Читать дальше →
Total votes 24: ↑20 and ↓4+16
Comments80

Понижаем барьеры на вход в распознавание речи

Reading time15 min
Views18K

image


Автоматическое распознавание речи (STT или ASR) прошло долгий путь совершенствования и имеет довольно обширную историю. Расхожим мнением является то, что лишь огромные корпорации способны на создание более-менее работающих "общих" решений, которые будут показывать вменяемые метрики качества вне зависимости от источника данных (разные голоса, акценты, домены). Вот несколько основных причин данного заблуждения:


  • Высокие требования к вычислительным мощностям;
  • Большое количество данных, необходимых для обучения;
  • В публикациях обычно пишут только про так называемые state-of-the-art решения, имеющие высокие показатели качества, но абсолютно непрактичные.

В данной статье мы развеем некоторые заблуждения и попробуем немного приблизить точку "сингулярности" для распознавания речи. А именно:


  • Расскажем, что можно достигнуть отличного результата в рамках разумного времени, используя лишь две видеокарты NVIDIA GeForce 1080 Ti;
  • На всякий случай еще раз представим датасет Open STT для русского языка на 20 000 часов;
  • Опишем различные подходы, позволяющие ускорить процесс тренировки STT на порядок.

В этой статье есть 3 основных блока — критика литературы и доступных инструментов, паттерны для проектирования своих решений и результаты нашей модели.

Читать дальше →
Total votes 24: ↑24 and ↓0+24
Comments40

Экосистема Low-Code решений

Reading time8 min
Views20K
image

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

Я бы хотел рассмотреть, что это за инструменты, как именно они помогают, и какие выглядят наиболее многообещающе.
Читать дальше →
Total votes 4: ↑4 and ↓0+4
Comments0
1
23 ...

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity