Как стать автором
Обновить
0
0

Front-end Developer

Отправить сообщение

Улучшаем дизайн React приложения с помощью Compound components

Время на прочтение9 мин
Количество просмотров23K

Сегодня я хочу рассказать про один не очень популярный но очень классный паттерн в написании React приложений - Compound components.

Что это вообще такое

Compound components это подход, в котором вы объединяете несколько компонентов одной общей сущностью и общим состоянием. Отдельно от этой сущности вы их использовать не можете, тк они являются единым целым. Это как в BEM нельзя использовать E - элемент, отдельно от B - блока.

Самый наглядный пример такого подхода, который знают все фронты - это select с его option в обычном HTML.

Читать далее
Всего голосов 13: ↑12 и ↓1+14
Комментарии9

DTO в JS

Время на прочтение7 мин
Количество просмотров31K

Информационные системы предназначены для обработки данных, а DTO (Data Transfer Object) является важным концептом в современной разработке. В “классическом” понимании DTO являются простыми объектами (без логики), описывающими структуры данных, передаваемых “по проводам” между разнесенными процессами (remote processes). Зачастую данные "по проводам" передаются в виде JSON.

Если DTO используются для передачи данных между слоями приложения (база данных, бизнес-логика, представления), то, по Фаулеру, это называется LocalDTO. Некоторые разработчики (включая самого Фаулера) негативно относятся к локальным DTO. Основным отрицательным моментом локального применения DTO является необходимость маппинга данных из одной структуры в другую при их передаче от одного слоя приложения к другому.

Тем не менее, DTO являются важным классом объектов в приложениях и в этой статье я покажу JS-код, который на данный момент считаю оптимальным для DTO (в рамках стандартов ECMAScript 2015+).

Читать далее
Всего голосов 7: ↑4 и ↓3+2
Комментарии50

Почему принципы SOLID не являются надежным решением для разработки программного обеспечения

Время на прочтение6 мин
Количество просмотров12K

Роберт Мартин представил принципы SOLID в 2000 году, когда объектно-ориентированное программирование стало настоящим искусством для программистов. Каждый хочет создать что-то долговечное, которое можно использовать повторно, насколько это возможно, с минимальными изменениями, которые потребуются в будущем. SOLID - идеальное название для этого.

Фактически, объектно-ориентированное программирование работает лучше всего, когда мы можем отделить то, что останется, от того, что изменится. Принципы SOLID помогают разделять это.

Мне лично нравится идея, лежащая в основе принципов SOLID и я многому из нее научился.

Читать далее
Всего голосов 27: ↑16 и ↓11+6
Комментарии21

Что выбрать: глобальные переменные или useThis?

Время на прочтение4 мин
Количество просмотров9.1K

Привет, Хабр!

Как вы знаете при переходе с компонентов классов на функциональные, у нас отняли такую полезную вещь как this, которая указывает на текущий экземпляр компонента. И конечно у нас возник вопрос: “а где же тогда хранить timeoutId?”. И я видел как люди по разному выкручивались из этой проблемы (Данная статья, является расшифровкой видео)

Read more
Всего голосов 7: ↑5 и ↓2+7
Комментарии23

Архитектурный паттерн Dependency Injection в React-приложении

Время на прочтение15 мин
Количество просмотров39K

Расшифровка доклада Сергея Нестерова с конференции FrontendLive 2020.

Привет! Меня зовут Сергей, уже больше двух лет я работаю в группе компаний Тинькофф. Моя команда занимается разработкой системы для анализа качества обслуживания клиентов в Тинькофф, и, как вы, наверное, догадались, мы используем React в своем приложении. Не так давно мы внедрили в свой проект архитектурный паттерн Dependency Injection совместно с IoC-контейнерами. Сделали мы это не просто так: это позволило нам решить ряд проблем, которые тормозили разработку нового функционала.

Читать далее
Всего голосов 29: ↑28 и ↓1+32
Комментарии48

Перепрошивка ограничивающих убеждений. Прокрастинация или как мотивировать себя на действия

Время на прочтение17 мин
Количество просмотров34K

Как часто мы задаемся вопросом о том, почему порой так сложно настроить себя на некоторые виды деятельности?

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

Мы можем часами тратить время на различные и не всегда полезные занятия. И делаем это практически на автомате. А потом ругаем себя за то, что в очередной раз потратили продуктивное время на непродуктивные дела. Сталкиваясь с подобным поведением, мы даем себе обещание, что в следующий раз займемся тем, что запланировали. Вместо этого делаем то, что делали раньше.

Читать далее
Всего голосов 15: ↑11 и ↓4+10
Комментарии40

JAM-стэк — нищета на стероидах

Время на прочтение4 мин
Количество просмотров12K
Создавая сайты для малого бизнеса я сталкиваюсь с двумя крайностями. Но только я, как программист. Пользователи не сталкиваются, ведь нельзя столкнуться с тем чего для тебя не существует. Первая крайность — это когда клиент покупает за 50$ в месяц очередной хостинг для Wordpress. Человек не знает, что для Wordpress не нужен специальный хостинг, что такой специальный хостинг как правило хуже чем обычный хостинг и содержит кучу ограничений и стоит дороже. Вторая крайность — это когда используется JAM-стэк ради экономии. Но это экономия в плохом смысле этого слова, когда вы экономите на спичках, используя генератор для питания паяльника, от которого вы прикуриваете.
Читать дальше →
Всего голосов 18: ↑10 и ↓8+10
Комментарии38

Кастомные хуки. Part 1

Время на прочтение16 мин
Количество просмотров23K


Доброго времени суток, друзья!

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

Оглавление


Читать дальше →
Всего голосов 5: ↑3 и ↓2+4
Комментарии6

Мобильные танки и тесты: интервью о тестировании World of Tanks Blitz

Время на прочтение9 мин
Количество просмотров12K


У всех есть какое-то представление о франшизе World of Tanks. Но, как правило, оно «снаружи» (пользовательское) и общее. А что, если посмотреть изнутри, и рассмотреть какие-то очень конкретные вопросы? Скажем, на каком языке пишут тесты для мобильной World of Tanks Blitz, и по каким причинам выбрали его?


Студия разработки мобильных «танков» MS-1 компании Wargaming присутствовала на нашей конференции Heisenbug, и там мы позадавали такие вопросы Дмитрию Сычеву — Lead QA Automation в World of Tanks Blitz. А теперь решили для Хабра сделать и текстовую версию этого небольшого разговора.

Читать дальше →
Всего голосов 9: ↑8 и ↓1+13
Комментарии1

Я 20 лет наслаждаюсь разнообразием архитектур и хочу поделиться мыслями

Время на прочтение8 мин
Количество просмотров23K


Сначала хотел написать комментарий к статье "Я десять лет страдал от ужасных архитектур в C#...", но понял две вещи:

  1. Слишком много мыслей, которыми хочется поделиться.
  2. Для такого объёма формат комментария неудобен ни для написания, ни для прочтения.
  3. Давно читаю Хабр, иногда комментирую, но ни разу не писал статей.
  4. Я не силён в нумерованных списках.

Disclaimer: я не критикую @pnovikov или его задумку в целом. Текст качественный (чувствуется опытный редактор), часть мыслей разделяю. Архитектур много, но это нормально (да, звучит как название корейского фильма). 

Однако давайте по порядку. Сначала моё мнение о том, что влияет на архитектуру, потом про спорные моменты в статье об «исправлении архитектур». Ещё расскажу о том, что у нас хорошо работает — может, пригодится кому-нибудь.
Читать дальше →
Всего голосов 36: ↑35 и ↓1+42
Комментарии60

Прототипы в JS и малоизвестные факты

Время на прочтение7 мин
Количество просмотров52K

Лирическое вступление 


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


Оказалось, что есть много неочевидных вещей из старых времён ES5 и даже ES6, о которых я не слышал. А еще оказалось, что вывод консоли браузера может не соответствовать действительности.

Читать дальше →
Всего голосов 19: ↑19 и ↓0+19
Комментарии10

Как перенести на TypeScript большую кодовую базу React UI-компонентов

Время на прочтение12 мин
Количество просмотров14K

Привет! Меня зовут Иван Греков, я работаю UI-разработчиком в frontend-команде Badoo. Главные задачи нашей команды — создание новых и поддержка существующих пользовательских интерфейсов для сайтов и приложений Badoo и Bumble. 

Когда в конце 2019 года мы начали параллельно работать над несколькими проектами, мы задумались над повышением стабильности кода и возможностью его многократного использования. Для этого мы решили переписать наши 630 React UI-компонентов на TypeScript. Я расскажу о том, как мы работали над ними без перерыва в доставке фич и как организовали поэтапный переход на TypeScript для UI-разработчиков, которым этот язык был в новинку.

Читать далее
Всего голосов 30: ↑29 и ↓1+37
Комментарии15

6 рекомендаций по разработке масштабируемых React-проектов

Время на прочтение7 мин
Количество просмотров9.2K
В начале работы над новым React-проектом рекомендуется сформулировать инструкции, следуя которым можно будет создать приложение, хорошо поддающееся масштабированию.



В этом материале я хочу поделиться знаниями о React-разработке, накопленными за годы использования этой библиотеки. Они помогут вам в формировании вашего собственного свода правил по разработке React-приложений.
Читать дальше →
Всего голосов 17: ↑16 и ↓1+25
Комментарии47

React: слоты как у сына маминой подруги

Время на прочтение4 мин
Количество просмотров20K

При композиции компонентов очень часто возникает задача точечной кастомизации содержимого какого-либо компонента. Например, у нас есть компонент DatePicker, и в разных частях веб-приложения нам нужно отображать разные кнопки "Применить".

Для решения подобных задач в каждой популярной технологии сегодня применяется концепция "слотов". У Angular есть ngContent, во Vue, Svelte и WebComponents есть слоты.

А как же React?
Всего голосов 14: ↑10 и ↓4+10
Комментарии13

Обработка ошибок в JavaScript

Время на прочтение8 мин
Количество просмотров11K

Привет, Хабр!

Тема обработки ошибок в JavaScript возникает не только у каждого новичка, но и матерого разработчика. Замечу, что тема уже довольно заезжена, поэтому я позволю себе резюмировать в кратком изложении все, что действительно эффективно и проверено в бою мною, коллегами и гуру IT.

Читать далее
Всего голосов 9: ↑8 и ↓1+11
Комментарии1

Архитектура современных корпоративных Node.js-приложений

Время на прочтение12 мин
Количество просмотров95K
Ох, не зря в названии намёк на нетленку Фаулера. И когда фронтенд-приложения успели стать настолько сложными, что мы начали рассуждать о высоких материях? Node.js… фронтенд… погодите, но Нода же на сервере, это бэкенд, а там ребята и так всё знают!



Давайте по порядку. И сразу небольшой дисклеймер: статья написана по мотивам моего выступления на Я.Субботнике Pro для фронтенд-разработчиков. Если вы занимаетесь бэкендом, то, возможно, ничего нового для себя не откроете. Здесь я попробую обобщить свой опыт фронтендера в крупном энтерпрайзе, объяснить, почему и как мы используем Node.js.
Читать дальше →
Всего голосов 42: ↑41 и ↓1+51
Комментарии64

Прогрессивная загрузка XML страниц

Время на прочтение14 мин
Количество просмотров3.5K
Прогрессивная загрузка XML страниц — это загрузка с одновременным показом уже загруженных и обработанных частей XML страницы пока XSLT шаблон всё ещё обрабатывает остальные части.

image


У нас есть очень большой XML. Это статья с очень большим количеством комментариев. На медленном и нестабильном мобильном интернете её загрузки можно и не дождаться. Во время загрузки случается обрыв связи и XML остаётся не догруженным. Казалось бы можно просто обновить страницу и браузер бы просто догрузил недостающую часть. Но нет. Браузер грузит страницу заново и снова это не удаётся и мы видим ошибку вместо страницы.


Но выход из этой ситуации есть. Мы разделим XML на маленькие кусочки которые будут успевать загрузиться на медленном канале и попадут в кеш. Бонусом мы получаем защиту от недогруза и прогрессивную загрузку.

Читать дальше →
Всего голосов 5: ↑4 и ↓1+7
Комментарии0

Как устроен балансировщик команд в World of Tanks Blitz

Время на прочтение9 мин
Количество просмотров55K


WoT Blitz — это мобильный танковый шутер, в котором игроки сражаются в формате 7 на 7.
Матчмейкер, или балансировщик это механизм, который на основе очереди игроков, желающих попасть в бой, формирует состав команд.

У танков есть следующие важные для матчмейкинга параметры:

  • Уровень. В зависимости от уровня, у танков меняются различные характеристики (например, скорость, бронепробитие). На 1-ом уровне — самые слабые танки, на 10-ом — самые сильные.
  • Тип. В WoT Blitz существует 4 типа танков: лёгкий, средний, тяжёлый и ПТ-САУ (противотанковые самоходные артиллерийские установки)

Самая простая реализация матчмейкера — закидывание игроков в команды случайным образом. Но в данном случае у игроков на низких уровнях не будет никаких шансов нанести хоть какой-то урон, и играть станет неинтересно.
Читать дальше →
Всего голосов 24: ↑22 и ↓2+20
Комментарии31

Принципы SOLID в картинках

Время на прочтение4 мин
Количество просмотров460K


Если вы знакомы с объектно-ориентированным программированием, то наверняка слышали и о принципах SOLID. Эти пять правил разработки ПО задают траекторию, по которой нужно следовать, когда пишешь программы, чтобы их проще было масштабировать и поддерживать. Они получили известность благодаря программисту Роберту Мартину.

В Сети множество отличных статей, где рассказывается о принципах SOLID, но иллюстрированных среди них мне практически не попадалось. Из-за этого таким людям со склонностью к визуальному восприятию информации – таким, как я – бывает сложно схватывать суть и не отвлекаться.

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

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

Ну, приступим.
Читать дальше →
Всего голосов 57: ↑52 и ↓5+54
Комментарии26

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

Время на прочтение12 мин
Количество просмотров48K

image


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


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


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

Читать дальше →
Всего голосов 22: ↑21 и ↓1+23
Комментарии14

Информация

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