Посты по тегу: JavaScript

Ещё один миф из JavaScript: нестрогое равенство

20 дн. назад

Очередной миф на сайте "Современный учебник JavaScript":
https://learn.javascript.ru/comparison

Цитата:

При сравнении значений разных типов JavaScript приводит каждое из них к числу.

Откуда дровишки? Правда о JavaScript написана только в одном месте - в документации языка. Поэтому смотрим доку:
https://262.ecma-international.org/16.0/index.html

EqualityExpression : EqualityExpression == RelationalExpression
 1. Let lRef be ? Evaluation of EqualityExpression.
 2. Let lVal be ? GetValue(lRef).
 3. Let rRef be ? Evaluation of RelationalExpression.
 4. Let rVal be ? GetValue(rRef).
 5. Return ? IsLooselyEqual(rVal, lVal).

Ага, значит, ищем IsLooselyEqual:

The abstract operation IsLooselyEqual takes arguments x (an ECMAScript language value) and y (an ECMAScript language value) and returns either a normal completion containing a Boolean or a throw completion. It provides the semantics for the == operator. It performs the following steps when called:

1. If SameType(x, y) is true, then
   a. Return IsStrictlyEqual(x, y).
2. If x is null and y is undefined, return true.
3. If x is undefined and y is null, return true.
4. NOTE: This step is replaced in section B.3.6.2.
5. If x is a Number and y is a String, return ! IsLooselyEqual(x, ! ToNumber(y)).
6. If x is a String and y is a Number, return ! IsLooselyEqual(! ToNumber(x), y).
7. If x is a BigInt and y is a String, then
   a. Let n be StringToBigInt(y).
   b. If n is undefined, return false.
   c. Return ! IsLooselyEqual(x, n).
8. If x is a String and y is a BigInt, return ! IsLooselyEqual(y, x).
9. If x is a Boolean, return ! IsLooselyEqual(! ToNumber(x), y).
10. If y is a Boolean, return ! IsLooselyEqual(x, ! ToNumber(y)).
11. If x is either a String, a Number, a BigInt, or a Symbol and y is an Object, return ! IsLooselyEqual(x, ? ToPrimitive(y)).
12. If x is an Object and y is either a String, a Number, a BigInt, or a Symbol, return ! IsLooselyEqual(? ToPrimitive(x), y).
13. If x is a BigInt and y is a Number, or if x is a Number and y is a BigInt, then
   a. If x is not finite or y is not finite, return false.
   b. If ℝ(x) = ℝ(y), return true; otherwise return false.
14. Return false.

Вот и весь ответ. В JS есть чёткий алгоритм нестрогого сравнения, который назван IsLooselyEqual, а всё остальное - отсебятина.

null == undefined; // вернёт true

В Javascript при нестрогом сравнении null равен undefined не потому, что они оба привелись к 0, а потому что в пункте 2 чётко сказано, если первый оператор null и второй оператор undefined, то нужно вернуть true.

Показать полностью...

JavaScript

программирование

How to use Quill Editor with Nuxt 3 and SSR (Vue)

dima

недавно

If you try to use Quill Editor with Nuxt 3 when rendering a page in SSR you will get this error:

500 document is not defined.

That means NodeJS doesn't have the global variable 'document'. Because SSR rendering is executed in
a NodeJS environment, not a browser.

The sad fact: <client-only> won't help with this problem. The problem with quill's code is that during import, it assumes it's being executed in the browser. I hope you remember that the code imported from the module is not just imported, but executed, i.e. the authors of Quill wrote it so that the 'document' object is immediately accessed there. Very bad.

One solution is to disable SSR, but its an awful solution. But the second solution is to use dynamic JS imports.

My <script lang="ts" setup> in QuillEditor.vue in Nuxt 3 project:

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
// import Quill from 'quill'; // SSR problem with 'document', need to use dynamic import
import type Quill from 'quill';

const elemForQuillEditor = ref<HTMLDivElement|null>(null);

let editor: null|Quill = null; // Do not store in ref() - it causes bugs!

// ...

async function createQuillAndSetListeners() {
  const Quill = (await import('quill')).default; // This is most important thing - usage of JS dynamic import

  if (!elemForQuillEditor.value) return;
  editor = new Quill(elemForQuillEditor.value, {
    theme: 'snow',
    modules: {
      history: {
        delay: 2000,
        maxStack: 500,
        userOnly: true,
      },
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'],
          ['link'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ script: 'sub' }, { script: 'super' }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ color: [] }, { background: [] }],
          ['clean'],
          ['undo', 'redo'],
        ],
        handlers: {
          undo() {
            editor?.history.undo();
          },
          redo() {
            editor?.history.redo();
          },
        },
      },
    },
    placeholder: props.placeholder,
  });
  
  editor.on('text-change', () => {
    if (!editor) return;
    // ... my other code
  });
}

// ...

onMounted(createQuillAndSetListeners);

Now your Quill editor will work in Nuxt 3 even during SSR!

Nuxt

Vue.js

JavaScript

Хитрость spread-синтаксиса в JS

dima

недавно

А вы знали, что теоретически spread-синтаксис в JS можно применять почти к любому типу.
Вот пример "обычного" использования:

// Массив спредится
console.log([...[1, 2, 3]]); // [1, 2, 3]
// Строка спредится
console.log([...'Famabara']); // ['F', 'a', 'm', 'a', 'b', 'a', 'r', 'a']

Но если попытаться заспредить number, то будет ошибка:

console.log([...555]); // Uncaught TypeError: 555 is not iterable

Не является iterable.
Так давайте сделаем iterable!

Number.prototype[Symbol.iterator] = function * () {
  yield 'Фамабара';
  yield 'лучше';
  yield 'всех';
}

console.log([...555]); // ['Фамабара', 'лучше', 'всех']

Мы успешно заспредили number! Толку от этого никакого, на сам факт забавен.
Можно джунов за собесах мучить :)

JavaScript

программирование

языки программирования

152

TypeScript скоро станет в 10 раз быстрее

volchara

недавно

Андерс Хейлсберг (автор Тайпскрипта) опубликовал пост в блоге:
https://devblogs.microsoft.com/typescript/typescript-native-port/

В общем, TypeScript скоро станет в 10 раз быстрее, вернее, он уже стал таким, просто пока эту версию не сделали общедоступной.

Вот такой прирост скорости компиляции крупных проектов теперь показывает tsc:

Как видно, прирост на порядок - т.е. примерно в 10 раз. Достигается это за счет использования Golang для работы tsc, а не JS. Сам по себе JS быстрый, но он упирается в один поток. А кто писал на Go, то знает, насколько легко там запустить горутину. Теперь tsc будет использовать несколько имеющих потоков, что и даст прирост скорости компиляции.

Обратите внимание, это полноценная работа tsc, а не как у esbuild, где только транспиляция без проверки типов.

На момент написания этого поста текущая версия TypeScript - 5.8.2. Следующая мажорная версия - 6-я - будет всё ещё на JS-е, а вот 7-я версия будет уже на "нативном" коде, т.е. компилироваться из Go. Автор их так и называет:

For the sake of clarity, we’ll refer to them simply as TypeScript 6 (JS) and TypeScript 7 (native)

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

Показать полностью...

139

Идёт разработка Vue Vapor

connected2u

1 г. назад

Между прочим в мире VueJS большая новость - активно разрабатывается Vue Vapor. По основной идее этого проекта во VueJS исчезнет виртуальный DOM, который являлся важной частью всего VueJS. Теперь работа будет вестись напрямую с DOM и меняться будут только нужные HTML элементы, если срабатывает реактивность.

А еще интересная деталь: пишут, что будет работать только с Composition API, а Options API уйдёт на свалку истории. А ведь говорили, что этого не будет и старый Options API будет поддерживаться до последнего. Плюс обязателен script setup.

Vue.js

программирование

JavaScript

177

Эффективность использования всех ядер процессора в NodeJS с помощью cluster

dima

1 г. назад

Для повышения производительности приложений на NodeJS во всех материалах рекомендуется использовать нодовский встроенный модуль cluster. Все статьи повторяют одно и то же, что и так написано в документации.
Вот официальный пример из доки:

import cluster from 'node:cluster';
import http from 'node:http';
import { availableParallelism } from 'node:os';
import process from 'node:process';

const numCPUs = availableParallelism();

if (cluster.isPrimary) {
  console.log(`Primary ${process.pid} is running`);

  // Fork workers.
  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  cluster.on('exit', (worker, code, signal) => {
    console.log(`worker ${worker.process.pid} died`);
  });
} else {
  // Workers can share any TCP connection
  // In this case it is an HTTP server
  http.createServer((req, res) => {
    res.writeHead(200);
    res.end('hello world\n');
  }).listen(8000);

  console.log(`Worker ${process.pid} started`);
}

А теперь поделюсь своими исследованиями и расскажу, что не так в этом примере и как это можно улучшить.

Во-первых, некорректен нейминг переменной numCPUs. На моём компьютере, на котором тестировал производительность, стоит процессор Intel i7-13700, в нём всего 16 ядер. Сайт Intel так и пишет:

Обратите внимание: 16 ядер и 24 треда. И нода после вызова availableParallelism() возвращает число 24, а не 16. Так что это не ядра, а треды.

Во-вторых, большинство нодовских приложений - это обычные API. Какой-нибудь REST API, гоняющий туда-сюда JSON. А берётся этот JSON в большинстве случаев из базы данных вроде PostgreSQL. Многие сайты, описывающие работу с модулем cluster в качестве примера, почему-то возвращают моковые данные, захардкоженные прямо в коде, а в реальную базу данных не лезут. И потом делают нагрузочное тестирование по этим данным. Т.е. при таком подходе на каждом ядре сидит по процессу NodeJS и другие процессы не мешают их работе, не заставляют переключать на себя внимание ядра.

А теперь давайте проведём тест на реальной работе REST API. Это будет GET-запрос за сущностью по её id. Чтобы сформировать JSON этой сущности, нода совершает не один, а несколько сложных запросов в базу данных. Кэширование в глобальных переменных или в Redis не используется.

Для тестирования я использовал пакет bombardier, написанный на Golang.

go install github.com/codesenberg/bombardier@latest

Сначала провёл тест на Windows 10.
Запускаю:

bombardier http://127.0.0.1:7100/api/some/1101

Результат без cluster:

Bombarding http://127.0.0.1:7100/api/some/1101 for 10s using 125 connection(s)
[=================================================================================================================] 10s
Done!
Statistics        Avg      Stdev        Max
  Reqs/sec      2754.89    1413.90    5813.88
  Latency       45.31ms     1.95ms    72.43ms
  HTTP codes:
    1xx - 0, 2xx - 27625, 3xx - 0, 4xx - 0, 5xx - 0
    others - 0
  Throughput:     9.99MB/s

Результат с cluster (все 24 потока):

Bombarding http://127.0.0.1:7100/api/some/1101 for 10s using 125 connection(s)
[=================================================================================================================] 10s
Done!
Statistics        Avg      Stdev        Max
  Reqs/sec      8424.89     801.49   15177.67
  Latency       14.84ms     1.69ms    72.64ms
  HTTP codes:
    1xx - 0, 2xx - 84224, 3xx - 0, 4xx - 0, 5xx - 0
    others - 0
  Throughput:    30.54MB/s

Разница по производительности почти в 3 раза.

Показать полностью...

Node.js

JavaScript

производительность

Передача по ссылке и передача по значению в JavaScript

dima

1 г. назад

Насколько хорошо вы знаете JavaScript?
Как в JS передаются значения - по ссылке или по значению? Не спешите, подумайте даже если вы "мидл" или синьор-помидор.

let str1 = 'Famabara';
let str2 = str1; // Тут копия или новая строка?

let obj1 = { name: 'Famabara' };
let obj2 = obj1; // Тут копия или новый объект?

Можете в опросе ответить:

Как передаются значения при присвоении в переменную или в свойство объекта?

Всё передаётся по ссылке

Всё передаётся по значению (т.е. объекты тоже копируются)

Примитивы копируются, объекты передаются по ссылке (копируется ссылка на объект)

Теперь посмотрим, что нам говорит learn.javascript.ru - очень популярный в рунете учебник JavaScript:

А теперь давайте запустим в NodeJS такой код:

const arr = [];

for (let i = 0; i < 1200200; i++) {
  arr.push('0123456789'.repeat(1000 * 1000));
}

while (true) {
}

После запуска смотриим программой top потребление ресурсов:

39858 dima      20   0 2026180   1,0g  37824 R 100,0   3,2   0:21.44 node

На моей Кубунте сожрано 1 Гб оперативки. Ух ты.

Теперь изменим немного код:

const arr = [];
const text = '0123456789'.repeat(1000 * 1000);

for (let i = 0; i < 1200200; i++) {
  arr.push(text);
}

while (true) {
}

Смотрим ещё раз через top:

40267 dima      20   0 1066148  73796  37440 R  99,7   0,2   0:12.27 node

Программа потребила всего 73 Мб вместо 1 Гб. Согласно популярной теории о копировании примитивов такого быть не должно. ;)

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

Кстати, на ноде в Windows 10 аналогичное поведение - около 1 Гб потребление против менее 100.

Ну, а теперь главный секрет! :)
В JavaScript всё передаётся/копируется по ссылке!

Показать полностью...

JavaScript

Vue.js popularity in 2024

dima

1 г. назад

Let's try to measure the popularity of Vue.JS. I really like this framework and I am a supporter of its popularization.

First, let's look at the download statistics on NPM.
Now vs year ago:

vue - 4,868,119 - 3,746,361
@angular/core - 3,416,382 - 3,015,855
react - 23,763,131 - 20,548,838

As you can see, React is in the first place in absolute values. And VueJS is only in second place.

And now let's look at the percentage growth relative to last year's values.
vue +29,9%
angular +13,3%
react +15,6%
Hurray! Vue's popularity is growing faster than any of the three!

And now let's go through the sites from the top of Google and see what JS frameworks are used there.

For example, let's take the search query "rent car".
To understand which libraries each site uses, I used Wappalyzer browser extension.
Websites from search results; NF means "there is no framework from the big three".
rentalcars.com - NF
enterprise.com - NF
kayak.com - React
avis.com - NF (old AngularJS)
localrent.com - Vue
hertz.com - NF (old BackboneJS)
sixt.com - React
budget.com - NF (old AngularJS)
zipcar.com - NF
turo.com - React
autoeurope.eu - NF
alamo.com - React
rent.toyota.co.jp - NF
booking.com - React
costcotravel.com - React
borent.nl - NF
europcar.com - Vue
turo.com - React
vipcars.com - NF
skyscanner.net - React
tripadvisor.com - NF
timescar-rental.com - NF
klook.com - Vue
wiberrentacar.com - Vue
uber.com - NF
dollar.com - React
edreams.com - Vue
nationalcar.com - NF
thrifty.com - NF

As you can see, Vue is actively moving forward!

Показать полностью...