Svelte это фронтендерский фреймворк, который стремительно ворвался в индустрию году так в 2018-2019, и произвел тогда невероятно сильное впечатление: новый подход, новый приятный синтаксис и невероятные показатели бенчмарков. Был только один вопрос, сможет ли такое более-менее-радикальное решение закрепиться на рынке и продержаться достаточно долго чтобы обрасти экосистемой вокруг - стать достаточно взрослым “для продакшена”.
Сейчас можно смело сказать что проект готов к реальным условиям: он живой, оброс различными готовыми решениями, получает поддержку от именитых организаций, и, мне захотелось попробовать его на практике, для того, чтобы сравнить по конкретным параметрам с другими популярными сейчас фреймворками, стандартами индустрии как React и Angular.
p.s: я не взял Vue.js в сравнение просто из-за нехватки свободного времени, в остальном прекрасный фреймворк, имею опыт.
Для надежности я решил сделать свой тестовый стенд - свое приложение, написанное на каждом из указанных выше фреймворках. Таким образом я контролирую всю кодовую базу и смогу попробовать именно те концепции что я использую в реальной работе.
Меня интересует как будет себя вести и ощущаться разработка следующих концепций:
- роутинг
- стейт-менеджмент
- различные варианты вложенности компонентов, слоты.
- работа с формами
- препроцессинг стилей
Причем разработка должна быть на максимально популярных и массовых для этих фреймворках технологиях и подходах, но при этом структура компонентов и в целом структура и количество кода максимально похожей - чтобы увеличить точность. Поэтому, местами код получился спорным, но я это делал с умыслом, чтобы максимально сблизить примеры.
стек технологий
Svelte: Sapper + встроенные средства для state management
React: Next.js + Redux
Angular : возможности стандартной Angular CLI + ngRx
тестирование
Что я посчитал важным протестировать и сравнить:
- общая скорость и комфорт разработки (сугубо по ощущениям и затраченному времени)
- размер билда, размер кода в памяти.
- передача данных по сети, количество запросов, и т.д.
- скорость отрисовки и рендеринга при различных общих операциях
- ну и общий скоринг lighthouse и webpagetest.
реализация
Описывать и разбирать код по частям не имеет смысла, прикладываю ссылки на репозиторий для каждого варианта.
Svelte
репозиторий: github: svelte-pomodore-timer-example
билд: surge: svelte-pomodoro-timer-example
Angular
репозиторий: github: angular-pomodoro-timer-example
билд: surge: angular-pomodoro-timer-example
React
репозиторий: github: angular-pomodoro-timer-example
билд: surge: angular-pomodoro-timer-example
Результаты, сводная таблица
По субъективным ощущениям комфорта побеждает конечно Svelte, несмотря на то, что для меня это абсолютно новый синтаксис, работать с концепцией приятно. Код пишется легко и в малом количестве.
Тяжелее всего, было на реакте, в силу большого количества Boulerplate-like кода и файлов которые надо описывать вручную, где, например, в Angular, за тебя делает CLI.
По показателям, размера бандла и работой с сетью с уверенным отрывом побеждает Svelte, т.е. эта вещь точно нужна при условии ограниченной памяти на целевом устройстве.
В отношении скорости рендера не все однозначно отрыв незначительный, слишком небольшой, чтобы быть уверенным что это не результат погрешности.
Неприятно удивил React/Next, и бандл самый большой, и непонятная магия с запросами под капотом.
Ниже прилагаю сводную таблицу с конкретными данными.
| Svelte (Sapper) | React (Next.js) | Angular (Angular-CLI) | |
| Github page | application code | application code | application code |
| Live demo | application example | application example | application example |
| Build phase | |||
| Bundle build time (sec) | 9 | 6 | 12 |
| Production build export size | 104 KB | 380 KB and increasing every build | 292 KB |
| Network | |||
| JS files in browser (kB) | 29,3 | 83,778 | 81,1 |
| CSS files in browser (kB) | 0,93 | 2,1 | 0,94 |
| Total resources loaded (kB) | 88,2 | 276 | 269 |
| Total requests | 8 | 19 | 6 |
| DOM Content Loaded (sec) | 1,13 | 0,581 | 1,31 |
| Total Load (sec) | 1,52 | 1,82 | 1,31 |
| Coverage | |||
| Js code used (%) | 82 | 74 | 74 |
| CSS code used (%) | 90 | 57 | 66 |
| Lighthouse scoring | |||
| Performance | 100 | 99 | 97 |
| Accessibility | 100 | 94 | 94 |
| Best Practices | 93 | 93 | 93 |
| SEO | 80 | 80 | 80 |
| webpagetest.org scoring | |||
| First Byte (sec) | 0,365 | 0,353 | 0,324 |
| Start Render (sec) | 0,7 | 0,6 | 1 |
| First Contentful Paint (sec) | 0,647 | 0,619 | 0,97 |
| Largest contentful paint (sec) | 0,646 | 0,619 | 0,97 |
| Performance investigation | |||
| When pomodoro timer decreased by one second | |||
| Scripting (ms) | 0,4 | 0,6 | 0,5 |
| Rendering (ms) | 0,3 | 0,3 | 0,3 |
| Painting (ms) | 0,2 | 0,2 | 0,2 |
| System (ms) | 0 | 0 | 0 |
| When user click "pause" button and timer goest into on-pause-state | |||
| Scripting (ms) | 3 | 5 | 3 |
| Rendering (ms) | 5 | 6 | 6 |
| Painting (ms) | 4 | 4 | 5 |
| System (ms) | 8 | 9 | 9 |
| Route change behaviour (User goes to /config SPA page) | |||
| Scripting (ms) | 5 | 9 | 10 |
| Rendering (ms) | 2 | 1 | 1 |
| Painting (ms) | 0,4 | 0,3 | 0,2 |
| System (ms) | 1 | 1 | 1 |
: 09 Jun 2021
: