Сравнение между Angular и React и техните основни езици

В тази статия ще сравним две от най-популярните уеб технологии през 2019 г., а също така ще разгледаме тяхната история, ключови разлики, препоръчани основни езици (TypeScript и JavaScript) и т.н. Като цяло тези технологии улесниха много по-лесно разработчиците да използват повторно, рефакторират и поддържат код, като разделят нещата на модули / компоненти.

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

Трябва да знаете, че сравнението между тези две технологии не може да бъде изцяло покрито. Angular се предлага с пълна рамка (MVC), докато React е фронтова библиотека с много пакети с отворен код, с които да се интегрира.

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

Въпроси, към които трябва да се обърне внимание

  • Какви са основните разлики между Angular и React?
  • Какво прави TypeScript толкова специален?
  • Колко популярни са тези технологии?
  • Какво е текущото състояние на отворен код?
  • Коя технология компаниите използват най-много?
  • Влияят ли статичните типизирани езици върху качеството на кода и времето за разработка?

Бъдещите раздели ще бъдат добавени въз основа на търсенето от коментарите.

Ключови сравнения

Ето едно кратко сравнение между Angular (вляво) и React (вдясно).

Едно нещо, което наистина е страхотно за React по отношение на производителността, е Virtual DOM, за който вероятно сте чували няколко пъти. Ако не, не се притеснявайте, ще го обясня!

Проблем

Да приемем, че искате да актуализирате датата на раждане на потребител в рамките на HTML тагове.

Виртуален DOM

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

Редовен DOM

Той ще актуализира цялата дървесна структура на HTML таговете, докато достигне датата на раждане.

Защо има значение?

Може да няма значение за проблема, описан по-горе. Ако обаче се справим с 20–30 асинхронни заявки за данни на една и съща страница (и за всяка заявка за страница заместваме целия HTML блок), това ще повлияе на производителността, както и на потребителския опит.

Имате нужда от повече контекст? Вижте статията на Dace!

Но първо, обратно към началото ...

История

Ще трябва да знаем малко история (контекст), защото тя дава представа за това как нещата могат да се оформят в бъдеще.

Няма да навлизам в подробности какво точно се е случило между Angular и AngularJS и съм сигурен, че има много налични ресурси, които го покриват. Но накратко, Google замени AngularJS с Angular и JavaScript с TypeScript.

Добре, така че по времето на ES4 / ES5 кривата на обучение за JavaScript беше наистина висока. Ако сте дошли от света на Java, C # или C ++, свят на обектно-ориентирано програмиране (OOP), тогава изучаването на JavaScript просто не е било толкова интуитивно. С други думи, това беше болка в дупето.

Не защото езикът е бил зле написан, а защото има различно предназначение. Той е създаден, за да се справи с асинхронната природа на мрежата, като взаимодействие с потребителя, обвързване на събития, преходи / анимации и т.н. Това е различно животно с различни инстинкти.

Популярност

Както Google Trends разкриват, Angular и React са две от най-популярните уеб технологии през 2019 г.

Angular има повече посещения за търсене от React, но не означава непременно, че едното е по-добро от другото. Но това показва какво е интересно на хората, каквато и да е причината. Важно е да знаете, че хората могат да се смесват между ключови думи като AngularJS или Angular и по този начин да водят до по-високи резултати от търсенето.

Едно е сигурно - и двете технологии растат, а бъдещето изглежда светло. Това означава, че не трябва да се притеснявате дали една технология ще се провали и ще ви остави зад себе си.

Важно е да не пренебрегваме историята по отношение на случилото се между AngularJS и Angular, защото историята е форма на индикация за това какво може да се случи в бъдеще. Но ако имате известен опит с Angular и AngularJS, тогава най-вероятно ще разберете защо решенията са взети за по-добро. Само да спомена, подобни неща могат да се случат на всякакви рамки там, включително React.

Отворен код

React има над 100 000 звезди, заедно с 1200 участници и близо 300 въпроса, които чакат да бъдат решени.

React има предимство във времето за пускане на пазара, тъй като беше пуснат 3 години преди Angular. И това означава, че се е сблъскал с много реални проблеми, преминал е през критични тестове и като цяло се е превърнал в адаптивна и гъвкава библиотека с интерфейс, която много хора обичат.

Що се отнася до Angular, на пръв поглед ясно виждаме, че Angular има 6 пъти повече проблеми от React (не е добре). Не трябва обаче да забравяме, че Angular е много по-голяма рамка и освен това има по-малко разработчици, които я използват (в момента), тъй като тя беше пусната през 2016 г.

Статистика взета от страницата Angular and Reacts GitHub.

Какво използват компаниите

React първоначално е разработен във Facebook за Facebook, за да оптимизира и улесни развитието на компонентите. Статия, написана от Крис Кордъл, посочва, че React има по-голяма употреба във Facebook, отколкото Angular в Google.

И така, кой използва коя технология?

# Реагирайте

  • Facebook
  • AirBnb
  • Uber
  • Нетфликс
  • Instagram
  • WhatsApp
  • Dropbox

# Ъглова

  • Яжте24
  • Магазин за CVS
  • еднофутбол
  • Google Express
  • НБА
  • Делта
  • wix.com
Ако знаете за големи (добре познати) компании, използващи Angular, моля, споделете с линк.

TypeScript и JavaScript (ES6 +)

Както споменах, може да бъде подвеждащо да сравнявате само Angular и React, без да се фокусирате върху основния език, който всеки от тях подчертава (според техните документи).

Забележка! Целта на този раздел не е да решим дали ще изберем Angular или React. Но изяснете няколко погрешни схващания между статично и динамично типизирани езици, които се случват от известно време, подкрепени с изследвания.

По отношение на потребителската база JavaScript е по-добър. Но TypeScript бързо се увеличава, така че кой знае какво ще донесат 10-15 години.

Популярност на TypeScript през последните 5 години

Популярност на JavaScript през последните 5 години

Популярност на JavaScript срещу TypeScript през последните 5 години

TypeScript първоначално е разработен от Microsoft, за да улесни JavaScript (с други думи, за да улесни ES5). Издаден е през октомври 2012 г. И това е просто преводач, който компилира TypeScript в JavaScript код, което също означава, че можете да напишете ES5 код във файл TypeScript. TypeScript е посочен като надмножество на JavaScript.

Като цяло TypeScript осигурява плавен преход за програмисти с фон на обектно-ориентирано програмиране (OOP). Важно е да се отбележи, че TypeScript е издаден по време на ES5 и през това време ES5 не е базиран на класа OOP език.

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

През последните години обаче JavaScript се разви и внедри много големи промени като модули, класове, оператори за разпространение, функции на стрелки, литерали на шаблони и т.н. Като цяло, той позволява на разработчиците да пишат декларативен код, като същевременно поддържа характеристиките на истинския OOP език (т.е. включително структурата, базирана на класа).

Статично и динамично типизирани езици

Статически типизиран език основно означава, че можете да дефинирате типа на променливата (низ, число или масив и т.н.). Може да попитате защо това е важно. Ето една аналогия в реалния свят, която съм настроил (креативност в най-добрия случай).

Да предположим, че искате да зареждате колата си с бензин. Едно нещо, което е важно, е да зареждате с подходящия газ - бензин или дизел. И ако не знаете, може да се наложи да си купите нова кола.

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

Добре, така че ако все още сте объркани какво означава статично въведено, проверете това:

Статично типизирано свойство

Статичен типизиран аргумент

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

За щастие изследванията (tl; dr video) са приели това сериозно и поставят този мит на изпитание с 49 субекта.

Наблюденията от изследването са:

  • Статически типизираният език изисква повече време поради поправяне на грешки при печатане
  • Динамично въведен език е четим и по-лесен за писане (декларативен код)

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

Ако искате да се задълбочите в тази тема, предлагам да прочетете тази статия от Ерик Елиът, в която се казва, че може да не ви е необходим TypeScript (или статично въведени езици).

Какво да избера

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

Ако не сте фен на типовете, тогава няма нищо, което да ви попречи да пишете ES6 код в TypeScript. Просто ако имате нужда, значи е там.

Но ако създадете доста голямо приложение отпред и с Angular, работещо с много HTTP заявки, тогава наличието на типове наистина помага при въпроси като „Какъв тип обект е това, какви полета мога да използвам и какъв тип е това поле и т.н.“ . Той работи чудесно за сътрудничество и изясняване на малки неща.

Ето едно просто сравнение на обект клас между TS и JS (ES6).

IMO

Статично напечатаният се чувства структуриран, сигурен, четим и лесен за сътрудничество с други (пречи на хората да предават неочаквани ценности). Въпреки това, когато работя с динамично въведени, имам гъвкавостта и креативността, за да се съсредоточа повече върху създаването, отколкото да мисля много за типовете, интерфейсите и генеричните продукти и т.н.

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

Ето актуализация - в момента работя с няколко разработчици на Microsoft, за да създам приложение, използващо Angular framework. Причината, поради която избрахме Angular, е, че повечето от пакетите вече са дефинирани и документацията за всичко е на едно място. Той също така набляга на TypeScript, който е перфектен избор, тъй като повечето разработчици вече имат много опит с обектно-ориентирано програмиране.

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

Бележки за внасяне

  • TypeScript е просто преводач, той може да се използва с React или други JS рамки
  • React се справя ефективно с управлението на паметта (виртуален DOM)
  • React използва JavaScript (ES6), признат уеб език от 1995 г.
  • Angular използва TypeScript, издаден през 2012 г.
  • Статически типизираният език е страхотен, но не е задължителен
  • Динамично типизираните езици изискват по-малко време за писане и повече гъвкавост за използване на творчеството
  • Изучаването на статично написан език може да е предизвикателство, особено ако сте работили само с динамично въведени езици
  • ES6 е внедрил много страхотни функции като модули, класове, оператор за разпространение, функции със стрелки, литерали на шаблони, което ви позволява да пишете по-малко, по-чист и по-структуриран код (синтактична захар)
  • TS е просто ES6 + с типове и много повече

Заключение

Избраната от вас рамка / библиотека на компоненти може да повлияе на това колко време отделяте за програмиране и бюджета ви. Ако имате екип с разработчици на C #, Java или C ++, тогава вероятно бих избрал Angular, тъй като TypeScript споделя много прилики с тези езици.

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

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

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

  • Хаотичният ум води до хаотичен код
  • Разработчици, които постоянно искат да научат нови неща
  • Практическо ръководство за ES6 модули
  • Научете тези основни уеб концепции
  • Увеличете уменията си с тези важни методи на JavaScript
  • Програмирайте по-бързо, като създавате персонализирани команди за bash

Можете да ме намерите в Medium, където публикувам ежеседмично. Или можете да ме следвате в Twitter, където публикувам подходящи съвети и трикове за уеб разработка, заедно с лични истории.

PS Ако сте харесали тази статия и искате повече, моля, пляскайте ❤ и споделете с приятели, които може да се нуждаят от нея, това е добра карма.