Pull to refresh
0
0

Front-end Developer

Send message

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

Reading time9 min
Views23K

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

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

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

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

Читать далее
Total votes 13: ↑12 and ↓1+14
Comments9

DTO в JS

Reading time7 min
Views31K

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

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

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

Читать далее
Total votes 7: ↑4 and ↓3+2
Comments50

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

Reading time6 min
Views12K

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

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

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

Читать далее
Total votes 27: ↑16 and ↓11+6
Comments21

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

Reading time4 min
Views9.2K

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

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

Read more
Total votes 7: ↑5 and ↓2+7
Comments23

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

Reading time15 min
Views40K

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

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

Читать далее
Total votes 29: ↑28 and ↓1+32
Comments48

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

Reading time17 min
Views34K

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

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

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

Читать далее
Total votes 15: ↑11 and ↓4+10
Comments40

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

Reading time4 min
Views12K
Создавая сайты для малого бизнеса я сталкиваюсь с двумя крайностями. Но только я, как программист. Пользователи не сталкиваются, ведь нельзя столкнуться с тем чего для тебя не существует. Первая крайность — это когда клиент покупает за 50$ в месяц очередной хостинг для Wordpress. Человек не знает, что для Wordpress не нужен специальный хостинг, что такой специальный хостинг как правило хуже чем обычный хостинг и содержит кучу ограничений и стоит дороже. Вторая крайность — это когда используется JAM-стэк ради экономии. Но это экономия в плохом смысле этого слова, когда вы экономите на спичках, используя генератор для питания паяльника, от которого вы прикуриваете.
Читать дальше →
Total votes 18: ↑10 and ↓8+10
Comments38

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

Reading time16 min
Views23K


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

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

Оглавление


Читать дальше →
Total votes 5: ↑3 and ↓2+4
Comments6

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

Reading time9 min
Views12K


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


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

Читать дальше →
Total votes 9: ↑8 and ↓1+13
Comments1

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

Reading time8 min
Views23K


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

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

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

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

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

Reading time7 min
Views53K

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


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


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

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

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

Reading time12 min
Views14K

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

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

Читать далее
Total votes 30: ↑29 and ↓1+37
Comments15

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

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



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

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

Reading time4 min
Views20K

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

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

А как же React?
Total votes 14: ↑10 and ↓4+10
Comments13

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

Reading time8 min
Views11K

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

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

Читать далее
Total votes 9: ↑8 and ↓1+11
Comments1

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

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



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

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

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

image


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


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

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

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

Reading time9 min
Views55K


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

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

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

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

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

Reading time4 min
Views469K


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

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

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

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

Ну, приступим.
Читать дальше →
Total votes 57: ↑52 and ↓5+54
Comments26

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

Reading time12 min
Views48K

image


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


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


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

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

Information

Rating
Does not participate
Location
Киев, Киевская обл., Украина
Date of birth
Registered
Activity