Pull to refresh
7
0
Николай @nebsehemvi

Front-end developer

Send message

О 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

Разработка хитрого ИИ в тактической игре на основе эвристик и мутаций

Reading time17 min
Views17K
В тактических играх ИИ очень важен. Если ИИ видится как «искусственный идиот», то игру может спасти потрясающий мультиплеер, сюжет, атмосфера и графика (это неточно). Решение очевидное: делай хороший ИИ, в чём тут могут быть проблемы?

Cat terminator by CoolAI

В деталях. Ниже описаны мои шаги по конструированию сильного ИИ с характером. Не супер сильного [1], но способного быстро отработать локально в прожорливом браузере любого средне-слабого ПК. Мною применён подход экспертных систем с использованием набора эвристик и мутаций. Описаны 15 шагов постепенного преображения ИИ, каждый из шагов можно пощупать.
Total votes 26: ↑26 and ↓0+26
Comments17

Введение в ECMAScript 2017 (ES8)

Reading time27 min
Views13K

Оглавление


Предисловие
Краткий обзор ES7
1. Object.entries
2. Object.values
3. String.prototype.padEnd
4. String.prototype.padStart
5. Object.getOwnPropertyDescriptor
6. Trailing commas
7. SharedArrayBuffer
8. Atomics
9. Async functions

Предисловие


Здравствуйте, в прошлом я уже рассматривал нововведения в ES6 и теперь время разобрать ES8 так как он принёс много нового. Рассматривать отдельно ES7 (2016), я не стал так как этот релиз принёс всего 2 нововведения. Это Array.prototype.includes() и оператор возведения в степень. Но всё же прежде чем приступить к ES8, давайте рассмотрим нововведения из ES7.

Краткий обзор ES7


Метод includes() определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false.

Array.prototype.includes(searchElement[, fromIndex = 0]) : Boolean

searchElement — Искомый элемент.

fromIndex — Позиция в массиве, с которой начинать поиск элемента searchElement. При отрицательных значениях поиск производится начиная с индекса array.length + fromIndex по возрастанию. Значение по умолчанию равно 0.
Читать дальше →
Total votes 11: ↑9 and ↓2+7
Comments4

Dap — еще один реактивный движок для веба. Совсем другой

Reading time10 min
Views4.7K
Хочу рассказать про dap — интересный и необычный язык реактивных правил для написания, в частности, веб-фронтендов.

Для затравки простая задачка: взять список неких пользователей (воспользуемся тестовыми данными, любезно предоставляемыми сервисом jsonplaceholder.typicode.com) и вывести их имена обычным html-списком; при нажатии на имя пользователя — показать алерт с его id.

Это, конечно, легко делается и на React, и на Angular, и на Vue. Вопрос: насколько легко? В dap это делается так:

'UL.users'.d("* :query`https://jsonplaceholder.typicode.com/users"
 ,'LI'.d("! .name").ui("? .id:alert")
)

(*Этот и последующие dap-примеры можно интерактивно потестить в песочнице dap.js.org/test.html)

Это первая пришедшая в голову тривиальная задачка и тривиальный же способ ее решения. На dap удобно писать «в лоб», не городя огород из классов, компонентов и прочего ритуального реквизита. Что вижу, то пою. Но «пою» не на javascript или его производных, а на языке dap-правил, специально заточенном на простое и лаконичное описание реактивных зависимостей между элементами.
Читать дальше →
Total votes 20: ↑16 and ↓4+12
Comments39

48 open source ресурсов для JavaScript (2019)

Reading time3 min
Views17K
image

Мы выбрали из 20 000 проектов и библиотек для JavaScript 48 самых лучших (по звёздам на GitHub) и сгруппировали в 5 категорий:

  • Пользовательский интерфейс (1~9)
  • Инструменты JavaScript (10~25)
  • Machine Learning (26~33)
  • Проекты (34~39)
  • Инструменты разработчика (40~48)
Читать дальше →
Total votes 19: ↑17 and ↓2+15
Comments5

Шесть задачек для Front-End разработчика

Reading time2 min
Views45K

1. Форма кредитной карты


Клёвая форма кредитной карты с гладкими и приятными микровзаимодействиями. Включает форматирование чисел, проверку и автоматическое определение типа карты. Она построена на Vue.js, а также полностью адаптивная. (Посмотреть можно здесь.)

image

credit-card-form

Чему научитесь:

  • Обрабатывать и валидировать формы
  • Обрабатывать события (например, при изменении полей)
  • Разберетесь как отображать и размещать элементы на странице, особенно данные кредитной карты, которая поверх формы
Читать дальше →
Total votes 46: ↑41 and ↓5+36
Comments43

Музыка для ваших проектов: 12 тематических ресурсов с треками по лицензии Creative Commons

Reading time7 min
Views119K
Подборка пригодится разработчикам, дизайнерам, видеорежиссерам и контент-мейкерам, которые ищут музыку для своих проектов — приложений, игр или видеороликов.

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

Total votes 57: ↑56 and ↓1+55
Comments9

Svelte 3: Переосмысление реактивности

Reading time4 min
Views31K
Буквально на днях произошло большое событие для сообщества SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.


Читать дальше →
Total votes 27: ↑25 and ↓2+23
Comments288

Нужно ли чистить строки в JavaScript?

Reading time6 min
Views79K
Что? Строки могут быть «грязными»?

Да, могут.

//.....Какой-то код
console.log(typeof str); // string
console.log(str.length); // 15
console.log(str); // "ччччччччччччччч"

Вы думаете, в этом примере строка занимает 30 байт?

А вот и нет! Она занимает 30 мегабайт!
Читать дальше →
Total votes 220: ↑219 and ↓1+218
Comments224

Ускоряем JavaScript-код с использованием типа данных Set

Reading time6 min
Views27K
Автор материала, перевод которого мы сегодня публикуем, говорит, что уверен в том, что многие JavaScript-разработчики пользуются, в основном, такими типами данных, как Number, String, Object, Array и Boolean. В большинстве случаев этого вполне достаточно. Но если нужно сделать код как можно более быстрым и масштабируемым, применение этих типов данных не всегда оправдано.



В этом материале мы поговорим о том, как, пользуясь типом данных Set, предоставляющим возможность работать с коллекциями уникальных значений, сделать код быстрее. Особенно это актуально для кода крупномасштабных проектов. У типов Array и Set много общего, но использование типа данных Set способно дать программисту такие возможности, ярко проявляющиеся во время выполнения программ, которых нет у типа Array.
Читать дальше →
Total votes 61: ↑42 and ↓19+23
Comments19

Разбираемся в Angular Ivy: Incremental DOM и Virtual DOM

Reading time4 min
Views29K

Angular — наш основной инструмент для написания приложения TestMace. В одной из прошлых статей мы затронули тему Ivy рендерера. Самое время поподробнее узнать, чем Ivy отличается от предыдущего движка.




В нашей компании Nrwl мы уже какое-то время находимся в предвкушении возможностей, которые откроет нам и нашим клиентам Ivy. Angular Ivy — это новый движок рендеринга Angular, кардинально отличающийся от всех аналогичных технологий популярных фреймворков тем, что он использует Incremental DOM.

Читать дальше →
Total votes 16: ↑13 and ↓3+10
Comments3

Принципы построения REST JSON API

Reading time8 min
Views337K

Эта памятка писалась для внутренних нужд (открыть глаза менее опытным в вебе коллегам). Но, т.к. я насмотрелся велосипедов от довольно уважаемых, казалось бы, контор, — выкладываю на хабр. Мне кажется, многим будет полезно.


Зачем


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


  • Стандарт HTTP это стандарт. Его несоблюдение вредно для кармы и ведёт к постоянным проблемам с безопасностью, кэшированием и прочими "закидонами" браузеров, которые совсем не закидоны, а просто следование стандарту.
  • Велосипеды со всякими {error: "message","result":...} невозможно нормально тестировать и отлаживать
  • Поддержка большим количеством готовых клиентских библиотек на все случаи жизни. Те, кто будет вашим api пользоваться, скажут большое человеческое спасибо.
  • Поддержка автоматизированного интеграционного тестирования. Когда сервер на любые запросы отдаёт 200 ОК — ну, это такое себе развлечение.
Читать дальше →
Total votes 71: ↑55 and ↓16+39
Comments207

С чего лучше начать проект или как сделать так, что бы не было потом мучительно больно

Reading time8 min
Views25K

Доброго всем времени суток. Настала очередь поговорить о проектировании проектов. По собственному опыту знаю, что иногда сложнее создать проект с нуля, чем привести в порядок то, что уже есть. Во многом это связано с тем, какое наследие Вы или Вам, оставляют после себя. В этой статье постараюсь рассказать на что стоит обратить особое внимание и предложить краткий план следования.

Читать дальше →
Total votes 22: ↑19 and ↓3+16
Comments5

Основы реактивного программирования с использованием RxJS. Часть 2. Операторы и пайпы

Reading time9 min
Views36K


В предыдущей статье мы рассмотрели, что такое потоки и с чем их едят. В новой части мы познакомимся с тем, какие методы RxJS предоставляет для создания потоков, что такое операторы, пайпы(pipes) и как с ними работать.

Серия статей «Основы реактивного программирования с использованием RxJS»:



RxJS обладает богатейшим API. В документации описано более ста методов. Чтобы немного познакомиться с ними, мы напишем простое приложение и на практике посмотрим, как выглядит реактивный код. Вы увидите, что одни и те же задачи, которые раньше казались рутинными и требовали написания большого количества кода, имеют элегантное решение, если смотреть на них сквозь призму реактивности. Но прежде чем мы перейдем к практике, рассмотрим, как потоки можно представить графически, и познакомимся с удобными методами для их создания и обработки.
Читать дальше →
Total votes 6: ↑6 and ↓0+6
Comments4

Стажёр Вася и его истории об идемпотентности API

Reading time11 min
Views223K

Идемпотентность — звучит сложно, говорят о ней редко, но это касается всех приложений, использующих API в своей работе.


Меня зовут Денис Исаев, и я руковожу одной из бэкенд групп в Яндекс.Такси. Сегодня я поделюсь с читателями Хабра описанием проблем, которые могут возникнуть, если не учитывать идемпотентность распределенных систем в своем проекте. Для этого я выбрал формат вымышленных историй о стажёре Васе, который только-только учится работать с API. Так будет нагляднее и полезнее. Поехали.


image

Читать дальше →
Total votes 219: ↑216 and ↓3+213
Comments163

Дайджест свежих материалов из мира фронтенда за последнюю неделю №355 (4 — 10 марта 2019)

Reading time3 min
Views13K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


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

8 приемов работы с CSS: параллакс, «липкий» футер и другие

Reading time4 min
Views62K


От переводчика: перевели для вас статью Брета Кэмерона о хитростях в работе с CSS. Многие моменты пригодятся не только новичкам, но и опытным разработчикам.

Эта статья о приемах работы в CSS, узнав о которых, я восклицал: «Агаааа!». Надеюсь, вы тоже сделаете пару открытий.

CSS — специфическая технология. На первый взгляд она кажется очень простой. Но некоторые эффекты, которые в теории кажутся простыми, не являются таковыми на практике.

Я покажу несколько приемов и расскажу о принципах их использования в CSS. Сама по себе статья не о сложностях. Наоборот, она призвана сделать вашу работу более комфортной.
Total votes 38: ↑37 and ↓1+36
Comments17

Wolfensteiny 3D — реверс-инжиниринг 251 байтов JavaScript

Reading time5 min
Views17K
При написании кода многие не задумываются ни о чем, кроме логики самой программы. Меньшее число людей думают об оптимизации кода по времени, по памяти. Но лишь единицы доходят до последнего уровня — сжатии программы до рекордно маленького размера.

Посмотрите, например, на результат работы всего 251 байта JavaScript:


Ну, давайте разбираться, как это работает!
Читать дальше →
Total votes 49: ↑49 and ↓0+49
Comments16

Redux-symbiote — пишем действия и редьюсеры почти без боли

Reading time4 min
Views7K
React-redux замечательная штука. При правильном использовании архитектура приложения эффективна, а структура проекта и легко читаемая. Но как и в любом решении есть свои особенности.

Описание действий и редьюсеров одна из таких особенностей. Классическая реализация двух этих сущностей в коде довольно трудоемкое занятие.
Читать дальше →
Total votes 28: ↑21 and ↓7+14
Comments17

Эффекты фильтрации SVG. Часть 7. Продвижение вперед

Reading time5 min
Views2.6K

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:


Эффекты фильтрации SVG


  1. Эффекты фильтрации SVG. Часть 1. SVG фильтры 101
  2. Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology
  3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer
  4. Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
  5. Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap
  6. Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence
  7. Эффекты фильтрации SVG. Часть 7. Продвижение вперед

В последней статье этой серии автор поделится списком полезных ресурсов для желающих узнать об эффектах SVG фильтрации побольше.




Total votes 7: ↑6 and ↓1+5
Comments0

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Registered
Activity

Specialization

Frontend Developer
Senior
JavaScript
CSS
React
TypeScript
Webpack
Node.js