• React, performance и -500 миллисекунд на старте — история наших оптимизаций в цифрах

      control the redline


      Давайте немного отвлечемся от коронавируса, и поговорим о чем-то техническом. Например, о том, как мы пытались улучшить время холодного старта одного react-приложения и что из этого получилось. Кому интересна тема производительности и быстрого web-а в целом — прошу под кат. В конце будет небольшой опрос о цене/необходимости подобных оптимизаций.

      Читать дальше →
    • 10 React-компонентов на все случаи жизни

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



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

      Материал, перевод которого мы сегодня публикуем, посвящён рассказу о 10 React-компонентах.
      Читать дальше →
    • Создание микро-фронтендов с использованием Angular Elements: руководство для начинающих

      • Translation
      • Tutorial

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



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


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

      Читать дальше →
    • О 30-кратном увеличении параллелизма в Node.js

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

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



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

      Данный материал посвящён рассказу о том, как мы увеличили производительность и эффективность наших Node.js-воркеров, и о том, что мы узнали, пройдя этот путь.
      Читать дальше →
    • Разработка REST API — что такое Contract First?

      • Translation
      • Tutorial
      Это третья статья из серии статей про REST API:


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

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


      Читать дальше →
      • +8
      • 16.6k
      • 3
    • Как зеленый джуниор свой hot-reloader писал

      Предыстория


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

      Предисловие


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

      Начало


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

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

      Но и минусов хватает.
      Читать дальше →
    • 14 советов по написанию чистого React-кода. Часть 1

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



      В материале, первую часть перевода которого мы публикуем сегодня, представлены советы по написанию чистого кода React-приложений. Актуальность этих советов тем выше, чем больше размер проекта, в котором применяются изложенные в них принципы. В маленьких проектах, вероятно, можно обойтись и без применения этих принципов. Принимая решение о том, что нужно в каждой конкретной ситуации, стоит руководствоваться здравым смыслом.
      Читать дальше →
    • Мы забыли про делегирование в JavaScript. Event delegation in React

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



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


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


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

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


      Событие


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


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


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

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

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


      Читать дальше →
      • +35
      • 11.9k
      • 5
    • История одной анимации

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



        Юрий давно занимается версткой, а по воскресеньям записывает стримы с разбором реальных проектов. Он не профи в WebGL, не делает на нем карты, не пишет на Web-ассемблере, но ему нравится учиться чему-то новому. На FrontendConf РИТ++ Юрий рассказал, как провести одну анимацию от макета до сдачи клиенту так, чтобы все были довольны, и по дороге изучить WebGL. История идет от первого лица и включает в себя: Three.js, GLSL, Canvas 2D, графы и немного математики.
        Читать дальше →
        • +40
        • 12.2k
        • 4
      • Angulareact

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

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

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



          Первая часть
          Читать дальше →
          • +33
          • 7.3k
          • 1
        • Опыт разработки тестового задания на React для Aviasales

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


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

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

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



          Автор статьи, перевод которой мы сегодня публикуем, работает в Wix. Он хочет рассказать о том, как смог уменьшить размер одного бандла примерно на 80%, используя Webpack Analyzer и React Lazy/Suspense.
          Читать дальше →
          • +31
          • 7.7k
          • 6
        • Актуальные библиотеки визуализации данных для react-разработчиков

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

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

          Вы когда-нибудь сталкивались с необходимостью улучшить своё приложение аналитическими и визуальными функциями и получить представление о данных?
          Читать дальше →
          • +10
          • 5.3k
          • 5
        • JSON-RPC? Возьмите хитрый REST


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


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


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

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

            image
            В этой серии статей мы пройдем полный цикл создания клиентской части приложения и напишем небольшую библиотеку компонентов с использованием современного стека технологий.
            Читать дальше →
          • Введение в рекомендательные системы

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

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


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

              • Translation

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


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

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

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


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

              Существует множество способов определить маршруты для вашего приложения. Например, когда приложение запускается, вы можете прочитать все файлы в каталоге контроллеров и автоматически сгенерировать логику маршрутизации на основе некоторых предопределенных правил, таких как имена файлов и свойства, которые они предоставляют. Кроме того, вы можете добавить файл в каталог конфигурации и прочитать его во время запуска.
              Читать дальше →
            • Нетривиальная расстановка элементов на flexbox без media-запросов

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

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