Как стать автором
Обновить
55
Карма
0
Рейтинг
Ник Мостовой @xnim

Пользователь

Перфоманс фронтенда как современное искусство: графики, код, кулстори

Блог компании HeadHunter JavaScript *Клиентская оптимизация *Node.JS *ReactJS *

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


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


  • Перфоманс приложения
  • Инфраструктура: сборка, тесты, пайплайны, раскатка на продакшене, инструменты для разработчика (например бабель-плагины, кастомные eslint правила)
  • Дизайн-система (UIKit)
  • Переезд на новые технологии

Если покопаться, можно найти много интересного.


Поэтому, давайте поговорим о перфомансе. Команда фронтенд архитектуры ответственна как за клиентскую часть, так и серверную (SSR).


Я предлагаю посмотреть на метрики и разобраться, как мы реагируем на различные триггеры. Статья будет разбита на 2 составляющие. Серверную и клиентскую. Графики, код и кулстори прилагаются.


Читать дальше →
Всего голосов 14: ↑13 и ↓1 +12
Просмотры 8.5K
Комментарии 6

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

Разработка веб-сайтов *CSS *JavaScript *Клиентская оптимизация *
Туториал

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


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


Читать дальше →
Всего голосов 22: ↑21 и ↓1 +20
Просмотры 28K
Комментарии 5

Оптимизация производительности фронтенда. Часть 1. Critical Render Path

Блог компании HeadHunter Разработка веб-сайтов *CSS *JavaScript *Клиентская оптимизация *
Туториал

Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru.


Записи наших лекций от 2018-2019 учебного года можно посмотреть на youtube


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



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


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


  1. Зачем думать о производительности
  2. FMP, TTI + подробнее в докладе
  3. Critical render path, DOM, CSSOM, RenderTree
  4. Шаги по улучшению производительности первой загрузки + подробнее в докладе
Читать дальше →
Всего голосов 19: ↑18 и ↓1 +17
Просмотры 32K
Комментарии 10

Предвзятый и субъективный взгляд на резюме разработчика

Блог компании HeadHunter Карьера в IT-индустрии IT-компании

Привет! Недавно мои коллеги из hh.ru провели вебинар, где разбирали резюме разработчика. Я решил поделиться своей точкой зрения на этот счет.


image


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

Читать дальше →
Всего голосов 37: ↑31 и ↓6 +25
Просмотры 24K
Комментарии 30

Работа с callbacks в React

Блог компании HeadHunter JavaScript *ReactJS *
Туториал

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


Поэтому в данной статье мы разберемся, как передаются callbacks в React, а также обсудим особенности работы event handlers.

Читать дальше →
Всего голосов 29: ↑29 и ↓0 +29
Просмотры 50K
Комментарии 5

Разбор конкурса-квиза по React со стенда HeadHunter на HolyJs 2018

Блог компании HeadHunter JavaScript *ReactJS *

Привет. 24–25 сентября в Москве прошла конференция фронтенд-разработчиков HolyJs https://holyjs-moscow.ru/. Мы на конференцию пришли со своим стендом, на котором проводили quiz. Был основной квиз — 4 отборочных тура и 1 финальный, на котором были разыграны Apple Watch и конструкторы лего. И отдельно мы провели квиз на знание react.


Под катом — разбор задач квиза по react. Правильные варианты будут спрятаны под спойлером, поэтому вы можете не только почитать разбор, но и проверить себя :)


image


Поехали!

Читать дальше →
Всего голосов 17: ↑16 и ↓1 +15
Просмотры 5.4K
Комментарии 5

Keys in React. Готовим правильно

Блог компании HeadHunter JavaScript *ReactJS *
Туториал

Сегодня поговорим об атрибуте key в React. Часто разработчики, которые только начинают использовать React, не придают большого значения атрибуту key. А зря…


image
Что говорит уточка, когда узнала, что ты не используешь key


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


  1. Reconciliation
  2. Реиспользование ключей и нормализация
  3. Использование key при рендере одного элемента
  4. Работа с ключами при передаче компоненту children
Всего голосов 33: ↑33 и ↓0 +33
Просмотры 67K
Комментарии 1

Нянчим проект на React-redux с пелёнок

Блог компании HeadHunter JavaScript *Программирование *ReactJS *
intro
В начале этого года мы в HeadHunter начали проект, нацеленный на автоматизацию различных HR-процессов у компаний-клиентов. Архитектурой этого проекта на фронте выбрали React-Redux стек.

За 9 месяцев он вырос из небольшого приложения для тестирования сотрудников в многомодульный проект, который сегодня называется “Оценка талантов”. По мере его роста мы сталкивались с вопросами:

  • хранения стейта, его нормализации;
  • построения масштабируемой архитектуры проекта, удобной иерархии — как в структуре, так и в бизнес-логике.

Это проявлялось в изменении подхода к построению компонентов, архитектуры редьюсеров.

Давайте поговорим о том, как мы развивали проект и какие решения принимали. Некоторые из них могут оказаться “холиварными”, а другие, напротив, “классикой” в построении большого проекта на redux. Надеюсь, что описанные ниже практики помогут вам при построении react-redux приложений, а живые примеры помогут разобраться, как работает тот или иной подход.
Читать дальше →
Всего голосов 32: ↑29 и ↓3 +26
Просмотры 65K
Комментарии 32

Unit тестирование в js. YATS — поделка для написания юнит тестов

JavaScript *Node.JS *
Добрый день!

Начать свою статью я хочу с небольшого вступления. Вы помните, какими были сайты лет 10 назад? а пять? Если сайты и содержали какую-то js логику, то она была проста и наивна. На сегодняшний день каждый второй — это не просто статические данные, это большое динамическое содержимое, с «кучей» js логики.

За 5-8 лет JavaScript перестал быть языком для анимирования снежинок под новый год и преобразовался в довольно популярный и востребованный язык программирования, с большим коммьюнити.

Любой код можно сделать лучше, если покрыть его тестами. Код, покрытый тестами проще рефакторить, при написании tests first можно писать удобный расширяемый код.

В таких задачах хорошо помогает UNIT-тестирование.

На сегодняшний день существует множество фреймворков для unit тестирования js кода. В данной статье я бы хотел описать свое видение небольшой библиотеки для тестирования js кода.
Читать дальше →
Всего голосов 9: ↑6 и ↓3 +3
Просмотры 5.8K
Комментарии 27

Верстка для самых маленьких. Верстаем страницу по БЭМу

CSS *HTML *
Туториал
Недавно хабраюзер Mirantus написал статью «Как сверстать веб-страницу», в которой рассказывал о том, как же сверстать веб-страничку. В его статье было подробно рассмотрено, как выделить отдельные элементы из заданного шаблона, подобрать шрифты и т.п. Однако его подход к написанию, собственно, веб-страницы мне показался не очень хорошим, о чем я написал в комментариях.

В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

  • BEM
  • Собственно пример — как сверстать страницу

Читать дальше →
Всего голосов 154: ↑133 и ↓21 +112
Просмотры 375K
Комментарии 172

Организуем выделение текста в textarea

CSS *JavaScript *
Туториал
Добрый день.

В разработке интерфейсов иногда можно встретиться с задачей выделения вводимого пользователем текста в зависимости от определенных условий. (Например, была реализована серверная проверка грамматики, либо необходимо выделять определенным цветом те или иные слова\участки и т.д.)
Однако, элемент textarea не поддерживает html\bb теги. Как один из способов решения — использование contenteditable в элементах div.
В данной небольшой статье я предлагаю более-менее подробно рассмотреть способ выделения текста, используя textarea.
Читать дальше →
Всего голосов 37: ↑35 и ↓2 +33
Просмотры 23K
Комментарии 14

Пишем HTML-виджет для приложения IBOOK Author

JavaScript *HTML *
Туториал
Ни для кого не секрет, что печатные книги уходят в прошлое. Им на смену приходит новое поколение устройств (а вместе с ними и программ), которые позволяют не только прочитать материал, подобно книге, но и разнообразить чтение интерактивными вставками. Это может быть как и некий динамически изменяющийся материал (лента твиттера и т.п.), так и некое интерактивное содержание (анимация работы конденсатора и т.п.)
Компания Apple выпустило приложение IBOOK Author, которое позволяет делать интерактивные книги для приложения IBOOKS устройств IPAD. Сегодня я предлагаю познакомиться с тем, как же создавать HTML-виджеты для данного приложения на примере виджета твиттера.
Для создания виджетов существует множество программ, стоимость которых варьируется от 0 (Dashcode) до 60 (Tumult Hype).
Создавать же свой виджет мы будем «вручную», без использования специализированных программ.
Теперь предлагаю перейти от слов к делу.
Читать дальше →
Всего голосов 7: ↑5 и ↓2 +3
Просмотры 6.5K
Комментарии 0

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Зарегистрирован
Активность