Как стать автором
Обновить
10
0
Михаил Черноруцкий @r47717

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

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

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

Время на прочтение3 мин
Количество просмотров28K
Я полагаю, что для решения различных задач React-разработки лучше использовать маленькие узкоспециализированные инструменты, а не универсальные решения, предлагаемые библиотеками компонентов. Мне нравится выбирать компоненты самостоятельно, я не люблю читать длинную документацию, и мне хочется избежать бессмысленных обновлений библиотек, после которых в проекте нередко что-то ломается.



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

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

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

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

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



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


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

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

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

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

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



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

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

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

Время на прочтение3 мин
Количество просмотров101K
Это третья статья из серии статей про REST API:


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

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


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

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

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

Предыстория


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

Предисловие


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

Начало


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

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

Но и минусов хватает.
Читать дальше →
Всего голосов 24: ↑21 и ↓3+18
Комментарии32

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

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



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

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

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

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



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


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


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

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


Событие


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


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


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

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

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

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


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

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

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



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

Angulareact

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

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

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

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

Время на прочтение9 мин
Количество просмотров7.8K
Сегодня мы публикуем вторую часть перевода материала, посвящённого внутренним механизмам V8 и расследованию проблемы с производительностью React.



Первая часть
Читать дальше →
Всего голосов 33: ↑33 и ↓0+33
Комментарии1

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

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

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


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

Читать дальше →
Всего голосов 20: ↑16 и ↓4+12
Комментарии41

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

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



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

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

Время на прочтение3 мин
Количество просмотров11K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Data Visualization Libraries for React Developers in 2019» автора Veronika Rovnik.

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

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

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

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


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


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


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

Читать дальше →
Всего голосов 52: ↑41 и ↓11+30
Комментарии118

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

Время на прочтение6 мин
Количество просмотров18K
image
В этой серии статей мы пройдем полный цикл создания клиентской части приложения и напишем небольшую библиотеку компонентов с использованием современного стека технологий.
Читать дальше →
Всего голосов 22: ↑18 и ↓4+14
Комментарии16

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

Время на прочтение4 мин
Количество просмотров21K
В статье рассматриваются подходы по построению персонализированных товарных и контентных рекомендаций, и возможные кейсы использования.

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


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

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

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

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


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

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

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


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

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

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

Время на прочтение7 мин
Количество просмотров27K
Казалось бы, какой пост может быть о CSS Flexbox в 2019 году? Верстальщики уже несколько лет активно используют данную технологию, и все тайны должны быть разгаданы.

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

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

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


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


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


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

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

Читать дальше →
Всего голосов 34: ↑30 и ↓4+26
Комментарии24
1
23 ...

Информация

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