Истинско сравнение на реални рамки с еталонни показатели

Снимка от delfi de la Rua на Unsplash
Актуализация: Има по-нова версия на тази статия

През последните няколко години наблюдаваме експлозия на предни рамки. Всеки един от тях е повече от способен да създава страхотни уеб приложения. И така, как сравнявате и решавате кой да използвате за следващия си проект?

На първо място, за да направим смислено сравнение, ни трябват няколко неща:

  1. Real World App - Нещо повече от „тодо“. Обикновено "todos" не предават знания и перспектива за действително изграждане на реални приложения.
  2. Стандартизиран - Проект, който отговаря на определени правила. Хоствано на едно и също място, осигурява приложен API, статично маркиране, стилове и спецификации.
  3. Написано от експерт - Последователен, реален проект, който в идеалния случай би изградил експерт по тази технология. Това е вярно, поне през повечето време (вижте по-долу).

И така, как да получим такъв проект? Добрата новина е, че Ерик Симонс вече създаде проект RealWorld. Това е клонинг на платформата за блогове Medium. Всяка реализация на този проект използва една и съща HTML структура, CSS и API спецификации, но различна библиотека / рамка. Що се отнася до експертните знания, това е истина през повечето време. Написах имплементация в ClojureScript и ре-рамка и не се смятам за експерт. В моя защита експерт прегледа кода ми - благодаря на Даниел Комптън.

Сега имаме спецификация за изходно ниво, имаме нужда от стандартен набор от тестове / показатели, за да ги сравним.

  1. Производителност. Колко време отнема това приложение, за да покаже съдържание и да стане използваемо?
  2. Размер. Колко голямо е приложението? Ще сравним само размера на компилирания JavaScript. CSS е общ за всички варианти и се изтегля от CDN (мрежа за доставка на съдържание). HTML е общ и за всички варианти. Всички технологии се компилират или транспилират в JavaScript, като по този начин ние само размерите на този файл.
  3. Редове от код. Колко реда код се нуждае от автора, за да създаде приложение RealWorld въз основа на спецификацията? За да бъдем справедливи, някои приложения имат малко повече звънци и свирки, но не трябва да имат значително въздействие. Единствената папка, която количествено определяме, е src / във всяко приложение.

В момента на написването (декември 2017 г.) проектът RealWorld е достъпен в следните рамки:

  • Реакция / Редукс
  • бряст
  • Ъглова 4+
  • Ъглова 1.5+
  • Реагирайте / MobX
  • Crizmas MVC
  • CLSJ Keechma
  • AppRun
  • CLJS re-frame (Това е този, който направих. Той все още не е изброен в RealWorld Project).

Показател №1: Производителност

Първи смислен тест на боя с Lighthouse Audit, който се доставя с Chrome.

Колкото по-рано рисувате, толкова по-добро е изживяването за човека, който използва приложението. Фара също измерва First interactive, но това беше почти идентично за повечето приложения.

Първа смислена боя (ms) - по-ниска е по-добре

Показател № 2: Размер

Размерът на трансфера е от раздела мрежа на Chrome. GZIPed заглавки за отговор плюс тяло за отговор, предоставени от сървъра.

По-малък файл = по-бързо изтегляне и по-малко за анализ.

Това зависи от размера на вашата рамка, от всички допълнителни зависимости, които сте добавили, и от това колко добре вашият инструмент за изграждане може да направи малък пакет.

Размер на трансфера (KB) - по-нисък е по-добре

Показател № 3: Кодове на реда

Използвайки cloc, преброяваме редовете от кода във папката src на всяко репо. Празни и коментарни редове не са част от това изчисление. Защо това е смислено?

Ако отстраняването на грешки е процесът на премахване на софтуерни грешки, програмирането трябва да е процесът на тяхното въвеждане - Edsger Dijkstra

Колкото по-малко редове код имате по-малката вероятност за грешка и по-малката кодова база, която да поддържате.

# Редове от код - по-малко е по-добре

заключение

производителност

Това е RealWorld сравнение, а не еталон във вакуум. Тестовете бяха проведени извън Европа (Швейцария). Всички приложения бяха хоствани на Github. Стойностите могат да се различават за вас, което е добре. Тестовете са извършени няколко пъти за всяко приложение, след това са осреднени и закръглени. Резултатите бяха доста линейни при сравняване през целия ден. Повечето библиотеки / рамки са в обхвата на отлични и добри. Няма да видите голяма разлика по отношение на представянето.

размер

Размерът на пакета за всяко приложение винаги е един и същ. Сравняваме подобни реализации и разглеждаме как се различават размерите на пакетите. AppRun е луд! Погледнах няколко пъти, защото не можех да повярвам. Elm върши невероятна работа, що се отнася до размера на пакета и особено когато гледате редове от код.

Размер на пакет пакет AppRun 18.7KB

Редове код

Това оказва най-голямо влияние върху вас като разработчик на софтуер. Колкото повече редове код, толкова повече трябва да въведете и повече за поддържане. Тук има някои компромиси. Особено когато става дума за въведени спрямо динамични езици. Типовете ви дават повече безопасност и се предлагат на цена - повече неща да напишете.

Въведени спрямо динамични

Въведени: бряст, ъглова 4+ и AppRun.

Динамичен: Реагирайте | Редукс, ъглова 1.5, реагира | MobX, Crizmas MVC, CLJS Keechma и CLJS пре-кадър.

И така, кое е по-добре? Не е по-добре или по-лошо, различно е. Подобно на TDD (Test Driven Development), някои хора го обичат, други го мразят. Можете да разработите страхотен софтуер с или без него - изберете този, който ви подхожда по-добре.

Къде са Vue, Preact, Ember, Svelte, Aurelia и други?

Изглежда, че закъсняват за купона, но не се притеснявайте. Ще направя още един кръг, когато ги имаме. Вече има отворени въпроси - помислете за принос! Или започнете от нулата и отворете нов брой.

Заключителна дума

Това сравнение е точно това, което казва. Сравнява различни реализации на подобни реални уеб приложения в реален свят. Знам, не е перфектно Тя се различава въз основа на натоварването на сървъра, мрежовия трафик и много други неща, които се случват в реалния свят.

Благодаря на Даниел Комптън за четенето.

Ако ви хареса тази статия и бихте искали да бъдете уведомени, когато пусна подобна статия, помислете, че ме следвате в среда и туитър.