Реагирайте срещу ъглови - кое е по-добро и защо?

Angular / React - Две от най-популярните рамки на предния край.

Крайното ръководство за сравнение и анализ за начинаещи.

Много е казано и писано за React and Angular. Безкрайни дебати за това кое е по-добро и защо? И двете имат своите плюсове и минуси и е важно да се разбере, че никоя рамка не е най-добрата. Аз за един силно вярвам в това. Но също така вярвам, че за дадено изявление на проблем или сценарий винаги ще има рамка, която е по-жизнеспособна от други и ние като разработчик трябва да разбираме основно как работят тези рамки и да можем да оправдаем защо сме избрали определена рамка за това конкретно приложение.

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

Целта на този блог е да намали объркването сред разработчиците, които са в дилема да избират между тези две популярни рамки. Въпреки че този блог е за начинаещи, фундаментално разбиране за това как работи мрежата, как работят приложенията за една страница и основните знания в JavaScript е необходим.

Факторите, които смятах да оценявам тези две рамки по различни въпроси са -

  • Четене (Колко лесно е да се чете и разбира кодът)
  • Чувствителност (колко лесно е да се приложи определен модул)
  • Управляемост (Основен проблем при работа с големи приложения)

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

ОБЩНОСТ

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

СКОРОСТ И ИЗПЪЛНЕНИЕ

За да бъда честен, може би сте чели много за това как реагирането е много по-бързо поради V-DOM и други основни оптимизации. Но трябва да се вземат предвид и най-новите версии на ъгловите (Angular 6 сега), където Google твърдят, че са се променили много под капака и са го направили много по-бързо от преди. Като каза това, реагирането може да победи ъглово в повечето случаи, когато става въпрос за скорост. Искате вашето приложение да има тази допълнителна мили секундна скорост, тогава можете да продължите напред и да изберете реакция. Но за начинаещ, повярвайте ми, наистина няма толкова голямо значение.

УЧЕБНА КУРТА

Аз лично намерих реакция по-лесно да науча в сравнение с ъглови. Вероятно най-доброто нещо в реакцията е фактът, че не е нищо друго освен JavaScript. Обърнете внимание, че react очаква разработчика да се научи и да се включи с най-новите версии на jas6 и es7, за да следва най-добрите си практики. Дори DOM манипулациите и изобразяването на динамични данни се извършват чрез JSX, език с по-висок ред, който позволява на потребителите да смесват javascript и html код заедно. Използвайки JSX, ние пишем по-голямата част от динамичната логика на изобразяване в реакция. Тъй като всичко е основно Javascript, всъщност можем да се потопим направо в кодирането.

JSX смесване на HTML с Javascript

Ъгловата от друга страна изисква да научите някои допълнителни неща като шаблоните езици и няколко синтаксиса на машинопис и други неща. Въпреки че може да не изглеждат трудни, те отнемат известно време и ресурси. Динамичното изобразяване на html се извършва с помощта на езика на шаблоните, а бизнес логиката е написана в typecript, супер набор от javascript. Трябва да научим поне няколко от тези понятия, преди да започнем кодирането.

Използване на езици за шаблони на ъгъл

ЧЕТВАНЕ НА ЧИТАНЕ НА ОБЩО

Самите положителни точки на реакция стават отрицателни в този случай. С увеличаването на размера на приложението и кода размерът на JSX кода расте и става все по-трудно да се управлява и чете. Смесването на Html и JavaScript, въпреки че традиционно се счита за лоша практика, реагира използва JSX и показва колко пълноценна употреба може да бъде. Но не и без компромиси. Прочитаемостта на кода определено страда при изграждането на по-големи приложения. Зависи от отделния човек, ако ви е удобно, тогава можете да продължите с него.

От друга страна, ъглов, не смесва HTML и typecript в нито един момент. Без значение колко голямо расте приложението. Въпреки че изучаването на малко от новите концепции на ъглови може да отнеме известно време, след като сте удобни с него, става много лесно и четливостта на кода не намалява с увеличаването на размера на всеки компонент или на цялото приложение.

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

СТРУКТУРА НА ПРОЕКТА

Аз лично забелязах, че ъгловият по-често не ви принуждава да структурирате проекта си според най-добрите практики. От вас се изисква да отделите html файловете, css файловете и ts файловете на всеки компонент. Това прави структурирането на проекта много лесно и е много лесно да се поддържат големи приложения с огромни кодови бази.

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

Сега започваме някои от основните проблеми, на които се сблъскваме, докато използваме рамки от предния край и ще започнем да ги сравняваме по това колко лесни са за изпълнение в двете тези рамки.

СВЪРЗВАНЕ НА ДАННИ

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

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

Двупосочно обвързване за входния елемент с променлива „име“ в ъгъл

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

Двупосочно свързване на данни в реакция. props.changed е функция, която ще се изпълнява всеки път, когато има промяна в стойността на елемента. По този начин трябва да се приложи и функционалният код.

Четене на код: ъглова

Код на писане: До степен, ъглова

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

ИЗДЪЛЖИТЕЛНО ДИНАМИЧНО СЪДЪРЖАНИЕ

Предаването на динамично съдържание е основен проблем във всяко уеб приложение. В зависимост от състоянието на променливите в приложението може да се наложи да рендерираме определени елементи или да изпуснем определени елементи. Например, списъкът на публикациите, които ще бъдат показани, е динамичен и трябва да бъде визуализиран по време на изпълнение.

Аз лично открих, че е много по-лесно да се изобразява динамично съдържание, отколкото ъглово. Само заради силата на JSX и колко удобно ни позволява да избираме какво трябва да се рендира и кое не. React се възползва от факта, че всичко е само JavaScript и по този начин можем да имаме широк диапазон на гъвкавост, когато става въпрос за избора на това, какви елементи трябва да бъдат представени въз основа на стойности на променливи. Въпреки че приемам, че JSX не е толкова добър за четене на код, той със сигурност ни дава фин контрол върху съдържанието, което изобразяваме.

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

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

Списък за изобразяване на герои. Динамично съдържание в ъгъл с помощта на ngFor директива

Четене на код: Angualar

Код за запазеност: Реагира (поради JSX и неговата гъвкавост)

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

УСЛОВНО СТИЛИРАНЕ ЗА ЕЛЕМЕНТИ

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

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

Предоставяне на условни класове на елемента div въз основа на стойността в случай на превключване в реакция.

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

Предоставяне на условни класове на div, използвайки директивата [class.classname], която се решава според израза, който е даден срещу нея в ъгъл

Четене на код: Определено ъгловият е много прав и лесен за разбиране, след като разберете какво правят директивите. Разбирането на сложния JSX от друга страна е предизвикателство за всеки.

Код за запалимост: реагирайте. Тъй като ни дава много повече гъвкавост и контрол.

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

СТИЛНА ОБХВАТ

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

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

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

Ето защо, ако се нуждаете от капсулиране на изглед или с прости думи, определяне на стила, преминете на ъглова. Период.

СМЯНА НА СТАТИЯТА НА ПРИЛОЖЕНИЕТО

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

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

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

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

Код на писане: Ъглова

Четене на код: Ъглова

Управление на кода: Реагирайте (понякога е много полезно и удобно)

Куки за жизнения цикъл на компонентите:

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

Компонент за комуникация на компоненти

Представете си, че страницата ще бъде разделена на няколко малки части. Всяка част се нарича компонент и всеки компонент има свое състояние и всичко. Компонентите са основните градивни елементи на приложението. Например заглавката може да е компонент. Списъкът с публикации може да е компонент. Всеки компонент ще има собствена бизнес логика и състояние, въз основа на които ние представяме елементите на компонента. Всеки компонент може допълнително да бъде разделен на няколко по-малки компонента. Външният компонент може да бъде посочен като родителски компонент, а вътрешният - като дъщерни компоненти.

В уеб приложение е много важно два компонента да комуникират помежду си. Трябва да установим връзка от родителски компонент към дътен компонент и обратно. Нека видим как ъглови и реагиращи ни помагат да правим и двете.

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

Предаване на данни от родителски компонент в дъщерния компонент в реакцияПредаване на данни от родителския компонент към дъщерния компонент в ъгъл

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

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

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

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

React следва различен подход, когато става въпрос за изпращане на данни от дете на родител. Това, което по същество правите, е да изпратите референцията на родителската функция като реквизит, който трябва да се изпълни, когато нещо се случи в детето, на детето, което то само. След това детето се уверява, че тази функция се изпълнява, когато се случи нещо като onclick или нещо друго. Можем, разбира се, да изпратим аргументи за функцията на родителите и по този начин сме установили комуникация от детето към родителя. Коректен начин на работа не мислите ли така?

Изпращане на препратката на функцията до дъщерния компонент като реквизит към компонента

Кой начин е по-добър? И двамата на теория са сходни и изпълняват една и съща функционалност. Кой метод е по-лесен? Ще ви позволя да бъдете съдия по това. Който и метод да мислите, че е по-подходящ за вас, продължете с тази рамка. Въпреки че трябва да се отбележи, че в ъгъл, ние трябва да научим синтаксисите за излъчване на събития и други други неща, докато в реакция не е нужно да научавате нищо конкретно. Само доброто познаване на js би било достатъчно.

Четене: И двете са почти еднакви според мен

Чувствителност: Реагира го прави по-добре и по-опростен начин

HTTP ПОТВЪРЖДАВА ДО СЪРВЪР / НАЗАД

Извършването на асинхронни обаждания към сървъра за получаване на данни и съответно визуализация е една от основните задачи на всяко едно приложение за страница. И двете рамки предлагат голяма подкрепа за реализиране на функционалността. Ъгловата използва модул „Http“, докато реагира препоръчва използването на „аксиос“. И двете са много сходни и са много лесни за използване. Продължете напред с някой от тях. Въпреки че е много важно да се отбележи, че това са асинхронни задачи и биха върнали „обещания“, които са основна концепция на JavaScript и всеки разработчик трябва да има знания как да се справя с обещанията и т.н.

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

Прекарването

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

Първото ми впечатление от маршрута в реакция беше, че това не беше лесна задача. Той превръщаше вече сложния jsx код в много по-сложен код. Но тъй като все повече и повече проучвам колко контролна реакция ни дава над маршрута, промених мнението си в него. React ви дава страхотен контрол върху маршрутите. Като активираме маршрутизиране вътре в приложението, ние всъщност променяме цялата динамика на приложението. Маршрутизацията прави толкова много за нас, но определено с цената на четене на код. В крайна сметка добавяте все повече и повече код към компонента, който вече се състои от сложен JSX код. Но за кратки приложения с няколко маршрута, това би работило чудесно. Един недостатък, за който вече говорих, е фактът, че нямаме друго място в приложението, за да съхраняваме маршрутите, различни от самия компонент. Това е мястото, където ъглови мисля, че ръбовете навън реагират. Не се заблуждавайте, маршрутите реагират и наистина са добри и ни дават много контрол върху това какво трябва да се направи, когато и кой маршрут е активен. Но когато приложението ви се състои от стотици маршрути, управлението на това в реакция става много трудно.

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

От друга страна, Angular има по-систематичен подход към маршрутите и мисля, че е много по-лесно да се кодира и да се разбере. В ъгъл, ние управляваме всички маршрути отделно на друго място. Дори тук уточняваме какви компоненти трябва да бъдат представени, когато определен маршрут е активен. Но само поради факта, че този код е независим от компонентния код, прави управлението му много по-лесно. Можем да имаме много друга конфигурация по маршрутите и всички те са на едно и също място. Не мислите ли, че този метод е по-добър?

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

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

Значи окончателната присъда? Ако приложението е малко с много малко маршрути, отидете за реакция. Но ако приложението е голямо с много маршрути и вложени маршрути и така нататък и така нататък, отидете с ъглови.

Четене: ъглова

Чувствителност: Реагирайте

Управляемост: ъглова

ПЪТНИ СТРАНИЦИ

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

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

Добавя се охраната на маршрута в реакция

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

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

Четене: Ъглова, тъй като е добре структурирана и систематизирана

Написаност: Реагирайте точно пред ъглови, тъй като трябва да научим нови концепции за ъглови. Реагирането от друга страна е само чисти манипулации с JavaScript

Управляемост: Ъглова за по-големи приложения

Форми, валидиране на формуляри и нейните операции

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

React извън кутията не идва с поддръжка по подразбиране по подразбиране. Трябва сами да напишете код, за да извлечете данните от формуляра, да го запишете в състояние, да валидирате въз основа на въвеждането и да направите условно стилизиране въз основа на въвеждането на формуляра. За условно стайлинг трябва отново да анализираме състоянието, да добавяме или премахваме класове въз основа на данните. Това определено е тромава задача, когато трябва да се справите с много потребителски данни. Въпреки че е лесно да се пише, тъй като за пореден път всичко е само javascript, за големи приложения става много трудно да се управлява. Въпреки че react ни дава много по-голям контрол върху данните от формулярите, това прави за сметка на четене на кода и управляемост.

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

Използване на модула за формуляри за операции с ъглови форми

Много е важно да се отбележи, че за да използваме формулярите, трябва да имаме ясно разбиране за това как работи. Ако го направите, тогава изпълнението е много лесно. Но когато става въпрос за реакция, това е всичко, но не и умна манипулация с JavaScript. Много лесна за работа. Значи окончателната присъда?

Четене: Реакцията на ъглови причини изисква от нас да напишем много код

Чувствителност: Реагирайте, защото в крайна сметка не е нищо друго освен JavaScript

Управляемост: Ъглова, тъй като е изградена в подкрепа за работа с форми.

СЪХРАНЕНИЕ НА ЦЕНТРАЛНИ ДАННИ

Може да попитате защо има нужда от централно хранилище, когато вече имате възможност за предаване на данни от родителски компонент в дочерния компонент и обратно. Да вземем пример, в който имате стотици компоненти в дървото на компонентите. И стигнахме до случай на използване, при който два компонента, които са много отдалечено разположени един към друг в дървото на компонентите, трябва да комуникират помежду си. В този случай е много трудно да предадем данните от източника до местоназначението през компонентното дърво с реквизити и т.н. Това е много трудно и затова се нуждаем от централно съхранение на данни, от което всеки компонент може да запише и извлече и актуализира данни. Типичен пример за централно съхранение на данни е съхраняването на детайли за удостоверяване, като например влезли и т.н. Вероятно всеки компонент трябва да има достъп до тази влезла в стойност стойност, за да представи съответно съдържанието. Angular се предлага с вградено централно хранилище, наречено услуги и реагира използва трета страна библиотека, наречена redux. Нека видим как работят и двете.

Angular използва специална конструкция, наречена услуги, която съхранява глобалните данни, до които има всеки регистриран компонент. За достъп до тези данни в услугата е необходимо да вмъкнем тази услуга в компонента и да я използваме. Намерих този метод за доста лесен за използване и много ефективен, когато ми трябват данни, за да бъдат последователни във всички компоненти. Можете също така да имате помощни функции, които работят върху централните данни. Може да имаме повече от едно централно хранилище и повече от една услуга. Обикновено имаме услуги, които управляват данни, свързани с удостоверяването, услуга, която изпълнява всички задачи на асинхронизиране, като например получаване на информация от сървъра и т.н. Какъв е недостатъкът на подобен подход? Когато размерът на приложението нарасне, става много трудно да се управлява кой актуализира централния магазин и кога. Става трудно да отстраните грешки и да разберете кой компонент е променил данните. Едновременното актуализиране на централното хранилище от много компоненти едновременно е друг проблем. С други думи, няма систематичен начин за актуализиране на централното хранилище. Като каза това, намирам услугите за много лесни и удобни за използване и съм използвал в много приложения. Ако имате нужда от централно съхранение на данни и искате данните да бъдат съгласувани във всички компоненти, определено отидете на ъглова и използвайте услуги.

Услуги в ъглови

Реакцията по подразбиране не идва с вграден пакет за централно хранилище. Следователно реакцията използва redux, пакет от трети страни, който действа като централно съхранение и предоставя методи за актуализиране и извършване на различни операции върху съхранението. Redux определено осигурява много по-систематичен начин за актуализиране на глобалното състояние на приложението. Тъй като дефиницията върви, всеки компонент има достъп до магазина за намаляване. След това всеки компонент повишава своята "команда за изпращане", която може да се разбира като команда за актуализиране или промяна на глобалното състояние. Тези команди за изпращане се улавят от функцията „редуктор“, която е единствената функция, която има разрешение за достъп до хранилището. Въз основа на командата за изпращане, редукторът извършва необходимата операция. Целият този процес дава много систематичен подход за актуализиране на глобалната държава. Пакетът redux също се грижи за едновременните транзакции и ги изпълнява по ред. Въпреки че предимствата на redux са много, той наистина не е лесен за настройка и определено не се препоръчва за малко приложение.

Пример за функция на редуктор, която приема в предишното състояние и въз основа на исканото действие, изпълнява задачата и връща актуализираното състояние.

Както бе споменато по-рано, не е необходимо да се редуцира за малко приложение с много малко компоненти, вместо това да се използват услугите на ъглови и изграждането на това приложение в ъгъл е по-добре. За по-голямо приложение можем да използваме оптимално използване на redux, но след това отново, redux не принадлежи да реагира. Това е библиотека на трети страни, която може да се използва с всяка друга рамка. Какво е да ви попречи да използвате редукс в ъглов? )

Четеност: ъглова (за нейната простота)

Чувствителност: ъглова (няма нужда от предварителна конфигурация и много малка крива на обучение)

Управляемост: Ваш избор, използвайте някоя от услугите или намаляване.

Каква е следващата стъпка сега?

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

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

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

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

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

Благодаря ти.