Предните уеб разработчици трябва да вземат няколко решения и да избират от много опции. Трябва да решим какъв вид инструменти да използваме, кой език за програмиране да използваме и коя CSS рамка да включим. И все пак нито едно от тези решения не е толкова въздействащо, колкото изборът на рамката на потребителския интерфейс.
Обхватът на опциите за рамка непрекъснато се увеличава през последните години, като редовно се появяват нови и вълнуващи възможности. Въпреки това от 2019 г. „тримата големи“ остават последователни. Angular, React и Vue остават винаги видни. Под повърхността обаче тези програми са се развили драстично.
Тази статия изследва как големите три са напреднали през последните три години и очертава къде всеки от тях блести – или потенциално не успява.
Ъглова
Angular е пълната предна рамка на Google.
История
Angular започна като наследник на Angular.js, така че Google го представи като версия 2. Въпреки това, по същество беше пълно пренаписване, запазвайки само няколко концепции и оригиналната марка.
В момента Angular е наличен във версия 14 (14.0). Докато значителни издания се появяват на всеки шест месеца, Google актуализира рамката почти всяка седмица. Те обикновено поддържат всяка голяма версия за около 18 месеца.
Основни функции
Angular идва като цялостна рамка, разчитаща на модел, наречен инжектиране на зависимости. В този модел Angular регистрира услуги, които рамката след това предава на други услуги, модули или компоненти, когато системата ги използва. Инжектирането на зависимости често е корпоративна функция, която се среща най-често в езици със статично писане, като Java или C#.
Освен това Angular използва универсално изобразяване. Тази функция ни позволява да визуализираме Angular в браузър, сървър или мобилно приложение. Популярни рамки като Ionic и NativeScript разчитат изцяло на тази функция. Angular разполага и с автоматично разделяне на код, което повечето разработчици сега смятат повече за необходимост, отколкото за удобство.
Основни случаи на употреба
Angular е насочен предимно към корпоративния сектор. В резултат на това той естествено осигурява респектиращи архитектурни граници - конфигурацията или конвенцията решават всичко. Тъй като Angular проектите са склонни да включват много движещи се части, тяхната основна употреба е за по-големи приложения на корпоративно ниво.
Реагирайте
Facebook разработи библиотеката React за създаване на потребителски интерфейси.
История
Когато Facebook разбра, че подходът само с JavaScript носи значителни предимства при разработката, той пусна JSX - разширение за синтаксис на JavaScript - независимо от React. Днес JSX е де факто стандарт, който почти всички базирани на JS инструменти разбират и поддържат. React в момента е във версия 17 (17.0.2) и остава стабилна.
Преди версия 15.6.2 React използваше често критикуван лиценз BSD+Patents, което значително възпрепятстваше приемането. Ситуацията дори породи множество други проекти, като Preact и Inferno.js, които се опитаха да бъдат съвместими с API. Оттогава React премина към по-стандартния лиценз на Масачузетския технологичен институт (MIT).
Основни функции
Основната точка за продажба на React винаги е била неговият минимален API, което го прави относително лесен за използване. Под повърхността неговият еднопосочен поток и гъвкави области за изобразяване му позволиха да запази конкурентното си предимство.
Понастоящем компонентният модел на React е неговата крайна характеристика. Повечето React кодове използват функционални компоненти, които са функции с фиксиран подпис (получаване на props и връщане на React елемент). React организира тези компоненти с помощта на куки, които насърчават последователното и гъвкаво повторно използване на функционални аспекти.
Тази придобита гъвкавост се отплаща. React изобразява плавно както на сървъра, така и на статични страници (например Gatsby) или използвайки уникални поточни компоненти (сървърни компоненти). Неговият процес на хидратация поддържа впечатляваща скорост при първоначално зареждане дори на най-интерактивните уеб приложения.
Основни случаи на употреба
Facebook представи React, за да опрости усилията за разработване на потребителски интерфейс. По-късно разработчиците откриха, че неговият еднопосочен модел може да се разшири до всеки потребителски интерфейс извън мрежата. Следователно React проучи няколко други посоки, включително поддръжка на собствени мобилни приложения и създаване на PDF файлове.
Въпреки че React се прилага за всички видове приложения, той превъзхожда, когато се фокусира върху големи едностранични приложения (SPA).
Vue
Евън Ти представи Vue. Това е лека предна рамка.
История
Докато допринасяше за и използваше Angular.js, Evan You търсеше много по-прост подход, който все още можеше да изобразява динамични страници с цялото удобство и надеждност на предната рамка. В крайна сметка той разработи своето решение - Vue.
Публичният пробив на Vue дойде, когато PHP рамката Laravel прие Vue версия 2 като своя предна опция. В момента Vue е наличен във версия 3.2.31. Версия 3 стана стандартна версия в началото на 2022 г.
Преходът от Vue 2 към Vue 3 обаче не е лесен. Процесът на надграждане е сравним с преминаването от Python 2 към 3. Въпреки че най-новата версия включва правилните подобрения, тя представлява предизвикателства по отношение на екосистемата Vue и нейните зависимости.
Основни функции
Vue споделя много функции, които правят React и Angular доста привлекателни. Една популярна функция на Angular е двупосочното обвързване на данни. Въпреки това, докато Angular постигна това със „зони“ (въведени от zone.js) или изрично използвайки услуга ChangeDetectionRef, Vue изпълнява двупосочно обвързване на данни имплицитно с гетери и сетери. Този подход запазва производителността, докато всичко протича по-естествено.
В същия дух Vue представи еднофайлови компоненти (SFC), използващи определен файлов формат (*.vue) във връзка с HTML тагове, за да разделят файловете на три части. Една част е елементът на скрипта за действителния JavaScript код. Друг е елементът на шаблона за указване какво да се визуализира. Третият е стиловият елемент за включване на всеки CSS.
Тези еднофайлови компоненти се комбинират добре и образуват последователна единица. Освен това SFC позволява използването на JSX, например, за изобразяване на други компоненти, импортирани от другаде.
И накрая, Vue въведе API за композиция, за да внесе повторно използване - например по отношение на жизнения цикъл на компонента - в процеса на разработка. Той е доста подобен на подхода на React за използване на куки по някои начини.
Основни случаи на употреба
Vue се оказва изключително удобна средна позиция за тези, които намират Angular за твърде експанзивен и React за твърде ограничен. Той разбира себе си като библиотека, а не като рамка. Така че Vue е идеален за приложения със среден размер.
Сравняване на Angular, React и Vue
И трите рамки осигуряват солидна основа за най-съвременните предни части. Въпреки това, техните различия могат да направят една рамка по-благоприятна от нейните алтернативи.
производителност
Трябва да вземем предвид някои показатели, когато оценяваме ефективността. Например размерът на пакета - размерът на файловете, излъчвани при използване на определена рамка - може да бъде много информативен. Освен това първоначалното време за зареждане измерва първото боядисване на съдържание — времето между инициализиране на приложението и момента, в който съдържанието за първи път стане видимо за крайния потребител.
Тези показатели могат да отчитат различни условия, включително размер на приложението, скорост на мрежата и тип или производителност на устройството.
Един отличен начин за измерване на скоростта е чрез js-framework-benchmark. Стрес тестовете показват, че Vue е най-бързата от трите рамки, като Angular и React осигуряват производителност, подобна една на друга.
Тестването на показателите за стартиране отново разкрива Vue като най-добрия изпълнител. Другите две рамки обаче се различават по-съществено от предишното тестване. Производителността на React превъзхожда тази на Angular, както се очаква от лека рамка.
И накрая, тестът за разпределяне на памет дава подобни резултати.
Въз основа на тези резултати Vue е ясният лидер по всички въпроси, изискващи бързина. Тестването обаче не може да отчете всички фактори на скоростта и сравняването на по-малки набори от данни може да доведе до различно заключение. Например Angular и React могат да оптимизират размера на пакета за по-малки приложения.
Vue печели точка от страна на производителността, а React е на второ място.
Лесна употреба
Докато лекотата на използване е изцяло субективна, тенденцията да се изисква TypeScript и неговите нови концепции поставя Angular в проблемна ситуация. Въпреки това, ако даден екип има опит с писане на солидни данни и структурирани рамки — като например в рамките на Java, C# или .NET — може да намери за най-продуктивно да използва Angular над React или Vue.
Въпреки това React си остава най-лесният за научаване. В края на краищата той има най-минималистичния API и използва концепциите на JavaScript навсякъде. От друга страна, Vue въвежда персонализирани имена и концепции върху HTML, известни като директиви, например v-if, за да работят нещата. Нуждата от документация за това как работят тези персонализирани концепции на Vue поставя React начело тук.
Тази точка отива към React, последвана от Vue. Екипите обаче трябва да обсъдят решения, за да решат кое е най-подходящо за тяхната ситуация.
Интеграции
Angular не се нуждае от много интеграции, допринесени от общността. Екипът на Angular предоставя почти всичко от кутията. Следователно общността се чувства много по-малко склонна да предлага повече интеграция тук. В крайна сметка това е работата на Angular, нали?
React силно разчита на приноса на интеграциите. React е доста популярен, така че броят на интеграциите е огромен. Като вземем нещо толкова фундаментално като инструменти, например транспилиране на JSX, виждаме поддръжка за синтаксиса на React почти навсякъде.
Тъй като можем да използваме JSX другаде (и Vue вече го използва), изглежда като решение, от което всички се възползват. В противен случай React използва стандартен JavaScript и не се нуждае от изключителна поддръжка. Това важи и за Vue (помнете SFC с неговите секции) и Angular. Angular използва HTML файлове, но те също съдържат персонализирани директиви, които трябва да интегрираме в интегрирана среда за разработка (IDE) или процес на изграждане.
Благодарение на лекотата и удобството на решението, React получава точката тук, с другите две близо зад него.
Документация
React и Vue имат едно предимство: Техните общности са доста големи и активни. React, например, има изброени над 1500 сътрудници. Следователно има достатъчно хора, които да помогнат за извеждането на документацията на изключително ниво.
Разбира се, екипът зад Angular не забавя документацията. Въпреки това, едно значително предизвикателство на Angular е, че трябва да проверим голяма част от онлайн документацията, която е остаряла, с версията, която използваме.
Въпреки че официалната документация на Angular е с правилни версии и е точна, онлайн отговорите на често срещани въпроси и уроците може да използват по-стари версии на Angular (или дори Angular.js). Това несъответствие предизвиква объркване и разочарование.
Освен това, тъй като Angular е огромен и има тенденция да прави нещата „по различен начин“ от по-широката JavaScript екосистема, документацията трябва да бъде по-обширна. Документацията е отлична за рутинни дейности, но когато трябва да персонализираме, липсват важни подробности.
React има най-малкия API и най-тестваните в битки концепции. Следователно документацията на React вероятно е златният стандарт. Въпреки това, като се има предвид, че Vue също трябва да покрива някои концепции и се нуждае от по-широк API, той върши страхотна работа.
Като се има предвид количеството необходима документация и нейното ниво, ние даваме тази на Vue, следвана от React.
Общност
Тримата големи спечелиха своето място на върха чрез изграждане на големи общности. Днес Angular има 80 хиляди звезди, React 183 хиляди звезди и Vue 193 хиляди звезди в GitHub. Взети заедно, това са почти половин милион звезди! Докато звездите сами по себе си не са надежден показател, те ни казват, че тези проекти са популярни и добре приети в общността.
Броят на допълненията към общността отразява фокуса на React и Vue върху предоставянето на по-малки, по-специализирани проекти. Докато Angular се опитва да изведе всичко от кутията, React и Vue са намерили своята сила в създаването на голяма екосистема. Следователно екосистемата включва потребителска поддръжка и поддръжка на създателите на плъгини. В крайна сметка такава екосистема е трудно да се победи, след като бъде създадена.
Основната целева аудитория на Angular, корпоративните потребители, прави своята аудитория малка. React и Vue имат равен дял от активната общност с отворен код. Въпреки това, около половината от общността на Vue използва Vue 2, а другата половина използва Vue 3. Докато повечето искат да преминат, няколко основни пакета все още са налични само за издадената по-рано версия 2.
React няма това предизвикателство. Неговият API остана същият и по-новите допълнения, като кукичките, не са задължителни, въпреки че общността прие тези промени доста бързо.
Щяхме да дадем на Vue точката тук, но тъй като преходът от Vue 2 към Vue 3 изглежда е малко борба на общността, ние ще отидем с React за тази точка, поставяйки Vue на второ място.
Пазар на труда
Общността не е всичко и фактът, че Vue се харесва предимно на независими разработчици и пазара на труда отразява това. Тук Angular и React са равни, докато Vue е зад тези двама със справедлива разлика.
Тъй като Angular е доминиращ в сектора на стабилните предприятия, ние му даваме първото място, но с React близо след него.
Заключение
Изборът на правилната предна рамка сред трите големи е най-вече въпрос на вкус. Докато някои рамки са по-пригодени за конкретни случаи на употреба от други, големите три са общи и достатъчно лесни за разработчици, за да ги използваме във всякакви проекти.
Angular може да има най-голям смисъл за група от бивши Java или .NET разработчици, докато привържениците на Node.js биха се почувствали по-овластени с React. И в наши дни независимите разработчици определено предпочитат Vue. В крайна сметка, решението коя рамка да се използва зависи изцяло от нефункционални аспекти, като състава на екипа.
