React Fiber

React — самый популярный JS-фреймворк. И в нем есть много сложных и тонких моментов.

Перевод статьи с обзором React Fiber и внутренних механизмов работы нового API — хуков

#framework

Деньги

Работать с денежными значениями сложно в любом языке, но в JS — особенно. Тут и проблемы с разными валютами, и опасность хранения сумм как чисел с плавающей точкой.

В JS нет подходящих встроенных типов. Money и Decimal даже не планируются, а BigInt еще на stage3 (не принят в стандарт). Потому приходится использовать сторонние библиотеки или писать свои "велосипеды".

Тематическая статья — Как работать с денежными значениями в JavaScript


BigInt

В браузере: поддерживается в новых Chromium, для остальных браузеров — полифил jsbi и клевый сторонний Babel-плагин

В Node.js: в v10.4 добавили поддержку BigInt.

Что такое BigInt и почему он важен

#link

​​Стандартная бибилиотка: юникодные строки

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

В типографике используются диакритические знаки для модификации символов.

Для реализации таких изменений в UNICODE предоставили возможность композиции символов.

Сравнение таких символов через === в JavaScript даст false, поэтому для облегчения жизни существует метод String.prototype.normalize(), который возвращает нормализованную строку.

Статья на Medium

#stdlib

​​Стандартная бибилиотка: состояние регулярки

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

Функции test и exec начинают проверять строку с последнего совпадения, если регулярное выражение имеет флаг global (g).

Обойти это можно через свойство lastIndex. Нужно установить его на 0 и поиск начнется снова с начала строки.

Если поиск ничего не нашел, это свойство автоматически сбрасывается на 0.

#stdlib

React и связные списки

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

Перевод статьи с объяснением, как и почему React использует связные списки в архитектуре Fiber

Предыдущая часть — React Fiber

#framework

​​Приведение типов

JS славится своей системой преобразования типов. Александр Майоров в двух статьях рассказывает как она работает и что нужно делать чтобы не допускать ошибок.

Приведение типов в JS:
+ Магия или простые правила?
+ Что еще надо знать в 2019 году

#типы

Новые браузерные API

JavaScript — это больше чем чем язык. Это еще и очень изменчивая среда выполнения (зоопарк устройств, разные браузеры). Единственное, что хоть чуть-чуть упрощает жизнь — стандартизированные браузерные API.

В последние годы появилось много новых API. Тематический доклад — API браузеров, о которых вы могли не слышать

#api #link

​​Решил попробовать новый формат — пазлы.

range

В некоторых программах часто возникает необходимость получить интерал чисел. В Python есть встроенная функция range, в Scala — красивая синтаксическая конструкция 5 to 14 by 3.

В JavaScript можно сделать нечто подобное. Результат в прикрепленной картинке.

Присылайте свои варианты, как это работает, завтра покажу авторское решение.

#puzzle

​​range

Мы должны изменить прототип Number, добавить туда функцию-генератор, которая и будет выдавать числа в заданном промежутке.

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

Две точки
Первая точка относится к числу, а вот вторая уже к вызову функции to на результирующем числе.

Number
В начале функции-генератора нужно привести this к примитивному значению, иначе первым элементом будет отдана объектная обертка числа, что не хорошо (их нельзя сравнивать между собой, например).

Предупреждение

Никогда не делайте так в реальном коде. Изменение прототипов встроенных объектов — очень плохая идея, которая приводит к печальным последствиям.

#puzzle_answer

​​Решение из прошлого поста не позволяет установить шаг для интеравала. Это не здорово, но в текущую реализацию легко добавить такой параметр.

К сожалению, придется все переписать, на генераторах построить это решение нелья.

Вручную реализуем интерфейс итератора, и добавим резльтирующему объекту метод by, который тоже вернет итератор, но уже с заданным шагом.

#puzzle_answer

​​Последние три поста рассказывали про итераторы. Использовать в жизни те решения, что в них рассматривались нельзя. Но не из-за итераторов, из-за изменения прототипа числа. Ниже прикреплен код аналогичного решения без грязи.

Итератор

Итерируемыми назвают объекты которые можно "перебирать". Например, массив — итерируемый объект. И список DOM-узлов, строки, Map, Set и arguments тоже.

Многие встроенные в JS штуки (for-of, srepad-оператор) работают с любым итерируемым объектом. Это позволяет подсовывать им свои реализации, получать выразительный и простой код.

Статья на MDN — The iterable protocol

#stdlib