Famabara

Posts by tag: JavaScript


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

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

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

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

dima
2 mo. ago
Для повышения производительности приложений на 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 так и пишет:
Show full...
+3
10

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

dima
3 mo. ago
Насколько хорошо вы знаете 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 всё передаётся/копируется по ссылке!
Show full...
+4
27

Популярность Vue.js в 2024

dima
3 mo. ago
Это перевод моего англоязычного поста - https://famabara.com/posts/108

Попытаюсь измерить попурлярность Vue.JS. Я очень люблю этот фреймворк, поэтому всецело за его популяризацию :)

Сначала давайте посмотри на статистику скачиваний на NPM.
Сейчас и год назад:
vue - 4,868,119 - 3,746,361
@angular/core - 3,416,382 - 3,015,855
react - 23,763,131 - 20,548,838

Как видно, по абсолютным значенияем React на первом месте. Ну, а VueJS занимает только второе место.

А теперь посмотрим на относительный рост в процентах по отношению к прошлому году.
vue +29,9%
angular +13,3%
react +15,6%
Ура! Популярность Вью растёт быстрее, чем у остальных из "большой троицы".

Ну а теперь пройдусь по сайтам из топа Гугла и посмотрим, какие там используются фреймворки.
В качесте тестового запроса взял англоязычный запрос "rent car".
Юзал Wappalyzer - это расширение для браузера, чтобы детектить используемые технологии.

Вот список сайтов; NF - означает "нет фреймворка из большой троицы".
rentalcars.com - NF
enterprise.com - NF
kayak.com - React
avis.com - NF (есть старый AngularJS)
localrent.com - Vue
hertz.com - NF (есть старый BackboneJS)
sixt.com - React
budget.com - NF (есть старый 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

Ну что, всё очень неплохо для Vue.JS! Он постепенно захватывает англоязычные сайты.
Show full...
+4
12

Vue.js popularity in 2024

dima
3 mo. ago
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!
Show full...
+2
29
1