Тим Кадлек опубликовал пост с анализом производительности современных js-фреймворков — "The Cost of Javascript Frameworks".
Для анализа были использованы данные HTTP Archive: ~4,3 миллиона традиционных сайтов и ~5,5 миллионов мобильных. Оценивался объём js-файлов и время исполнения кода, использующего React, Angular, Vue.js и jQuery (добавлен for fun). По объёму кода на последнем месте для 90-го перцентиля оказались React (~2,2Mb) и Angular (~3,3Mb). По времени исполнении кода ситуация похоже, но для 90-го перцентиля на последнем месте оказался React (7,4 секунды), Angular (4,2 секунды). Для мобильных сайтов время выполнения кода для React вырастает более чем в три раза (~25 секунд), для Angular — примерно в полтора раза (~12 секунд).
Полученные цифры не говорят о производительности самих фреймворков и библиотек. Это "среднее по больнице", которое отражает преобладающие подходы к разработке в разных экосистемах.
#peformance #jsframeworks
https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/
Для анализа были использованы данные HTTP Archive: ~4,3 миллиона традиционных сайтов и ~5,5 миллионов мобильных. Оценивался объём js-файлов и время исполнения кода, использующего React, Angular, Vue.js и jQuery (добавлен for fun). По объёму кода на последнем месте для 90-го перцентиля оказались React (~2,2Mb) и Angular (~3,3Mb). По времени исполнении кода ситуация похоже, но для 90-го перцентиля на последнем месте оказался React (7,4 секунды), Angular (4,2 секунды). Для мобильных сайтов время выполнения кода для React вырастает более чем в три раза (~25 секунд), для Angular — примерно в полтора раза (~12 секунд).
Полученные цифры не говорят о производительности самих фреймворков и библиотек. Это "среднее по больнице", которое отражает преобладающие подходы к разработке в разных экосистемах.
#peformance #jsframeworks
https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/
Timkadlec
The Cost of Javascript Frameworks - Web Performance Consulting | TimKadlec.com
Пару недель назад Брайан Ким представил сообществу новый фреймворк Crank.js — "Introducing Crank".
Crank.js был вдохновлён React. Он использует JSX для создания компонентов. Компоненты могут создаваться с помощью генераторов
Потыкал его час. Работа с асинхронными запросами в компонентах выглядит органично. Для работы с событиями Crank использует интерфейс EventTarget, который используется в DOM. Работа с событиями императивна, в принципе нормально, но после React выглядит непривычно.
Брайан сделал очень большой упор на работу с нативными возможностями платформы. Один из пунктов его критики React, как раз заключается в том, что React старается переизобрести рантайм для UI, когда браузер уже им и является. Дэн Абрамов на Reddit написал пост с объяснением, почему React использует такой подход.
Пока рано говорить о судьбе Crank.js, но тем не менее это очень интересный эксперимент, отголоски которого мы, возможно, увидим в других фреймворках/библиотеках.
#jsframeworks #announcement
https://bit.ly/3deCWYj (пост Дэна)
https://crank.js.org/blog/introducing-crank
Crank.js был вдохновлён React. Он использует JSX для создания компонентов. Компоненты могут создаваться с помощью генераторов
function * (), такой подход позволяет использовать нативные конструкции языка для работы с жизненным циклом компонента. Также благодаря тому, что компоненты могут быть асинхронными, из коробки становятся доступны возможности, которые даёт Suspense в React.Потыкал его час. Работа с асинхронными запросами в компонентах выглядит органично. Для работы с событиями Crank использует интерфейс EventTarget, который используется в DOM. Работа с событиями императивна, в принципе нормально, но после React выглядит непривычно.
Брайан сделал очень большой упор на работу с нативными возможностями платформы. Один из пунктов его критики React, как раз заключается в том, что React старается переизобрести рантайм для UI, когда браузер уже им и является. Дэн Абрамов на Reddit написал пост с объяснением, почему React использует такой подход.
Пока рано говорить о судьбе Crank.js, но тем не менее это очень интересный эксперимент, отголоски которого мы, возможно, увидим в других фреймворках/библиотеках.
#jsframeworks #announcement
https://bit.ly/3deCWYj (пост Дэна)
https://crank.js.org/blog/introducing-crank