Pull to refresh
10
0
Михаил Черноруцкий @r47717

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

Send message

10 React-компонентов на все случаи жизни

Reading time3 min
Views28K
Я полагаю, что для решения различных задач React-разработки лучше использовать маленькие узкоспециализированные инструменты, а не универсальные решения, предлагаемые библиотеками компонентов. Мне нравится выбирать компоненты самостоятельно, я не люблю читать длинную документацию, и мне хочется избежать бессмысленных обновлений библиотек, после которых в проекте нередко что-то ломается.



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

Материал, перевод которого мы сегодня публикуем, посвящён рассказу о 10 React-компонентах.
Читать дальше →
Total votes 46: ↑45 and ↓1+44
Comments15

Создание микро-фронтендов с использованием Angular Elements: руководство для начинающих

Reading time4 min
Views8.5K

За последние десять лет фронтенд-разработка значительно усложнилась: от чистого HTML/CSS до таких тем, как высокая интерактивность, доступность, тестируемость и безопасность. Чтобы удовлетворить эти потребности, большинство команд разработчиков делятся на бекенд и фронтенд команды.



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


Здесь я остановлюсь и без дальнейших прелюдий, давайте создадим пример микро-фронтенда с использованием Angular elements.

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

О 30-кратном увеличении параллелизма в Node.js

Reading time14 min
Views23K
Каков наилучший способ беспроблемного увеличения параллелизма в Node.js-сервисе, который используется в продакшне? Это — вопрос, на который моей команде понадобилось ответить пару месяцев назад.

У нас запущено 4000 контейнеров Node (или «воркеров»), обеспечивающих работу нашего сервиса интеграции с банками. Сервис изначально был спроектирован так, что каждый воркер был рассчитан на обработку только одного запроса за раз. Это снижало воздействие на систему тех операций, которые могли неожиданно заблокировать цикл событий и позволяло нам игнорировать различия в использовании ресурсов различными подобными операциями. Но, так как наши мощности были ограничены одновременным выполнением лишь 4000 запросов, система не могла достойно масштабироваться. Скорость выдачи ответов на большинство запросов зависела не от мощности оборудования, а от возможностей сети. Поэтому мы могли бы улучшить систему и снизить стоимость её поддержки в том случае, если бы нашли способ надёжной параллельной обработки запросов.



Занявшись исследованием этого вопроса, мы не смогли найти хорошего руководства, в котором речь шла бы о переходе от «отсутствия параллелизма» в сервисе Node.js к «высокому уровню параллелизма». В результате мы разработали собственную стратегию перехода, которая была основана на тщательном планировании, на хороших инструментах, на средствах мониторинга и на здоровой дозе отладки. В итоге нам удалось повысить уровень параллелизма нашей системы в 30 раз. Это эквивалентно снижению затрат на поддержку системы примерно на 300 тысяч долларов в год.

Данный материал посвящён рассказу о том, как мы увеличили производительность и эффективность наших Node.js-воркеров, и о том, что мы узнали, пройдя этот путь.
Читать дальше →
Total votes 66: ↑65 and ↓1+64
Comments23

Разработка REST API — что такое Contract First?

Reading time3 min
Views101K
Это третья статья из серии статей про REST API:


В этой статье мы рассмотрим подход к разработке REST API на основе контракта.

При разработке хорошего API REST важно иметь отличные микросервисы. Подход Contract First поможет вам разработать хороший контракт до его реализации. Однако это не так просто!


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

Как зеленый джуниор свой hot-reloader писал

Reading time7 min
Views9K

Предыстория


Пару строк обо мне для общего понимания уровня автора и решаемой проблемы.
Меня зовут Евгений и я веб-разработчик зеленый junior frontend developer.
Еще какой-то год назад я работал в совершенно другой сфере и только в теории задумывался о смене профессии, но примерно в декабре 2018 нашел свое и начал действовать.
Примерно через полгода тотального обучения я устраиваюсь работать frontend-программистом. За плечами обучение фундаментальным вещам(мне хочется так думать), js, взаимодействие с DOM, react+redux. HTML и CSS самый минимум+ общее понимание о bootstrap и сборке, работа с git, командной строкой.
Помимо теории сделано пара учебных проектов, в том числе чат на react+redux, а так же пара попыток реализации каких-то своих задумок.
В общем, такой себе стандартный современный джентельменский набор для начинающего front'a.
Первые полторы недели настраиваю виртуальную машину, там куча всего и все мне незнакомо и непонятно.
По ходу дела знакомлюсь с новыми инструментами и технологиями: с базами данных(и ставлю себе очередную закладку в список «выучить»), putty, wincsp и пр.
Успешно прохожу эту полосу препятствий и перехожу к фронту.

Предисловие


Уже написав свой релоадер и эту статью, я нашел аналоги в том числе на Хабре. Однако все-таки решил опубликовать свой велосипед.

Начало


У нас довольно большой проект, доставшийся в наследство, написанный на angularJS, со всеми его прелестями. Мне после React'а он показался динозавром, но ничего, покупаю курсы по angularjs, быстро въезжаю и начинаю приносить пользу.

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

Но и минусов хватает.
Читать дальше →
Total votes 24: ↑21 and ↓3+18
Comments32

14 советов по написанию чистого React-кода. Часть 1

Reading time12 min
Views29K
Написание чистого кода — это навык, который становится обязательным на определённом этапе карьеры программиста. Особенно этот навык важен тогда, когда программист пытается найти свою первую работу. Это, по существу, то, что делает разработчика командным игроком, и то, что способно либо «завалить» собеседование, либо помочь его успешно пройти. Работодатели, принимая кадровые решения, смотрят на код, написанный их потенциальными сотрудниками. Код, который пишет программист, должен быть понятен не только машинам, но и людям.



В материале, первую часть перевода которого мы публикуем сегодня, представлены советы по написанию чистого кода React-приложений. Актуальность этих советов тем выше, чем больше размер проекта, в котором применяются изложенные в них принципы. В маленьких проектах, вероятно, можно обойтись и без применения этих принципов. Принимая решение о том, что нужно в каждой конкретной ситуации, стоит руководствоваться здравым смыслом.
Читать дальше →
Total votes 41: ↑36 and ↓5+31
Comments27

Мы забыли про делегирование в JavaScript. Event delegation in React

Reading time5 min
Views12K

Всем привет. Статья о делегирование событий в JavaScript и реализация его в react.js.



О чем собственно речь? Зачем и почему?


Для начала давайте кратко обсудим:


  1. что есть событие;
  2. как происходит распространение;
  3. обработка DOM Level 2 с примером на JavaScript;

И в конце: почему не надо забывать об делегировании в React.


Событие


JavaScript с HTML взаимодействуют между собой за счёт событий (events). Каждое событие служит для того, чтобы сказать JavaScript’у о том, что в документе или окне браузера что-то произошло. Для того чтобы отловить эти события нам нужны слушатели (listeners), этакие обработчики, которые запускаются в случае возникновения события.


Распространение событий


Порядок. Решая проблему: как понять, какой части страницы принадлежит событие? Было реализовано два способа: в Internet Explorer — “всплытие событий”, а в Netscape Communicator — “перехват событий”.

Читать дальше →
Total votes 17: ↑13 and ↓4+9
Comments10

История о V8, React и падении производительности. Часть 1

Reading time8 min
Views13K
В материале, первую часть перевода которого мы публикуем сегодня, речь пойдёт о том, как JavaScript-движок V8 выбирает оптимальные способы представления различных JS-значений в памяти, и о том, как это влияет на внутренние механизмы V8, касающиеся работы с так называемыми формами объектов (Shape). Всё это поможет нам разобраться с сутью недавней проблемы, касающейся производительности React.


Читать дальше →
Total votes 37: ↑36 and ↓1+35
Comments5

История одной анимации

Reading time17 min
Views14K
Однажды фронтендеру позвонил дизайнер и попросил сделать «паутинку» за запотевшим стеклом. Но потом оказалось, что это не «паутинка», а гексагональная сетка, и не за стеклом, а она уходит вдаль, и с WebGL фронтендер не знаком, а всей анимации пришлось учиться в процессе рисования. Тем фронтендером был Юрий Артюх (akella).



Юрий давно занимается версткой, а по воскресеньям записывает стримы с разбором реальных проектов. Он не профи в WebGL, не делает на нем карты, не пишет на Web-ассемблере, но ему нравится учиться чему-то новому. На FrontendConf РИТ++ Юрий рассказал, как провести одну анимацию от макета до сдачи клиенту так, чтобы все были довольны, и по дороге изучить WebGL. История идет от первого лица и включает в себя: Three.js, GLSL, Canvas 2D, графы и немного математики.
Total votes 42: ↑41 and ↓1+40
Comments4

Angulareact

Reading time8 min
Views5.1K

У меня есть проблема. Приложение написано на Angular, а библиотека компонентов на React. Делать клон библиотеки слишком дорого. Значит, нужно использовать React-компоненты в Angular-приложении с минимальными затратами. Разбираемся как это делать.

Читать дальше →
Total votes 13: ↑12 and ↓1+11
Comments8

История о V8, React и падении производительности. Часть 2

Reading time9 min
Views7.8K
Сегодня мы публикуем вторую часть перевода материала, посвящённого внутренним механизмам V8 и расследованию проблемы с производительностью React.



Первая часть
Читать дальше →
Total votes 33: ↑33 and ↓0+33
Comments1

Опыт разработки тестового задания на React для Aviasales

Reading time6 min
Views16K

Привет, я хотел поделиться опытом разработки тестового задания для Aviasales.


Я недавно наткнулся на вакансию React разработчика в компанию Aviasales. Отправил заявку, после чего на следующий день мне ответил HR и сообщил, что я должен буду сделать тестовое задание. Я крайне не люблю делать тестовые задания, так как я должен потратить довольно много времени на их выполнение, а в случае неудачи это станет впустую. Но я согласился...

Читать дальше →
Total votes 20: ↑16 and ↓4+12
Comments41

Уменьшение размеров бандлов с помощью Webpack Analyzer и React Lazy/Suspense

Reading time9 min
Views18K
По мере того, как растёт сложность клиентских приложений, размеры их бандлов становятся всё больше и больше. В этой ситуации сильнее всего страдают люди, вынужденные, по разным причинам, пользоваться медленными интернет-соединениями. При этом с каждым днём всё становится только хуже.



Автор статьи, перевод которой мы сегодня публикуем, работает в Wix. Он хочет рассказать о том, как смог уменьшить размер одного бандла примерно на 80%, используя Webpack Analyzer и React Lazy/Suspense.
Читать дальше →
Total votes 31: ↑31 and ↓0+31
Comments6

Актуальные библиотеки визуализации данных для react-разработчиков

Reading time3 min
Views11K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Data Visualization Libraries for React Developers in 2019» автора Veronika Rovnik.

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

Вы когда-нибудь сталкивались с необходимостью улучшить своё приложение аналитическими и визуальными функциями и получить представление о данных?
Читать дальше →
Total votes 12: ↑11 and ↓1+10
Comments5

JSON-RPC? Возьмите хитрый REST

Reading time6 min
Views31K


Уверен, что заголовок вызвал здоровую реакцию — “ну опять началось…” Но позвольте завладеть вашим вниманием на 5-10 минут, и я постараюсь не обмануть ожидания.


Структура статьи будет такова: берется стереотипное утверждение и раскрывается “природа” возникновения этого стереотипа. Надеюсь, это позволит взглянуть на выбор парадигмы обмена данными в ваших проектах под новым углом.


Для того, чтобы была ясность в том, что такое RPC, предлагаю рассматривать стандарт JSON-RPC 2.0. C REST ясности нет. И не должно быть. Все, что нужно знать о REST — он неотличим от HTTP.

Читать дальше →
Total votes 52: ↑41 and ↓11+30
Comments118

Создаем современное веб приложение. Знакомство с проектом и подготовка к работе. Часть 1

Reading time6 min
Views18K
image
В этой серии статей мы пройдем полный цикл создания клиентской части приложения и напишем небольшую библиотеку компонентов с использованием современного стека технологий.
Читать дальше →
Total votes 22: ↑18 and ↓4+14
Comments16

Введение в рекомендательные системы

Reading time4 min
Views21K
В статье рассматриваются подходы по построению персонализированных товарных и контентных рекомендаций, и возможные кейсы использования.

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


Читать дальше →
Total votes 6: ↑4 and ↓2+2
Comments4

Создание REST API с Node.js и базой данных Oracle. Часть 3

Reading time5 min
Views4.8K

Часть 3. Создание REST API: обработка запросов GET


В предыдущей статье вы установили соединение с базой данных.

В этой же добавите логику маршрутизации, контроллера и базы данных для обработки HTTP-запроса GET на конечную точку API «employees».

Добавление логики маршрутизации


Express поставляется с классом Router, который упрощает маршрутизацию HTTP-запросов к соответствующей логике контроллера. Пути маршрутов определяют конечные точки URL API и могут содержать параметры маршрута, которые фиксируют значения в URL.

Существует множество способов определить маршруты для вашего приложения. Например, когда приложение запускается, вы можете прочитать все файлы в каталоге контроллеров и автоматически сгенерировать логику маршрутизации на основе некоторых предопределенных правил, таких как имена файлов и свойства, которые они предоставляют. Кроме того, вы можете добавить файл в каталог конфигурации и прочитать его во время запуска.
Читать дальше →
Total votes 4: ↑3 and ↓1+2
Comments0

Нетривиальная расстановка элементов на flexbox без media-запросов

Reading time7 min
Views27K
Казалось бы, какой пост может быть о CSS Flexbox в 2019 году? Верстальщики уже несколько лет активно используют данную технологию, и все тайны должны быть разгаданы.

Однако, недавно у меня возникло стойкое ощущение, что нужно поделиться одним нетривиальным и, на мой взгляд, полезным приёмом, связанным с flexbox. Написать пост побудил тот факт, что ни один знакомый (из учеников, верстальщиков и просто людей, близких к web), не смог решить задачку, связанную с flexbox, хотя на это нужно всего 4-6 строк.
Читать дальше →
Total votes 52: ↑51 and ↓1+50
Comments18

На практике в 80-90% случаев веб-приложение тормозит из-за фронтенда: интервью с Иваном Акуловым

Reading time20 min
Views12K


Иван Акулов — Google Developer Expert в веб-технологиях и основатель перформанс-компании PerfPerfPerf. Уже совсем скоро на HolyJS 2019 Moscow он проведет воркшоп, посвященный, как ни странно, перформансу — поиску проблем в React, дебагу медленных приложений и другим рантайм-вещам. 


Чтобы больше погрузить читателей и посетителей HolyJS 2019 Moscow в тему, мы обсудили с Иваном:


  • Самые популярные проблемы перформанса;
  • Чем измерять производительность и в чем могут быть проблемы;
  • Как оптимизировать перформанс;
  • Поиск проблем с производительностью в React;
  • Пользу перехода на HTTP/2 и HTTP/3;
  • Паким фреймворком лучше пользоваться на новых проектах;
  • О пользе WebAssembly;
  • Где искать полезную информацию о перформансе;
  • О чем будет его воркшоп и кому на него будет интересно прийти (и зачем вообще ходить на воркшопы).

Вопросы задают Дмитрий Махнёв и Артём Кобзарь из программного комитета HolyJS.

Читать дальше →
Total votes 34: ↑30 and ↓4+26
Comments24
1
23 ...

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Registered
Activity