JavaScript. Страница 27

Управление состоянием в Vue с помощью Composition API

#vue #frontend #webdev #jsarticle #javascript

​​Vite - новый экспериментальный бандлер от создателя Vue

В отличие остальных, данный бандлер очень хорош по скорости благодаря esbuild, который написан на Go.

Из фич - нативные ES модули, HMR, поддержка TS и JSX, CSS импорты и др.

#vue #vite #bundler #jstools #javascript #frontend #webdev

rollup-plugin-visualizer - альтернатива WebpackBundleAnalyzer для Rollup

#rollup #jstools #javascript

​​Majestic - GUI обёртка для Jest

Не требует конфигурации, простое обновление снепшотов, работает с TS/Flow и CRA

#jest #jstools #gui #frontend #webdev #testing #javascript

​​Введение в Svelte и Sapper

#svelte #sapper #frontend #webdev #jsarticle #javascript

Debug Anything - серия постов про введение в дебаггинг JavaScript и TypeScript кода в VS Code

Часть 1: База
Часть 2: Навигация с шагами
Часть 3: Редактирование переменных и перезапуск функций
Часть 4: launch.json и консоль дебага
Часть 5: дебаг React приложений
Часть 6: дебаг React + TypeScript в Parcel

#debug #frontend #webdev #jsarticle #javascript #typescript #react #parcel

​​Vue SSR-JIT - экспериментальный инструмент Just-in-time рендеринга для Vue

#webdev #frontend #vue #ssr #jit #jslib

React Flow – библиотека для рендеринга интерактивных графов

#jsarticle #javascript #frontend #react #vis

​​postprocessing - JavaScript библиотека для пост обработки 3D моделей THREE.js

#postprocessing #threejs #frontend #webdev #webgl #jslib #javascript

Понимание Express: Создание своего собственного HTTP роутера

#jsarticle #javascript #backend #webdev #express

Пост с канала @defront

Команда разработчиков Chrome активно контрибьютит в инструменты js-экосистемы и фреймворки. Хуссейн Джирде написал статью про один из таких кейсов сотрудничества — "Improved Next.js and Gatsby page load performance with granular chunking".

В Next.js и Gatsby в бандл commons попадал код, который использовался более чем на 50% страниц. Такая настройка была не очень эффективна, так как общий код оставшихся 50% страниц не разделялся между чанками. Для решения этой проблемы была адаптирована стратегия, в которой с помощью SplitChunksPlugin:
— все модули больше 160kb выносятся в индивидуальные чанки;
— создаётся отдельный чанк frameworks с кодом, который используется на всех страницах ( react, react-dom и т.п.);
— создаётся столько общих чанков, сколько webpack посчитает нужным создать, но не более 25.

Такие настройки позволяют улучшить скорость загрузки и улучшить утилизацию кеша при переходе между страницами. При переходе на новую стратегию разделения чанков общий размер генерируемого js-кода на production-сайтах уменьшился в среднем на 20%.

Рекомендую почитать статью, если интересуетесь темой производительности.

#webpack #performance

https://web.dev/granular-chunking-nextjs/

Написание простого Chrome расширения

#chrome #webextension #jsarticle #javascript #frontend #webdev

Динамический рендер компонентов в React

#react #frontend #webdev #jsarticle #javascript

Избегание ненужных вызовов функций с помощью throttling и debounce

Осуществляется посредством таймаутов, например:

 timeout
const debounce = (func, delay) => {
  clearTimeout(timeout)
  timeout = setTimeout(func, delay)
}

#jsarticle #javascript

Шпаргалка по location в JavaScript

#webdev #javascript #frontend #jsarticle

​​drei - набор компонентов и утилит для упрощённой разработки в react-three-fiber

Репозиторий открыт для добавления новых утилит и компонентов

#r3f #threejs #frontend #webdev #jslib #javascript

​​Цена JavaScript фреймворков - сравнение производительности React, Angular, Vue и jQuery

#jquery #react #angular #vue #frontend #webdev #jsarticle #javascript

Загрузка файлов с помощью Firebase Storage для Angular

#angular #firebase #frontend #webdev #jsarticle #javascript