Светът на JavaScript е богата среда с десетки инструменти, библиотеки и рамки. Но с много опции идва много объркване. Това наистина е нож с две остриета.

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

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

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

Независимо дали избирате от една от тези популярни JavaScript рамки или от нещо по-езотерично, трябва да вземете под внимание всеки от тези аспекти.

Наличност на учебни ресурси

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

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

Отидете да потърсите ресурси от надеждни автори, с които имате предишен опит - в крайна сметка ще си струва времето. Ако се мъчите да намерите нещо полезно, бъдете внимателни: Рамката, която се опитвате да научите, може да е нова или все още не е добре възприета от общността.

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

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

Vue удря по средата: Има добра документация и има няколко приятни курса, от които можете да избирате.

Аурелия например има почти нулеви ресурси; единствената надежда за вас е документацията и късмета.

Предпочитам да имам избор.

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

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

Популярност

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

Причините за това са няколко. Ако рамката не е толкова популярна, това означава, че има няколко разработчици, които са специализирани в нея. Какво се случва, ако изоставите проекта или си намерите нова работа? Вашият работодател в крайна сметка остава в търсене на разработчик, който познава рамката, която сте използвали.

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

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

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

Очевидните лидери тук са Angular и React.

Повечето списъци с работни места, свързани с предния край, изискват едното или другото. Те са подкрепени съответно от Google и Facebook и следователно работодателите се чувстват „в безопасност“ по отношение на избора си.

Понякога изборът на рамка за вашата компания или клиент не зависи от вас; може би е направен от предишен служител или някой друг от екипа. Шансовете са да бъде Angular или React. Сега има и други опции като Ember и Vue. Но трябва умишлено да търсите компании, които ги използват.

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

	Ъглова 2	Реагирайте	Човек	Изглед
Звезди в GitHub	26 924	73 530	18,154	63 438
Сътрудници в GitHub	495	1044	679	122
Маркирани въпроси за StackOverflow	66,152	54 158	21 651	8,598

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

Ученето само на Angular или React само ще ви отведе до момента в кариерата. Разбира се, ще имате много възможности, но има причина да съществуват други рамки. Опитайте се да научите за тях през свободното си време и от време на време да правите някои експерименти. Дори никога да не ги използвате в реални проекти, ще получите ценна информация, която ще ви помогне във вашата ежедневна разработка.

Основни характеристики

Нека да станем малко технически сега.

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

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

Нека се докоснем накратко до популярните опции.

Ще започнем с Реагирайте и Изглед . Те всъщност не са рамки; те представляват само изгледния слой на вашето приложение. Това означава, че всички останали части - HTTP комуникация, валидиране на формуляри и т.н. - зависят от вас.

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

JSX на React винаги ме караше да се свивам. Трябваше да свикна. Шаблонирането на Vue обаче е наистина хубаво, особено ако идвате от Angular.

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

Ако имате опит в други рамки или JavaScript като цяло, може да се разочаровате, защото Ember използва неговите собствен обектен модел . Стандартните класове ES2015 не се използват широко, както се посочва в тяхната документация. Може да откриете, че присвоявате стойността директно на имот и Ембер се оплаква от него.

Друго съществено различно нещо от другите рамки е Данни за човека . Това е слой от данни за приложенията на Ember. Можете да мислите за това като някакъв ORM за предния край. Вие създавате модели и картографирате връзките между тях.

Сега, ако вашият сървър използва JSON API (това е спецификация за внедряване на JSON API), вие сте на добро място с Ember, но за съжаление повечето сървъри не го правят. Така че трябва да пишете персонализирани адаптери и сериализатори. Ако обаче правите нещата по начина на Ember, това може да е наистина продуктивно. Просто има стръмна крива на обучение.

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

Друго забележително нещо е интензивното използване на наблюдаеми от Rx библиотеката, което е наистина приятно. Можете да представите почти всичко като наблюдаемо и да приложите операции на високо ниво като карта, филтър и др. Ако сте използвали Lodash или Underscore, Rx е един и същ, но на стероиди.

Ето резюме на основните характеристики на четирите рамки, които обсъждаме в тази статия:

	Ъглова 2	Реагирайте	Човек	Изглед
Преглед / шаблон
Рутер
Обработка на формуляри
Проверка на формуляра
HTTP комуникация

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

Използваемост

Ако в този момент все още имате ентусиазъм за избраната от вас рамка, следващата стъпка е да изцапате ръцете си.

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

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

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

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

Сега за React и Vue те имат някакъв CLI, създайте-реагирайте-приложение и vue-cli . Но освен че генерират първоначален проект с някои опции, те не предлагат толкова много в сравнение с Ember или Angular. Разбираемо е, тъй като и двете представляват изгледен слой. Ако харесвате персонализирани работни потоци, експерименти или различни структури на базата на проект към проект, тогава сте на добро място. За някои разработчици гъвкавостта е ключът, който по същество идва с използването на React или Vue.

Ъглов 4 идва с a CLI както го прави Ембър. Можете да генерирате компоненти, директиви, услуги и др. Той също така генерира първоначалната структура за приложение, така че трябва само да се притеснявате за продукта. Тестовата среда е наистина приятна, тъй като с всяко генерирано приложение приложението за тестване живее близо до него (буквално). Освен това TypeScript може да осигури реално повишаване на производителността. Ето защо:

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

function doSomething(someData) { // do something }

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

Не сме се докосвали до IDE, но за повечето от популярните рамки има някои приставки, които правят разработката наистина лесна. WebStorm например кораби с вградена поддръжка за Angular, React и Vue.

Лесна интеграция (с други библиотеки)

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

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

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

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

За Vue и React вие сте отговорни за почти всичко и използването на други библиотеки не е изключение. Ако използвате Webpack или подобен инструмент за изграждане, можете директно да се обърнете към библиотеки, инсталирани с помощта на NPM. Открих, че е малко неприятно за Vue да използва плъгини на общността, особено когато те също съдържат логика на потребителския интерфейс.

Човешки корем EmberObserver , който е уебсайт на приставки за общността. Всеки от тях има оценка по скала от нула до десет. Това е наистина чудесно място да потърсите нещо, от което се нуждаете. Ако въведете името на любимите си библиотеки, като Lodash, Rx или Ramda, ще намерите свързаните плъгини от прости обвивки до завършване на пренаписвания. Разбира се, че има Страхотна реакция и Страхотен изглед хранилища, които събират свързани ресурси, включително библиотеки, но открих, че EmberObserver е особено полезен.

Ангажиране към JavaScript Framework

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

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

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

Свързани:

• Кои JS рамки ще предизвикат революция отпред през 2020 г.?
• Разкопайте ClojureScript за разработка отпред