- PVSM.RU - https://www.pvsm.ru -
Материал, перевод которого мы предлагаем сегодня вашему вниманию, представляет собой обновлённую, с учётом положения дел в 2018 году, версию статьи [1] об исследовании фреймворков, которая была опубликована в декабре 2017.
[2]
В ходе исследования применяется приложение, варианты которого созданы в рамках проекта RealWorld [3] с использованием различных фреймворков. Тут нельзя говорить о полной идентичности разных вариантов приложения, всё же, созданы они на разных платформах, но такой подход позволяет реалистично проанализировать и сравнить характеристики различных фреймворков. Если говорить об этом приложении, то можно отметить следующие его особенности:
При подготовке этого исследования были учтены замечания к его предыдущей версии. В частности, раньше не изучался фреймворк Vue, теперь же он имеется в списке. Стоит отметить, что здесь задействована версия Angular, применяемая для разработки, но использование в приложении продакшн-версии этого фреймворка — лишь вопрос времени.
В исследование входят все фреймворки, перечисленные на странице проекта [3]. При отборе фреймворков не учитывалась, например, их популярность. Главное требование — наличие экспериментального приложения в репозитории RealWorld.
Фреймворки, включённые в исследование
В ходе исследования приложений, разработанных с использованием различных фреймворков, учитывались следующие характеристики:
src/
каждого из приложений.
Здесь мы пользовались таким показателем, как первое значимое отображение страницы (First Meaningful Paint [4]), полученным с помощью инструмента Lighthouse [5], который поставляется вместе с Chrome.
Чем быстрее будет выведена страница приложения — тем лучше оно будет воспринято пользователями. Средство Lighthouse также позволяет измерять показатель первой интерактивности [6] (First Interactive), но он пока находится на стадии бета-тестирования и практически идентичен для всех вариантов приложений, поэтом тут мы ограничились именно показателем первого значимого отображения страницы.
Первое значимое отображение страницы для разных фреймворков в миллисекундах. Чем этот показатель ниже — тем лучше.
Если рассмотреть полученные результаты, то можно сказать, что все они достаточно хороши и на практике заметить разницу между ними будет очень непросто.
Здесь мы анализировали объём переданных данных, полученный средствами вкладки Network инструментов разработчика Chrome. Учитывалось всё то, что передаётся с сервера, включая заголовки и тело ответа. Чем меньше файл готового приложения — тем быстрее он загружается, и тем меньше времени нужно на его разбор в браузере.
Этот показатель зависит от размера кода фреймворка, от добавленных в проект внешних зависимостей, и от качества работы инструмента, применяемого для создания сборок.
Размер передаваемых данных в килобайтах. Чем он меньше — тем лучше.
Можно заметить, что лидерами по данному показателю являются Svelte, Dojo 2, AppRun и Crizmas MVC. Об ELM пока сложно сказать что-то определённое, особенно учитывая данные по размеру кода программ, которые мы рассмотрим ниже. Кроме того, интересно было бы взглянуть на то, как в подобном сравнении покажет себя Hyperapp [7]. Возможно, нам удастся исследовать этот фреймворк в следующий раз.
Подсчёт количества строк кода приложения выполнялся с помощью cloc [8]. Обработаны были только файлы, находящиеся в папке src
. Пустые строки и комментарии не учитывались. Почему число строк кода, необходимое для создания приложения — это важный показатель? Вот что по этому поводу говорил Эдсгер Дейкстра: «Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения».
Число строк кода, который нужно написать для создания приложения с помощью разных фреймворков. Чем этот показатель меньше — тем лучше.
Чем меньше строк кода нужно для того, чтобы создать приложение — тем меньше вероятность сделать что-то неправильно. Кроме того, проекты, представленные меньшим объёмом кода, легче поддерживать.
В этом материале приведены результаты анализа веб-фреймворков по нескольким характеристикам. Конечно, выбор фреймворка для некоего проекта — это задача гораздо более масштабная, нежели учёт скорости загрузки приложений, написанных с использованием разных фреймворков, учёт размера их скомпилированных файлов и объёма кода, который нужно написать для того, чтобы выйти на требуемый функционал. Однако полагаем, что это исследование позволит взглянуть на различные фреймворки с новой точки зрения, а значит, поможет в принятии решений тем, кто занят выбором платформы для своего проекта.
Уважаемые читатели! Какими соображениями вы руководствуетесь, выбирая фреймворки для фронтенд-разработки?
Автор: ru_vds
Источник [9]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/277064
Ссылки в тексте:
[1] статьи: https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-e1cb62fd526c
[2] Image: https://habrahabr.ru/company/ruvds/blog/352888/
[3] RealWorld: https://github.com/gothinkster/realworld
[4] First Meaningful Paint: https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint
[5] Lighthouse: https://developers.google.com/web/tools/lighthouse/
[6] первой интерактивности: https://developers.google.com/web/tools/lighthouse/audits/first-interactive
[7] Hyperapp: https://hyperapp.js.org/
[8] cloc: https://github.com/AlDanial/cloc
[9] Источник: https://habrahabr.ru/post/352888/?utm_source=habrahabr&utm_medium=rss&utm_campaign=352888
Нажмите здесь для печати.