3 Најбољи ЈаваСцрипт оквир/библиотека за Фронт Енд развој

by
Tweet
Share
Share
Pin

ЈаваСцрипт постаје све популарнији током година, заједница брзо расте, а програмери свакодневно свакодневно развијају и праве алате за језик.

Ово чини неодољивим када је у питању одлучивање који алат/оквир/библиотеку користити за одређени задатак јер увек постоји више опција за дословно све што желите да урадите у ЈаваСцрипт-у. У почетку, још увек је изазовно одлучити коју библиотеку или оквир да научите.

Овај чланак се фокусира на демистификацију предности коришћења неколико ЈаваСцрипт фронт-енд оквира/библиотека и на крају даје јаснију слику о њима. Намера му је да олакша процес одлучивања о избору.

Реаговати

Реаговати није оквир већ ЈаваСцрипт библиотека за изградњу корисничких интерфејса.

Он је отвореног кода и одржава га Фацебоок и заједница појединачних програмера. Реацт је првобитно написао Јордан Валке као интерни алат на Фејсбуку. Касније је то био отворени извор и пуштен широј јавности 2013. године, а након тога је стекао широк спектар популарности.

Неке од карактеристика укључују следеће.

  • Обезбеђује реактивне, прилагодљиве и вишекратне компоненте
  • Користи виртуелни ДОМ
  • Изузетно брзо
  • Компонентни
  • Једносмерно везивање података
  • Поновна употреба кода
  • Иза себе има живахан, напредан екосистем
  • Погодно руковање управљањем стањем

Инсталација/Употреба

Реацт се може користити на фронтенду на два различита начина.

Преко ЦДН-а

Можете се позвати на њихове званични сајт да бисте добили везу са скриптама, коју можете укључити у ознаку заглавља у вашој ХТМЛ маркацији. Изаберите везе на основу сврхе.

На пример, ако користите у развојном окружењу, онда:

<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>

Коришћење Ноде.ЈС

  5 АИ алата који ће вам помоћи да направите једноставне стрипове

Претпостављам да већ имате инсталиран НодеЈС. Да бисте инсталирали Реацт, једноставно унесите следећу команду.

судо нпм и -г цреате-реацт-апп –саве-дев

Када се инсталација заврши, откуцајте следећу команду

цреате-реацт-апп ми-фирст-реацт-апплицатион

Горња команда ће инсталирати све потребне библиотеке потребне да Реацт ради на одговарајући начин, што укључује развојни сервер, веб пакет и бабел.

Идите до фасцикле ми-фирст-реацт-апплицатион и покрените следећу команду

нпм старт

Горе наведено ће покренути развојни сервер на порту 3000. И, када приступите ИП серверу преко порта 3000, требало би да видите нешто као испод.

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

Вуе.јс

Вуе.јс је прогресивни ЈаваСцрипт оквир за изградњу интерактивних корисничких интерфејса и апликација на једној страници. То је оквир за приказ модела са основном библиотеком, фокусирајући се на слој приказа. Вуе је популаран, јер има могућност покретања апликација на једној страници. За разлику од Реацт-а, Вуе користи сирови ХТМЛ, а не ЈСКС.

Вуе.јс је опен-соурце и првобитно је креиран од стране Еван Иоу и јавно објављен у фебруару 2014. Следе неке од карактеристика.

  • Обезбеђује реактивне и компонљиве компоненте погледа.
  • Користи виртуелни ДОМ
  • Одржава фокус на основну библиотеку (тј. рутирање и управљање стањем)
  • Опсег у ЦСС-у се обрађује без ЦСС-Ин-Јс-а
  • Једносмерно везивање унутар компоненти.
  • Подршка за основне додатке
  • Поновна употреба кода

Инсталација/Употреба

Можете користити Вуе.јс на фронт-енд-у или преко ЦДН-а или са Ноде.јс

Да бисте користили ЦДН начин, можете додати следећу скрипту у одељак заглавља ХТМЛ странице.

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

Горња скрипта је погодна за развојне сврхе јер укључује важну поруку конзоле. Међутим, за производњу би требало да користите доњи.

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

А да бисте га користили са Нодејс-ом, можете га инсталирати помоћу нпм команде.

npm install vue

Саветујем вам да прочитате званични Вуе ЈС документацију да сазнате више или размислите о томе да узмете ово пут.

  Како да векторизујете и колоризирате своје Процреате цртеже помоћу Адобе Иллустратор-а

Угаони

Угаони је структурни ЈаваСцрипт оквир за динамичке странице. Омогућава употребу ХТМЛ-а као језика шаблона и дозвољава употребу ХТМЛ синтаксе за јасно и концизно изражавање компоненте апликације. То је пројекат отвореног кода који одржавају Гоогле и други сарадници.

Инсталација

Уверите се да имате инсталиран најновији Нодејс. Прва ствар коју ћемо морати да инсталирамо је Ангулар ЦЛИ алат.

нпм инсталл -г @ангулар/цли

Једном инсталиран, можемо креирати нови пројекат са следећом командом.

ng new my-first-angular-app

Пратите упутства на екрану. Ово генерише неке од датотека и фасцикли и користи нпм модул за преузимање библиотека трећих страна које су потребне да би Ангулар исправно радио.

Да бисте покренули новокреирану апликацију, покрените следећу команду из фасцикле апликација.

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.

Закључак

Дакле, оно што одлучите да научите је више лична преференција него „што је боље“.

Сви оквири/библиотеке наведени изнад су одлични. Ево кратког резимеа;

  • Требало би да научите Ангулар ако желите Фрамеворк на који желите да се ослоните без потребе да се бавите спољним зависностима.
  • Требало би да научите Реацт ако желите да направите брзу, ПВА, апликацију за једну страницу, и ако вам је пријатно око ЈСКС-а.
  • Реацт има најживљу заједницу и више могућности за посао због своје велике заједнице.
  • Реацт је релативно лако започети.
  • Реацт је веома прилагодљив и третира сваки део корисничког интерфејса као компоненту.
  • Вуе има исте предности као Реацт, али без ЈСКС-а.
  • Тржиште рада за Вуе се стално повећава.
  Како инсталирати БИОС Спецтре Упдате за ваш рачунар

Ево графикона на Гоогле трендовима који приказује поређење стопе популарности 3 од њих.

Ако вас занима развој фронт-енда, онда можете погледати ово Удеми цоурсе.