3 Най-добра JavaScript рамка/библиотека за разработка на Front End

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

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

Тази статия се фокусира върху демистифицирането на предимството от използването на няколко предни рамки/библиотеки на JavaScript и в крайна сметка дава по-ясна картина за тях. Целта му е да улесни процеса на вземане на решение за избор на такъв.

Съдържание

Реагирайте

Реагирайте не е рамка, а JavaScript библиотека за изграждане на потребителски интерфейси.

Той е с отворен код и се поддържа от Facebook и общност от отделни разработчици. React първоначално е написан от Джордан Уок като вътрешен инструмент във Facebook. По-късно беше отворен източник и пуснат за широката публика през 2013 г. и след това придоби широка популярност.

Някои от функциите включват следното.

Осигурява реактивни, адаптивни и многократно използвани компоненти
Използва виртуален DOM
Изключително бързо
Базиран на компоненти
Еднопосочно обвързване на данни
Повторна употреба на кода
Зад него стои жизнена, процъфтяваща екосистема
Удобно управление на състоянието

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

React може да се използва във фронтенда по два различни начина.

През CDN

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

Как да подравните текста вертикално или хоризонтално в Microsoft Word

Например, ако използвате в среда за разработка, тогава:

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

И за производство

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

Използване на Node.JS

Предполагам, че вече имате инсталиран NodeJS. За да инсталирате React, просто въведете следната команда.

sudo npm i -g create-react-app –save-dev

След като инсталацията приключи, въведете следната команда

create-react-app моето-първо-реагиране-приложение

Горната команда ще инсталира всички необходими библиотеки, необходими за правилното изпълнение на React, което включва сървър за разработка, webpack и babel.

Отидете до папката my-first-react-application и изпълнете следната команда

npm стартиране

Горното ще стартира сървър за разработка на порт 3000. И когато получите достъп до вашия сървър IP с порт 3000, тогава трябва да видите нещо като по-долу.

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

Vue.js

Vue.js е прогресивна JavaScript рамка за изграждане на интерактивни потребителски интерфейси и приложения с една страница. Това е рамка за изглед на модел с основната библиотека, фокусирана върху слоя изглед. Vue е популярен, тъй като е способността да захранва приложения с една страница. За разлика от React, Vue използва необработен HTML, а не JSX.

Vue.js е с отворен код и първоначално е създаден от Евън Ю и пуснат публично през февруари 2014 г. Следват някои от функциите.

Той предоставя реактивни и композируеми компоненти за изглед.
Използва виртуален DOM
Поддържа фокус върху основната библиотека (т.е. управление на маршрутизиране и състояние)
Обхватът в CSS се обработва без CSS-In-Js
Еднопосочно свързване в компонентите.
Поддръжка за основни добавки
Повторна употреба на кода

Как избирателно да синхронизирате папки с Google Drive

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

Можете да използвате Vue.js в предния край или през CDN, или с Node.js

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

И за да използвате с Nodejs, можете да го инсталирате с помощта на командата npm.

npm install vue

Горещо ви съветвам да прочетете официалния Vue JS документация за да научите повече или да обмислите да вземете това път.

Ъглова

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

Инсталация

Уверете се, че сте инсталирали най-новите Nodejs. Първото нещо, което ще трябва да инсталираме, е инструментът Angular CLI.

npm install -g @angular/cli

Веднъж инсталиран, можем да създадем нов проект със следната команда.

ng new my-first-angular-app

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

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

ng server

Това трябва автоматично да стартира сървъра на порт 4200.

[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

Заключение

Как да поправите грешка ERR_CONNECTION_REFUSED в Chrome

Така че това, което избирате да научите, е по-скоро лично предпочитание, отколкото „кое е по-добро“.

Всички рамки/библиотеки, изброени по-горе, са страхотни. Ето кратко обобщение;

Трябва да научите Angular, ако искате рамка, на която искате да разчитате, без да се налага да се справяте с външни зависимости.
Трябва да научите React, ако искате да създавате бързо, PWA, едностранично приложение и се чувствате удобно около JSX.
React има най-оживената общност и повече възможности за работа поради голямата си общност.
React е относително лесен за започване.
React е много персонализиран и третира всяка част от потребителския интерфейс като компонент.
Vue има същите предимства като React, но без JSX.
Пазарът на труда за Vue непрекъснато се увеличава.

Ето диаграма в Google Trends, показваща сравнение на степента на популярност на 3-те от тях.

Ако развитието на предния край е вашият интерес, можете да проверите това Курс по Udemy.